@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
    <style>
        /* Custom Checkbox Styling */
        .custom-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 2px solid #dc3545;
            border-radius: 3px;
            background-color: #fff;
            position: relative;
            vertical-align: middle;
        }

        .custom-checkbox:checked {
            background-color: #fff;
            border-color: #dc3545;
        }

        .custom-checkbox:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #dc3545;
            font-size: 14px;
            font-weight: bold;
        }

        .custom-checkbox:hover {
            border-color: #c82333;
        }

        .custom-checkbox:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
        }

        /* Fix table column widths */
        #list_{{ $dmenu ?? 'rptkas' }} th:first-child,
        #list_{{ $dmenu ?? 'rptkas' }} td:first-child {
            width: 40px !important;
            min-width: 40px !important;
            max-width: 40px !important;
        }

        #list_{{ $dmenu ?? 'rptkas' }} th:nth-child(2),
        #list_{{ $dmenu ?? 'rptkas' }} td:nth-child(2) {
            width: 50px !important;
            min-width: 50px !important;
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        <button class="btn btn-secondary mb-0"
                                            onclick="window.location='{{ url($url_menu . '/index') }}'">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </button>
                                    </div>
                                </div>

                                @if ($table_result)
                                    <div class="mt-3">

                                        {{-- Export to Excel --}}
                                        <form action="{{ route('rptkas.excel') }}" method="POST" style="display:inline;"
                                            id="formExcel">
                                            @csrf
                                            <input type="hidden" name="rpureq_date_from"
                                                value="{{ request('rpureq_date_from', '2020-01-01') }}">
                                            <input type="hidden" name="rpureq_date_to"
                                                value="{{ request('rpureq_date_to', \Carbon\Carbon::now()->format('Y-m-d')) }}">

                                            @php
                                                $kategori = (array) request('rp_kategori', ['%']);
                                                $user_create = (array) request('user_create', ['%']);
                                                $user_update = (array) request('user_update', ['%']);
                                                $kepada = (array) request('kepada', ['%']);
                                            @endphp

                                            @foreach ($kategori as $kat)
                                                <input type="hidden" name="rp_kategori[]" value="{{ $kat }}">
                                            @endforeach
                                            @foreach ($user_create as $uc)
                                                <input type="hidden" name="user_create[]" value="{{ $uc }}">
                                            @endforeach
                                            @foreach ($user_update as $uu)
                                                <input type="hidden" name="user_update[]" value="{{ $uu }}">
                                            @endforeach
                                            @foreach ($kepada as $kpd)
                                                <input type="hidden" name="kepada[]" value="{{ $kpd }}">
                                            @endforeach

                                            <span id="selectedIdsExcel"></span>
                                            <button type="submit" class="btn btn-secondary btn-md btn-export">
                                                <i class="fas fa-file-excel text-success"></i> Excel
                                            </button>
                                        </form>

                                        {{-- Export to PDF --}}
                                        <form action="{{ route('rptkas.cetakpdf') }}" method="POST"
                                            style="display:inline;" id="formPdf">
                                            @csrf
                                            <input type="hidden" name="rpureq_date_from"
                                                value="{{ request('rpureq_date_from', '2020-01-01') }}">
                                            <input type="hidden" name="rpureq_date_to"
                                                value="{{ request('rpureq_date_to', \Carbon\Carbon::now()->format('Y-m-d')) }}">

                                            @foreach ($kategori as $kat)
                                                <input type="hidden" name="rp_kategori[]" value="{{ $kat }}">
                                            @endforeach
                                            @foreach ($user_create as $uc)
                                                <input type="hidden" name="user_create[]" value="{{ $uc }}">
                                            @endforeach
                                            @foreach ($user_update as $uu)
                                                <input type="hidden" name="user_update[]" value="{{ $uu }}">
                                            @endforeach
                                            @foreach ($kepada as $kpd)
                                                <input type="hidden" name="kepada[]" value="{{ $kpd }}">
                                            @endforeach

                                            <span id="selectedIdsPdf"></span>
                                            <button type="submit" class="btn btn-secondary btn-md btn-export">
                                                <i class="fas fa-file-pdf text-danger"></i> PDF
                                            </button>
                                        </form>

                                        {{-- Export to PDF Serah Terima --}}
                                        <form action="{{ route('rptkas.pdfserahterima') }}" method="POST"
                                            style="display:inline;" target="_blank" id="formPdfSerahTerima">
                                            @csrf
                                            <input type="hidden" name="rpureq_date_from"
                                                value="{{ request('rpureq_date_from', '2020-01-01') }}">
                                            <input type="hidden" name="rpureq_date_to"
                                                value="{{ request('rpureq_date_to', \Carbon\Carbon::now()->format('Y-m-d')) }}">

                                            @foreach ($kategori as $kat)
                                                <input type="hidden" name="rp_kategori[]" value="{{ $kat }}">
                                            @endforeach
                                            @foreach ($user_create as $uc)
                                                <input type="hidden" name="user_create[]" value="{{ $uc }}">
                                            @endforeach
                                            @foreach ($user_update as $uu)
                                                <input type="hidden" name="user_update[]" value="{{ $uu }}">
                                            @endforeach
                                            @foreach ($kepada as $kpd)
                                                <input type="hidden" name="kepada[]" value="{{ $kpd }}">
                                            @endforeach

                                            <span id="selectedIdsPdfSerahTerima"></span>
                                            <button type="submit" class="btn btn-secondary btn-md btn-export">
                                                <i class="fas fa-file-pdf text-danger"></i> PDF Serah Terima
                                            </button>
                                        </form>

                                        <span id="selectedCount" class="ms-3 text-muted small"></span>

                                    </div>
                                @endif

                            </div>
                        </div>

                        <div class="px-4 pb-4">
                            <table class="table table-bordered table-striped table-hover table-sm align-middle text-nowrap"
                                id="list_{{ $dmenu }}">
                                @if ($table_result)
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center" style="width: 40px; min-width: 40px;">
                                                <input type="checkbox" id="checkAll" class="custom-checkbox"
                                                    title="Pilih Semua">
                                            </th>
                                            <th class="text-center" style="width: 50px; min-width: 50px;">No</th>
                                            <th class="d-none">ID</th>
                                            <th class="text-center">User Create</th>
                                            <th class="text-center">Tanggal</th>
                                            <th class="text-left">Uraian</th>
                                            <th class="text-left">Kepada</th>
                                            <th class="text-left">Kategori</th>
                                            <th class="text-left">Sub Kategori</th>
                                            <th class="text-end">Nominal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $total_nominal = 0; @endphp
                                        @foreach ($table_result as $dt)
                                            @php $total_nominal += $dt->nominal; @endphp
                                            <tr>
                                                <td class="text-center" style="width: 40px; min-width: 40px;">
                                                    <input type="checkbox" class="custom-checkbox row-checkbox"
                                                        value="{{ $dt->id }}" data-nominal="{{ $dt->nominal }}">
                                                </td>
                                                <td class="text-center" style="width: 50px; min-width: 50px;">
                                                    {{ $loop->iteration }}</td>
                                                <td class="d-none">{{ $dt->id }}</td>
                                                <td class="text-center">{{ $dt->user_create }}</td>
                                                <td class="text-center">
                                                    {{ \Carbon\Carbon::parse($dt->Tanggal)->format('d-m-Y') }}</td>
                                                <td class="text-left">{{ $dt->uraian }}</td>
                                                <td class="text-left">{{ $dt->kepada }}</td>
                                                <td class="text-left">{{ $dt->kategori }}</td>
                                                <td class="text-left">{{ $dt->subkategori }}</td>
                                                <td class="text-end">Rp {{ number_format($dt->nominal, 2, ',', '.') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr style="background-color: #eafaff; font-weight: bold;">
                                            <td class="text-center" style="width: 40px; min-width: 40px;"></td>
                                            <td class="text-center" style="width: 50px; min-width: 50px;"></td>
                                            <td class="d-none"></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="text-end">TOTAL NOMINAL :</td>
                                            <td class="text-end text-primary" id="totalNominal">Rp
                                                {{ number_format($total_nominal, 0, ',', '.') }},00</td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>

                            @if (!$table_result)
                                <div class="nav-wrapper"><code>Data not found!</code></div>
                            @endif
                        </div>

                        {{-- Optional JS --}}
                        @if ($jsmenu == '1')
                            @if (view()->exists("js.{$dmenu}"))
                                @push('addjs')
                                    @include("js.{$dmenu}")
                                @endpush
                            @else
                                @push('addjs')
                                    <script>
                                        Swal.fire({
                                            title: 'JS Not Found!!',
                                            text: 'Please Create File JS',
                                            icon: 'error',
                                            confirmButtonColor: '#028284'
                                        });
                                    </script>
                                @endpush
                            @endif
                        @endif

                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@push('addjs')
    <script>
        $(document).ready(function() {
            const tableId = '#list_{{ $dmenu }}';

            // Object untuk menyimpan ID yang dicentang (persist across pages) - key: id, value: nominal
            let selectedRows = {};

            // Destroy DataTable jika sudah ada
            if ($.fn.DataTable.isDataTable(tableId)) {
                $(tableId).DataTable().destroy();
            }

            // Inisialisasi ulang DataTable
            const dataTable = $(tableId).DataTable({
                ordering: false,
                autoWidth: false,
                scrollX: true,
                responsive: true,
                fixedHeader: {
                    header: true,
                    footer: true
                },
                columnDefs: [{
                        orderable: false,
                        targets: 0
                    } // Disable ordering untuk kolom checkbox
                ],
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                }
            });

            // Event setelah DataTable selesai draw (pindah halaman, filter, dll)
            // Menggunakan event 'draw.dt' yang dipanggil SETELAH DataTable selesai diinisialisasi
            $(tableId).on('draw.dt', function() {
                // Restore checkbox state setelah draw (pindah halaman)
                restoreCheckboxState();
                // Update checkbox all state setelah draw  
                updateCheckAllStateOnly();
                // Update total untuk display counter
                updateSelectedTotal();
            });

            // Fungsi untuk restore checkbox state setelah pindah halaman
            function restoreCheckboxState() {
                $(tableId + ' tbody .row-checkbox').each(function() {
                    let id = $(this).val();
                    if (selectedRows.hasOwnProperty(id)) {
                        $(this).prop('checked', true);
                    } else {
                        $(this).prop('checked', false);
                    }
                });
            }

            // Fungsi untuk format angka ke Rupiah
            function formatRupiah(angka) {
                return 'Rp ' + angka.toLocaleString('id-ID') + ',00';
            }

            // Fungsi untuk update total nominal berdasarkan checkbox yang dipilih
            function updateSelectedTotal() {
                let selectedIds = Object.keys(selectedRows);
                let selectedCount = selectedIds.length;

                // Hitung total dari semua row di DataTable
                let totalCount = dataTable.rows().count();
                let totalNominal = 0;
                let selectedNominal = 0;

                // Loop semua row di DataTable untuk total
                dataTable.rows().every(function() {
                    let row = $(this.node());
                    let checkbox = row.find('.row-checkbox');
                    let nominal = parseFloat(checkbox.data('nominal')) || 0;
                    totalNominal += nominal;
                });

                // Hitung selected nominal dari object
                for (let id in selectedRows) {
                    selectedNominal += selectedRows[id];
                }

                if (selectedCount === 0) {
                    $('#totalNominal').text(formatRupiah(totalNominal));
                    $('#selectedCount').text('');
                } else {
                    $('#totalNominal').text(formatRupiah(selectedNominal));
                    $('#selectedCount').html('<i class="fas fa-check-circle text-success"></i> ' + selectedCount +
                        ' dari ' + totalCount + ' data dipilih');
                }
            }

            // Fungsi untuk update state checkbox all (hanya untuk halaman saat ini) - tanpa update total
            function updateCheckAllStateOnly() {
                let visibleCheckboxes = $(tableId + ' tbody .row-checkbox');
                let totalVisible = visibleCheckboxes.length;
                let checkedVisible = 0;

                visibleCheckboxes.each(function() {
                    let id = $(this).val();
                    if (selectedRows.hasOwnProperty(id)) {
                        checkedVisible++;
                    }
                });

                if (totalVisible === 0) {
                    $('#checkAll').prop('checked', false);
                    $('#checkAll').prop('indeterminate', false);
                } else if (checkedVisible === 0) {
                    $('#checkAll').prop('checked', false);
                    $('#checkAll').prop('indeterminate', false);
                } else if (checkedVisible === totalVisible) {
                    $('#checkAll').prop('checked', true);
                    $('#checkAll').prop('indeterminate', false);
                } else {
                    $('#checkAll').prop('checked', false);
                    $('#checkAll').prop('indeterminate', true);
                }
            }

            // Fungsi untuk update state checkbox all (hanya untuk halaman saat ini)
            function updateCheckAllState() {
                let visibleCheckboxes = $(tableId + ' tbody .row-checkbox');
                let totalVisible = visibleCheckboxes.length;
                let checkedVisible = 0;

                visibleCheckboxes.each(function() {
                    let id = $(this).val();
                    if (selectedRows.hasOwnProperty(id)) {
                        checkedVisible++;
                    }
                });

                if (totalVisible === 0) {
                    $('#checkAll').prop('checked', false);
                    $('#checkAll').prop('indeterminate', false);
                } else if (checkedVisible === 0) {
                    $('#checkAll').prop('checked', false);
                    $('#checkAll').prop('indeterminate', false);
                } else if (checkedVisible === totalVisible) {
                    $('#checkAll').prop('checked', true);
                    $('#checkAll').prop('indeterminate', false);
                } else {
                    $('#checkAll').prop('checked', false);
                    $('#checkAll').prop('indeterminate', true);
                }

                updateSelectedTotal();
            }

            // Event handler untuk checkbox all (hanya untuk halaman saat ini)
            $(document).on('change', '#checkAll', function() {
                let isChecked = $(this).prop('checked');
                $(tableId + ' tbody .row-checkbox').each(function() {
                    let id = $(this).val();
                    let nominal = parseFloat($(this).data('nominal')) || 0;
                    $(this).prop('checked', isChecked);

                    if (isChecked) {
                        selectedRows[id] = nominal;
                    } else {
                        delete selectedRows[id];
                    }
                });
                updateSelectedTotal();
            });

            // Event handler untuk individual checkbox (menggunakan event delegation pada document)
            $(document).on('change', tableId + ' .row-checkbox', function() {
                let id = $(this).val();
                let nominal = parseFloat($(this).data('nominal')) || 0;

                if ($(this).prop('checked')) {
                    selectedRows[id] = nominal;
                    console.log('Checked ID:', id, 'Nominal:', nominal);
                } else {
                    delete selectedRows[id];
                    console.log('Unchecked ID:', id);
                }

                console.log('Selected rows:', selectedRows);
                updateCheckAllState();
            });

            // Fungsi untuk inject selected IDs ke form sebelum submit
            function injectSelectedIds(containerId) {
                let container = $('#' + containerId);
                container.empty();

                let selectedIds = Object.keys(selectedRows);
                console.log('Injecting IDs:', selectedIds);

                // Append hidden inputs untuk setiap ID yang dipilih
                selectedIds.forEach(function(id) {
                    container.append('<input type="hidden" name="selected_ids[]" value="' + id + '">');
                });
            }

            // Handler untuk form Excel
            $('#formExcel').on('submit', function(e) {
                let selectedIds = Object.keys(selectedRows);
                console.log('Form Excel submit, selected:', selectedIds);

                if (selectedIds.length === 0) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Peringatan',
                        text: 'Pilih minimal 1 data untuk di-export!',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return false;
                }
                injectSelectedIds('selectedIdsExcel');
                return true;
            });

            // Handler untuk form PDF
            $('#formPdf').on('submit', function(e) {
                let selectedIds = Object.keys(selectedRows);
                console.log('Form PDF submit, selected:', selectedIds);

                if (selectedIds.length === 0) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Peringatan',
                        text: 'Pilih minimal 1 data untuk di-export!',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return false;
                }
                injectSelectedIds('selectedIdsPdf');
                return true;
            });

            // Handler untuk form PDF Serah Terima
            $('#formPdfSerahTerima').on('submit', function(e) {
                let selectedIds = Object.keys(selectedRows);
                console.log('Form PDF Serah Terima submit, selected:', selectedIds);

                if (selectedIds.length === 0) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Peringatan',
                        text: 'Pilih minimal 1 data untuk di-export!',
                        icon: 'warning',
                        confirmButtonColor: '#028284'
                    });
                    return false;
                }
                injectSelectedIds('selectedIdsPdfSerahTerima');
                return true;
            });

            // Penyesuaian saat halaman selesai dimuat
            $(window).on('load', function() {
                dataTable.columns.adjust().draw(false);
                dataTable.fixedHeader.adjust();
            });

            // Penyesuaian saat resize (termasuk zoom out)
            $(window).on('resize', function() {
                dataTable.columns.adjust().draw(false);
                dataTable.fixedHeader.adjust();
            });

            // Penyesuaian saat zoom menggunakan devicePixelRatio
            let lastZoom = window.devicePixelRatio;
            setInterval(() => {
                if (window.devicePixelRatio !== lastZoom) {
                    lastZoom = window.devicePixelRatio;
                    dataTable.columns.adjust().draw(false);
                    dataTable.fixedHeader.adjust();
                }
            }, 400);

            // Optional: pengaturan Note seperti sebelumnya
            const noted = $('#noted');
            const hasExp = $('*').hasClass('exp');
            const hasStock = $('*').hasClass('stock');

            if (noted.length > 0) {
                if (hasExp && hasStock) {
                    noted.html(
                        `<code>Note :( <i class="fas fa-circle" style="color: #ffc2cd;"></i> Data not active ), ( <i class="fas fa-circle" style="color: #ffe768;"></i> Data Expired ), ( <i class="fas fa-circle" style="color: #f93c3c;"></i> Stock < Min Stock )</code>`
                    );
                } else if (hasExp) {
                    noted.html(
                        `<code>Note :( <i class="fas fa-circle" style="color: #ffc2cd;"></i> Data not active ), ( <i class="fas fa-circle" style="color: #ffe768;"></i> Data Expired )</code>`
                    );
                } else if (hasStock) {
                    noted.html(
                        `<code>Note :( <i class="fas fa-circle" style="color: #ffc2cd;"></i> Data not active ), ( <i class="fas fa-circle" style="color: #f93c3c;"></i> Stock < Min Stock )</code>`
                    );
                }
            }

            // Optional: sembunyikan tombol print jika tidak diizinkan
            $('.dt-button').remove();
            @if (isset($authorize) && $authorize->print == '0')
                $('.buttons-print').remove();
            @endif
        });
    </script>
@endpush