@extends('layouts.app', [
    'title' => 'Halaman Jatuh Tempo'
])

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="w-full">
        
        <div class="bg-white shadow-md rounded-lg overflow-hidden mb-6">
            <div class="px-6 py-4 border-b border-gray-400 flex flex-row items-center justify-between bg-gray-50">
                <h6 class="m-0 font-bold text-gray-900 text-base">DATA PELANGGAN JATUH TEMPO</h6>
            </div>
            
            <div class="p-6">
                <!-- Form Filter Tanggal -->
                <form action="/jatuh-tempo" method="GET" class="mb-6 flex flex-wrap items-center gap-3" id="form-filter">
                    <div class="flex items-center gap-2">
                        <label for="filter-tanggal" class="font-semibold text-sm text-gray-700">Filter Tanggal Jatuh Tempo:</label>
                        
                        <select name="tanggal" id="filter-tanggal" class="border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" data-url="/jatuh-tempo">
                            <option value="">-- Semua Tanggal --</option>
                            @for ($i = 1; $i <= 20; $i++)
                                <option value="{{ $i }}" {{ request('tanggal') == $i ? 'selected' : '' }}>
                                    Tanggal {{ $i }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    
                    @if(request('tanggal'))
                        <a href="/jatuh-tempo" class="inline-flex items-center px-3 py-1.5 bg-gray-500 text-white text-sm font-medium rounded-md hover:bg-gray-600 transition">Reset Filter</a>
                    @endif
                </form>

                <hr class="border-gray-200 my-4">

                <!-- Form Utama Kirim WA Massal -->
                <form action="{{ route('jatuh-tempo.kirim-wa') }}" method="POST" id="form-kirim-wa">
                    @csrf
                    <div class="mb-4">
                        <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-md shadow hover:bg-green-700 transition" id="btn-kirim-massal">
                            <i class="fab fa-whatsapp"></i> Kirim Notifikasi WA
                        </button>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 border border-gray-200" id="datatable" width="100%" cellspacing="0">
                            <thead class="bg-gray-50 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
                                <tr>
                                    <th class="px-4 py-3 border-b" width="5%">
                                        <input type="checkbox" id="select-all" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    </th>
                                    <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">Nama Pelanggan</th>
                                    <th class="px-4 py-3 border-b">Paket Internet</th>
                                    <th class="px-4 py-3 border-b">Jatuh Tempo</th>
                                    <th class="px-4 py-3 border-b">Jumlah Tagihan</th>
                                    <th class="px-4 py-3 border-b">Keterangan</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200 text-sm text-gray-700">
                                @forelse ($clients as $client)
                                <tr>
                                    <td class="px-4 py-3 text-center">
                                        <input type="checkbox" name="client_ids[]" value="{{ $client->id }}" class="sub-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    </td>
                                    <td class="px-4 py-3 text-center">{{ $loop->iteration }}</td>
                                    <td class="px-4 py-3">{{ $client->no_pelanggan }}</td>
                                    <td class="px-4 py-3">{{ $client->name }}</td>
                                    <td class="px-4 py-3 text-center">{{ $client->internet_package->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-center">
                                        @php
                                            $dayNumber = $client->tanggal ? (int) Carbon\Carbon::parse($client->tanggal)->format('d') : 20;
                                            $displayDay = $dayNumber > 20 ? '20' : sprintf('%02d', $dayNumber);
                                        @endphp
                                        <span class="text-center">{{ $displayDay }} {{ $client->bulan_tahun_tagihan }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-center">Rp {{ number_format($client->total_tagihan ?? ($client->internet_package->price ?? 0), 0, ',', '.') }}</td>
                                    <td class="px-4 py-3 text-center">
                                        @if($client->is_notification_sent)
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Notifikasi Sudah Terkirim</span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Notifikasi Belum Dikirim</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </form>

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

@push('js')
@include('jatuh_tempo.script')
@endpush
@endsection