@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 DataTables Search (Right) --}}
                        <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
                                @if (@$authorize->print != '0')
                                    <button type="button" class="btn btn-info mb-0 me-1" onclick="window.print()">
                                        <i class="fas fa-print me-1"></i><span class="font-weight-bold">Print</span>
                                    </button>
                                @endif
                            </div>
                            <div class="col-auto ms-auto" id="custom-search-wrapper">
                                {{-- DataTables search box moves here via jQuery --}}
                            </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;">DETAIL ALL 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-container-sticky">
                                <table class="table display align-items-center" id="list_{{ $dmenu }}" style="width: 100%;">
                                    @if ($table_result)
                                        <thead class="thead-light" style="background-color: #b0e9eb;">
                                            <tr>
                                                <th class="align-middle text-center font-weight-bolder" style="width: 40px;">No</th>
                                                <th class="align-middle text-center font-weight-bolder">NIK</th>
                                                <th class="align-middle font-weight-bolder">Nama</th>
                                                <th class="align-middle font-weight-bolder">Departemen</th>
                                                <th class="align-middle font-weight-bolder">Posisi</th>
                                                <th class="align-middle font-weight-bolder">Status Karyawan</th>
                                                <th class="align-middle text-center font-weight-bolder">Lokasi</th>
                                                <th class="align-middle text-center font-weight-bolder">Tanggal Lembur</th>
                                                <th class="align-middle font-weight-bolder">Agenda</th>
                                                <th class="align-middle text-center font-weight-bolder">Mulai</th>
                                                <th class="align-middle text-center font-weight-bolder">Selesai</th>
                                                <th class="align-middle text-end font-weight-bolder">Jam Istirahat</th>
                                                <th class="align-middle text-end font-weight-bolder">Jam Kerja</th>
                                                <th class="align-middle text-center font-weight-bolder">Status Pekerjaan</th>
                                                <th class="align-middle text-center font-weight-bolder">Jenis Lembur</th>
                                                <th class="align-middle text-center font-weight-bolder">Tipe Lembur</th>
                                                <th class="align-middle text-center font-weight-bolder">Status Lembur</th>
                                                <th class="align-middle text-end font-weight-bolder">Total</th>
                                                <th class="align-middle text-end font-weight-bolder">Konversi</th>
                                                <th class="align-middle text-end font-weight-bolder">Gaji Pokok</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($table_result as $detail)
                                                <tr>
                                                    <td class="text-sm font-weight-normal text-center">{{ $loop->iteration }}</td>
                                                    <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->DEPARTEMEN }}</td>
                                                    <td class="text-sm font-weight-normal">{{ $detail->POSISI }}</td>
                                                    <td class="text-sm font-weight-normal">{{ $detail->STATUS_KARYAWAN }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ ucwords(strtolower($detail->LOKASI)) }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ \Carbon\Carbon::parse($detail->TANGGAL_LEMBUR)->format('m/d/Y') }}</td>
                                                    <td class="text-sm font-weight-normal">{{ $detail->AGENDA }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ \Carbon\Carbon::parse($detail->MULAI)->format('Y-m-d H:i:s') }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ \Carbon\Carbon::parse($detail->SELESAI)->format('Y-m-d H:i:s') }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->JAM_ISTIRAHAT, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->JAM_KERJA, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ $detail->STATUS_PEKERJAAN }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ $detail->JENIS_LEMBUR }}</td>
                                                    <td class="text-sm font-weight-normal text-center">{{ $detail->TIPE_LEMBUR }}</td>
                                                    <td class="text-sm font-weight-normal text-center text-uppercase">{{ $detail->STATUS_LEMBUR }}</td>
                                                    <td class="text-sm font-weight-normal text-end">Rp{{ number_format($detail->total_raw, 0, ',', '.') }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($detail->konversi_raw, 2, ',', '.') }}</td>
                                                    <td class="text-sm font-weight-normal text-end">Rp{{ number_format($detail->gaji_pokok_raw, 0, ',', '.') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @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 Detail ALL Overtime Report</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code> Data not found!</code></div>
                                @endif
                            </div>
                        </div>
                    </div>
                </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("/rptdtl/export-excel") }}?frdate=' + frdate + '&todate=' + todate + '&department=' + 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() || '%';
            window.location.href = '{{ url("/rptdtl/export-pdf") }}?frdate=' + frdate + '&todate=' + todate + '&department=' + department;
        }

        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }
            let table = $('#list_{{ $dmenu }}').DataTable({
                paging: false,
                bPaginate: false,
                info: false,
                bInfo: false,
                lengthChange: false,
                bLengthChange: false,
                pageLength: -1,
                destroy: true,
                language: {
                    "search": "Search:",
                    "zeroRecords": "Maaf - Data tidak ada"
                },
                responsive: false
            });

            // 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);
            }
        });
    </script>
    <style>
        /* Table container with internal scroll & sticky header */
        .table-container-sticky {
            max-height: calc(100vh - 280px);
            min-height: 350px;
            overflow-y: auto !important;
            overflow-x: auto !important;
            position: relative;
            border: 1px solid #dee2e6;
            border-radius: 6px;
        }

        #list_{{ $dmenu }} {
            width: 100% !important;
            border-collapse: separate !important;
            border-spacing: 0;
            margin-bottom: 0 !important;
            border: none !important;
        }

        #list_{{ $dmenu }} th, 
        #list_{{ $dmenu }} td {
            white-space: nowrap;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
            border-bottom: 1px solid #dee2e6 !important;
            padding: 8px 12px !important;
            font-size: 0.85rem !important;
            vertical-align: middle !important;
        }

        /* Freeze / Sticky Header matching standard table design (Solid non-transparent) */
        #list_{{ $dmenu }} thead th {
            position: sticky !important;
            top: 0 !important;
            z-index: 100 !important;
            background-color: #b0e9eb !important;
            opacity: 1 !important;
            color: #344767 !important;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
            border-bottom: 1px solid #dee2e6 !important;
            font-weight: 700 !important;
            box-shadow: inset 0 -1px 0 #dee2e6;
        }

        #list_{{ $dmenu }} tbody tr:hover {
            background-color: #f8f9fa;
        }

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

        @media print {
            @page {
                size: landscape;
                margin: 10mm;
            }
            body {
                background-color: #fff !important;
                color: #000 !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-container-sticky,
            .table-responsive {
                overflow: visible !important;
                overflow-x: visible !important;
                max-height: none !important;
                border: none !important;
            }
            table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            th, td {
                border: 1.5px solid #000000 !important;
                padding: 6px !important;
                font-size: 8pt !important;
            }

            th {
                background-color: #00b7bd4f !important;
                color: #000000 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            tfoot th, tfoot td {
                background-color: #00b7bd4f !important;
                color: #000000 !important;
                border: 1.5px solid #000000 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
@endpush