@extends('layouts.adminlte')

@section('title', 'MASTER PROFIL JAM KERJA')
@section('page_title', 'MASTER PROFIL JAM KERJA')

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

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Profil Jam Kerja</h3>
            <button class="btn btn-primary btn-sm" id="btnAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
        </div>
        <div class="card-body">
            <div class="alert alert-info py-2 mb-3">
                <strong>Keterangan:</strong>
                <span><strong>Grace Status Telat</strong> adalah batas keterlambatan untuk status hadir/telat di level attendance, bukan pembulatan waktu.</span>
                <br>
                <span><strong>Pre Check-in Disiplin</strong> dipakai untuk penanda telat lebih awal. Contoh nilai 10 pada shift 08:00 berarti check-in 07:51 sudah dihitung telat secara disiplin.</span>
                <br>
                <span>Urutan proses: cek jadwal kerja -> cek rule status telat (prioritas pre check-in disiplin, lalu grace status telat) -> baru rule pembulatan jam dipakai di perhitungan jam/payroll.</span>
                <br>
                <span>Untuk payroll, pre check-in ini hanya jadi penanda telat/rekap. Selama check-in masih sebelum jam resmi shift, jam kerja tidak dipotong.</span>
                <br>
                <span><span class="badge bg-warning text-dark">Engine Penanda</span> Kolom yang masuk engine penanda: <strong>Pre Check-in Disiplin</strong> dan <strong>Grace Status Telat Setelah Shift</strong>.</span>
            </div>
            <div class="table-responsive">
                <table id="table" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kode</th>
                            <th>Nama Profil</th>
                            <th>Jam Kerja</th>
                            <th>Istirahat</th>
                            <th>Hari Kerja</th>
                            <th>Grace Status Telat<br><small class="text-warning">Engine Penanda</small></th>
                            <th>Pre Check-in Disiplin<br><small class="text-warning">Engine Penanda</small></th>
                            <th>Menit Kerja Efektif</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalForm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Tambah Profil Jam Kerja</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form">
                    <div class="modal-body">
                        <input type="hidden" id="rowId" />
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Kode</label>
                                <input type="text" class="form-control" id="code" maxlength="40" required />
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Nama Profil</label>
                                <input type="text" class="form-control" id="name" maxlength="180" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Jam Masuk</label>
                                <input type="time" class="form-control" id="start_time" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Jam Pulang</label>
                                <input type="time" class="form-control" id="end_time" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Istirahat Mulai</label>
                                <input type="time" class="form-control" id="break_start_time" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Istirahat Selesai</label>
                                <input type="time" class="form-control" id="break_end_time" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Pre Check-in Disiplin (menit sebelum shift) <span class="badge bg-warning text-dark ms-1">Engine Penanda</span></label>
                                <input type="number" class="form-control" id="required_checkin_before_start_minutes" min="0" max="240" value="0" required />
                                <small class="text-muted">Contoh 10 untuk shift 08:00 berarti check-in lebih dari 07:50 sudah ditandai telat secara disiplin. Penanda status saja, bukan potong jam sebelum 08:00.</small>
                                <div class="small text-info mt-1"><i class="fas fa-info-circle me-1"></i>Tidak memotong salary.</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Grace Status Telat Setelah Shift (menit) <span class="badge bg-warning text-dark ms-1">Engine Penanda</span></label>
                                <input type="number" class="form-control" id="late_tolerance_minutes" min="0" max="240" value="0" required />
                                <small class="text-muted">Dipakai jika pre check-in disiplin = 0. Contoh 10 untuk shift 08:00 berarti check-in lebih dari 08:10 baru ditandai telat.</small>
                                <div class="small text-info mt-1"><i class="fas fa-info-circle me-1"></i>Tidak memotong salary.</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Total Menit Kerja / Hari</label>
                                <input type="number" class="form-control" id="work_minutes_per_day" min="1" max="10080" value="480" required />
                                <small class="text-muted">Contoh 480 mnt = 8 jam efektif (sudah setelah dikurangi istirahat).</small>
                            </div>
                            <div class="col-12">
                                <div class="alert alert-light border mb-0 py-2" id="shiftLateRulePreview">
                                    Preview rule telat akan tampil di sini.
                                </div>
                            </div>
                            <div class="col-12 d-flex align-items-end">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="is_active" checked />
                                    <label class="form-check-label" for="is_active">Active</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Hari Kerja</label>
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="1" id="day1"><label class="form-check-label" for="day1">Senin</label></div>
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="2" id="day2"><label class="form-check-label" for="day2">Selasa</label></div>
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="3" id="day3"><label class="form-check-label" for="day3">Rabu</label></div>
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="4" id="day4"><label class="form-check-label" for="day4">Kamis</label></div>
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="5" id="day5"><label class="form-check-label" for="day5">Jumat</label></div>
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="6" id="day6"><label class="form-check-label" for="day6">Sabtu</label></div>
                                    <div class="form-check"><input class="form-check-input day-checkbox" type="checkbox" value="7" id="day7"><label class="form-check-label" for="day7">Minggu</label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </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/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('modalForm'));
            const dayLabels = { 1: 'Senin', 2: 'Selasa', 3: 'Rabu', 4: 'Kamis', 5: 'Jumat', 6: 'Sabtu', 7: 'Minggu' };
            const formatTime = (value) => (value || '').toString().substring(0, 5);
            const toMinute = (hm) => {
                const raw = (hm || '').toString().substring(0, 5);
                if (!/^\d{2}:\d{2}$/.test(raw)) return null;
                const [h, m] = raw.split(':').map(Number);
                if (Number.isNaN(h) || Number.isNaN(m)) return null;
                return (h * 60) + m;
            };
            const rangeMinutes = (start, end) => {
                const a = toMinute(start);
                const b = toMinute(end);
                if (a === null || b === null) return null;
                const total = b >= a ? (b - a) : ((24 * 60 - a) + b);
                return total;
            };
            const minuteToHourText = (minutes) => {
                const m = Number(minutes || 0);
                const h = (m / 60);
                return `${h.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} jam`;
            };
            const minuteToClockText = (value) => {
                const total = ((Number(value || 0) % (24 * 60)) + (24 * 60)) % (24 * 60);
                const hh = String(Math.floor(total / 60)).padStart(2, '0');
                const mm = String(total % 60).padStart(2, '0');
                return `${hh}:${mm}`;
            };
            const refreshLateRulePreview = () => {
                const start = formatTime($('#start_time').val() || '08:00');
                const base = toMinute(start);
                const preCheckin = Number($('#required_checkin_before_start_minutes').val() || 0);
                const lateGrace = Number($('#late_tolerance_minutes').val() || 0);
                const $preview = $('#shiftLateRulePreview');

                if (base === null) {
                    $preview.html('<strong>Preview Rule Telat:</strong> isi jam masuk dulu agar simulasi bisa dihitung.');
                    return;
                }

                const shiftClock = minuteToClockText(base);
                const preDeadline = minuteToClockText(base - preCheckin);
                const graceDeadline = minuteToClockText(base + lateGrace);
                const preLateExample = minuteToClockText((base - preCheckin) + 1);
                const graceLateExample = minuteToClockText((base + lateGrace) + 1);
                const activeRuleBadge = preCheckin > 0
                    ? '<span class="badge bg-warning text-dark ms-1">Rule Aktif: Pre Check-in Disiplin</span>'
                    : '<span class="badge bg-info text-dark ms-1">Rule Aktif: Grace Status Telat</span>';
                const preBlock = preCheckin > 0
                    ? `
                        <div class="mb-1">
                            <span class="badge bg-warning text-dark">Pre Check-in Disiplin</span>
                            Batas disiplin di-set ke <strong>${preDeadline}</strong> untuk shift resmi <strong>${shiftClock}</strong>.
                        </div>
                        <div class="small text-muted">
                            Artinya check-in sampai <strong>${preDeadline}</strong> masih aman secara disiplin. Mulai
                            <strong>${preLateExample}</strong> sudah ditandai telat disiplin, meskipun masih sebelum jam shift resmi
                            <strong>${shiftClock}</strong>.
                        </div>
                    `
                    : `
                        <div class="mb-1">
                            <span class="badge bg-secondary">Pre Check-in Disiplin</span>
                            Tidak dipakai karena nilainya <strong>0 menit</strong>.
                        </div>
                        <div class="small text-muted">
                            Sistem tidak membuat batas telat lebih awal sebelum jam shift resmi.
                        </div>
                    `;
                const graceBlock = `
                    <div class="mb-1">
                        <span class="badge bg-info text-dark">Grace Status Telat</span>
                        Batas status telat setelah shift adalah <strong>${graceDeadline}</strong>.
                    </div>
                    <div class="small text-muted">
                        Jika <strong>Pre Check-in Disiplin = 0</strong>, maka check-in sampai <strong>${graceDeadline}</strong>
                        masih belum ditandai telat status. Mulai <strong>${graceLateExample}</strong> baru telat status.
                    </div>
                `;

                if (preCheckin > 0) {
                    $preview.html(
                        `<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                            <strong>Preview Rule Telat</strong>
                            ${activeRuleBadge}
                        </div>
                        <div class="mb-2">
                            <strong>Bedanya:</strong> <strong>Pre Check-in Disiplin</strong> membuat rule lebih ketat sebelum jam shift,
                            sedangkan <strong>Grace Status Telat</strong> memberi toleransi setelah jam shift.
                        </div>
                        <div class="mb-2">${preBlock}</div>
                        <div class="mb-2">${graceBlock}</div>
                        <div class="small text-muted border-top pt-2">
                            Saat <strong>Pre Check-in Disiplin</strong> aktif, rule inilah yang diprioritaskan sebagai penanda telat.
                            Grace setelah shift tetap tersimpan sebagai referensi/fallback, tetapi tidak dipakai selama pre check-in masih lebih dari 0.
                            Ini <strong>bukan engine pemotong salary</strong>; hanya penanda disiplin/rekap attendance.
                        </div>`
                    );
                    return;
                }

                $preview.html(
                    `<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                        <strong>Preview Rule Telat</strong>
                        ${activeRuleBadge}
                    </div>
                    <div class="mb-2">
                        <strong>Bedanya:</strong> <strong>Pre Check-in Disiplin</strong> adalah batas telat yang dimajukan sebelum jam masuk.
                        <strong>Grace Status Telat</strong> adalah toleransi setelah jam masuk.
                    </div>
                    <div class="mb-2">${preBlock}</div>
                    <div class="mb-2">${graceBlock}</div>
                    <div class="small text-muted border-top pt-2">
                        Karena <strong>Pre Check-in Disiplin = 0</strong>, sistem memakai <strong>Grace Status Telat</strong> sebagai rule utama.
                        Jika grace juga <strong>0 menit</strong>, maka status telat mulai dihitung segera setelah lewat jam shift resmi
                        <strong>${shiftClock}</strong>. Ini tetap hanya <strong>engine penanda</strong>, bukan potong salary.
                    </div>`
                );
            };
            let rowsCache = [];

            const table = $('#table').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'name' },
                    { data: null, render: (r) => `${formatTime(r.start_time)} - ${formatTime(r.end_time)}` },
                    {
                        data: null,
                        render: (r) => {
                            const a = formatTime(r.break_start_time);
                            const b = formatTime(r.break_end_time);
                            return (a && b) ? `${a} - ${b}` : '-';
                        }
                    },
                    {
                        data: 'work_days',
                        render: (v) => Array.isArray(v) && v.length
                            ? v.map((x) => dayLabels[x] || x).join(', ')
                            : '-'
                    },
                    { data: 'late_tolerance_minutes', render: (v) => `${Number(v || 0)} mnt` },
                    {
                        data: 'required_checkin_before_start_minutes',
                        render: (v, t, r) => {
                            const minutes = Number(v || 0);
                            if (minutes < 1) return '-';
                            const start = formatTime(r.start_time);
                            const base = toMinute(start);
                            if (base === null) return `${minutes} mnt`;
                            const deadline = (base - minutes + (24 * 60)) % (24 * 60);
                            const hh = String(Math.floor(deadline / 60)).padStart(2, '0');
                            const mm = String(deadline % 60).padStart(2, '0');
                            return `${minutes} mnt<br><small class="text-muted">batas ${hh}:${mm}</small>`;
                        }
                    },
                    {
                        data: null,
                        render: (r) => {
                            const minutes = Number(r.work_minutes_per_day || 0);
                            const shiftMinutes = rangeMinutes(r.start_time, r.end_time);
                            const breakMinutes = rangeMinutes(r.break_start_time, r.break_end_time) || 0;
                            const calculated = shiftMinutes !== null ? Math.max(0, shiftMinutes - breakMinutes) : null;
                            const calcText = calculated === null
                                ? '-'
                                : `${shiftMinutes} - ${breakMinutes} = ${calculated} mnt`;
                            const mismatch = calculated !== null && calculated !== minutes;
                            const mismatchBadge = mismatch ? ' <span class="badge text-bg-warning text-dark">manual</span>' : '';
                            if (r.is_one_day_cap) {
                                return `${minutes} mnt (${minuteToHourText(minutes)})${mismatchBadge}<br><small class="text-muted">Hitung: ${calcText}</small> <span class="badge text-bg-secondary">Cap 1 Hari</span>`;
                            }
                            return `${minutes} mnt (${minuteToHourText(minutes)})${mismatchBadge}<br><small class="text-muted">Hitung: ${calcText}</small>`;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-secondary btn-copy" data-id="${r.id}">Copy</button>
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>
                        `
                    }
                ]
            });

            const collectDays = () => $('.day-checkbox:checked').map(function () { return Number($(this).val()); }).get();
            const setDays = (values) => {
                $('.day-checkbox').prop('checked', false);
                (values || []).forEach((v) => $(`.day-checkbox[value="${Number(v)}"]`).prop('checked', true));
            };

            const loadData = () => {
                $.getJSON('{{ route('master_profil_jam_kerja.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            $('#btnAdd').on('click', function () {
                $('#modalTitle').text('Tambah Profil Jam Kerja');
                $('#rowId').val('');
                $('#code').val('');
                $('#name').val('');
                $('#start_time').val('08:00');
                $('#end_time').val('17:00');
                $('#break_start_time').val('12:00');
                $('#break_end_time').val('13:00');
                $('#required_checkin_before_start_minutes').val('0');
                $('#late_tolerance_minutes').val('0');
                $('#work_minutes_per_day').val('480');
                $('#is_active').prop('checked', true);
                setDays([1, 2, 3, 4, 5]);
                refreshLateRulePreview();
                modal.show();
            });

            $('#table').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;

                $('#modalTitle').text('Edit Profil Jam Kerja');
                $('#rowId').val(row.id);
                $('#code').val(row.code || '');
                $('#name').val(row.name || '');
                $('#start_time').val(formatTime(row.start_time));
                $('#end_time').val(formatTime(row.end_time));
                $('#break_start_time').val(formatTime(row.break_start_time));
                $('#break_end_time').val(formatTime(row.break_end_time));
                $('#required_checkin_before_start_minutes').val(Number(row.required_checkin_before_start_minutes || 0));
                $('#late_tolerance_minutes').val(Number(row.late_tolerance_minutes || 0));
                $('#work_minutes_per_day').val(Number(row.work_minutes_per_day || 480));
                $('#is_active').prop('checked', !!row.is_active);
                setDays(row.work_days || []);
                refreshLateRulePreview();
                modal.show();
            });

            $('#start_time, #required_checkin_before_start_minutes, #late_tolerance_minutes').on('input change', refreshLateRulePreview);

            $('#form').on('submit', function (e) {
                e.preventDefault();
                const id = $('#rowId').val();
                const payload = {
                    code: ($('#code').val() || '').toString().trim(),
                    name: ($('#name').val() || '').toString().trim(),
                    start_time: $('#start_time').val(),
                    end_time: $('#end_time').val(),
                    break_start_time: $('#break_start_time').val(),
                    break_end_time: $('#break_end_time').val(),
                    required_checkin_before_start_minutes: ($('#required_checkin_before_start_minutes').val() || '0').toString(),
                    late_tolerance_minutes: ($('#late_tolerance_minutes').val() || '0').toString(),
                    work_minutes_per_day: ($('#work_minutes_per_day').val() || '480').toString(),
                    work_days: collectDays(),
                    is_active: $('#is_active').is(':checked') ? 1 : 0
                };

                if (!payload.code || !payload.name || !payload.start_time || !payload.end_time) {
                    Swal.fire('Warning', 'Kode, nama, jam masuk, dan jam pulang wajib diisi', 'warning');
                    return;
                }

                $.ajax({
                    url: id ? `{{ url('/master-profil-jam-kerja') }}/${id}` : '{{ route('master_profil_jam_kerja.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#table').on('click', '.btn-copy', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Copy profil jam kerja ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, copy'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/master-profil-jam-kerja') }}/${id}/copy`)
                        .done((resp) => {
                            loadData();
                            Swal.fire('Success', resp?.message || 'Copied', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Copy failed', 'error'));
                });
            });

            $('#table').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete profil jam kerja?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-profil-jam-kerja') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            loadData();
            refreshLateRulePreview();
        });
    </script>
@endpush