@extends('layouts.adminlte')

@section('title', 'RECORD LUPA FINGER')
@section('page_title', 'RECORD LUPA FINGER')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title m-0">Filter Record</h3></div>
        <div class="card-body">
            <div class="row g-2">
                <div class="col-md-3"><label class="form-label">Profil Bulan</label><select id="fProfil" class="form-select"></select></div>
                <div class="col-md-3"><label class="form-label">Karyawan</label><select id="fKaryawan" class="form-select"></select></div>
                <div class="col-md-2"><label class="form-label">Date From</label><input type="date" id="fFrom" class="form-control"></div>
                <div class="col-md-2"><label class="form-label">Date To</label><input type="date" id="fTo" class="form-control"></div>
                <div class="col-md-1"><label class="form-label">Jenis</label><select id="fType" class="form-select"><option value="all">Semua</option><option value="in">IN</option><option value="out">OUT</option><option value="both">IN & OUT</option></select></div>
                <div class="col-md-1"><label class="form-label">Status</label><select id="fStatus" class="form-select"><option value="all">Semua</option><option value="approved">Approved</option><option value="submitted">Submitted</option><option value="in_review">Review</option><option value="draft">Draft</option><option value="rejected">Rejected</option><option value="cancelled">Cancel</option></select></div>
            </div>
            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-outline-primary" id="btnFilter"><i class="fas fa-search me-1"></i>Tampilkan</button>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-3"><div class="card border-primary"><div class="card-body"><div class="text-muted small">Total Kasus</div><h3 id="sumTotal">0</h3></div></div></div>
        <div class="col-md-3"><div class="card border-warning"><div class="card-body"><div class="text-muted small">Missing IN</div><h3 id="sumIn">0</h3></div></div></div>
        <div class="col-md-3"><div class="card border-danger"><div class="card-body"><div class="text-muted small">Missing OUT</div><h3 id="sumOut">0</h3></div></div></div>
        <div class="col-md-3"><div class="card border-dark"><div class="card-body"><div class="text-muted small">Top Karyawan</div><div id="sumTop" class="small">-</div></div></div></div>
    </div>

    <div class="card">
        <div class="card-header"><h3 class="card-title m-0">Detail Lupa Finger</h3></div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover align-middle w-100" id="tbl">
                    <thead class="table-light">
                        <tr>
                            <th>Tanggal</th><th>Karyawan</th><th>Profil</th><th>Shift</th><th>Jenis</th><th>Req IN</th><th>Req OUT</th><th>Status</th><th>Total Kasus</th><th>Level</th><th>Alasan</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </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 src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const esc = (v) => $('<div>').text(v || '').html();
            const filters = () => ({
                profil_bulan_id: $('#fProfil').val() || '',
                karyawan_id: $('#fKaryawan').val() || '',
                date_from: $('#fFrom').val() || '',
                date_to: $('#fTo').val() || '',
                type: $('#fType').val() || 'all',
                status: $('#fStatus').val() || 'all',
            });
            const table = $('#tbl').DataTable({
                processing: true,
                serverSide: true,
                ajax: { url: '{{ route('attendance_forgetting_record.data') }}', data: (d) => Object.assign(d, filters()) },
                columns: [
                    { data: 'work_date' }, { data: 'employee' }, { data: 'profil' }, { data: 'shift' },
                    { data: 'missing_type', render: (v) => `<span class="badge text-bg-warning">${esc(v)}</span>` },
                    { data: 'requested_checkin_at' }, { data: 'requested_checkout_at' },
                    { data: 'status', render: (v) => `<span class="badge text-bg-secondary">${esc(String(v).toUpperCase())}</span>` },
                    { data: 'total_employee_cases' },
                    { data: 'level', render: (v) => `<span class="badge ${v === 'Warning HR' ? 'text-bg-danger' : (v === 'Sering Lupa' ? 'text-bg-warning' : 'text-bg-info')}">${esc(v)}</span>` },
                    { data: 'reason', render: (v) => esc(v || '-') },
                ],
                order: [[0, 'desc']],
            });
            const loadSummary = () => $.getJSON('{{ route('attendance_forgetting_record.summary') }}', filters()).done((r) => {
                const d = r.data || {};
                $('#sumTotal').text(d.total || 0);
                $('#sumIn').text(d.missing_in || 0);
                $('#sumOut').text(d.missing_out || 0);
                $('#sumTop').html((d.top || []).map((x) => `${esc(x.employee_code)} ${esc(x.employee_name)} <b>${x.total}</b>x`).join('<br>') || '-');
            });
            $('#btnFilter, #fType, #fStatus').on('click change', () => { table.ajax.reload(); loadSummary(); });
            $.getJSON('{{ route('attendance_forgetting_record.refs') }}').done((r) => {
                const refs = r.data || {};
                $('#fProfil').html('<option value="">Semua</option>' + (refs.profils || []).map((x) => `<option value="${x.id}" data-from="${x.start_date || ''}" data-to="${x.end_date || ''}">${esc(x.text)}</option>`).join('')).select2({ theme: 'bootstrap-5', width: '100%' });
                $('#fKaryawan').html('<option value="">Semua</option>' + (refs.karyawans || []).map((x) => `<option value="${x.id}">${esc(x.text)}</option>`).join('')).select2({ theme: 'bootstrap-5', width: '100%' });
                $('#fProfil').on('change', function () { const o = this.selectedOptions[0]; if (o) { $('#fFrom').val(o.dataset.from || ''); $('#fTo').val(o.dataset.to || ''); } });
                loadSummary();
            });
        });
    </script>
@endpush