@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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" id="printable-area">
                        <div class="card-header no-print">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0 no-print">
                        <div class="row px-4 py-2 no-print">
                            <div class="col-lg">
                                <div class="nav-wrapper row align-items-center">
                                    <div class="col-auto">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i
                                                class="fas fa-circle-left me-1"> </i><span
                                                class="font-weight-bold">Kembali</span></button>
                                    </div>
                                    <div class="col md-auto justify-content-end row">
                                        <div class="col-auto">
                                            @foreach ($filter as $key => $value)
                                                <input type="hidden" name="f{{ $key }}"
                                                    value="{{ $value }}" />
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Action bar row: Export buttons (Left) and Live Search (Right - Sejajar) --}}
                        <div class="row px-4 py-1 no-print align-items-center justify-content-between">
                            <div class="col-auto d-flex align-items-center">
                                @if (@$authorize->excel != '0')
                                    <button type="button" class="btn btn-success mb-0 me-1" onclick="exportExcel()">
                                        <i class="fas fa-file-excel me-1"></i><span class="font-weight-bold">Excel</span>
                                    </button>
                                @endif
                                @if (@$authorize->pdf != '0')
                                    <button type="button" class="btn btn-danger mb-0 me-1" onclick="exportPDF()">
                                        <i class="fas fa-file-pdf me-1"></i><span class="font-weight-bold">PDF</span>
                                    </button>
                                @endif
                            </div>
                            <div class="col-auto ms-auto" id="custom-search-wrapper">
                                <div class="d-flex align-items-center">
                                    <label for="table-search-input" class="text-sm font-weight-bold mb-0 me-2">Search:</label>
                                    <input type="search" id="table-search-input" class="form-control form-control-sm" style="width: 200px; display: inline-block;">
                                </div>
                            </div>
                        </div>


                        <!-- Header for Print only -->
                        <div class="d-none d-print-block text-center mt-3 mb-4">
                            <h4 class="font-weight-bold mb-1" style="color: #000; font-family: Arial, sans-serif;">SUMMARY OVERTIME REPORT</h4>
                            <div style="font-size: 11pt; font-style: italic; color: #333; font-family: Arial, sans-serif;">
                                Periode: {{ \Carbon\Carbon::parse($filter['frdate'])->format('d-M-Y') }} s.d. {{ \Carbon\Carbon::parse($filter['todate'])->format('d-M-Y') }}
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display align-items-center" id="list_{{ $dmenu }}" style="width: 100%;">
                                    @if ($table_result)
                                        <thead class="thead-light">
                                            <tr>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">NIK</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">Nama</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">Posisi</th>
                                                <th colspan="4" class="text-center font-weight-bolder">Total Jam</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">Gaji Pokok</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">Kerja</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">Libur</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">HR</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">HR2x</th>
                                                <th rowspan="2" class="align-middle text-center font-weight-bolder">Total</th>
                                            </tr>
                                            <tr>
                                                <th class="text-center font-weight-bolder">Kerja</th>
                                                <th class="text-center font-weight-bolder">Libur</th>
                                                <th class="text-center font-weight-bolder">HR</th>
                                                <th class="text-center font-weight-bolder">HR2x</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $currentDept = null;
                                            @endphp
                                            @foreach ($table_result as $detail)
                                                @php
                                                    $dept = $detail->Departemen ?? 'Lainnya';
                                                @endphp
                                                @if ($currentDept !== $dept)
                                                    @php
                                                        $currentDept = $dept;
                                                    @endphp
                                                    <tr class="group-dept-row">
                                                        <td colspan="13" class="dept-header-cell">
                                                            <i class="fas fa-building me-2"></i>DEPARTEMEN: {{ strtoupper($dept) }}
                                                        </td>
                                                    </tr>
                                                @endif
                                                <tr class="data-row">
                                                    <td class="text-sm font-weight-normal text-center">{{ $detail->NIK }}</td>
                                                    <td class="text-sm font-weight-normal">{{ $detail->Nama }}</td>
                                                    <td class="text-sm font-weight-normal">{{ $detail->Position }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->kerja_jam, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->libur_jam, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->hr_jam, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->hr2x_jam, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->gaji_pokok, 2) }}</td>
                                                    @if($detail->kerja_nom > 0)
                                                        <td class="text-sm font-weight-normal text-end text-dark cursor-pointer show-detail-nom" style="cursor: pointer; text-decoration: underline;" data-nik="{{ $detail->NIK }}" data-nama="{{ $detail->Nama }}" data-type="kerja">{{ number_format($detail->kerja_nom, 2) }}</td>
                                                    @else
                                                        <td class="text-sm font-weight-normal text-end text-secondary">{{ number_format($detail->kerja_nom, 2) }}</td>
                                                    @endif

                                                    @if($detail->libur_nom > 0)
                                                        <td class="text-sm font-weight-normal text-end text-dark cursor-pointer show-detail-nom" style="cursor: pointer; text-decoration: underline;" data-nik="{{ $detail->NIK }}" data-nama="{{ $detail->Nama }}" data-type="libur">{{ number_format($detail->libur_nom, 2) }}</td>
                                                    @else
                                                        <td class="text-sm font-weight-normal text-end text-secondary">{{ number_format($detail->libur_nom, 2) }}</td>
                                                    @endif

                                                    @if($detail->hr_nom > 0)
                                                        <td class="text-sm font-weight-normal text-end text-dark cursor-pointer show-detail-nom" style="cursor: pointer; text-decoration: underline;" data-nik="{{ $detail->NIK }}" data-nama="{{ $detail->Nama }}" data-type="hr">{{ number_format($detail->hr_nom, 2) }}</td>
                                                    @else
                                                        <td class="text-sm font-weight-normal text-end text-secondary">{{ number_format($detail->hr_nom, 2) }}</td>
                                                    @endif

                                                    @if($detail->hr2x_nom > 0)
                                                        <td class="text-sm font-weight-normal text-end text-dark cursor-pointer show-detail-nom" style="cursor: pointer; text-decoration: underline;" data-nik="{{ $detail->NIK }}" data-nama="{{ $detail->Nama }}" data-type="hr2x">{{ number_format($detail->hr2x_nom, 2) }}</td>
                                                    @else
                                                        <td class="text-sm font-weight-normal text-end text-secondary">{{ number_format($detail->hr2x_nom, 2) }}</td>
                                                    @endif

                                                    <td class="text-sm font-weight-normal text-end text-dark">{{ number_format($detail->total_nom, 2) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot style="border: none;">
                                            <tr>
                                                <th colspan="3" class="text-end font-weight-bolder">Total :</th>
                                                <th class="text-end font-weight-bolder footer-kerja-jam">{{ number_format($totals->totKerjaJam ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-libur-jam">{{ number_format($totals->totLiburJam ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-hr-jam">{{ number_format($totals->totHrJam ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-hr2x-jam">{{ number_format($totals->totHr2xJam ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-gaji-pokok">{{ number_format($totals->totGajiPokok ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-kerja-nom">{{ number_format($totals->totKerjaNom ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-libur-nom">{{ number_format($totals->totLiburNom ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-hr-nom">{{ number_format($totals->totHrNom ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-hr2x-nom">{{ number_format($totals->totHr2xNom ?? 0, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-total-nom">{{ number_format($totals->totTotalNom ?? 0, 2) }}</th>
                                            </tr>
                                        </tfoot>
                                    @endif
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2 no-print">
                            <div class="col-lg">
                                @if ($table_result)
                                    <div class="nav-wrapper" id="noted">
                                        <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data Summary Overtime Report</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code> Data not found!</code></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Detail Summary Overtime -->
    <div class="modal fade" id="modalDetailNominal" tabindex="-1" aria-labelledby="modalDetailNominalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header text-white" style="background-color: #028284;">
                    <h5 class="modal-title text-white font-weight-bold" id="modalDetailNominalLabel">Detail Rincian Lembur</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" style="filter: invert(1);"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <span class="font-weight-bold">Karyawan:</span> <span id="detail-nama-txt" class="text-secondary ms-1"></span>
                        </div>
                        <div>
                            <span class="font-weight-bold">Tipe Lembur:</span> <span id="detail-type-badge" class="text-secondary font-weight-bold text-uppercase ms-1"></span>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered align-items-center mb-0" id="table-detail-nominal" style="width:100%;">
                            <thead style="background-color: #00b7bd1f;">
                                <tr>
                                    <th class="text-center font-weight-bolder text-uppercase text-xs" style="padding: 10px;">No DKL</th>
                                    <th class="text-center font-weight-bolder text-uppercase text-xs" style="padding: 10px;">Tanggal Lembur</th>
                                    <th class="text-center font-weight-bolder text-uppercase text-xs" style="padding: 10px;">Tanggal Approve (Personalia)</th>
                                    <th class="text-center font-weight-bolder text-uppercase text-xs" style="padding: 10px;">Total Jam</th>
                                    <th class="text-center font-weight-bolder text-uppercase text-xs" style="padding: 10px;">Nominal</th>
                                </tr>
                            </thead>
                            <tbody id="body-detail-nominal">
                                <!-- Rows will be injected here via AJAX -->
                            </tbody>
                            <tfoot>
                                <tr class="fw-bold" style="background-color: #f8f9fa;">
                                    <td colspan="3" class="text-end font-weight-bolder text-xs" style="padding: 10px;">Total:</td>
                                    <td id="foot-detail-total-jam" class="text-end font-weight-bolder text-xs" style="padding: 10px;">0.00</td>
                                    <td id="foot-detail-total-nominal" class="text-end font-weight-bolder text-xs" style="padding: 10px;">0.00</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function exportExcel() {
            let frdate = $('input[name="ffrdate"]').val() || '2000-01-01';
            let todate = $('input[name="ftodate"]').val() || '2100-01-01';
            let department = $('input[name="fdepartment"]').val() || '%';
            window.location.href = '{{ url("/rsumry/export-excel") }}?frdate=' + frdate + '&todate=' + todate + '&department=' + encodeURIComponent(department);
        }

        function exportPDF() {
            let frdate = $('input[name="ffrdate"]').val() || '2000-01-01';
            let todate = $('input[name="ftodate"]').val() || '2100-01-01';
            let department = $('input[name="fdepartment"]').val() || '%';
            let url = '{{ url("/rsumry/export-pdf") }}?frdate=' + frdate + '&todate=' + todate + '&department=' + encodeURIComponent(department);
            window.open(url, '_blank');
        }

        $(document).ready(function() {
            // Live Search & Totals recalculation
            function recalcTotals() {
                let totalKerjaJam = 0, totalLiburJam = 0, totalHrJam = 0, totalHr2xJam = 0;
                let totalGajiPokok = 0, totalKerjaNom = 0, totalLiburNom = 0, totalHrNom = 0, totalHr2xNom = 0, totalTotalNom = 0;

                $('#list_{{ $dmenu }} tbody tr.data-row:visible').each(function() {
                    let parseCol = function($td) {
                        let txt = $td.text().replace(/<[^>]*>/g, '').replace(/[\$,]/g, '').trim();
                        return parseFloat(txt) || 0;
                    };
                    let $tds = $(this).find('td');
                    totalKerjaJam  += parseCol($tds.eq(3));
                    totalLiburJam  += parseCol($tds.eq(4));
                    totalHrJam     += parseCol($tds.eq(5));
                    totalHr2xJam   += parseCol($tds.eq(6));
                    totalGajiPokok += parseCol($tds.eq(7));
                    totalKerjaNom  += parseCol($tds.eq(8));
                    totalLiburNom  += parseCol($tds.eq(9));
                    totalHrNom     += parseCol($tds.eq(10));
                    totalHr2xNom   += parseCol($tds.eq(11));
                    totalTotalNom  += parseCol($tds.eq(12));
                });

                $('.footer-kerja-jam').text(totalKerjaJam.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-libur-jam').text(totalLiburJam.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-hr-jam').text(totalHrJam.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-hr2x-jam').text(totalHr2xJam.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-gaji-pokok').text(totalGajiPokok.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-kerja-nom').text(totalKerjaNom.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-libur-nom').text(totalLiburNom.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-hr-nom').text(totalHrNom.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-hr2x-nom').text(totalHr2xNom.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                $('.footer-total-nom').text(totalTotalNom.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            }

            $('#table-search-input').on('keyup input', function() {
                let val = $(this).val().toLowerCase().trim();
                if (val === '') {
                    $('#list_{{ $dmenu }} tbody tr').show();
                } else {
                    $('#list_{{ $dmenu }} tbody tr.data-row').each(function() {
                        let match = $(this).text().toLowerCase().indexOf(val) > -1;
                        $(this).toggle(match);
                    });
                    // Hide department headers if no matching rows below it
                    $('#list_{{ $dmenu }} tbody tr.group-dept-row').each(function() {
                        let $nextDataRows = $(this).nextUntil('tr.group-dept-row', 'tr.data-row:visible');
                        $(this).toggle($nextDataRows.length > 0);
                    });
                }
                recalcTotals();
            });

            // Recalculate column widths on window resize / zoom change
            $(window).on('resize', function() {
                table.columns.adjust();
            });

            // Move DataTables search box to custom header container
            let searchInput = $('#list_{{ $dmenu }}_filter');
            if (searchInput.length) {
                $('#custom-search-wrapper').append(searchInput);
            }

            // Click handler to load and show nominal details in modal
            $(document).on('click', '.show-detail-nom', function() {
                let nik = $(this).data('nik');
                let type = $(this).data('type');
                let nama = $(this).data('nama');
                
                // Get filter dates
                let frdate = $('input[name="ffrdate"]').val() || '2000-01-01';
                let todate = $('input[name="ftodate"]').val() || '2100-01-01';

                $('#detail-nama-txt').text(nama + ' (' + nik + ')');
                $('#detail-type-badge').text(type);
                $('#body-detail-nominal').html('<tr><td colspan="5" class="text-center"><div class="spinner-border spinner-border-sm text-secondary me-2" role="status"></div>Memuat data...</td></tr>');
                $('#foot-detail-total-jam').text('0.00');
                $('#foot-detail-total-nominal').text('Rp 0.00');
                
                $('#modalDetailNominal').modal('show');

                $.ajax({
                    url: '{{ url("/rsumry/detail-ajax") }}',
                    type: 'GET',
                    data: {
                        nik: nik,
                        type: type,
                        frdate: frdate,
                        todate: todate
                    },
                    success: function(response) {
                        if (response.success && response.data.length > 0) {
                            let rows = '';
                            response.data.forEach(item => {
                                rows += '<tr>';
                                rows += '<td class="text-center">' + item.no_dkl + '</td>';
                                rows += '<td class="text-center">' + item.tanggal_lembur + '</td>';
                                rows += '<td class="text-center">' + item.tanggal_approve + '</td>';
                                rows += '<td class="text-end">' + item.total_jam + '</td>';
                                rows += '<td class="text-end">Rp ' + item.nominal + '</td>';
                                rows += '</tr>';
                            });
                            $('#body-detail-nominal').html(rows);
                            $('#foot-detail-total-jam').text(response.totals.total_jam);
                            $('#foot-detail-total-nominal').text('Rp ' + response.totals.total_nominal);
                        } else {
                            $('#body-detail-nominal').html('<tr><td colspan="5" class="text-center text-muted">Tidak ada rincian data lembur.</td></tr>');
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr);
                        $('#body-detail-nominal').html('<tr><td colspan="5" class="text-center text-danger">Gagal memuat rincian data.</td></tr>');
                    }
                });
            });
        });
    </script>
    <style>
        #list_{{ $dmenu }} {
            width: 100% !important;
            border-collapse: collapse !important;
            border: none !important;
        }

        #list_{{ $dmenu }}.dataTable.no-footer {
            border-bottom: none !important;
        }

        #list_{{ $dmenu }} thead th {
            background-color: #a0e3e5 !important;
            color: #000000 !important;
            border: 1.5px solid #000000 !important;
            vertical-align: middle !important;
            padding: 8px 4px !important;
            font-size: 0.85rem !important;
        }

        #list_{{ $dmenu }} tbody td {
            border: 1px solid #cbd5e1 !important;
            vertical-align: middle !important;
            padding: 6px 8px !important;
        }

        .dept-header-cell {
            background-color: #f5b616 !important;
            color: #000000 !important;
            font-weight: bold !important;
            font-size: 0.875rem !important;
            padding: 8px 12px !important;
            text-align: left !important;
            border: 1.5px solid #000000 !important;
        }

        #list_{{ $dmenu }} tfoot th,
        #list_{{ $dmenu }} tfoot td {
            border: 1px solid #cbd5e1 !important;
            background-color: transparent !important;
            color: #000000 !important;
            vertical-align: middle !important;
            padding: 8px 8px !important;
            font-size: 0.875rem !important;
        }

        .dataTables_length,
        div.dataTables_wrapper div.dataTables_length {
            display: none !important;
        }

        @media print {
            @page {
                size: A4 landscape;
                margin: 10mm;
            }
            body {
                background-color: #fff !important;
                color: #000 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            .sidenav, 
            .navbar, 
            .no-print, 
            .btn, 
            .card-header, 
            hr, 
            footer, 
            #custom-search-wrapper,
            #noted,
            .dataTables_info,
            .dataTables_paginate,
            .paging_simple_numbers {
                display: none !important;
            }
            .main-content {
                margin: 0 !important;
                padding: 0 !important;
            }
            #printable-area {
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
            }
            .table-responsive {
                overflow: visible !important;
                overflow-x: visible !important;
            }
            table {
                width: 100% !important;
                border-collapse: collapse !important;
                border: none !important;
            }
            th, td {
                border: 1.5px solid #000000 !important;
                padding: 6px !important;
                font-size: 8pt !important;
            }
            th {
                background-color: #a0e3e5 !important;
                color: #000000 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            .dept-header-cell {
                background-color: #f5b616 !important;
                color: #000000 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                border: 1.5px solid #000000 !important;
                font-weight: bold !important;
                padding: 6px 8px !important;
                text-align: left !important;
            }
            tfoot th,
            tfoot td {
                background-color: transparent !important;
                color: #000000 !important;
                border: 1px solid #cbd5e1 !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
        }
    </style>
@endpush