@extends('template.content')

@section('title', 'Penagihan Voucher')

@push('script')
    <script>
        $(document).ready(function () {
            $('#cari').on('keypress', function (e) {
                // Cek apakah tombol yang ditekan adalah Enter (key code 13)
                if (e.which == 13) {
                    // Submit form saat tombol Enter ditekan
                    $('#searchForm').submit();
                }
            });

            // Handle tombol hapus
            $('.btn-delete').on('click', function () {
                var id = $(this).data('id');
                var name = $(this).data('name');
                var url = $(this).data('url');

                Swal.fire({
                    title: 'Konfirmasi Hapus',
                    html: `Apakah Anda yakin ingin menghapus data ini?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Buat form delete dinamis
                        var form = $('<form>').attr({
                            'method': 'POST',
                            'action': url
                        }).append(
                            $('<input>').attr({
                                'type': 'hidden',
                                'name': '_token',
                                'value': '{{ csrf_token() }}'
                            }),
                            $('<input>').attr({
                                'type': 'hidden',
                                'name': '_method',
                                'value': 'DELETE'
                            })
                        ).appendTo('body');

                        // Submit form
                        form.submit();
                    }
                });
            });

            // Elemen filter
            const searchInput = $('#cari');
            const bulanFilter = $('#filterBulan');
            const tahunFilter = $('#filterTahun');
            const userFilter = $('#filterUserid');
            const filterWilayah = $('#filterWilayah');
            const filterStatus = $('#filterStatus');

            // Fungsi untuk submit form filter
            function applyFilters() {
                const params = new URLSearchParams(window.location.search);

                // Update parameter pencarian
                if (searchInput.val()) {
                    params.set('cari', searchInput.val());
                } else {
                    params.delete('cari');
                }

                if (filterWilayah.val()) {
                    params.set('wilayah', filterWilayah.val());
                } else {
                    params.delete('wilayah');
                }

                if (filterStatus.val()) {
                    params.set('status_bayar', filterStatus.val());
                } else {
                    params.delete('status_bayar');
                }

                // Update parameter pencarian
                if (userFilter.val()) {
                    params.set('user', userFilter.val());
                } else {
                    params.delete('user');
                }

                // Update parameter bulan
                if (bulanFilter.val()) {
                    params.set('bulan', bulanFilter.val());
                } else {
                    params.delete('bulan');
                }

                // Update parameter tahun
                if (tahunFilter.val()) {
                    params.set('tahun', tahunFilter.val());
                } else {
                    params.delete('tahun');
                }

                // Reset page ke 1 saat filter berubah
                params.delete('page');

                // Redirect dengan parameter baru
                window.location.href = window.location.pathname + '?' + params.toString();
            }

            // Event listener untuk input pencarian (dengan debounce)
            let searchTimer;
            searchInput.on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(applyFilters, 1000);
            });

            // Event listener untuk select bulan dan tahun
            bulanFilter.on('change', applyFilters);
            tahunFilter.on('change', applyFilters);
            userFilter.on('change', applyFilters);
            filterWilayah.on('change', applyFilters);
            filterStatus.on('change', applyFilters);


        });

        function sinkron()
        {
            $.ajax({
                type: "POST",
                url: "{{ route('voucher.sinkron') }}",
                data: {
                    _token: '{{ csrf_token() }}',
                    bulan: $('#filterBulan').val(),
                    tahun: $('#filterTahun').val(),
                },
                success: function (response) {
                    console.log(response);
                    if (response.status === 'success') {
                        Swal.fire('Sukses', response.message, 'success').then(() => {
                            location.reload(); // Muat ulang halaman setelah sukses
                        });
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                }
            });
        }


    </script>

    <script>
        function printRawBT(voucherPengihanId) {
            fetch(`/pembayaran-voucher/cetakstruk/${voucherPengihanId}`)
                .then(response => response.text())
                .then(strukText => {
                    // Encode dan buka dengan RawBT
                    const rawbtUrl = 'rawbt:' + encodeURIComponent(strukText);
                    window.location.href = rawbtUrl;
                })
                .catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal mengambil data struk.'
                    });
                    console.error(err);
                });
        }
    </script>


@endpush

@section('content')
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor">@yield('title')</h4>
            </div>
            <div class="col-md-7 align-self-center text-end">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Transaksi</a></li>
                        <li class="breadcrumb-item active">@yield('title')</li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="row g-0">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <!-- Filter Row -->
                        <div class="row mb-4">
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <h2><strong>Rp. {{ number_format($total_iuran, 0, ',', '.') }} </strong></h2>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="mb-3">
                                    <form method="GET" id="searchForm">
                                        <input type="text" class="form-control" name="cari" id="cari" placeholder="Cari"
                                            value="{{ request()->get('cari') }}">
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <div class="form-group">
                                        <select id="filterStatus" class="form-control" name="status_bayar">
                                            <option value="">Pilih Status</option>
                                            <option value="disetor"
                                                {{ request()->get('status_bayar') == 'disetor' ? 'selected' : '' }}>Disetor
                                            </option>
                                            <option value="success"
                                                {{ request()->get('status_bayar') == 'success' ? 'selected' : '' }}>Sukses
                                            </option>
                                            <option value="belum_bayar"
                                                {{ request()->get('status_bayar') == 'belum_bayar' ? 'selected' : '' }}>Belum
                                                Bayar</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="mb-3">
                                    <div class="form-group">
                                        <select id="filterBulan" class="form-control" name="bulan">
                                            <option value="">Semua Bulan</option>
                                            @foreach($bulanIndonesia as $key => $bulan)
                                                <option value="{{ $key }}"
                                                    {{ (request()->get('bulan') ?: date('m')) == $key ? 'selected' : '' }}>
                                                    {{ $bulan }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="mb-3">
                                    <div class="form-group">
                                        <select id="filterTahun" class="form-control" name="tahun">
                                            <option value="">Semua Tahun</option>
                                            @php
$currentYear = date('Y');
$selectedYear = request()->get('tahun') ?: $currentYear;
$startYear = $currentYear - 5;
$endYear = $currentYear + 5;
                                            @endphp
                                            @for($year = $endYear; $year >= $startYear; $year--)
                                                <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>
                                                    {{ $year }}
                                                </option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                            @if (auth()->user()->level == 'admin')
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <div class="form-group">
                                            <select id="filterUserid" class="form-control" name="user_id">
                                                <option value="">Oleh</option>
                                                @foreach ($oleh as $ol)
                                                    <option value="{{ $ol->id }}"
                                                        {{ request()->get('user') == $ol->id ? 'selected' : '' }}>
                                                        {{ $ol->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="mb-3">
                                        <div class="form-group">
                                            <button class="btn btn-primary" onclick="sinkron()">sinkron</button>
                                        </div>
                                    </div>

                                </div>

                            @elseif (auth()->user()->level == 'koordinator')
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <div class="form-group">
                                            <select id="filterWilayah" class="form-control" name="wilayah">
                                                <option value="">Wilayah</option>
                                                @foreach ($wilayah as $wil)
                                                    <option value="{{ $wil->id }}"
                                                        {{ request()->get('wilayah') == $wil->id ? 'selected' : '' }}>
                                                        {{ $wil->nama_wilayah }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            @endif

                        </div>

                        <!-- Table Section -->
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Aksi</th>
                                        <th>Nama</th>
                                        <th>Wilayah</th>
                                        <th>Tgl Jatuhtempo</th>
                                        <th>Nominal Tagihan</th>
                                        <th>Nominal Bayar</th>
                                        <th>Status Bayar</th>
                                        <th>Metode</th>
                                        @if (auth()->user()->level == 'admin')
                                            <th>Diinput</th>
                                        @endif
                                        <th>Tgl Bayar</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @if ($pelanggans->count() > 0)
                                        @foreach($pelanggans as $key => $pel)
                                            @php
        $bulan = request()->filled('bulan') ? request()->bulan : date('m');
        $tahun = request()->filled('tahun') ? request()->tahun : date('Y');
        $tanggal_jatuhtempo = "$tahun-$bulan-01";
        $voucher = $pel->voucher_penagihan->first();
                                            @endphp

                                            <tr>
                                                <td>
                                                    @php
        $isPaid = $voucher && $voucher->status_bayar != 'pending' && $voucher->nominal_bayar != 0;
        $canPay = !($voucher && $voucher->status_bayar != null && $voucher->status_bayar != 'pending' && $voucher->nominal_bayar != 0);
                                                    @endphp

                                                    @if (auth()->user()->level == 'admin' && $isPaid)
                                                        <form action="{{ route('hapus_voucher_tagihan') }}" method="post" class="d-inline">
                                                            @csrf
                                                            <input type="hidden" name="id" value="{{ $voucher->id }}">
                                                            <button class="btn btn-sm btn-danger" type="submit"
                                                                onclick="return confirm('apakah anda yakin akan menghapus data tagihan voucher ini')">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                    <form style="display: inline;" action="{{ route('laporan_voucher_pdf') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="pelanggan_id" value="{{ $pel->id }}">
                                                        <input type="hidden" name="waktu_tagihan" value="{{ $tanggal_jatuhtempo }}">
                                                        <button type="submit" class="btn btn-sm btn-success"><i class="fas fa-download"></i></button>
                                                    </form>
                                                    @if ($canPay && $voucher)
                                                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                            data-bs-target="#bayar-{{ $pel->id }}">
                                                            Bayar
                                                        </button>
                                                        
                                                    @endif

                                                    @if ($isPaid)
                                                        <button class="btn btn-sm btn-warning" onclick="printRawBT({{ $voucher->id }})">
                                                            <i class="fas fa-print"></i>
                                                        </button>
                                                    @endif

                                                    <!-- MODAL PEMBAYARAN -->
                                                    <div class="modal fade" id="bayar-{{ $pel->id }}" tabindex="-1" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title">Pembayaran Tagihan Voucher
                                                                        {{ \Carbon\Carbon::parse($tanggal_jatuhtempo)->translatedFormat('F Y') }}
                                                                    </h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                        aria-label="Close"></button>
                                                                </div>
                                                                <form action="{{ route('pembayaran-voucher.store') }}" method="POST"
                                                                    id="form-bayar-{{ $pel->id }}">
                                                                    @csrf
                                                                    <input type="hidden" name="pelanggan_id" value="{{ $pel->id }}">
                                                                    <input type="hidden" name="waktu_tagihan" value="{{ $tanggal_jatuhtempo }}">

                                                                    <div class="modal-body">
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Nama Pelanggan</label>
                                                                            <input type="text" class="form-control"
                                                                                value="{{ $pel->nama_pelanggan }}" readonly>
                                                                        </div>

                                                                        <div class="mb-3">
                                                                            <label class="form-label">Metode Pembayaran</label>
                                                                            <select name="metode_pembayaran" class="form-select" required>
                                                                                <option value="cash">Cash</option>
                                                                                <option value="transfer">Transfer</option>
                                                                            </select>
                                                                        </div>

                                                                        <div class="mb-3">
                                                                            <label class="form-label">Nominal Tagihan</label>
                                                                            <input type="text" class="form-control"
                                                                            value="{{ number_format($voucher->nominal_tagihan ?? 0, 0, ',', '.') }}"
                                                                                oninput="formatNumber(this)" readonly>
                                                                        </div>
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Nominal Bayar</label>
                                                                            <input type="text" name="nominal_bayar" class="form-control"
                                                                                value="{{ number_format($voucher->nominal_tagihan ?? 0, 0, ',', '.') }}"
                                                                                oninput="formatNumber(this)">
                                                                        </div>

                                                                    </div>

                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-secondary"
                                                                            data-bs-dismiss="modal">Batal</button>
                                                                        <button type="submit" class="btn btn-primary">Lanjut Bayar</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>{{ $pel->nama_pelanggan }}</td>
                                                <td>{{ @$pel->wilayah->nama_wilayah }}</td>
                                                <td>{{ \Carbon\Carbon::parse($tanggal_jatuhtempo)->translatedFormat('d F Y') }}</td>
                                                <td>
                                                    {{ number_format($voucher->nominal_tagihan ?? 0, 0, ",", ".") }}
                                                </td>
                                                <td>{{ number_format($voucher->nominal_bayar ?? 0, 0, ",", ".") }}</td>
                                                <td>
                                                    <span
                                                        class="badge bg-{{ $voucher ? ($voucher->status_bayar != 'pending' ? 'success' : 'warning') : 'danger' }}">
                                                        {{ $voucher ? ucfirst($voucher->status_bayar) : 'Belum Bayar' }}
                                                    </span>
                                                </td>
                                                <td>{{ $voucher->metode_pembayaran ?? '-' }}</td>
                                                @if (auth()->user()->level == 'admin')
                                                    <td>{{ $voucher->user->name ?? '-' }}</td>
                                                @endif
                                                <td>{{ $voucher->created_at ?? '-' }}</td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="11" class="text-center">Tidak ada data</td>
                                        </tr>
                                    @endif
                                </tbody>
                            </table>
                            {{ $pelanggans->appends(request()->only(['cari', 'bulan', 'tahun', 'user', 'wilayah', 'status_bayar']))->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection