@extends('layout.app')

@section('title', 'Data Tagihan - Sistem Manajemen ISP')

@section('content')
@php
    use App\Models\Tagihan;
    $totalTagihan = Tagihan::count();
    $tagihanLunas = Tagihan::where('status_tagihan', 'Lunas')->count();
    $tagihanBelumBayar = Tagihan::where('status_tagihan', 'Belum Bayar')->count();
    $tagihanJatuhTempo = Tagihan::where('status_tagihan', 'Jatuh Tempo')->count();
    $totalNominal = Tagihan::sum('total_tagihan');
    $lunasNominal = Tagihan::where('status_tagihan', 'Lunas')->sum('total_tagihan');
@endphp

<x-material-page-header 
    title="Data Tagihan" 
    :action="route('tagihan.create')" 
    actionLabel="Tambah Tagihan" 
    actionIcon="add"
/>

<!-- Statistics Cards -->
<div class="row mb-4">
    <x-material-card-stat 
        title="Total Tagihan" 
        :value="$totalTagihan" 
        icon="receipt" 
        color="primary" 
        growth="0" 
        period="Semua tagihan"
    />
    <x-material-card-stat 
        title="Lunas" 
        :value="$tagihanLunas" 
        icon="check_circle" 
        color="success" 
        growth="0" 
        :period="'Rp ' . number_format($lunasNominal, 0, ',', '.')"
    />
    <x-material-card-stat 
        title="Belum Bayar" 
        :value="$tagihanBelumBayar" 
        icon="schedule" 
        color="warning" 
        growth="0" 
        period="Menunggu pembayaran"
    />
    <x-material-card-stat 
        title="Jatuh Tempo" 
        :value="$tagihanJatuhTempo" 
        icon="error" 
        color="danger" 
        growth="0" 
        period="Perlu perhatian"
    />
</div>

<!-- Tagihan Table Card -->
<div class="row">
    <div class="col-12">
        <div class="card my-4">
            <div class="card-header pb-0 pt-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Daftar Tagihan</h6>
                    <div>
                        <button type="button" class="btn btn-sm bg-gradient-warning mb-0" id="bulkIsolirBtn" onclick="bulkIsolirPelanggan()" style="display: none;">
                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">block</i> Isolir Pelanggan Terpilih
                        </button>
                        <button type="button" class="btn btn-sm bg-gradient-secondary mb-0" id="selectAllBtn" onclick="toggleSelectAll()" style="display: none;">
                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">check_box</i> Pilih Semua
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Filter Section -->
            <div class="card-body pt-0">
                <form method="GET" action="{{ route('tagihan.index') }}">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Cari Tagihan</label>
                                <input type="text" name="search" id="search" class="form-control" 
                                       value="{{ request('search') }}" placeholder="No. Invoice atau Nama Pelanggan">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Status</label>
                                <select name="status_tagihan" id="status_tagihan" class="form-control">
                                    <option value="">Semua Status</option>
                                    <option value="Lunas" {{ request('status_tagihan') == 'Lunas' ? 'selected' : '' }}>Lunas</option>
                                    <option value="Belum Bayar" {{ request('status_tagihan') == 'Belum Bayar' ? 'selected' : '' }}>Belum Bayar</option>
                                    <option value="Jatuh Tempo" {{ request('status_tagihan') == 'Jatuh Tempo' ? 'selected' : '' }}>Jatuh Tempo</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Pelanggan</label>
                                <select name="pelanggan_id" id="pelanggan_id" class="form-control">
                                    <option value="">Semua Pelanggan</option>
                                    @foreach($pelanggan as $p)
                                    <option value="{{ $p->id }}" {{ request('pelanggan_id') == $p->id ? 'selected' : '' }}>
                                        {{ $p->nama }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Awal</label>
                                <input type="date" name="tanggal_awal" id="tanggal_awal" class="form-control" 
                                       value="{{ request('tanggal_awal') }}">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Akhir</label>
                                <input type="date" name="tanggal_akhir" id="tanggal_akhir" class="form-control" 
                                       value="{{ request('tanggal_akhir') }}">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn bg-gradient-primary mb-0" title="Filter">
                                <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">search</i>
                            </button>
                        </div>
                    </div>
                    @if(request()->anyFilled(['search', 'status_tagihan', 'pelanggan_id', 'tanggal_awal', 'tanggal_akhir']))
                    <div class="row">
                        <div class="col-12">
                            <a href="{{ route('tagihan.index') }}" class="btn btn-sm btn-outline-secondary mb-0">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">refresh</i> Reset Filter
                            </a>
                            <a href="{{ route('tagihan.index', ['status_tagihan' => 'Belum Bayar']) }}" class="btn btn-sm bg-gradient-warning mb-0 ms-2">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">schedule</i> Belum Bayar
                            </a>
                            <a href="{{ route('tagihan.index', ['status_tagihan' => 'Jatuh Tempo']) }}" class="btn btn-sm bg-gradient-danger mb-0 ms-2">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">error</i> Jatuh Tempo
                            </a>
                            <a href="{{ route('tagihan.index', ['status_tagihan' => 'Belum Bayar,Jatuh Tempo']) }}" class="btn btn-sm bg-gradient-warning mb-0 ms-2">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">filter_list</i> Belum Bayar + Jatuh Tempo
                            </a>
                        </div>
                    </div>
                    @else
                    <div class="row">
                        <div class="col-12">
                            <a href="{{ route('tagihan.index', ['status_tagihan' => 'Belum Bayar']) }}" class="btn btn-sm bg-gradient-warning mb-0">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">schedule</i> Tampilkan Belum Bayar
                            </a>
                            <a href="{{ route('tagihan.index', ['status_tagihan' => 'Jatuh Tempo']) }}" class="btn btn-sm bg-gradient-danger mb-0 ms-2">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">error</i> Tampilkan Jatuh Tempo
                            </a>
                        </div>
                    </div>
                    @endif
                </form>
            </div>

            <!-- Table -->
            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0">
                        <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 3%;">
                                    <input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()">
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" style="width: 5%;">No</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">No. Invoice</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" style="width: 18%;">Pelanggan</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 10%;">Tanggal Tagihan</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Jatuh Tempo</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Total</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 10%;">Status</th>
                                <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tagihan as $index => $t)
                            <tr data-pelanggan-id="{{ $t->pelanggan_id }}" data-status="{{ $t->status_tagihan }}">
                                <td>
                                    @if(in_array($t->status_tagihan, ['Belum Bayar', 'Jatuh Tempo']))
                                        <input type="checkbox" class="tagihan-checkbox" value="{{ $t->pelanggan_id }}" 
                                               data-tagihan-id="{{ $t->id }}" 
                                               data-pelanggan-nama="{{ optional($t->pelanggan)->nama ?? 'Pelanggan tidak tersedia' }}"
                                               onchange="updateBulkIsolirButton()">
                                    @endif
                                </td>
                                <td>
                                    <p class="text-xs font-weight-bold mb-0">{{ $tagihan->firstItem() + $index }}</p>
                                </td>
                                <td>
                                    <div class="d-flex px-2 py-1">
                                        <div class="d-flex flex-column justify-content-center">
                                            <h6 class="mb-0 text-sm">{{ $t->nomor_invoice }}</h6>
                                            @if(optional($t->pelanggan)->area)
                                                <p class="text-xs text-secondary mb-0">{{ optional(optional($t->pelanggan)->area)->kecamatan ?? '' }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="text-xs font-weight-bold mb-0">{{ optional($t->pelanggan)->nama ?? 'Pelanggan tidak tersedia' }}</p>
                                    <p class="text-xs text-secondary mb-0">{{ optional($t->pelanggan)->nomor_telepon ?? '-' }}</p>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    <span class="text-xs font-weight-bold">{{ $t->tanggal_tagihan->format('d/m/Y') }}</span>
                                </td>
                                <td class="align-middle text-center text-sm">
                                    <span class="text-xs font-weight-bold">{{ $t->tanggal_jatuh_tempo->format('d/m/Y') }}</span>
                                    @if($t->is_overdue ?? false)
                                        <br><span class="text-xs text-danger">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">error</i> Terlambat
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-xs font-weight-bold text-success">Rp {{ number_format($t->total_tagihan, 0, ',', '.') }}</span>
                                    @if($t->denda > 0)
                                        <br><span class="text-xs text-danger">
                                            Denda: Rp {{ number_format($t->denda, 0, ',', '.') }}
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle text-center text-sm">
                                    @if($t->status_tagihan == 'Lunas')
                                        <span class="badge badge-sm bg-gradient-success">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">check_circle</i> Lunas
                                        </span>
                                    @elseif($t->status_tagihan == 'Jatuh Tempo')
                                        <span class="badge badge-sm bg-gradient-danger">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">error</i> Jatuh Tempo
                                        </span>
                                    @else
                                        <span class="badge badge-sm bg-gradient-warning">
                                            <i class="material-symbols-rounded" style="font-size: 14px; vertical-align: middle;">schedule</i> Belum Bayar
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle text-end">
                                    <div class="dropdown">
                                        <a class="btn btn-sm btn-icon-only text-primary" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Menu Aksi" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                            <i class="material-symbols-rounded" style="font-size: 20px; line-height: 1;">more_vert</i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                            <li><a class="dropdown-item d-flex align-items-center" href="{{ route('tagihan.show', $t) }}">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">visibility</i> Detail
                                            </a></li>
                                            <li><a class="dropdown-item d-flex align-items-center" href="{{ route('tagihan.edit', $t) }}">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">edit</i> Edit
                                            </a></li>
                                            <li><a class="dropdown-item d-flex align-items-center" href="{{ route('tagihan.print', $t) }}" target="_blank">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">print</i> Print
                                            </a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger d-flex align-items-center" href="#" onclick="confirmDelete('{{ route('tagihan.destroy', $t) }}', '{{ $t->nomor_invoice }}')">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">delete</i> Hapus
                                            </a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center py-5">
                                    <i class="material-symbols-rounded" style="font-size: 48px; opacity: 0.3;">receipt</i>
                                    <h6 class="text-muted mt-3">Belum ada tagihan</h6>
                                    <p class="text-muted mb-4">Mulai dengan membuat tagihan pertama</p>
                                    <a href="{{ route('tagihan.create') }}" class="btn bg-gradient-primary mb-0">
                                        <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">add</i> Tambah Tagihan Pertama
                                    </a>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($tagihan->hasPages())
                <div class="card-footer py-4">
                    <nav aria-label="...">
                        {{ $tagihan->links() }}
                    </nav>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="material-symbols-rounded text-danger me-2" style="font-size: 20px; vertical-align: middle;">delete</i> Konfirmasi Hapus Tagihan
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">warning</i> 
                    <strong>Peringatan!</strong> Tindakan ini tidak dapat dibatalkan.
                </div>
                <p>Apakah Anda yakin ingin menghapus tagihan <strong id="tagihanNameToDelete"></strong>?</p>
                <p class="text-muted small mb-0">
                    <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i> Data pembayaran terkait akan tetap tersimpan.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">
                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">close</i> Batal
                </button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn bg-gradient-danger mb-0">
                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">delete</i> Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmDelete(url, name) {
    document.getElementById('tagihanNameToDelete').textContent = name || 'Tagihan ini';
    document.getElementById('deleteForm').action = url;
    var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Checkbox management
let allCheckboxesSelected = false;

function toggleSelectAll() {
    allCheckboxesSelected = !allCheckboxesSelected;
    const checkboxes = document.querySelectorAll('.tagihan-checkbox');
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = allCheckboxesSelected;
    });
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = allCheckboxesSelected;
    }
    
    updateBulkIsolirButton();
}

function updateBulkIsolirButton() {
    const checkboxes = document.querySelectorAll('.tagihan-checkbox:checked');
    const bulkIsolirBtn = document.getElementById('bulkIsolirBtn');
    const selectAllBtn = document.getElementById('selectAllBtn');
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    if (checkboxes.length > 0) {
        bulkIsolirBtn.style.display = 'inline-block';
        selectAllBtn.style.display = 'inline-block';
        bulkIsolirBtn.innerHTML = `<i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">block</i> Isolir ${checkboxes.length} Pelanggan`;
    } else {
        bulkIsolirBtn.style.display = 'none';
        if (document.querySelectorAll('.tagihan-checkbox').length > 0) {
            selectAllBtn.style.display = 'inline-block';
        } else {
            selectAllBtn.style.display = 'none';
        }
    }
    
    // Update select all checkbox state
    const allCheckboxes = document.querySelectorAll('.tagihan-checkbox');
    const checkedCount = document.querySelectorAll('.tagihan-checkbox:checked').length;
    if (selectAllCheckbox && allCheckboxes.length > 0) {
        selectAllCheckbox.checked = checkedCount === allCheckboxes.length;
        allCheckboxesSelected = selectAllCheckbox.checked;
    }
}

function bulkIsolirPelanggan() {
    const checkboxes = document.querySelectorAll('.tagihan-checkbox:checked');
    
    if (checkboxes.length === 0) {
        alert('Pilih minimal 1 tagihan untuk diisolir');
        return;
    }
    
    // Get unique pelanggan IDs (karena bisa ada multiple tagihan untuk 1 pelanggan)
    const pelangganIds = [];
    const pelangganNames = [];
    const pelangganMap = {};
    
    checkboxes.forEach(checkbox => {
        const pelangganId = checkbox.value;
        const pelangganNama = checkbox.getAttribute('data-pelanggan-nama');
        
        if (!pelangganMap[pelangganId]) {
            pelangganMap[pelangganId] = true;
            pelangganIds.push(pelangganId);
            pelangganNames.push(pelangganNama);
        }
    });
    
    const alasan = prompt('Masukkan alasan isolir (opsional):', 'Pembayaran terlambat');
    if (alasan === null) {
        return; // User cancelled
    }
    
    const confirmMessage = `Apakah Anda yakin ingin mengisolir ${pelangganIds.length} pelanggan berikut?\n\n` +
        pelangganNames.slice(0, 5).join('\n') +
        (pelangganNames.length > 5 ? `\n... dan ${pelangganNames.length - 5} pelanggan lainnya` : '') +
        `\n\nIni akan:\n- Mengubah status menjadi Suspend\n- Menonaktifkan PPPoE user\n- Menonaktifkan Hotspot user\n- Mengirim notifikasi ke pelanggan`;
    
    if (!confirm(confirmMessage)) {
        return;
    }
    
    // Show loading
    if (typeof showNotification !== 'undefined') {
        showNotification(`Sedang mengisolir ${pelangganIds.length} pelanggan...`, 'info');
    } else {
        alert(`Sedang mengisolir ${pelangganIds.length} pelanggan...`);
    }
    
    // Disable button
    const bulkIsolirBtn = document.getElementById('bulkIsolirBtn');
    bulkIsolirBtn.disabled = true;
    bulkIsolirBtn.innerHTML = '<i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">hourglass_empty</i> Memproses...';
    
    $.ajax({
        url: '/pelanggan/bulk-isolir',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            pelanggan_ids: pelangganIds,
            alasan: alasan || 'Pembayaran terlambat'
        },
        success: function(response) {
            if (response.success) {
                let message = response.message;
                if (response.messages && response.messages.length > 0) {
                    message += '\n\n' + response.messages.join('\n');
                }
                if (response.errors && response.errors.length > 0) {
                    message += '\n\nPeringatan:\n' + response.errors.slice(0, 5).join('\n');
                    if (response.errors.length > 5) {
                        message += `\n... dan ${response.errors.length - 5} error lainnya`;
                    }
                }
                
                if (typeof showNotification !== 'undefined') {
                    showNotification(message, 'success');
                } else {
                    alert(message);
                }
                
                // Reload page after 2 seconds
                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                if (typeof showNotification !== 'undefined') {
                    showNotification(response.message || 'Gagal mengisolir pelanggan', 'error');
                } else {
                    alert(response.message || 'Gagal mengisolir pelanggan');
                }
                bulkIsolirBtn.disabled = false;
                bulkIsolirBtn.innerHTML = `<i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">block</i> Isolir Pelanggan Terpilih`;
            }
        },
        error: function(xhr) {
            let errorMessage = 'Terjadi kesalahan saat mengisolir pelanggan';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            if (typeof showNotification !== 'undefined') {
                showNotification(errorMessage, 'error');
            } else {
                alert(errorMessage);
            }
            bulkIsolirBtn.disabled = false;
            bulkIsolirBtn.innerHTML = `<i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">block</i> Isolir Pelanggan Terpilih`;
        }
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    updateBulkIsolirButton();
    
    // Show select all button if there are checkboxes
    const checkboxes = document.querySelectorAll('.tagihan-checkbox');
    if (checkboxes.length > 0) {
        document.getElementById('selectAllBtn').style.display = 'inline-block';
    }
    
    // Fix dropdown positioning
    $('[data-bs-toggle="dropdown"]').attr('aria-expanded', 'false');
});
</script>
@endsection