@extends('layouts.adminlte')

@section('title', 'REVIEW CANDIDATE SPL')
@section('page_title', 'REVIEW CANDIDATE SPL')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
<style>
    .candidate-stat {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 14px;
        padding: 1rem 1.1rem;
        background: #fff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        height: 100%;
    }
    .candidate-stat .label {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #64748b;
    }
    .candidate-stat .value {
        font-size: 1.9rem;
        font-weight: 700;
        line-height: 1.1;
        color: #0f172a;
    }
    .candidate-stat .hint {
        font-size: .84rem;
        color: #64748b;
    }
    .candidate-type-badge {
        min-width: 110px;
    }
    .candidate-warning {
        color: #b45309;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Review Candidate SPL</h3>
        <div class="d-flex gap-2">
            <a href="{{ route('surat_perintah_lembur.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>Kembali ke SPL
            </a>
        </div>
    </div>
    <div class="card-body">
        <div class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label">Tanggal Dari</label>
                <input type="date" class="form-control" id="filterDateFrom">
            </div>
            <div class="col-md-2">
                <label class="form-label">Tanggal Sampai</label>
                <input type="date" class="form-control" id="filterDateTo">
            </div>
            <div class="col-md-3">
                <label class="form-label">Cari Karyawan</label>
                <input type="text" class="form-control" id="filterSearch" placeholder="Kode / nama / group...">
            </div>
            <div class="col-md-2">
                <label class="form-label">Group</label>
                <select class="form-select" id="filterGroup">
                    <option value="">- Semua Group -</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Group Cetak</label>
                <select class="form-select" id="filterExportGroup">
                    <option value="">- Semua Group Cetak -</option>
                </select>
            </div>
            <div class="col-md-1 d-grid">
                <button class="btn btn-primary" id="btnReloadCandidates" type="button">Muat</button>
            </div>
        </div>
        <div class="d-flex flex-wrap gap-2 mt-3">
            <button class="btn btn-sm btn-primary btn-candidate-filter active" data-filter="all" type="button">Semua Kandidat</button>
            <button class="btn btn-sm btn-outline-primary btn-candidate-filter" data-filter="need_spl" type="button">Need SPL</button>
            <button class="btn btn-sm btn-outline-primary btn-candidate-filter" data-filter="need_extend" type="button">Need Extend</button>
            <span class="badge text-bg-secondary align-self-center" id="candidateFilterBadge">Filter: Semua Kandidat</span>
        </div>
        <div class="alert alert-info mt-3 mb-0">
            <div class="fw-semibold">Tujuan halaman ini</div>
            <div class="small mb-0">
                Operator cukup review kandidat yang dideteksi dari attendance aktual, lalu generate draft SPL massal.
                Versi awal ini fokus untuk <strong>Normal / NoRest-1 / NoRest-2</strong>. SPL special tetap dibuat dari halaman utama supaya rule bonusnya tetap terkontrol.
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-4">
        <div class="candidate-stat">
            <div class="label">Total Kandidat</div>
            <div class="value" id="statTotal">0</div>
            <div class="hint">Semua kandidat yang lolos filter saat ini.</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="candidate-stat">
            <div class="label">Need SPL</div>
            <div class="value" id="statNeedSpl">0</div>
            <div class="hint">Ada attendance overtime, tapi belum ada SPL aktif.</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="candidate-stat">
            <div class="label">Need Extend</div>
            <div class="value" id="statNeedExtend">0</div>
            <div class="hint">SPL approved sudah ada, tapi actual pulang lebih lama.</div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <h3 class="card-title m-0">Generate Draft Otomatis</h3>
    </div>
    <div class="card-body">
        <div class="row g-2 align-items-end">
            <div class="col-md-4">
                <label class="form-label">Flow Approval</label>
                <select class="form-select" id="generateFlowId"></select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Tanggal Pengajuan</label>
                <input type="date" class="form-control" id="generateRequestDate">
            </div>
            <div class="col-md-3">
                <label class="form-label">Jenis SPL Draft</label>
                <select class="form-select" id="generateOvertimeType"></select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Catatan Prefix (opsional)</label>
                <input type="text" class="form-control" id="generateReasonPrefix" placeholder="Contoh: Auto review kandidat.">
            </div>
            <div class="col-md-12">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="generateAutoSubmit">
                    <label class="form-check-label" for="generateAutoSubmit">Auto submit setelah draft dibuat</label>
                </div>
                <div class="small text-muted">Kalau aktif, draft langsung masuk flow approval. Kalau nonaktif, draft dibuat dulu untuk dicek ulang operator.</div>
            </div>
        </div>
        <div class="d-flex flex-wrap gap-2 mt-3">
            <button class="btn btn-success" id="btnGenerateSelected" type="button">
                <i class="fas fa-magic me-1"></i>Generate Draft dari Pilihan
            </button>
            <button class="btn btn-outline-secondary" id="btnClearSelection" type="button">Clear Selection</button>
            <span class="badge text-bg-primary align-self-center" id="selectedCandidateCount">0 kandidat dipilih</span>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title m-0">Daftar Kandidat</h3>
        <div class="small text-muted">Data diambil dari attendance review aktual dan dibandingkan dengan SPL aktif pada tanggal yang sama.</div>
    </div>
    <div class="card-body">
        <table class="table table-striped table-hover w-100" id="candidateTable">
            <thead>
                <tr>
                    <th style="width:32px;"><input type="checkbox" id="checkAllCandidates"></th>
                    <th>Tipe</th>
                    <th>Tanggal</th>
                    <th>Karyawan</th>
                    <th>Group</th>
                    <th>Aktual</th>
                    <th>Usulan Jam SPL</th>
                    <th>SPL Saat Ini</th>
                    <th>No Job</th>
                    <th>Review</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
    let refs = { karyawans: [], flows: [], splTypes: [] };
    let candidateRows = [];
    let candidateTable = null;
    let candidateFilterMode = 'all';

    function buildGroupOptions() {
        const groups = [...new Set((refs.karyawans || []).map(x => String(x.employee_group || '').trim()).filter(Boolean))].sort((a, b) => a.localeCompare(b, 'id'));
        const exportGroups = [...new Set((refs.karyawans || []).map(x => String(x.export_employee_group || '').trim()).filter(Boolean))].sort((a, b) => a.localeCompare(b, 'id'));
        $('#filterGroup').append(groups.map(x => `<option value="${x}">${x}</option>`).join(''));
        $('#filterExportGroup').append(exportGroups.map(x => `<option value="${x}">${x}</option>`).join(''));
    }

    function buildGenerateTypeOptions() {
        const allowed = ['normal', 'no_rest', 'no_rest_skip_break'];
        const options = (refs.splTypes || [])
            .filter(x => (x.type || 'option') === 'option' && allowed.includes(String(x.value || '')))
            .map(x => `<option value="${x.value}">${x.label}</option>`)
            .join('');
        $('#generateOvertimeType').html(options);
    }

    function applyCandidateFilterUi() {
        $('.btn-candidate-filter').removeClass('active btn-primary').addClass('btn-outline-primary');
        $(`.btn-candidate-filter[data-filter="${candidateFilterMode}"]`).removeClass('btn-outline-primary').addClass('active btn-primary');
        const labels = {
            all: 'Semua Kandidat',
            need_spl: 'Need SPL',
            need_extend: 'Need Extend',
        };
        $('#candidateFilterBadge').text(`Filter: ${labels[candidateFilterMode] || 'Semua Kandidat'}`);
    }

    function getSelectedCandidateKeys() {
        return $('#candidateTable tbody .candidate-row-check:checked').map(function () {
            return $(this).val();
        }).get();
    }

    function syncSelectedCount() {
        const selected = getSelectedCandidateKeys();
        $('#selectedCandidateCount').text(`${selected.length} kandidat dipilih`);
        const allChecks = $('#candidateTable tbody .candidate-row-check').length;
        $('#checkAllCandidates').prop('checked', allChecks > 0 && selected.length === allChecks);
    }

    function formatDuration(hours) {
        const numeric = Number(hours || 0);
        if (!Number.isFinite(numeric) || numeric <= 0) return '-';
        return `${numeric.toFixed(2)} jam`;
    }

    function renderCandidateTable() {
        if (candidateTable) {
            candidateTable.destroy();
        }
        const tbodyHtml = candidateRows.length ? candidateRows.map(row => {
            const typeBadge = row.candidate_type === 'need_extend'
                ? '<span class="badge text-bg-warning candidate-type-badge">Need Extend</span>'
                : '<span class="badge text-bg-primary candidate-type-badge">Need SPL</span>';
            const employeeHtml = `
                <div class="fw-semibold">${row.employee_code || '-'} - ${row.employee_name || '-'}</div>
                <div class="small text-muted">${row.export_employee_group || row.employee_group || '-'}</div>
            `;
            const actualHtml = `
                <div>Shift End: <span class="fw-semibold">${row.planned_shift_end || '-'}</span></div>
                <div>Actual Out: <span class="fw-semibold">${row.actual_out || '-'}</span></div>
                <div class="small text-muted">OT: ${formatDuration(row.overtime_hours)}</div>
            `;
            const suggestedHtml = `
                <div>${row.suggested_start_time || '-'} - ${row.suggested_end_time || '-'}</div>
                <div class="small text-muted">${row.candidate_type === 'need_extend' ? 'Tambahan jam dari SPL approved' : 'Draft SPL baru dari actual attendance'}</div>
            `;
            const existingHtml = row.existing_document_no
                ? `<div class="fw-semibold">${row.existing_document_no}</div><div class="small text-muted">${row.existing_end_time || '-'} | ${row.existing_status || '-'}</div>`
                : '<span class="text-muted">Belum ada</span>';
            const jobHtml = row.has_assignment
                ? `<div>${row.job_label || '-'}</div>`
                : '<span class="candidate-warning">Belum ada assignment</span>';
            const reviewHtml = `
                <div>Status: <span class="fw-semibold">${row.review_status || '-'}</span></div>
                <div class="small ${row.review_is_approved ? 'text-success' : 'text-muted'}">${row.review_is_approved ? 'Review approved' : 'Review belum approved'}</div>
            `;
            return `
                <tr>
                    <td><input type="checkbox" class="form-check-input candidate-row-check" value="${row.candidate_key}"></td>
                    <td>${typeBadge}</td>
                    <td>${row.work_date || '-'}</td>
                    <td>${employeeHtml}</td>
                    <td>
                        <div>${row.employee_group || '-'}</div>
                        <div class="small text-muted">${row.export_employee_group || '-'}</div>
                    </td>
                    <td>${actualHtml}</td>
                    <td>${suggestedHtml}</td>
                    <td>${existingHtml}</td>
                    <td>${jobHtml}</td>
                    <td>${reviewHtml}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-success btn-generate-one" data-key="${row.candidate_key}" type="button">Generate</button>
                    </td>
                </tr>
            `;
        }).join('') : '';

        $('#candidateTable tbody').html(tbodyHtml);
        candidateTable = $('#candidateTable').DataTable({
            pageLength: 25,
            order: [[2, 'desc'], [1, 'asc']],
            columnDefs: [
                { orderable: false, targets: [0, 10] },
                { searchable: false, targets: [0, 10] },
            ],
            language: {
                emptyTable: 'Tidak ada kandidat SPL pada filter ini.',
            },
        });
        syncSelectedCount();
    }

    function updateStats(meta = {}) {
        $('#statTotal').text(meta.total || 0);
        $('#statNeedSpl').text(meta.need_spl || 0);
        $('#statNeedExtend').text(meta.need_extend || 0);
    }

    function loadRefs() {
        return $.getJSON('{{ route('surat_perintah_lembur.refs') }}').done(function (resp) {
            refs = resp.data || resp || refs;
            buildGroupOptions();
            const flowOptions = (refs.flows || []).map(x => `<option value="${x.id}">${x.code} - ${x.name}</option>`).join('');
            $('#generateFlowId').html(flowOptions);
            @if(!empty($defaultFlowId))
            $('#generateFlowId').val('{{ (int) $defaultFlowId }}');
            @endif
            buildGenerateTypeOptions();
        });
    }

    function loadCandidates() {
        const payload = {
            date_from: $('#filterDateFrom').val(),
            date_to: $('#filterDateTo').val(),
            search: $('#filterSearch').val(),
            employee_group: $('#filterGroup').val(),
            export_employee_group: $('#filterExportGroup').val(),
            candidate_type: candidateFilterMode,
        };
        return $.getJSON('{{ route('surat_perintah_lembur.review_candidate_data') }}', payload)
            .done(function (resp) {
                candidateRows = resp.data || [];
                renderCandidateTable();
                updateStats(resp.meta || {});
            })
            .fail(function (xhr) {
                Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat kandidat SPL.', 'error');
            });
    }

    function collectGenerateItems(keys) {
        const selectedSet = new Set(keys);
        return candidateRows
            .filter(row => selectedSet.has(row.candidate_key))
            .map(row => ({
                attendance_review_id: row.attendance_review_id,
                candidate_type: row.candidate_type,
            }));
    }

    function submitGenerate(keys) {
        const items = collectGenerateItems(keys);
        if (!items.length) {
            Swal.fire('Info', 'Pilih kandidat dulu.', 'info');
            return;
        }
        const payload = {
            items,
            approval_flow_id: $('#generateFlowId').val(),
            request_date: $('#generateRequestDate').val(),
            overtime_type: $('#generateOvertimeType').val(),
            auto_submit: $('#generateAutoSubmit').is(':checked') ? 1 : 0,
            reason_prefix: $('#generateReasonPrefix').val() || '',
        };
        $.ajax({
            url: '{{ route('surat_perintah_lembur.review_candidate_generate') }}',
            method: 'POST',
            data: payload,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }).done(function (resp) {
            const skipped = resp.meta?.skipped || [];
            const skipHtml = skipped.length
                ? '<div class="mt-2 text-start"><div class="fw-semibold mb-1">Skip:</div><ul class="mb-0 small text-start">' +
                    skipped.slice(0, 8).map(x => `<li>${x.employee_code ? `${x.employee_code}: ` : ''}${x.reason}</li>`).join('') +
                    (skipped.length > 8 ? `<li>... ${skipped.length - 8} lainnya</li>` : '') +
                  '</ul></div>'
                : '';
            Swal.fire({
                icon: 'success',
                title: 'Generate selesai',
                html: `<div>${resp.message || 'Selesai.'}</div>${skipHtml}`,
            });
            loadCandidates();
        }).fail(function (xhr) {
            Swal.fire('Error', xhr.responseJSON?.message || 'Generate kandidat gagal.', 'error');
        });
    }

    $(function () {
        const today = '{{ now()->format('Y-m-d') }}';
        const defaultFrom = '{{ now()->subDays(7)->format('Y-m-d') }}';
        $('#filterDateFrom').val(defaultFrom);
        $('#filterDateTo').val(today);
        $('#generateRequestDate').val(today);

        loadRefs().then(loadCandidates);
        applyCandidateFilterUi();

        $('#btnReloadCandidates').on('click', loadCandidates);
        $('#filterSearch').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                loadCandidates();
            }
        });
        $('#filterGroup, #filterExportGroup, #filterDateFrom, #filterDateTo').on('change', loadCandidates);

        $('.btn-candidate-filter').on('click', function () {
            candidateFilterMode = $(this).data('filter');
            applyCandidateFilterUi();
            loadCandidates();
        });

        $('#checkAllCandidates').on('change', function () {
            $('#candidateTable tbody .candidate-row-check').prop('checked', $(this).is(':checked'));
            syncSelectedCount();
        });

        $('#candidateTable').on('change', '.candidate-row-check', syncSelectedCount);

        $('#btnClearSelection').on('click', function () {
            $('#candidateTable tbody .candidate-row-check').prop('checked', false);
            syncSelectedCount();
        });

        $('#btnGenerateSelected').on('click', function () {
            submitGenerate(getSelectedCandidateKeys());
        });

        $('#candidateTable').on('click', '.btn-generate-one', function () {
            submitGenerate([$(this).data('key')]);
        });
    });
</script>
@endpush