<div>
    <div class="box box-primary">
        <div class="box-header with-border">
            <x-button color="success" wire:click="create" loading="Tambah...">
                <i class="fa fa-plus"></i> Tambah
            </x-button>
            <button wire:click="deleteSelected" class="btn btn-danger btn-sm" {{ count($selectedItems) === 0 ? 'disabled' : '' }}>
                Hapus Terpilih ({{ count($selectedItems) }})
            </button>
        </div>
        <div class="box-body">
            <!-- Filter dan Pencarian -->
            <div class="row">
                <div class="col-md-1">
                    <x-select wire:model.live="status" style="width: 80px;">
                        <option value="">Semua</option>
                        <option value="1">Aktif</option>
                        <option value="0">Tidak Aktif</option>
                    </x-select>
                </div>
            </div>

            <hr>

            <x-table :items="$media_terkaits">
                <x-table-columns sortable>
                    <x-table-column style="width: 5px;">No</x-table-column>
                    <x-table-column>Aksi</x-table-column>
                    <x-table-column>Nama</x-table-column>
                    <x-table-column>Logo</x-table-column>
                    <x-table-column>Status</x-table-column>
                </x-table-columns>
                <x-table-rows sortable>
                    @foreach ($media_terkaits as $item)
                        <x-table-row :id="$item->id" sortable>
                            <x-table-cell>{{ $loop->iteration }}</x-table-cell>
                            <x-table-cell>
                                <x-action-dropdown>
                                    <li><a href="javascript:void(0)" wire:click="edit({{ $item->id }})" title="Ubah: {{ $item->nama }}"><i class="fa fa-pencil text-warning"></i> Ubah</a></li>
                                    <li><a href="javascript:void(0)" wire:click="lock({{ $item->id }})" title="{{ $item->status == 1 ? 'Nonaktifkan' : 'Aktifkan' }}" class="{{ $item->status == 1 ? 'text-muted' : 'text-success' }}"><i
                                                class="fa fa-{{ $item->status == 1 ? 'lock' : 'unlock' }}"></i> {{ $item->status == 1 ? 'Nonaktifkan' : 'Aktifkan' }}</a></li>
                                    <li class="divider"></li>
                                    <li><a href="javascript:void(0)" wire:click="destroy({{ $item->id }})" title="Hapus: {{ $item->nama }}" style="color: #dd4b39;"><i class="fa fa-trash text-danger"></i> Hapus</a></li>
                                </x-action-dropdown>
                            </x-table-cell>
                            <x-table-cell>{{ $item->nama }}</x-table-cell>
                            <x-table-cell>
                                <img src="{{ Storage::url('media_terkait/' . $item->logo) }}" style="width: 80px; height: 60px; object-fit: contain; background: #f5f5f5;" alt="Logo">
                            </x-table-cell>
                            <x-table-cell>
                                @if ($item->status == 1)
                                    <span class="label label-success">Aktif</span>
                                @elseif($item->status == 0)
                                    <span class="label label-danger">Tidak Aktif</span>
                                @endif
                            </x-table-cell>
                        </x-table-row>
                    @endforeach
                </x-table-rows>
            </x-table>

        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            @include('components.swal-delete')
        })
    </script>
@endpush
