@extends('layouts.adminlte')

@section('title', 'MASTER PEMBULATAN JAM')
@section('page_title', 'MASTER PEMBULATAN JAM')

@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 mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Rule Pembulatan Jam</h3>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary btn-sm" id="btnCopy" disabled><i class="fas fa-copy me-1"></i>Copy Profil</button>
                <button class="btn btn-primary btn-sm" id="btnAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-warning py-2 mb-3">
                <strong>Keterangan:</strong>
                <span>Rule ini diproses <strong>setelah</strong> validasi toleransi check-in dari Profil Jam Kerja.</span>
                <br>
                <span><strong>Toleransi Pembulatan</strong> di sini adalah ambang pembulatan menit terhadap interval rule, bukan toleransi telat masuk.</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</th>
                            <th>Target</th>
                            <th>Metode</th>
                            <th>Mode</th>
                            <th>Interval</th>
                            <th>Toleransi Pembulatan</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3 class="card-title m-0">Simulasi Pembulatan</h3></div>
        <div class="card-body">
            <form id="simulateForm" class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">Rule</label>
                    <select class="form-select" id="simulateRuleId" required></select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Jam Input</label>
                    <input type="time" class="form-control" id="simulateTime" required />
                </div>
                <div class="col-md-2">
                    <label class="form-label">Simulasi Untuk</label>
                    <select class="form-select" id="simulateTarget">
                        <option value="checkin">Checkin</option>
                        <option value="checkout">Checkout</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-outline-primary w-100">Simulate</button>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Hasil</label>
                    <input type="text" class="form-control" id="simulateResult" readonly />
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="modalForm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Tambah Rule Pembulatan Jam</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="mb-2">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="code" maxlength="40" required />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Nama Rule</label>
                            <input type="text" class="form-control" id="name" maxlength="180" required />
                        </div>
                        <div class="row g-2">
                            <div class="col-md-4">
                                <label class="form-label">Target</label>
                                <select class="form-select" id="target_type">
                                    <option value="both">Checkin & Checkout</option>
                                    <option value="checkin">Checkin saja</option>
                                    <option value="checkout">Checkout saja</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Metode</label>
                                <select class="form-select" id="round_method">
                                    <option value="nearest">Terdekat (Nearest)</option>
                                    <option value="floor">Ke Bawah (Floor)</option>
                                    <option value="ceil">Ke Atas (Ceil)</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Interval Menit</label>
                                <input type="number" class="form-control" id="interval_minutes" min="1" max="180" value="5" required />
                            </div>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Toleransi Pembulatan (menit)</label>
                            <input type="number" class="form-control" id="tolerance_minutes" min="0" max="180" value="0" required />
                            <small class="text-muted">Dipakai saat pembulatan ke interval (mis. nearest/floor/ceil), bukan toleransi telat check-in.</small>
                        </div>
                        <div class="form-check form-switch mt-2">
                            <input class="form-check-input" type="checkbox" role="switch" id="discipline_mode" />
                            <label class="form-check-label" for="discipline_mode">
                                Mode Disiplin (Checkin dibulatkan naik, Checkout dibulatkan turun)
                            </label>
                        </div>
                        <div class="form-check form-switch mt-2">
                            <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="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>

    <div class="modal fade" id="copyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Copy Profil Pembulatan Jam</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="copyForm">
                    <div class="modal-body">
                        <input type="hidden" id="copySourceId" />
                        <div class="alert alert-info py-2 mb-3">
                            Buat profil baru dari rule pembulatan yang dipilih. Interval, metode, target, dan setting aktif akan ikut tercopy.
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Kode Baru</label>
                            <input type="text" class="form-control" id="copyCode" maxlength="40" required />
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Nama Profil Baru</label>
                            <input type="text" class="form-control" id="copyName" maxlength="180" required />
                        </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">Copy Profil</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 copyModal = new bootstrap.Modal(document.getElementById('copyModal'));
            let rows = [];
            let currentRow = null;

            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: 'target_type',
                        render: (v) => {
                            const val = (v || '').toString().toLowerCase();
                            if (val === 'checkin') return 'Checkin saja';
                            if (val === 'checkout') return 'Checkout saja';
                            return 'Checkin & Checkout';
                        }
                    },
                    {
                        data: null,
                        render: (r) => {
                            const method = (r.round_method || '').toString().toLowerCase();
                            const interval = Number(r.interval_minutes || 0);
                            const disiplinAktif = !!r.discipline_mode;
                            if (disiplinAktif) {
                                return `<strong>Mode Disiplin</strong><br><small class="text-muted">Masuk 08:01 → 09:00, Pulang 16:59 → 16:00 (interval ${interval} mnt)</small>`;
                            }
                            if (method === 'ceil') {
                                return `<strong>Ke Atas</strong><br><small class="text-muted">Contoh: 08:07 → 08:15 (interval ${interval} mnt)</small>`;
                            }
                            if (method === 'floor') {
                                return `<strong>Ke Bawah</strong><br><small class="text-muted">Contoh: 08:17 → 08:10 (interval ${interval} mnt)</small>`;
                            }
                            return `<strong>Terdekat</strong><br><small class="text-muted">Contoh: 08:12 → 08:10 / 08:13 → 08:15 (interval ${interval} mnt)</small>`;
                        }
                    },
                    {
                        data: 'discipline_mode',
                        render: (v) => v
                            ? '<span class="badge text-bg-success">Disiplin Aktif</span>'
                            : '<span class="badge text-bg-light">Normal</span>'
                    },
                    { data: 'interval_minutes', render: (v) => `${Number(v || 0)} mnt` },
                    { data: 'tolerance_minutes', render: (v) => `${Number(v || 0)} mnt` },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-secondary btn-copy me-1" 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 openCopyModal = (row) => {
                if (!row) return;
                currentRow = row;
                $('#copySourceId').val(row.id);
                $('#copyCode').val(`${(row.code || '').toString().trim()}-COPY`);
                $('#copyName').val(`${(row.name || '').toString().trim()} (Copy)`);
                copyModal.show();
            };

            const loadData = () => {
                $.getJSON('{{ route('master_pembulatan_jam.data') }}').done((resp) => {
                    rows = resp.data || [];
                    table.clear().rows.add(rows).draw(false);
                    $('#simulateRuleId').html(rows.map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`).join(''));
                    if (currentRow) {
                        currentRow = rows.find((x) => Number(x.id) === Number(currentRow.id)) || null;
                    }
                    $('#btnCopy').prop('disabled', !currentRow);
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            $('#btnAdd').on('click', function () {
                currentRow = null;
                $('#btnCopy').prop('disabled', true);
                $('#modalTitle').text('Tambah Rule Pembulatan Jam');
                $('#rowId').val('');
                $('#code').val('');
                $('#name').val('');
                $('#target_type').val('both');
                $('#round_method').val('nearest');
                $('#interval_minutes').val(5);
                $('#tolerance_minutes').val(0);
                $('#discipline_mode').prop('checked', false);
                $('#is_active').prop('checked', true);
                modal.show();
            });

            $('#table').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rows.find((x) => Number(x.id) === id);
                if (!row) return;
                currentRow = row;
                $('#btnCopy').prop('disabled', false);
                $('#modalTitle').text('Edit Rule Pembulatan Jam');
                $('#rowId').val(row.id);
                $('#code').val(row.code || '');
                $('#name').val(row.name || '');
                $('#target_type').val(row.target_type || 'both');
                $('#round_method').val(row.round_method || 'nearest');
                $('#interval_minutes').val(Number(row.interval_minutes || 5));
                $('#tolerance_minutes').val(Number(row.tolerance_minutes || 0));
                $('#discipline_mode').prop('checked', !!row.discipline_mode);
                $('#is_active').prop('checked', !!row.is_active);
                modal.show();
            });

            $('#btnCopy').on('click', function () {
                if (!currentRow) return;
                openCopyModal(currentRow);
            });

            $('#table').on('click', '.btn-copy', function () {
                const id = Number($(this).data('id'));
                const row = rows.find((x) => Number(x.id) === id);
                openCopyModal(row || null);
            });

            $('#form').on('submit', function (e) {
                e.preventDefault();
                const id = $('#rowId').val();
                const payload = {
                    code: ($('#code').val() || '').toString().trim(),
                    name: ($('#name').val() || '').toString().trim(),
                    target_type: $('#target_type').val(),
                    round_method: $('#round_method').val(),
                    interval_minutes: ($('#interval_minutes').val() || '5').toString(),
                    tolerance_minutes: ($('#tolerance_minutes').val() || '0').toString(),
                    discipline_mode: $('#discipline_mode').is(':checked') ? 1 : 0,
                    is_active: $('#is_active').is(':checked') ? 1 : 0
                };
                $.ajax({
                    url: id ? `{{ url('/master-pembulatan-jam') }}/${id}` : '{{ route('master_pembulatan_jam.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-delete', function () {
                const id = Number($(this).data('id'));
                $.ajax({ url: `{{ url('/master-pembulatan-jam') }}/${id}`, type: 'DELETE' })
                    .done((resp) => {
                        loadData();
                        Swal.fire('Success', resp?.message || 'Deleted', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
            });

            $('#copyForm').on('submit', function (e) {
                e.preventDefault();
                const sourceId = $('#copySourceId').val();
                if (!sourceId) return;

                $.post(`{{ url('/master-pembulatan-jam') }}/${sourceId}/copy`, {
                    code: ($('#copyCode').val() || '').toString().trim(),
                    name: ($('#copyName').val() || '').toString().trim()
                }).done((resp) => {
                    copyModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Copied', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Copy failed', 'error'));
            });

            $('#simulateForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    rule_id: $('#simulateRuleId').val(),
                    time: $('#simulateTime').val(),
                    simulate_target: $('#simulateTarget').val()
                };
                $.post('{{ route('master_pembulatan_jam.simulate') }}', payload)
                    .done((resp) => {
                        $('#simulateResult').val(resp?.data?.rounded_time || '');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Simulate failed', 'error'));
            });

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