@extends('layouts.master')

@section('title', 'Tagihan Internet')
@section('page-title', 'Tagihan Pelanggan Internet')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/tagihan.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
@endsection

@section('content')
    <div class="tagihan-page">
        <div class="card page-header-card">
            <div class="card-body">
                <div>
                    <h4 class="mb-1">Tagihan Internet</h4>
                    <small class="text-muted">Kelola tagihan bulanan pelanggan.</small>
                </div>
                <div class="page-actions">
                    <a href="{{ route('tagihan.create') }}" class="btn btn-primary" title="Buat Tagihan"
                        aria-label="Buat Tagihan">
                        <i class="bx bx-plus"></i> <span class="btn-label">Buat Tagihan</span>
                    </a>
                    <a href="{{ route('tagihan.generate.form') }}" class="btn btn-outline-primary" title="Generate Bulanan"
                        aria-label="Generate Bulanan">
                        <i class="bx bx-cog"></i> <span class="btn-label">Generate Bulanan</span>
                    </a>
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="section-title mb-0">Filter Data Tagihan</div>
                    <button type="button" class="btn btn-sm btn-outline-secondary d-md-none" id="btn-toggle-filter"
                        data-bs-toggle="collapse" data-bs-target="#tagihan-filter-collapse" aria-expanded="false"
                        aria-controls="tagihan-filter-collapse">
                        Show Filter
                    </button>
                </div>
                <div class="collapse show" id="tagihan-filter-collapse">
                    <form class="row g-2" id="filter-form">
                        <div class="col-md-3">
                            <label class="form-label mb-0">Periode</label>
                            <input type="month" name="periode" id="filter-periode" value="{{ $periode }}"
                                class="form-control">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-0">Status</label>
                            <select name="status" id="filter-status" class="form-select">
                                <option value="">Semua</option>
                                @foreach ($statusList as $key => $label)
                                    <option value="{{ $key }}" @selected($status === $key)>{{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-0">Kecamatan</label>
                            <select name="kecamatan" id="filter-kecamatan" class="form-select">
                                <option value="">Semua Kecamatan</option>
                                @foreach ($kecamatanList as $kecItem)
                                    <option value="{{ $kecItem }}" @selected($kecamatan === $kecItem)>{{ $kecItem }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label mb-0">Desa / Kelurahan</label>
                            <select name="desa" id="filter-desa" class="form-select">
                                <option value="">Semua Desa / Kelurahan</option>
                                @foreach ($desaList as $desaItem)
                                    <option value="{{ $desaItem }}" @selected($desa === $desaItem)>{{ $desaItem }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-4 d-flex align-items-end mt-2">
                            <button class="btn btn-outline-primary me-2">
                                <i class="bx bx-filter-alt"></i> Filter
                            </button>
                            <button type="button" id="btn-reset-filter" class="btn btn-outline-secondary">
                                Reset
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="card table-card">
            <div class="card-body table-responsive">
                <table class="table table-sm align-middle" id="table-tagihan" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="text-nowrap period-col">Periode</th>
                            <th class="pelanggan-col">Pelanggan</th>
                            <th class="d-none d-lg-table-cell">Alamat</th>
                            <th class="text-end d-none d-lg-table-cell">Catatan</th>
                            <th class="text-end tagihan-col">Tagihan</th>
                            <th class="text-end d-none d-md-table-cell">Status</th>
                            <th class="text-end d-none d-md-table-cell">Tgl. Bayar</th>
                            <th class="text-center text-nowrap">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Data diisi oleh DataTables --}}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="modal fade" id="modal-bayar" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-md modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0 pb-0">
                        <div>
                            <h5 class="modal-title mb-0">Pembayaran Tagihan</h5>
                            <small class="text-muted">
                                Input pembayaran dengan teliti. Nilai dibantu format ribuan dan terbilang.
                            </small>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-2">
                        <div class="mb-3 p-2 rounded-3 bg-light pay-summary">
                            <div class="small text-muted text-uppercase mb-1" style="letter-spacing:.08em;">
                                Ringkasan Tagihan
                            </div>
                            <div class="d-flex flex-column gap-1 small">
                                <div>
                                    <strong id="pay-nama">-</strong>
                                    <span class="text-muted">
                                        (<span class="text-monospace" id="pay-kode">-</span>)
                                    </span>
                                </div>
                                <div class="text-muted">
                                    Paket: <span id="pay-paket">-</span>
                                </div>
                                <div class="text-muted">
                                    Periode: <span id="pay-periode">-</span>
                                    <span class="mx-1">&bull;</span>
                                    Jatuh Tempo: <span id="pay-jatuh_tempo">-</span>
                                </div>
                                <div class="mt-1 d-flex justify-content-between">
                                    <span class="small text-muted">Total</span>
                                    <span class="fw-semibold text-mono" id="pay-total">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="small text-muted">Sudah Dibayar</span>
                                    <span class="text-mono text-success" id="pay-terbayar">Rp 0</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="small text-muted">Sisa Tagihan</span>
                                    <span class="text-mono text-danger" id="pay-sisa">Rp 0</span>
                                </div>
                            </div>
                        </div>

                        <form id="form-bayar" action="{{ route('pembayaran.store') }}" method="post" class="row g-3">
                            @csrf
                            <input type="hidden" name="tagihan_id" id="pay-tagihan-id">

                            <div class="col-md-5">
                                <label class="form-label">Tanggal Bayar <span class="text-danger">*</span></label>
                                <input type="date" name="tanggal_bayar" id="pay-tanggal"
                                    class="form-control @error('tanggal_bayar') is-invalid @enderror"
                                    value="{{ now()->format('Y-m-d') }}">
                                @error('tanggal_bayar')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-7">
                                <label class="form-label">Metode Pembayaran</label>
                                <select name="metode" id="pay-metode"
                                    class="form-select @error('metode') is-invalid @enderror">
                                    <option value="">Pilih Metode</option>
                                    <option value="Tunai">Tunai</option>
                                    <option value="Transfer">Transfer</option>
                                    <option value="QRIS">QRIS</option>
                                    <option value="Virtual Account">Virtual Account</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                                @error('metode')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label">Referensi</label>
                                <input type="text" name="referensi" id="pay-referensi"
                                    class="form-control @error('referensi') is-invalid @enderror"
                                    placeholder="No bukti / No transaksi">
                                @error('referensi')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label">
                                    Nominal Dibayar <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="nominal_bayar" id="pay-nominal"
                                        class="form-control text-mono fs-6 @error('nominal_bayar') is-invalid @enderror"
                                        value="" data-terbilang="true" autocomplete="off">
                                </div>
                                @error('nominal_bayar')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label">Catatan (opsional)</label>
                                <textarea name="catatan" id="pay-catatan" rows="2" class="form-control @error('catatan') is-invalid @enderror"
                                    placeholder="Catatan tambahan untuk pembayaran ini..."></textarea>
                                @error('catatan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-1">
                                <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">
                                    Batal
                                </button>
                                <button class="btn btn-success">
                                    <i class="bx bx-check-circle"></i> Simpan Pembayaran
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof $ === 'undefined') {
                console.error('jQuery belum ter-load. Pastikan jQuery di-include sebelum DataTables.');
                return;
            }
            const filterCollapseEl = document.getElementById('tagihan-filter-collapse');
            const filterToggleBtn = document.getElementById('btn-toggle-filter');
            let filterCollapse = null;

            function syncFilterToggleLabel() {
                if (!filterToggleBtn || !filterCollapseEl) return;
                const isShow = filterCollapseEl.classList.contains('show');
                filterToggleBtn.textContent = isShow ? 'Hide Filter' : 'Show Filter';
                filterToggleBtn.setAttribute('aria-expanded', isShow ? 'true' : 'false');
            }

            if (filterCollapseEl && typeof bootstrap !== 'undefined' && bootstrap.Collapse) {
                filterCollapse = bootstrap.Collapse.getOrCreateInstance(filterCollapseEl, {
                    toggle: false
                });

                if (window.innerWidth < 768) {
                    filterCollapse.hide();
                } else {
                    filterCollapse.show();
                }

                filterCollapseEl.addEventListener('shown.bs.collapse', syncFilterToggleLabel);
                filterCollapseEl.addEventListener('hidden.bs.collapse', syncFilterToggleLabel);
                syncFilterToggleLabel();

                window.addEventListener('resize', function() {
                    if (window.innerWidth >= 768 && filterCollapseEl && !filterCollapseEl.classList
                        .contains(
                            'show')) {
                        filterCollapse.show();
                    }
                });
            }

            const csrfToken = '{{ csrf_token() }}';

            const table = $('#table-tagihan').DataTable({
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                pageLength: 25,
                order: [
                    [0, 'desc']
                ],
                ajax: {
                    url: '{{ route('tagihan.data') }}',
                    data: function(d) {
                        d.periode = $('#filter-periode').val();
                        d.status = $('#filter-status').val();
                        d.kecamatan = $('#filter-kecamatan').val();
                        d.desa = $('#filter-desa').val();
                    },
                    dataSrc: function(json) {
                        return json.data || [];
                    }
                },
                columns: [{
                        data: 'periode_label',
                        className: 'small text-nowrap period-col',
                        name: 'periode'
                    },
                    {
                        data: 'pelanggan_label',
                        name: 'pelanggan.nama',
                        className: 'text-start pelanggan-col',
                        render: function(data, type, row) {
                            if (type !== 'display') {
                                return data;
                            }

                            const alamat = row.alamat && row.alamat !== '-' ? row.alamat : '';
                            const alamatMobile = alamat ?
                                `<div class="small text-muted d-lg-none mt-1 alamat-mobile-compact">${alamat}</div>` :
                                '';
                            const totalTagihan = row.total_tagihan_fmt ? `Rp ${row.total_tagihan_fmt}` : '';
                            const statusBadge = row.status_badge || '';
                            const tanggalBayar = row.tanggal_bayar && row.tanggal_bayar !== '-' ? row.tanggal_bayar : '';
                            const mobileMeta = totalTagihan || statusBadge || tanggalBayar ?
                                `<div class="d-sm-none pelanggan-mobile-meta">
                                    ${totalTagihan ? `<span class="pelanggan-mobile-total">${totalTagihan}</span>` : ''}
                                    ${statusBadge ? `<span class="pelanggan-mobile-status">${statusBadge}</span>` : ''}
                                    ${tanggalBayar ? `<span class="pelanggan-mobile-date">${tanggalBayar}</span>` : ''}
                                </div>` : '';

                            return `${data}${alamatMobile}${mobileMeta}`;
                        },
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'alamat',
                        name: 'alamat',
                        className: 'small d-none d-lg-table-cell',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'catatan_html',
                        name: 'catatan',
                        className: 'text-end d-none d-lg-table-cell',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'total_tagihan_fmt',
                        name: 'total_tagihan',
                        className: 'text-end text-nowrap tagihan-col',
                        render: function(data, type, row) {
                            if (type !== 'display') {
                                return data;
                            }

                            const statusBadge = row.status_badge || '';
                            const tanggalBayar = row.tanggal_bayar && row.tanggal_bayar !== '-' ?
                                row.tanggal_bayar : '-';
                            let metaLine = '';

                            if (statusBadge || tanggalBayar) {
                                metaLine = `
                                    <div class="d-md-none text-end mt-1">
                                        ${statusBadge ? `<div>${statusBadge}</div>` : ''}
                                        <div class="small text-muted mt-1">${tanggalBayar}</div>
                                    </div>
                                `;
                            }

                            return `
                                <div class="text-end">
                                    <div>${data}</div>
                                    <div>${metaLine}</div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'status_badge',
                        name: 'status',
                        className: 'text-end d-none d-md-table-cell',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'tanggal_bayar',
                        name: 'tanggal_bayar',
                        className: 'text-end d-none d-md-table-cell',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'aksi_html',
                        name: 'aksi',
                        className: 'text-center aksi-col',
                        orderable: false,
                        searchable: false
                    },
                ],
                columnDefs: (function() {
                    const isMobile = window.matchMedia('(max-width: 575.98px)').matches;
                    const isTiny = window.matchMedia('(max-width: 420px)').matches;
                    return [{
                        targets: 0,
                        width: isMobile ? (isTiny ? '54px' : '60px') : '90px'
                    }, {
                        targets: 1,
                        width: isMobile ? (isTiny ? '108px' : '124px') : '220px'
                    }, {
                        targets: 4,
                        width: isMobile ? '1px' : null
                    }, {
                        targets: 7,
                        width: isMobile ? (isTiny ? '64px' : '72px') : null
                    }];
                })(),
                language: {
                    processing: 'Memuat...',
                    lengthMenu: 'Tampil _MENU_ baris',
                    zeroRecords: 'Belum ada data tagihan.',
                    info: 'Menampilkan _START_ - _END_ dari _TOTAL_ data',
                    infoEmpty: 'Tidak ada data',
                    infoFiltered: '(disaring dari _MAX_ total data)',
                    search: 'Cari:',
                    paginate: {
                        first: 'Awal',
                        last: 'Akhir',
                        next: '>',
                        previous: '<'
                    },
                }
            });

            $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                table.draw();
            });

            $('#btn-reset-filter').on('click', function() {
                $('#filter-periode').val('');
                $('#filter-status').val('');
                $('#filter-kecamatan').val('');
                $('#filter-desa').val('');
                table.draw();
            });

            $(document).on('click', '.btn-bayar-modal', function() {
                const btn = $(this);
                const id = btn.data('id');
                const nama = btn.data('nama') || '-';
                const kode = btn.data('kode') || '-';
                const paket = btn.data('paket') || '-';
                const periode = btn.data('periode') || '-';
                const jatuhTempo = btn.data('jatuh_tempo') || '-';
                const total = parseInt(btn.data('total') || 0, 10);
                const terbayar = parseInt(btn.data('terbayar') || 0, 10);
                const sisa = parseInt(btn.data('sisa') || 0, 10);

                $('#pay-tagihan-id').val(id);
                $('#pay-nama').text(nama);
                $('#pay-kode').text(kode);
                $('#pay-paket').text(paket);
                $('#pay-periode').text(periode);
                $('#pay-jatuh_tempo').text(jatuhTempo);

                const formatter = new Intl.NumberFormat('id-ID');
                $('#pay-total').text('Rp ' + formatter.format(total));
                $('#pay-terbayar').text('Rp ' + formatter.format(terbayar));
                $('#pay-sisa').text('Rp ' + formatter.format(sisa));

                const today = (new Date()).toISOString().slice(0, 10);
                $('#pay-tanggal').val(today);

                $('#pay-metode').val('Tunai');
                $('#pay-referensi').val('');
                $('#pay-catatan').val('');

                const $inputNominal = $('#pay-nominal');
                if (sisa > 0) {
                    const formatted = formatter.format(sisa).replace(/,/g, '.');
                    $inputNominal.val(formatted);
                } else {
                    $inputNominal.val('');
                }

                const inputEl = $inputNominal.get(0);
                if (inputEl) {
                    inputEl.dispatchEvent(new Event('input', {
                        bubbles: true
                    }));
                }

                const modalEl = document.getElementById('modal-bayar');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            });

            function toast(icon, title) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: icon,
                        title: title,
                        timer: 1600,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                }
            }

            function setCatatanEditMode($cell, isEdit) {
                $cell.find('.catatan-preview').toggleClass('d-none', isEdit);
                $cell.find('.catatan-editor').toggleClass('d-none', !isEdit);
                $cell.find('.btn-catatan-inline-edit').toggleClass('d-none', isEdit);
                $cell.find('.btn-catatan-inline-hapus').toggleClass('d-none', isEdit);
                $cell.find('.btn-catatan-inline-save').toggleClass('d-none', !isEdit);
                $cell.find('.btn-catatan-inline-cancel').toggleClass('d-none', !isEdit);

                if (isEdit) {
                    const $input = $cell.find('.catatan-editor');
                    $input.trigger('focus');
                    const raw = $input.val() || '';
                    $input[0].setSelectionRange(raw.length, raw.length);
                }
            }

            $(document).on('click', '.btn-catatan-inline-edit', function() {
                const $cell = $(this).closest('.catatan-cell');
                setCatatanEditMode($cell, true);
            });

            $(document).on('click', '.btn-catatan-inline-cancel', function() {
                const $cell = $(this).closest('.catatan-cell');
                const $input = $cell.find('.catatan-editor');
                const original = $input.data('original') || '';
                $input.val(original);
                setCatatanEditMode($cell, false);
            });

            $(document).on('click', '.btn-catatan-inline-save', function() {
                const $cell = $(this).closest('.catatan-cell');
                const url = $cell.find('.catatan-url-upsert').val();
                const catatan = ($cell.find('.catatan-editor').val() || '').trim();
                if (!url) return;
                if (!catatan) {
                    toast('warning', 'Catatan tidak boleh kosong.');
                    return;
                }

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        _token: csrfToken,
                        catatan: catatan
                    },
                    success: function(resp) {
                        toast('success', (resp && resp.message) ? resp.message :
                            'Catatan berhasil disimpan.');
                        table.ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        const msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr
                            .responseJSON
                            .message : 'Gagal menyimpan catatan.';
                        toast('error', msg);
                    }
                });
            });

            $(document).on('click', '.btn-catatan-inline-hapus', function() {
                const $cell = $(this).closest('.catatan-cell');
                const url = $cell.find('.catatan-url-delete').val();
                if (!url) return;
                if (!confirm('Hapus catatan pada tagihan ini?')) return;

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        _token: csrfToken,
                        _method: 'DELETE'
                    },
                    success: function(resp) {
                        toast('success', (resp && resp.message) ? resp.message :
                            'Catatan berhasil dihapus.');
                        table.ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        const msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr
                            .responseJSON
                            .message : 'Gagal menghapus catatan.';
                        toast('error', msg);
                    }
                });
            });
        });
    </script>
@endsection