@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        :root {
            --hrd-primary: #12799c;
            --hrd-primary-soft: #e9f6fb;
            --hrd-secondary: #4b6280;
            --hrd-border: #c5d7e6;
            --hrd-text: #24415f;
        }

        .hrd-approval-card {
            border: 1px solid #d8e4ee;
            border-radius: 0.9rem;
            box-shadow: 0 6px 18px rgba(18, 121, 156, 0.08);
        }

        .hrd-monitoring-alert {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            background: linear-gradient(95deg, #1db9dd 0%, #1699c0 100%);
            color: #fff;
            line-height: 1.35;
            white-space: normal;
            word-break: break-word;
        }

        .hrd-monitoring-alert i {
            margin-top: 0.1rem;
            flex-shrink: 0;
        }

        .hrd-filter-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.65rem;
        }

        .status-filter-btn {
            border-color: var(--hrd-border) !important;
            color: var(--hrd-secondary) !important;
            background-color: #fff !important;
            font-weight: 600;
            min-height: 42px;
            padding: 0.45rem 1rem;
        }

        .status-filter-btn .badge {
            background-color: #8a9cb5 !important;
            color: #fff;
            font-weight: 700;
            min-width: 24px;
        }

        .status-filter-btn.active {
            background-color: var(--hrd-primary) !important;
            border-color: var(--hrd-primary) !important;
            color: #fff !important;
        }

        .status-filter-btn.active .badge {
            background-color: #0f6888 !important;
        }

        #status_filter_select {
            border: 1px solid var(--hrd-border);
            border-radius: 0.7rem;
            min-height: 44px;
            color: var(--hrd-text);
        }

        #status_filter_info {
            color: var(--hrd-text) !important;
            font-weight: 600;
        }

        div.dataTables_wrapper div.dataTables_length,
        div.dataTables_wrapper div.dataTables_filter {
            margin-top: 0.35rem;
            margin-bottom: 0.35rem;
        }

        div.dataTables_wrapper div.dataTables_filter input,
        div.dataTables_wrapper div.dataTables_length select {
            border: 1px solid var(--hrd-border);
            border-radius: 0.6rem;
            min-height: 40px;
        }

        #list_{{ $dmenu }} thead th {
            color: #3f5b77;
            font-weight: 700;
        }

        #list_{{ $dmenu }} tbody tr.spl-status-row>td {
            background-color: var(--row-bg, transparent) !important;
        }

        #list_{{ $dmenu }} tbody tr.spl-status-row:hover>td,
        #list_{{ $dmenu }} tbody tr.spl-status-row:focus-within>td,
        #list_{{ $dmenu }} tbody tr.spl-status-row:active>td {
            background-color: var(--row-bg, transparent) !important;
        }

        .detail-cell {
            min-width: 260px;
            max-width: 400px;
        }

        .spl-detail-dropdown summary {
            list-style: none;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            padding: 2px 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            transition: color 0.2s ease;
        }

        .spl-detail-dropdown summary:hover {
            color: #344767;
        }

        .spl-detail-dropdown summary::-webkit-details-marker {
            display: none;
        }

        .detail-label-wrap {
            display: inline-flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
        }

        .detail-label {
            font-size: 12px;
            font-weight: 600;
            color: #4f5d75;
            border-bottom: 1px dashed #d7dee8;
            line-height: 1.3;
        }

        .detail-note {
            font-size: 11px;
            color: #7b8796;
            font-weight: 500;
        }

        .detail-arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            color: #67748e;
            transition: transform 0.2s ease, color 0.2s ease;
            font-size: 9px;
        }

        .spl-detail-dropdown[open] summary {
            color: #2f415e;
        }

        .spl-detail-dropdown[open] .detail-arrow {
            transform: rotate(180deg);
            color: #028284;
        }

        .spl-detail-panel {
            margin-top: 4px;
            animation: detailFadeIn 0.2s ease;
            padding-left: 2px;
        }

        @keyframes detailFadeIn {
            from {
                opacity: 0;
                transform: translateY(-2px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .spl-mini-table-wrap {
            border-top: 1px solid #e6ebf1;
            overflow: auto;
            max-height: 170px;
            background: transparent;
            padding-top: 4px;
        }

        .spl-mini-table {
            min-width: 540px;
            table-layout: auto;
            margin-bottom: 0;
            background: transparent;
            border-collapse: collapse;
        }

        .spl-mini-table thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: transparent;
            font-size: 11px;
            color: #67748e;
            white-space: nowrap;
            border-bottom: 1px solid #e8edf3;
            border-left: 0;
            border-right: 0;
            padding: 6px 8px;
        }

        .spl-mini-table tbody td {
            font-size: 12px;
            color: #344767;
            white-space: nowrap;
            padding: 5px 8px;
            border-top: 1px solid #eef2f6;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
        }

        .spl-mini-table thead th:nth-child(1),
        .spl-mini-table tbody td:nth-child(1) {
            width: 48px;
            text-align: center;
        }

        .spl-mini-table thead th:nth-child(2),
        .spl-mini-table tbody td:nth-child(2) {
            min-width: 110px;
            text-align: center;
        }

        .spl-mini-table thead th:nth-child(3),
        .spl-mini-table tbody td:nth-child(3) {
            min-width: 180px;
            text-align: left;
        }

        .spl-mini-table thead th:nth-child(4),
        .spl-mini-table tbody td:nth-child(4) {
            min-width: 150px;
            text-align: left;
        }

        .spl-mini-table thead th:nth-child(5),
        .spl-mini-table tbody td:nth-child(5) {
            min-width: 110px;
            text-align: center;
        }

        .spl-mini-table thead th:nth-child(6),
        .spl-mini-table tbody td:nth-child(6) {
            min-width: 150px;
            text-align: center;
        }

        .spl-mini-table thead th:nth-child(7),
        .spl-mini-table tbody td:nth-child(7) {
            min-width: 80px;
            text-align: center;
        }

        .spl-mini-table tbody td:nth-child(3),
        .spl-mini-table tbody td:nth-child(4) {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .spl-mini-table tbody tr:hover td {
            background: #f9fbfd;
        }

        @media (max-width: 576px) {
            .hrd-monitoring-alert {
                padding: 0.625rem 0.75rem;
                font-size: 0.85rem;
            }

            .hrd-filter-toolbar {
                gap: 0.45rem;
            }

            #status_filter_info {
                font-size: 0.9rem;
            }
        }
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card hrd-approval-card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <div class="hrd-monitoring-alert">
                                        <i class="fas fa-info-circle me-1"></i>
                                        <span>Menampilkan riwayat SPL untuk monitoring HRD (history-only). Tidak ada
                                            proses review/approval HRD pada alur baru.
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="hrd-filter-toolbar">
                                    <div class="btn-group btn-group-sm d-none d-md-inline-flex" role="group"
                                        aria-label="Filter status HRD">
                                        <button type="button" class="btn btn-outline-secondary status-filter-btn active"
                                            data-filter="all">
                                            Semua <span class="badge bg-secondary ms-1" id="count-all">0</span>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary status-filter-btn"
                                            data-filter="atasan_final">
                                            Final Atasan <span class="badge bg-secondary ms-1"
                                                id="count-atasan-final">0</span>
                                        </button>
                                    </div>
                                    <div class="d-md-none w-100">
                                        <select class="form-select form-select-sm" id="status_filter_select"
                                            aria-label="Filter status HRD">
                                            <option value="all">Semua (0)</option>
                                            <option value="atasan_final">Final Atasan (0)</option>
                                        </select>
                                    </div>
                                    <small class="text-muted" id="status_filter_info">Menampilkan: Semua</small>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>Action</th>
                                            <th>Detail</th>
                                            @foreach ($table_header as $header)
                                                <th>{{ $header->alias }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $groupedDetails = $table_detail->groupBy('id');
                                        @endphp
                                        @foreach ($groupedDetails as $details)
                                            @php
                                                $detail = $details->first();
                                                $primary = '';
                                                foreach ($table_primary as $p) {
                                                    $primary == ''
                                                        ? ($primary = $detail->{$p->field})
                                                        : ($primary = $primary . ':' . $detail->{$p->field});
                                                }
                                                $vcount = $loop->iteration;
                                                $rowBgMap = [
                                                    'draft' => '#f5f6f8',
                                                    'approved_atasan' => '#e8f7fb',
                                                    'rejected_atasan' => '#fdecef',
                                                    'approved_hrd' => '#e9f8ef',
                                                    'rejected_hrd' => '#fdecef',
                                                    'done' => '#e8f7fb',
                                                    'cancelled' => '#eceff1',
                                                ];
                                                $rowBg = $rowBgMap[$detail->status] ?? '';
                                            @endphp
                                            <tr class="spl-status-row" data-status="{{ $detail->status }}" {!! $rowBg != '' ? 'style="--row-bg:' . $rowBg . ';"' : '' !!}>
                                                <td>{{ $vcount }}</td>
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button type="button" class="btn btn-sm btn-primary mb-0"
                                                            title="View Detail"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($primary)) }}'">
                                                            <i class="fas fa-eye"></i> View
                                                        </button>
                                                    </div>
                                                </td>
                                                <td class="text-sm font-weight-normal detail-cell">
                                                    <details class="spl-detail-dropdown">
                                                        <summary>
                                                            <span class="detail-label-wrap">
                                                                <span class="detail-label">{{ $details->count() }} detail
                                                                    lembur</span>
                                                                <span class="detail-note">Klik untuk menampilkan detail</span>
                                                            </span>
                                                            <span class="detail-arrow"><i
                                                                    class="fas fa-chevron-down"></i></span>
                                                        </summary>
                                                        <div class="spl-detail-panel">
                                                            <div class="spl-mini-table-wrap">
                                                                <table class="table table-sm mb-0 spl-mini-table">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>No</th>
                                                                            <th>NIK</th>
                                                                            <th>Nama</th>
                                                                            <th>Departemen</th>
                                                                            <th>Tanggal</th>
                                                                            <th>Jam</th>
                                                                            <th>Durasi</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach ($details as $d)
                                                                            <tr>
                                                                                <td>{{ $loop->iteration }}</td>
                                                                                <td>{{ $d->detail_nik ?? '-' }}</td>
                                                                                <td>{{ $d->detail_nama ?? '-' }}</td>
                                                                                <td>{{ $d->detail_departemen ?? '-' }}</td>
                                                                                <td>{{ $d->tanggal_lembur ? \Carbon\Carbon::parse($d->tanggal_lembur)->format('j-M-Y') : '-' }}
                                                                                </td>
                                                                                <td>{{ $d->jam_mulai ? \Carbon\Carbon::parse($d->jam_mulai)->format('H:i') : '-' }}
                                                                                    -
                                                                                    {{ $d->jam_selesai ? \Carbon\Carbon::parse($d->jam_selesai)->format('H:i') : '-' }}
                                                                                </td>
                                                                                <td>{{ $d->jam_lembur ?? '-' }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </details>
                                                </td>
                                                @foreach ($table_header as $field)
                                                    @php $string = $field->field; @endphp
                                                    @if ($field->type == 'join')
                                                        <td class="text-sm font-weight-normal">
                                                            @if ($field->query != '')
                                                                @php
                                                                    $q = $field->query;
                                                                    preg_match_all("/\[(\w+)\]/", $q, $matches);
                                                                    foreach ($matches[1] as $m) {
                                                                        $q = str_replace("[$m]", $detail->$m ?? '', $q);
                                                                    }
                                                                    $data_query = DB::select($q);
                                                                @endphp
                                                                @foreach ($data_query as $qr)
                                                                    @php $arr = array_values((array) $qr); @endphp
                                                                    {{ $arr[0] ?? '' }}
                                                                @endforeach
                                                            @endif
                                                        </td>
                                                    @elseif ($field->type == 'enum')
                                                        <td class="text-sm font-weight-normal">
                                                            @php
                                                                $rawValue = $detail->$string;
                                                                $labelValue = $rawValue;

                                                                if ($field->query != '') {
                                                                    $data_query = DB::select($field->query);
                                                                    foreach ($data_query as $qr) {
                                                                        $arr = array_values((array) $qr);
                                                                        if ($rawValue == ($arr[0] ?? null)) {
                                                                            $labelValue = $arr[1] ?? $rawValue;
                                                                            break;
                                                                        }
                                                                    }
                                                                }

                                                                $statusMap = [
                                                                    'approved_atasan' => '<span class="badge" style="background-color:#17a2b8;color:#fff;">Approved Atasan (Final)</span>',
                                                                    'rejected_atasan' => '<span class="badge" style="background-color:#dc3545;color:#fff;">Rejected Atasan (Final)</span>',
                                                                    'approved_hrd' => '<span class="badge" style="background-color:#28a745;color:#fff;">Approved HRD (Legacy)</span>',
                                                                    'rejected_hrd' => '<span class="badge" style="background-color:#b02a37;color:#fff;">Rejected HRD (Legacy)</span>',
                                                                    'done' => '<span class="badge" style="background-color:#0d6efd;color:#fff;">Done</span>',
                                                                ];
                                                            @endphp

                                                            @if (strtolower($string) == 'status')
                                                                {!! $statusMap[$rawValue] ?? '<span class="badge" style="background-color:#6c757d;color:#fff;">' . e($rawValue) . '</span>' !!}
                                                            @else
                                                                {{ $labelValue }}
                                                            @endif
                                                        </td>
                                                    @elseif ($field->type == 'date')
                                                        <td class="text-sm font-weight-normal">
                                                            {{ $detail->$string ? \Carbon\Carbon::parse($detail->$string)->format('j-M-Y') : '' }}
                                                        </td>
                                                    @else
                                                        <td class="text-sm font-weight-normal">{{ $detail->$string }}</td>
                                                    @endif
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function collapseAllDetailDropdowns() {
            document.querySelectorAll('.spl-detail-dropdown[open]').forEach(function (el) {
                el.removeAttribute('open');
            });
        }

        $(document).ready(function () {
            let hrdStatusFilter = 'all';
            const tableId = 'list_{{ $dmenu }}';

            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (settings.nTable.id !== tableId) {
                    return true;
                }

                if (hrdStatusFilter === 'all') {
                    return true;
                }

                const rowNode = settings.aoData[dataIndex]?.nTr;
                if (!rowNode) {
                    return true;
                }

                const status = (rowNode.getAttribute('data-status') || '').toLowerCase();
                if (hrdStatusFilter === 'atasan_final') {
                    return status === 'approved_atasan' || status === 'rejected_atasan' || status === 'done';
                }

                return true;
            });

            const table = $('#' + tableId).DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "order": [
                    [0, 'desc']
                ]
            });

            function getStatusCounts() {
                const counts = {
                    all: 0,
                    atasan_final: 0,
                };

                $('#' + tableId + ' > tbody > tr.spl-status-row').each(function () {
                    const status = (this.getAttribute('data-status') || '').toLowerCase();
                    counts.all += 1;
                    if (status === 'approved_atasan' || status === 'rejected_atasan' || status === 'done') {
                        counts.atasan_final += 1;
                    }
                });

                return counts;
            }

            function updateFilterCountUi(counts) {
                $('#count-all').text(counts.all);
                $('#count-atasan-final').text(counts.atasan_final);

                $('#status_filter_select option[value="all"]').text(`Semua (${counts.all})`);
                $('#status_filter_select option[value="atasan_final"]').text(`Final Atasan (${counts.atasan_final})`);
            }

            function updateFilterInfo() {
                const labels = {
                    all: 'Semua',
                    atasan_final: 'Final Atasan',
                };

                const shownRows = table.rows({ filter: 'applied' }).count();
                $('#status_filter_info').text(`Menampilkan: ${labels[hrdStatusFilter] || 'Semua'} (${shownRows} baris)`);
            }

            function applyStatusFilter(filterKey) {
                hrdStatusFilter = filterKey || 'all';
                $('.status-filter-btn').removeClass('active');
                $(`.status-filter-btn[data-filter="${hrdStatusFilter}"]`).addClass('active');
                $('#status_filter_select').val(hrdStatusFilter);
                table.draw();
                updateFilterInfo();
            }

            const counts = getStatusCounts();
            updateFilterCountUi(counts);
            applyStatusFilter('all');

            $('.status-filter-btn').on('click', function () {
                applyStatusFilter($(this).data('filter'));
            });

            $('#status_filter_select').on('change', function () {
                applyStatusFilter($(this).val());
            });

            table.on('draw', function () {
                collapseAllDetailDropdowns();
                updateFilterInfo();
            });
        });
    </script>
@endsection