@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">
                                            {{-- set value filter --}}
                                                                                        @foreach ($filter as $key => $value)
                                                <input type="hidden" name="f{{ $key }}"
                                                    value="{{ $value }}" />
                                                @php
                                                    if (
                                                        preg_replace('/\s+/', '', strtolower(@$table_class->alias)) ==
                                                        preg_replace('/\s+/', '', strtolower($key))
                                                    ) {
                                                        $check_filter = $value == '%' ? '' : $value;
                                                    }
                                                @endphp
                                            @endforeach
                                        </div>
                                        <div class="col-auto d-flex align-items-center ms-auto">
                                            {{-- display label alias on class filter --}}
                                            <span class="me-2 text-sm font-weight-bold">Filter {{ @$table_class->alias }} :</span>
                                            <select class="form-select" id="{{ @$table_class->field }}"
                                                style="width: 160px;">
                                                @if (@$table_class->query != '')
                                                    @if ($check_filter != '')
                                                        @php
                                                            $data_query = DB::select(@$table_class->query);
                                                        @endphp
                                                        @foreach ($data_query as $q)
                                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjovertime/resources/views/report/rttlhr/result.blade.php</b> on line <b>52</b><br />
                                                            @if ($check_filter == $sAsArray[0])
                                                                <option value="{{ $sAsArray[0] }}">
                                                                    {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                        <option value="" selected>% - All</option>
                                                        @php
                                                            $data_query = DB::select(@$table_class->query);
                                                        @endphp
                                                        @foreach ($data_query as $q)
                                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjovertime/resources/views/report/rttlhr/result.blade.php</b> on line <b>65</b><br />
                                                            <option value="{{ $sAsArray[0] }}">
                                                                {{ $sAsArray[0] }} - {{ $sAsArray[1] }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Action bar row: Export buttons (Left) and DataTables 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
                                @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>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display align-items-center" id="list_{{ $dmenu }}">
                                    @if ($table_result)
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <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">Position</th>
                                                <th rowspan="2" class="d-none">Departemen</th>
                                                <th colspan="4" class="text-center font-weight-bolder">Total Jam</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
                                                $totKerja = 0;
                                                $totLibur = 0;
                                                $totHr    = 0;
                                                $totHr2x  = 0;
                                            @endphp
                                            @foreach ($table_result as $detail)
                                                @php
                                                    $kerja = (float)($detail->Kerja ?? 0);
                                                    $libur = (float)($detail->Libur ?? 0);
                                                    $hr    = (float)($detail->HR ?? 0);
                                                    $hr2x  = (float)($detail->HR2x ?? 0);

                                                    $totKerja += $kerja;
                                                    $totLibur += $libur;
                                                    $totHr    += $hr;
                                                    $totHr2x  += $hr2x;
                                                @endphp
                                                <tr>
                                                    <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="d-none">{{ $detail->Departemen ?? '' }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($kerja, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($libur, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($hr, 2) }}</td>
                                                    <td class="text-sm font-weight-normal text-end">{{ number_format($hr2x, 2) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot style="background-color: #f8f9fa;">
                                            <tr>
                                                <th colspan="3" class="text-end font-weight-bolder">Total :</th>
                                                <th class="d-none"></th>
                                                <th class="text-end font-weight-bolder footer-kerja">{{ number_format($totKerja, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-libur">{{ number_format($totLibur, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-hr">{{ number_format($totHr, 2) }}</th>
                                                <th class="text-end font-weight-bolder footer-hr2x">{{ number_format($totHr2x, 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 Total Hours Each Employee</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 table = document.getElementById('list_{{ $dmenu }}').cloneNode(true);
            $(table).find('.d-none').remove();
            let html = table.outerHTML;
            let blob = new Blob(['\ufeff' + html], { type: 'application/vnd.ms-excel' });
            let url = URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.href = url;
            a.download = 'Total_Hour_Each_Emp.xls';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }

        function exportPDF() {
            window.print();
        }

        $(document).ready(function() {
            let table = $('#list_{{ $dmenu }}').DataTable({
                paging: false,
                bPaginate: false,
                info: false,
                bInfo: false,
                lengthChange: false,
                bLengthChange: false,
                language: {
                    "search": "Search:",
                    "zeroRecords": "Maaf - Data tidak ada"
                },
                responsive: true,
                footerCallback: function(row, data, start, end, display) {
                    let api = this.api();

                    let parseVal = function(val) {
                        if (typeof val === 'number') return val;
                        if (typeof val === 'string') {
                            let text = val.replace(/<[^>]*>/g, '').replace(/[\$,]/g, '').trim();
                            return parseFloat(text) || 0;
                        }
                        return 0;
                    };

                    let totalKerja = 0;
                    let totalLibur = 0;
                    let totalHr    = 0;
                    let totalHr2x  = 0;

                    for (let i = 0; i < display.length; i++) {
                        let rowData = api.row(display[i]).data();
                        if (rowData) {
                            totalKerja += parseVal(rowData[4]);
                            totalLibur += parseVal(rowData[5]);
                            totalHr    += parseVal(rowData[6]);
                            totalHr2x  += parseVal(rowData[7]);
                        }
                    }

                    $('.footer-kerja').text(totalKerja.toFixed(2));
                    $('.footer-libur').text(totalLibur.toFixed(2));
                    $('.footer-hr').text(totalHr.toFixed(2));
                    $('.footer-hr2x').text(totalHr2x.toFixed(2));
                }
            });

            // Move DataTables Search box to #custom-search-wrapper to align horizontally with Excel, PDF, Print buttons
            $('#list_{{ $dmenu }}_wrapper .dataTables_filter').appendTo('#custom-search-wrapper');

            // Client-side Filter Departemen dropdown
            $('#{{ @$table_class->field }}').change(function() {
                let val = $(this).val();
                if (val && val !== '%') {
                    table.column(3).search('^' + $.fn.dataTable.util.escapeRegex(val) + '$', true, false).draw();
                } else {
                    table.column(3).search('').draw();
                }
            });
        });
    </script>
    <style>
        /* Force hide Show entries, Pagination, and Info text */
        .dataTables_length, .dataTables_paginate, .dataTables_info,
        div.dataTables_wrapper div.dataTables_length,
        div.dataTables_wrapper div.dataTables_paginate,
        div.dataTables_wrapper div.dataTables_info {
            display: none !important;
        }

        #custom-search-wrapper {
            margin-bottom: 0 !important;
        }

        #custom-search-wrapper .dataTables_filter {
            float: none !important;
            text-align: right !important;
            margin-bottom: 0 !important;
        }

        #custom-search-wrapper .dataTables_filter label {
            margin-bottom: 0 !important;
            font-weight: 600;
            display: inline-flex !important;
            align-items: center !important;
        }

        #custom-search-wrapper .dataTables_filter input {
            margin-left: 0.5rem;
            display: inline-block;
            width: auto;
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            padding: 0.375rem 0.75rem;
        }

        /* Fix bottom border of table header so it extends continuously across all sub-headers */
        #list_{{ $dmenu }} thead tr:nth-child(1) th[colspan] {
            border-bottom: 1px solid #888888 !important;
        }

        #list_{{ $dmenu }} thead tr:nth-child(2) th,
        #list_{{ $dmenu }} thead tr:nth-child(1) th[rowspan] {
            border-bottom: 2px solid #6c757d !important;
        }

        @media print {
            body * {
                visibility: hidden;
            }
            #printable-area, #printable-area * {
                visibility: visible;
            }
            #printable-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
            .no-print {
                display: none !important;
            }
            table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            th, td {
                border: 1px solid #000 !important;
                padding: 6px !important;
            }
            thead th {
                background-color: #e0e0e0 !important;
                -webkit-print-color-adjust: exact;
            }
        }
    </style>
@endpush