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

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

    <style>
        /* Preserve row background colors for different statuses */
        #list_{{ $dmenu }} tbody tr.status-approved td {
            background-color: #cfe9e9 !important;
        }

        #list_{{ $dmenu }} tbody tr.status-need-approval td {
            background-color: #e8f5e9 !important;
        }

        #list_{{ $dmenu }} tbody tr.status-ready-for-approval td {
            background-color: #fff3cd !important;
        }

        #list_{{ $dmenu }} tbody tr.status-in-progress td {
            background-color: #f8f9fa !important;
        }

        /* Maintain colors even on hover with slightly darker shades */
        #list_{{ $dmenu }} tbody tr.status-approved:hover td {
            background-color: #b8dede !important;
        }

        #list_{{ $dmenu }} tbody tr.status-need-approval:hover td {
            background-color: #d4edd8 !important;
        }

        #list_{{ $dmenu }} tbody tr.status-ready-for-approval:hover td {
            background-color: #ffe8a1 !important;
        }

        #list_{{ $dmenu }} tbody tr.status-in-progress:hover td {
            background-color: #e2e6ea !important;
        }

        /* Override DataTables selected/active row styles */
        #list_{{ $dmenu }} tbody tr.status-approved.selected td,
        #list_{{ $dmenu }} tbody tr.status-approved.odd.selected td,
        #list_{{ $dmenu }} tbody tr.status-approved.even.selected td {
            background-color: #cfe9e9 !important;
        }

        #list_{{ $dmenu }} tbody tr.status-need-approval.selected td,
        #list_{{ $dmenu }} tbody tr.status-need-approval.odd.selected td,
        #list_{{ $dmenu }} tbody tr.status-need-approval.even.selected td {
            background-color: #e8f5e9 !important;
        }

        #list_{{ $dmenu }} tbody tr.status-ready-for-approval.selected td,
        #list_{{ $dmenu }} tbody tr.status-ready-for-approval.odd.selected td,
        #list_{{ $dmenu }} tbody tr.status-ready-for-approval.even.selected td {
            background-color: #fff3cd !important;
        }

        #list_{{ $dmenu }} tbody tr.status-in-progress.selected td,
        #list_{{ $dmenu }} tbody tr.status-in-progress.odd.selected td,
        #list_{{ $dmenu }} tbody tr.status-in-progress.even.selected td {
            background-color: #f8f9fa !important;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row align-items-center px-4 pt-3">
                            <div class="card-header col-md-auto p-0">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>

                            <div class="col-12 mt-2">
                                @include('components.alert')
                            </div>
                        </div>

                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="d-flex justify-content-between align-items-center nav-wrapper">
                                    {{-- Left side filters --}}
                                    <div class="d-flex gap-2">
                                        <div style="min-width: 200px;">
                                            <form method="GET" action="{{ url($url_menu) }}" class="d-inline">
                                                {{-- keep other filters --}}
                                                <input type="hidden" name="search" value="{{ request('search') }}">
                                                <input type="hidden" name="per" value="{{ request('per') }}">
                                                <input type="hidden" name="checked" value="{{ request('checked') }}">
                                                <input type="hidden" name="status" value="{{ request('status') }}">
                                                <select name="dept" class="form-select form-select-sm"
                                                    onchange="this.form.submit()">
                                                    <option value="all"
                                                        {{ request('dept') === 'all' || !request('dept') ? 'selected' : '' }}>
                                                        Semua Departemen
                                                    </option>
                                                    @if (!empty($departments))
                                                        @foreach ($departments as $dept)
                                                            <option value="{{ $dept->id }}"
                                                                {{ (string) request('dept') === (string) $dept->id ? 'selected' : '' }}>
                                                                {{ $dept->nama }}
                                                            </option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </form>
                                        </div>
                                        <div style="min-width: 180px;">
                                            <form method="GET" action="{{ url($url_menu) }}" class="d-inline">
                                                {{-- keep other filters --}}
                                                <input type="hidden" name="search" value="{{ request('search') }}">
                                                <input type="hidden" name="per" value="{{ request('per') }}">
                                                <input type="hidden" name="dept" value="{{ request('dept') }}">
                                                <input type="hidden" name="checked" value="{{ request('checked') }}">
                                                <select name="status" class="form-select form-select-sm"
                                                    onchange="this.form.submit()">
                                                    <option value="all"
                                                        {{ request('status') === 'all' || !request('status') ? 'selected' : '' }}>
                                                        Semua Status
                                                    </option>
                                                    <option value="sedang_berjalan"
                                                        {{ request('status') === 'sedang_berjalan' ? 'selected' : '' }}>
                                                        Sedang Berjalan
                                                    </option>
                                                    <option value="belum_dicek"
                                                        {{ request('status') === 'belum_dicek' ? 'selected' : '' }}>
                                                        Belum Dicek
                                                    </option>
                                                    <option value="sudah_dicek"
                                                        {{ request('status') === 'sudah_dicek' ? 'selected' : '' }}>
                                                        Sudah Dicek
                                                    </option>
                                                </select>
                                            </form>
                                        </div>
                                    </div>

                                    {{-- Right side period filter --}}
                                    <div style="min-width: 250px;">
                                        <form id="periodFilterForm" method="GET" action="{{ url($url_menu) }}">
                                            {{-- keep other filters --}}
                                            <input type="hidden" name="search" value="{{ request('search') }}">
                                            <input type="hidden" name="dept" value="{{ request('dept') }}">
                                            <input type="hidden" name="checked" value="{{ request('checked') }}">
                                            <input type="hidden" name="status" value="{{ request('status') }}">

                                            <div class="input-group input-group-sm">
                                                <input type="text" name="per_display" class="form-control"
                                                    value="{{ $activePeriod ? 'Periode ' . $activePeriod->quarter . ' - ' . $activePeriod->year : '' }}"
                                                    readonly>
                                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                    data-bs-target="#searchModalper"
                                                    style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>
                                            <!-- Hidden field for actual period ID -->
                                            <input type="hidden" name="per" id="per_id"
                                                value="{{ $selectedPerId }}">
                                        </form>

                                        <!-- Period Search Modal -->
                                        <div class="modal fade" id="searchModalper" tabindex="-1" role="dialog"
                                            aria-labelledby="searchModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="searchModalLabel">Pilih Periode
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body table-responsive">
                                                        <table class="display table" id="list_{{ $dmenu }}_per">
                                                            <thead class="thead-light"
                                                                style="background-color: #00b7bd4f;">
                                                                <tr>
                                                                    <th width="20px">Action</th>
                                                                    <th>Tahun</th>
                                                                    <th>Periode</th>
                                                                    <th>Rentang Periode</th>
                                                                    <th>Status</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @if (!empty($allPeriods))
                                                                    @foreach ($allPeriods as $period)
                                                                        <tr>
                                                                            <td width="20px">
                                                                                <span class="btn badge bg-primary badge-lg"
                                                                                    onclick="select_modalper('{{ $period->id }}', 'Periode {{ $period->quarter }} - {{ $period->year }}')">
                                                                                    <i class="bi bi-check-circle me-1"></i>
                                                                                    Pilih
                                                                                </span>
                                                                            </td>
                                                                            <td class="font-weight-normal text-sm">
                                                                                {{ $period->year }}</td>
                                                                            <td class="font-weight-normal text-sm">
                                                                                Periode {{ $period->quarter }}</td>
                                                                            <td class="font-weight-normal text-sm">
                                                                                {{ $period->period_range }}</td>
                                                                            <td class="font-weight-normal text-sm">
                                                                                <span
                                                                                    class="badge badge-sm bg-{{ $period->status == 'active' ? 'success' : ($period->status == 'prep' ? 'warning' : 'secondary') }}">
                                                                                    @switch($period->status)
                                                                                        @case('active')
                                                                                            Aktif
                                                                                        @break

                                                                                        @case('prep')
                                                                                            Persiapan
                                                                                        @break

                                                                                        @case('locked')
                                                                                            Terkunci
                                                                                        @break

                                                                                        @case('injury')
                                                                                            Injury
                                                                                        @break

                                                                                        @default
                                                                                            Tidak Diketahui
                                                                                    @endswitch
                                                                                </span>
                                                                            </td>
                                                                        </tr>
                                                                    @endforeach
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="display table" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                        <tr>
                                            <th width="100">Action</th>
                                            <th width="50">No</th>
                                            <th>Karyawan</th>
                                            <th>Posisi (Periode)</th>
                                            <th>Departemen</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($rows as $i => $r)
                                            @php
                                            $keepQuery = request()->query();
    unset($keepQuery['export']);

    $filterQueryString = http_build_query($keepQuery);
                                                $status = $r->master_status ?? 'in_progress';
                                                $progress = $r->evaluation_progress ?? 'not_started';
                                                $isPeriodLocked = isset($periodStatus) && $periodStatus === 'locked';

                                                // Row styling based on status - 4-status system
                                                $rowStyle = '';
                                                $rowClass = '';
                                                if ($status === 'approved') {
                                                    $rowClass = 'status-approved';
                                                } elseif ($status === 'need_approval') {
                                                    $rowClass = 'status-need-approval';
                                                } elseif ($status === 'ready_for_approval') {
                                                    $rowClass = 'status-ready-for-approval';
                                                } elseif ($status === 'in_progress' || !$status) {
                                                    $rowClass = 'status-in-progress';
                                                }

                                                // Combined status for display - 4-status system
                                                $combinedStatus = $progress;

                                                // Determine status based on master status
                                                if ($status === 'approved') {
                                                    $combinedStatus = 'approved';
                                                } elseif ($status === 'need_approval') {
                                                    // Need approval after admin revision → Sudah Dicek
                                                    $combinedStatus = 'sudah_dicek';
                                                } elseif ($status === 'ready_for_approval') {
                                                    // Supervisor completed → Belum Dicek
                                                    $combinedStatus = 'belum_dicek';
                                                } else {
                                                    // in_progress or no master → Sedang Berjalan
                                                    $combinedStatus = 'sedang_berjalan';
                                                }

                                                // Status badge styling (4-status system)
                                                $statusBadge = [
                                                    'approved' => ['class' => 'bg-primary', 'text' => 'Approved'],
                                                    'sudah_dicek' => [
                                                        'class' => 'bg-success',
                                                        'text' => 'Sudah Dicek',
                                                    ],
                                                    'belum_dicek' => [
                                                        'class' => 'bg-warning',
                                                        'text' => 'Belum Dicek',
                                                    ],
                                                    'sedang_berjalan' => [
                                                        'class' => 'bg-info',
                                                        'text' => 'Sedang Berjalan',
                                                    ],
                                                ][$combinedStatus] ?? [
                                                    'class' => 'bg-secondary',
                                                    'text' => ucwords(str_replace('_', ' ', $combinedStatus)),
                                                ];

                                                $progressText = "{$r->submitted_months}/{$r->required_evaluation_months} bulan";
                                                if ($r->rest_months > 0) {
                                                    $progressText .= " ({$r->rest_months} cuti)";
                                                }

                                                // Prepare position history display
                                                $positionDisplay = '';
                                                $departmentDisplay = '';

                                                $positions = [];
                                                $departments = [];
                                                foreach ($r->position_history as $position) {
                                                    $positions[] = $position->position_name;
                                                    $departments[] = $position->department_name;
                                                }
                                                $positionDisplay = implode('<br>', array_unique($positions));
                                                $departmentDisplay = implode('<br>', array_unique($departments));
                                            @endphp

                                            <tr class="{{ $rowClass }}">
                                                <td class="font-weight-normal text-sm">
                                                    <div class="btn-group">
                                                        @if ($authorize && $authorize->edit == '1')
                                                            @if ($r->master_id && $status === 'approved')
                                                                {{-- Employee has assignment and evaluation master and it's approved - show View button --}}
                                                                <button class="btn btn-secondary btn-sm mb-0 px-3"
                                                                    type="button"
                                                                    title="Lihat Detail (Read Only - Sudah Disetujui)"
                                                                    onclick="location.href='{{ url($url_menu . '/show/' . encrypt($r->master_id)) }}{{ $filterQueryString ? '?' . $filterQueryString : '' }}'">
                                                                    <i class="fas fa-eye"></i>
                                                                    <span class="font-weight-bold"> Lihat</span>
                                                                </button>
                                                            @else
                                                                {{-- All other statuses - show Detail button (unlock is on detail page) --}}
                                                                @php
                                                                    // For incomplete status, ensure master record exists
                                                                    $detailMasterId = $r->master_id;
                                                                    if (!$detailMasterId) {
                                                                        $incompleteMaster = DB::table(
                                                                            'trs_pa_evaluation_master',
                                                                        )
                                                                            ->where('employee_nik', $r->employee_nik)
                                                                            ->where('period_id', $activePeriod->id)
                                                                            ->first();

                                                                        if (!$incompleteMaster) {
                                                                            // Create master record if it doesn't exist
                                                                            $detailMasterId = DB::table(
                                                                                'trs_pa_evaluation_master',
                                                                            )->insertGetId([
                                                                                'employee_nik' => $r->employee_nik,
                                                                                'period_id' => $activePeriod->id,
                                                                                'status' => 'in_progress',
                                                                                'isactive' => '1',
                                                                                'created_at' => now(),
                                                                                'updated_at' => now(),
                                                                                'user_create' =>
                                                                                    auth()->user()->username ??
                                                                                    auth()->user()->id,
                                                                                'user_update' =>
                                                                                    auth()->user()->username ??
                                                                                    auth()->user()->id,
                                                                            ]);
                                                                        } else {
                                                                            $detailMasterId = $incompleteMaster->id;
                                                                        }
                                                                    }
                                                                @endphp
                                                                <button class="btn btn-primary btn-sm mb-0 px-3"
                                                                    type="button" title="Lihat Detail"
                                                                    onclick="location.href='{{ url($url_menu . '/edit/' . encrypt($detailMasterId ?? $r->employee_nik)) }}{{ $filterQueryString ? '?' . $filterQueryString : '' }}'">
                                                                    <i class="fas fa-eye"></i>
                                                                    <span class="font-weight-bold"> Detail</span>
                                                                </button>
                                                            @endif
                                                        @endif
                                                    </div>
                                                </td>
                                                <td>{{ ($rows->currentPage() - 1) * $rows->perPage() + $loop->iteration }}
                                                </td>
                                                <td class="text-sm">
                                                    <div class="font-weight-bold text-dark">{{ $r->employee_name }} -
                                                        {{ $r->employee_nik }}</div>
                                                </td>
                                                <td class="text-sm">{!! $positionDisplay !!}</td>
                                                <td class="text-sm">{!! $departmentDisplay !!}</td>
                                                <td class="text-sm">
                                                    <span class="badge {{ $statusBadge['class'] }}"
                                                        @if (isset($statusBadge['style'])) style="{{ $statusBadge['style'] }}" @endif>{{ $statusBadge['text'] }}</span>
                                                    @if ($r->has_late_unlock)
                                                        <span class="badge bg-danger ms-1 text-white">TERLAMBAT</span>
                                                    @endif
                                                    @if ($r->master_id)
                                                        <div class="small text-muted mt-1">{{ $progressText }}</div>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                @php
                                    $isPaginator = $rows instanceof \Illuminate\Pagination\AbstractPaginator;
                                    $totalData = $isPaginator ? $rows->total() : $rows->count();
                                    $firstItem = $isPaginator ? $rows->firstItem() ?? 0 : ($totalData > 0 ? 1 : 0);
                                    $lastItem = $isPaginator ? $rows->lastItem() ?? $totalData : $totalData;
                                @endphp

                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        @if ($totalData > 0)
                                            Data {{ $firstItem }} - {{ $lastItem }} dari {{ $totalData }} data.
                                        @else
                                            Tidak ada data.
                                        @endif
                                    </div>
                                    @if ($isPaginator)
                                        <div>
                                            {{ $rows->appends(request()->query())->links('pagination::bootstrap-4') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        {{-- Legend --}}
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    <small class="text-muted">
                                        <strong>Keterangan Status:</strong>
                                        <span class="badge bg-info">Sedang Berjalan</span> = Evaluasi sedang berjalan |
                                        <span class="badge bg-warning">Belum Dicek</span> = Selesai dari supervisor,
                                        menunggu admin cek |
                                        <span class="badge bg-success">Sudah Dicek</span> / <span
                                            class="badge bg-primary">Approved</span> = Sudah dicek admin / disetujui
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            // Check if DataTable is already initialized
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            // Set table into datatables
            const table = $('#list_{{ $dmenu }}').DataTable({
                paging: false,
                info: false,
                searching: true,
                responsive: true,
                ordering: false, // Disable DataTables ordering to preserve server-side order
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    emptyTable: "Tidak ada data untuk ditampilkan.",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                buttons: [{
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        action: function() {
                            // Arahkan ke server untuk ekspor Excel
                            const params = new URLSearchParams(window.location.search);
                            params.set('export', 'excel');
                            window.location.href = "{{ url($url_menu) }}?" + params.toString();
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        action: function() {
                            // Arahkan ke server untuk ekspor PDF
                            const params = new URLSearchParams(window.location.search);
                            params.set('export', 'pdf');
                            window.location.href = "{{ url($url_menu) }}?" + params.toString();
                        }
                    },
                ],
                initComplete: function() {
                    // Tambahkan custom search bar
                    var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end">
                            <form method="GET" action="{{ url($url_menu) }}" class="d-flex">
                                <input type="hidden" name="per" value="{{ request('per') }}">
                                <input type="hidden" name="dept" value="{{ request('dept') }}">
                                <input type="hidden" name="checked" value="{{ request('checked') }}">
                                <input type="hidden" name="status" value="{{ request('status') }}">
                                <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                            </form>
                        </div>
                    `;
                    $('.dataTables_filter').remove(); // Hapus input pencarian default DataTables
                    $(searchBarHtml).insertAfter('.dt-buttons'); // Tambahkan search bar setelah tombol
                }
            });

            // Set color button datatables
            $('.dt-button').addClass('btn btn-secondary');
            $('.dt-button').removeClass('dt-button');

            // Check authorize button datatables
            @if ($authorize)
                @if (isset($authorize->excel) && $authorize->excel == '0')
                    $('.buttons-excel').remove();
                @endif
                @if (isset($authorize->pdf) && $authorize->pdf == '0')
                    $('.buttons-pdf').remove();
                @endif
                @if (isset($authorize->print) && $authorize->print == '0')
                    $('.buttons-print').remove();
                @endif
            @endif

            // Initialize period search modal DataTable
            $('#list_{{ @$dmenu }}_per').DataTable({
                "pageLength": 10,
                "searching": true,
                "ordering": true,
                "info": true,
                "lengthChange": false
            });
        });

        // Function to select period from modal
        function select_modalper(id, name) {
            $('input[name="per_display"]').val(name);
            $('input[name="per"]').val(id);
            $('#searchModalper').modal('hide');

            // Auto-submit the specific period filter form
            $('#periodFilterForm').submit();
        }
    </script>
@endpush