@extends('layouts.app', [
    'title' => 'Halaman Data Pelanggan'
])

@section('content')
<div class="space-y-6" x-data="{ modalOdp: false, modalAtv: false, modalDetailOdp: false }">
    
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="px-6 py-4 border-b border-gray-400">
            <h6 class="m-0 font-bold text-gray-900">DATA PELANGGAN</h6>
        </div>
        <div class="p-6">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
                <!-- Tombol Aksi Kanan -->
                <div class="flex flex-wrap items-center gap-2">
                    <!-- Tombol Cek ODP -->
                    <button type="button" @click="modalOdp = true" class="inline-flex items-center px-4 py-2 bg-cyan-500 hover:bg-cyan-600 text-white font-bold text-sm rounded shadow transition">
                        <i class="fas fa-network-wired mr-1.5"></i> Cek ODP
                    </button>

                    <!-- Tombol Cek Kode ATV -->
                    <button type="button" @click="modalAtv = true" class="inline-flex items-center px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white font-bold text-sm rounded shadow transition" id="btnCekAtv" data-url="{{ route('atv.codes') }}">
                        <i class="fas fa-tv mr-1.5"></i> Cek Kode TV Premium
                    </button>

                    <!-- Tombol Tambah Data -->
                    <a href="{{ route('klien.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm rounded shadow transition">
                        <i class="fas fa-plus mr-1.5"></i> Tambah Data
                    </a>
                </div>

                <!-- Form Filter Status -->
                <div class="flex items-center gap-2">
                    <form action="{{ route('klien.index') }}" method="GET" id="form-filter" class="flex items-center gap-2">
                        <select id="filter-status" name="status" class="form-select border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-sm" style="width: 180px;" onchange="this.form.submit()" autocomplete="off">
                            <option value="">-- Semua Status --</option>
                            <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Aktif</option>
                            <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>Putus Sementara</option>
                            <option value="3" {{ request('status') == '3' ? 'selected' : '' }}>Putus Permanen</option>
                            <option value="4" {{ request('status') == '4' ? 'selected' : '' }}>Gratis</option>
                        </select>
                        
                        @if(request('status'))
                            <a href="{{ route('klien.index') }}" class="inline-flex items-center px-3 py-2 bg-gray-500 hover:bg-gray-600 text-white text-xs font-semibold rounded shadow transition">
                                <i class="fas fa-sync mr-1"></i> Reset
                            </a>
                        @endif
                    </form>
                </div>
            </div>

            <!-- Tabel Utama Pelanggan -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 border border-gray-200 text-sm text-gray-700" id="datatable" width="100%" cellspacing="0">
                    <thead class="bg-gray-50 text-center text-xs font-bold text-gray-900 uppercase tracking-wider">
                        <tr>
                            <th class="px-4 py-3 border-b">#</th>
                            <th class="px-4 py-3 border-b">No Pelanggan</th>
                            <th class="px-4 py-3 border-b">Status</th>
                            <th class="px-4 py-3 border-b">Nama Pelanggan</th>
                            <th class="px-4 py-3 border-b">Paket Internet</th>
                            <th class="px-4 py-3 border-b">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach ($clients as $client)
                        @php
                            $packageName = $client->internet_package->name ?? '';
                            $hasKodeAtv  = !empty($client->kode_atv);
                            $isAtv       = $hasKodeAtv || \Illuminate\Support\Str::contains(strtolower($packageName), 'atb');
                        @endphp
                        <tr class="hover:bg-gray-100 transition-colors">
                            <td class="px-4 py-2.5 text-center whitespace-nowrap">{{ $loop->iteration }}</td>
                            <td class="px-4 py-2.5 text-center whitespace-nowrap">
                                @if(!empty($client->kode_atv))
                                    <span class="inline-block px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-100 text-amber-800">
                                        {{ $client->no_pelanggan }}
                                    </span>
                                @else
                                    <span class="inline-block px-2.5 py-0.5 text-xs font-semibold rounded-full bg-gray-100 text-gray-900">
                                        {{ $client->no_pelanggan }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-center whitespace-nowrap">{{ $client->stats->nama_stats ?? '-' }}</td>
                            <td class="px-4 py-2.5 text-center whitespace-nowrap font-medium text-gray-900">{{ $client->name }}</td>
                            <td class="px-4 py-2.5 text-center whitespace-nowrap">
                                @php
                                    $pkgId = $client->internet_package->id ?? 0;
                                    $badgeColor = 'bg-gray-100 text-gray-800';
                                    if ($pkgId == 1) $badgeColor = 'bg-amber-100 text-amber-800';
                                    elseif (in_array($pkgId, [2, 5])) $badgeColor = 'bg-cyan-100 text-cyan-800';
                                    elseif (in_array($pkgId, [3, 6])) $badgeColor = 'bg-indigo-100 text-indigo-800';
                                    elseif (in_array($pkgId, [4, 7])) $badgeColor = 'bg-emerald-100 text-emerald-800';
                                    elseif (in_array($pkgId, [8, 9, 10, 11, 12])) $badgeColor = 'bg-red-100 text-red-800';
                                @endphp
                                <span class="inline-block px-2 py-0.5 text-xs font-semibold rounded-full {{ $badgeColor }}">
                                    {{ $client->internet_package->name ?? '-' }} -
                                    {{ indonesian_currency($client->internet_package->price ?? 0) }}
                                </span>
                            </td>
                            
                            <!-- Aksi -->
                            <td class="px-4 py-2.5 text-center whitespace-nowrap">
                                <div class="inline-flex items-center justify-center gap-1">
                                    @php
                                        $sudahKirimPsb = $client->activities()
                                            ->where('description', 'like', '%Mengirim notifikasi PSB%')
                                            ->exists();
                                    @endphp

                                    @if(!$sudahKirimPsb)
                                    <form id="form-wa-pelanggan-{{ $client->id }}" action="{{ route('pelanggan.kirim-notif-psb', $client->id) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="button" 
                                                class="px-2.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded transition btn-send-wa" 
                                                data-id="{{ $client->id }}"
                                                data-name="{{ $client->name }}" 
                                                title="Kirim Notifikasi PSB">
                                            <i class="fab fa-fw fa-whatsapp"></i>
                                        </button>
                                    </form>
                                    @endif

                                    <a href="{{ route('klien.show', $client->id) }}" class="px-2.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded transition" title="Detail Klien">
                                        <i class="fas fa-fw fa-search"></i>
                                    </a>

                                    <a href="{{ route('klien.edit', $client->id) }}" class="px-2.5 py-1.5 bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold rounded transition" title="Edit Klien">
                                        <i class="fas fa-fw fa-edit"></i>
                                    </a>

                                    @if(auth()->user()->role === 'admin' || auth()->user()->id === 1)
                                    <form action="{{ route('klien.destroy', $client->id) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="px-2.5 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold rounded transition delete-button" title="Hapus Klien">
                                            <i class="fas fa-fw fa-trash"></i>
                                        </button>
                                    </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- MODAL CEK KODE ATV -->
    <div x-show="modalAtv" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm overflow-hidden" style="display: none;" @click.stop>
        <!-- @click.away pada div di bawah ini telah dihapus -->
        <div class="bg-white rounded-lg shadow-xl overflow-hidden max-w-4xl w-full max-h-[90vh] flex flex-col">
            <div class="bg-amber-500 text-white px-6 py-4 flex justify-between items-center shrink-0">
                <h5 class="font-bold text-gray-900 flex items-center text-lg">
                    <i class="fas fa-tv mr-2"></i> Data Kode TV Premium
                </h5>
                <button type="button" @click="modalAtv = false" class="text-white hover:text-gray-200 focus:outline-none">
                    <span class="text-xl">&times;</span>
                </button>
            </div>
            <div class="p-6 text-gray-900 overflow-y-auto flex-1">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- KOLOM 1: KODE ATV KOSONG -->
                    <div class="md:border-r md:pr-4">
                        <h6 class="font-bold text-emerald-600 mb-3 flex items-center text-base">
                            <i class="fas fa-check-circle mr-1.5"></i> Kode TV Premium Kosong (Tersedia)
                        </h6>
                        <div class="overflow-y-auto max-h-75 border border-gray-200 rounded">
                            <table class="min-w-full divide-y divide-gray-200 text-center text-sm">
                                <thead class="bg-gray-50 sticky top-0">
                                    <tr>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">No</th>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">Kode TV Premium</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    @forelse($kodeAtvKosong as $index => $atv)
                                        <tr>
                                            <td class="px-3 py-2">{{ $index + 1 }}</td>
                                            <td class="px-3 py-2"><span class="inline-block px-2.5 py-1 text-sm font-semibold rounded bg-emerald-100 text-emerald-800">{{ $atv->kode }}</span></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2" class="px-3 py-4 text-gray-400 italic">Tidak ada kode TV Premium yang kosong.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- KOLOM 2: KODE ATV TERPAKAI -->
                    <div>
                        <h6 class="font-bold text-rose-600 mb-3 flex items-center text-base">
                            <i class="fas fa-user-check mr-1.5"></i> Kode TV Premium Terpakai
                        </h6>
                        <div class="overflow-y-auto max-h-75 border border-gray-200 rounded">
                            <table class="min-w-full divide-y divide-gray-200 text-center text-sm">
                                <thead class="bg-gray-50 sticky top-0">
                                    <tr>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">Kode TV Premium</th>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">No Pelanggan</th>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700 text-left">Pelanggan</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    @forelse($kodeAtvTerpakai as $atv)
                                        <tr>
                                            <td class="px-3 py-2"><span class="inline-block px-2.5 py-1 text-sm font-semibold rounded bg-gray-100 text-gray-800">{{ $atv->kode_atv }}</span></td>
                                            <td class="px-3 py-2">{{ $atv->no_pelanggan ?? '-' }}</td>
                                            <td class="px-3 py-2 text-left font-medium">{{ $atv->name }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="px-3 py-4 text-gray-400 italic">Belum ada kode TV Premium yang terpakai.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-6 py-3 flex justify-end shrink-0">
                <button type="button" @click="modalAtv = false" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium rounded transition">Tutup</button>
            </div>
        </div>
    </div>

   <!-- BUNGKUS UTAMA DENGAN X-DATA -->
    <div x-data="odpModalData()">

        <!-- MODAL CEK ODP -->
        <div x-show="modalOdp" 
            class="fixed inset-0 z-50 overflow-y-auto bg-black/40 backdrop-blur-sm flex items-center justify-center p-4" 
            style="display: none;"
            x-cloak
            @keydown.escape.window="modalOdp = false"
            @click.stop>
            
                <div class="bg-white rounded-lg shadow-xl overflow-hidden max-w-xl w-full">
                    <div class="bg-cyan-500 text-white px-6 py-3 flex justify-between items-center">
                        <h5 class="font-bold text-white flex items-center text-lg">
                            <i class="fas fa-network-wired mr-2"></i> Status Port ODP
                        </h5>
                        <button type="button" @click="modalOdp = false" class="text-white hover:text-gray-200 focus:outline-none">
                            <span class="text-xl">&times;</span>
                        </button>
                    </div>

                    <div class="p-6">
                        <style>
                            tr.border-odc-separator td {
                                border-top: 3px solid #06b6d4 !important;
                            }
                        </style>

                        <!-- 1. Dropdown Pilih OLT -->
                        <div class="mb-3">
                            <label class="block font-bold text-gray-800 text-sm mb-1">Pilih OLT:</label>
                            <select x-model="selectedOlt" @change="selectedPort = ''" class="w-full border-gray-300 rounded-md shadow-sm focus:border-cyan-300 focus:ring focus:ring-cyan-200 focus:ring-opacity-50 text-sm">
                                <option value="">-- Pilih OLT Terlebih Dahulu --</option>
                                @foreach($listOlt ?? [] as $olt)
                                    <option value="{{ $olt }}">{{ $olt }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- 2. Dropdown Pilih Port OLT -->
                        <div class="mb-4" x-show="selectedOlt !== ''">
                            <label class="block font-bold text-gray-800 text-sm mb-1">Pilih Port OLT:</label>
                            <select x-model="selectedPort" class="w-full border-gray-300 rounded-md shadow-sm focus:border-cyan-300 focus:ring focus:ring-cyan-200 focus:ring-opacity-50 text-sm">
                                <option value="">-- Pilih Port OLT Terlebih Dahulu --</option>
                                <template x-for="port in availablePorts" :key="port">
                                    <option :value="port" x-text="port"></option>
                                </template>
                            </select>
                        </div>

                        <div class="overflow-y-auto max-h-80 border border-gray-200 rounded">
                            <table class="min-w-full divide-y divide-gray-200 text-center text-sm mb-0">
                                <thead class="bg-gray-50 sticky top-0">
                                    <tr>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700 text-left">Nama ODP</th>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">Kapasitas</th>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">Terpakai</th>
                                        <th class="px-3 py-2 border-b font-semibold text-gray-700">Sisa Port</th>
                                        <th class="px-3 py-2 border-b font-semibold text-rose-600">Putus</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr x-show="!selectedPort">
                                        <td colspan="5" class="px-3 py-6 text-gray-400 italic">Silakan pilih OLT dan Port OLT di atas untuk menampilkan ODP.</td>
                                    </tr>

                                    @php $lastOdc = null; @endphp

                                    @foreach($rekapOdp as $odp)
                                        @php
                                            $currentOdc = trim(explode('-', $odp->nama_odp)[0]);
                                            $isNewGroup = ($lastOdc !== null && $lastOdc !== $currentOdc);
                                            $lastOdc = $currentOdc;
                                        @endphp

                                        <tr class="row-odp hover:bg-gray-50 {{ $isNewGroup ? 'border-odc-separator' : '' }}" 
                                            x-show="selectedPort === '{{ $odp->port_olt }}' && selectedOlt === '{{ $odp->olt }}'">
                                            
                                            <td class="text-left font-bold text-gray-800 align-middle px-3 py-2">{{ $odp->nama_odp }}</td>
                                            <td class="align-middle px-3 py-2">{{ $odp->kapasitas }}</td>
                                            
                                            <!-- Tombol Terpakai -->
                                            <td class="align-middle px-3 py-2">
                                                @if($odp->terpakai > 0)
                                                    <button type="button" 
                                                            @click="openDetail('<i class=\'fas fa-users mr-1\'></i> {{ $odp->nama_odp }}', {{ json_encode($odp->clients ?? []) }})"
                                                            class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded border border-indigo-200 text-xs font-bold hover:bg-indigo-100 cursor-pointer">
                                                        <span>{{ $odp->terpakai }}</span> <i class="fas fa-search ml-0.5"></i>
                                                    </button>
                                                @else
                                                    <span class="text-gray-400">0</span>
                                                @endif
                                            </td>

                                            <td class="align-middle px-3 py-2">
                                                @if($odp->sisa > 0)
                                                    <span class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-emerald-100 text-emerald-800">{{ $odp->sisa }}</span>
                                                @else
                                                    <span class="inline-block px-2 py-0.5 text-xs font-semibold rounded bg-rose-100 text-rose-800">Penuh</span>
                                                @endif
                                            </td>

                                            <!-- Tombol Putus -->
                                            <td class="align-middle px-3 py-2">
                                                @if($odp->putus > 0)
                                                    <button type="button" 
                                                            @click="openDetail('<i class=\'fas fa-user-times mr-1 text-rose-600\'></i> Putus - {{ $odp->nama_odp }}', {{ json_encode($odp->clients_putus ?? []) }})"
                                                            class="px-2 py-1 bg-rose-50 text-rose-600 rounded border border-rose-200 text-xs font-bold hover:bg-rose-100 cursor-pointer">
                                                        <span>{{ $odp->putus }}</span> <i class="fas fa-exclamation-triangle ml-0.5"></i>
                                                    </button>
                                                @else
                                                    <span class="text-gray-400">0</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="bg-gray-50 px-6 py-3 flex justify-end">
                        <button type="button" @click="modalOdp = false" class="px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white text-xs font-medium rounded transition">Tutup</button>
                    </div>
                </div>
        </div>

        <!-- MODAL DETAIL PELANGGAN ODP -->
        <!-- Tambahkan @click.stop di div utama berikut -->
        <div x-show="modalDetailOdp" class="fixed inset-0 z-60 overflow-y-auto bg-black/40 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;" x-cloak @click.stop>
            <div class="bg-white rounded-lg shadow-xl overflow-hidden max-w-sm w-full border border-indigo-600">
                <div class="bg-indigo-600 text-white px-4 py-2.5 flex justify-between items-center">
                    <h6 class="font-bold text-sm flex items-center" x-html="detailTitle"></h6>
                    <button type="button" @click.stop="modalDetailOdp = false" class="text-white hover:text-gray-200 focus:outline-none">
                        <span class="text-xl">&times;</span>
                    </button>
                </div>
                <div class="p-3">
                    <div class="overflow-y-auto max-h-62.5 border border-gray-200 rounded">
                        <table class="min-w-full divide-y divide-gray-200 text-left text-xs mb-0">
                            <thead class="bg-gray-50 text-center sticky top-0">
                                <tr>
                                    <th class="px-2 py-1.5 border-b font-semibold text-gray-700">No. Pelanggan</th>
                                    <th class="px-2 py-1.5 border-b font-semibold text-gray-700 text-center">Nama Pelanggan</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <template x-for="client in detailClients" :key="client.no_pelanggan || client.id">
                                    <tr :class="(client.stats && client.stats.nama_stats && client.stats.nama_stats.toLowerCase() === 'putus permanen') ? 'bg-red-50 text-red-600 font-bold' : ''">
                                        <td class="text-center px-3 py-2" :class="(client.stats && client.stats.nama_stats && client.stats.nama_stats.toLowerCase() === 'putus permanen') ? 'text-red-600 font-bold' : 'text-indigo-600 font-bold'" x-text="client.no_pelanggan || client.nomor_pelanggan || client.id"></td>
                                        <td class="px-3 py-2 text-center">
                                            <span x-text="client.name || client.nama_pelanggan || client.nama"></span>
                                            <template x-if="client.stats && client.stats.nama_stats && client.stats.nama_stats.toLowerCase() === 'putus permanen'">
                                                <span class="inline-block px-1.5 py-0.5 text-[10px] bg-red-100 text-red-700 rounded ml-1">Putus</span>
                                            </template>
                                        </td>
                                    </tr>
                                </template>
                                <template x-if="!detailClients || detailClients.length === 0">
                                    <tr>
                                        <td colspan="2" class="text-center text-gray-400 py-3 italic">Tidak ada pelanggan.</td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
@include('clients.script')
@endpush