@extends('layouts.adminlte')

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

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <style>
        .rule-hint {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 12px;
        }
        .rule-board {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 10px;
        }
        .rule-day-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .rule-day-group.special .rule-day-title {
            color: #c2410c;
        }
        .rule-day-shell {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 10px;
            background: #fff;
        }
        .rule-day-group.special .rule-day-shell {
            border-color: #fdba74;
            background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
            box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .06);
        }
        .rule-day-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            font-weight: 700;
            font-size: 1rem;
            color: #0f172a;
        }
        .rule-day-subtitle {
            font-size: 12px;
            color: #64748b;
            margin-top: 2px;
        }
        .rule-day-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            padding: 6px 10px;
            background: #eef2ff;
            color: #3730a3;
        }
        .rule-day-group.special .rule-day-badge {
            background: #f97316;
            color: #fff;
        }
        .rule-item {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 10px;
            background: #fff;
            cursor: grab;
        }
        .rule-item.special-rule {
            border-color: #fdba74;
            background: linear-gradient(180deg, rgba(255, 247, 237, .92), rgba(255, 255, 255, 1));
        }
        .rule-item:active { cursor: grabbing; }
        .rule-item.inactive {
            opacity: .65;
            background: #f8fafc;
        }
        .rule-item.break-rule {
            border-color: #f59e0b;
            background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
        }
        .rule-item.sortable-ghost {
            opacity: .45;
            border-style: dashed;
        }
        .rule-item.sortable-chosen {
            box-shadow: 0 0 0 2px rgba(13, 110, 253, .18);
        }
        .rule-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        .rule-range {
            font-weight: 700;
            font-size: 14px;
            color: #111827;
        }
        .rule-factor {
            font-weight: 700;
            color: #0d6efd;
        }
        .rule-item.break-rule .rule-factor {
            color: #b45309;
        }
        .rule-meta {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 8px;
        }
        .rule-break-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            background: #f59e0b;
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
        }
        .rule-example {
            font-size: 12px;
            color: #334155;
            background: #f8fafc;
            border: 1px dashed #dbe3ee;
            border-radius: 6px;
            padding: 5px 7px;
            margin-bottom: 8px;
        }
        .profil-desc {
            font-size: 12px;
            color: #475569;
            line-height: 1.45;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            max-width: 360px;
        }
        .rule-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .rule-seg {
            display: inline-block;
            padding: 2px 6px;
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            background: #fff;
            font-size: 11px;
            color: #0f172a;
            line-height: 1.2;
        }
        .rule-action .btn {
            padding: .2rem .45rem;
            font-size: .72rem;
        }
        .rule-empty {
            border: 1px dashed #d1d5db;
            border-radius: 8px;
            padding: 18px;
            text-align: center;
            color: #6b7280;
            font-size: 13px;
        }
        .rule-day-group.special .rule-empty {
            border-color: #fdba74;
            background: rgba(255, 247, 237, .7);
            color: #9a3412;
        }
        .rule-empty .btn {
            margin-top: 10px;
        }
    </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">Master Profil Perkalian Jam Kerja</h3>
            <button class="btn btn-primary btn-sm" id="btnAddProfil"><i class="fas fa-plus me-1"></i>Tambah Profil</button>
        </div>
        <div class="card-body">
            <table id="profilTable" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Kode</th>
                        <th>Nama Profil</th>
                        <th>Deskripsi</th>
                        <th>Jumlah Rule</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Detail Rule: <span id="detailTitle" class="text-primary">-</span></h3>
            <div class="btn-group btn-group-sm">
                <button class="btn btn-warning text-white" id="btnApplyHolidaySpecialPreset" disabled><i class="fas fa-star me-1"></i>Preset Holiday Special x4</button>
                <button class="btn btn-outline-dark" id="btnApplyAllInPreset" disabled><i class="fas fa-ban me-1"></i>Dummy All In (No OT)</button>
                <button class="btn btn-outline-warning" id="btnApplyDynamicBreakPreset" disabled><i class="fas fa-wand-magic-sparkles me-1"></i>Dummy Break Dinamis</button>
                <button class="btn btn-outline-primary" id="btnCopyDayType" disabled><i class="fas fa-copy me-1"></i>Copy Jenis Kerja</button>
                <button class="btn btn-primary" id="btnAddDetail" disabled><i class="fas fa-plus me-1"></i>Tambah Rule</button>
            </div>
        </div>
        <div class="card-body">
            <div class="rule-hint">
                Format visual dinamis: <strong>Jam kerja normal (mengikuti Profil Jam Kerja) x1</strong>,
                lalu rule lembur berurutan berdasarkan <strong>Jam ke-1, Jam ke-2, Jam ke-3, dst</strong>.
                <br>Contoh otomatis: workday dihitung dari <strong>jam normal selesai 17:00</strong>, weekend/libur dari <strong>mulai 08:00</strong>.
                <br><strong>Holiday Special</strong> dipakai saat tanggal di Master Kalender ditandai premium. Default yang direkomendasikan adalah <strong>jam ke-1 s/d 24 = x4</strong>.
                <br>Jika ada <strong>1 jam istirahat yang tidak dihitung</strong>, buat rule dengan centang <strong>Istirahat / tidak dihitung</strong>. Sistem otomatis set faktor <strong>x0</strong>.
            </div>
            <div id="detailList" class="rule-board"></div>
        </div>
    </div>

    <div class="modal fade" id="profilModal" 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="profilModalTitle">Tambah Profil</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="profilForm">
                    <div class="modal-body">
                        <input type="hidden" id="profilId" />
                        <div class="mb-2"><label class="form-label">Kode</label><input id="profilCode" class="form-control" maxlength="40" required /></div>
                        <div class="mb-2"><label class="form-label">Nama Profil</label><input id="profilName" class="form-control" maxlength="180" required /></div>
                        <div class="mb-2"><label class="form-label">Deskripsi</label><textarea id="profilDescription" class="form-control" rows="2"></textarea></div>
                        <div class="form-check form-switch"><input class="form-check-input" id="profilActive" type="checkbox" checked /><label class="form-check-label">Active</label></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailModal" 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="detailModalTitle">Tambah Detail Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="detailForm">
                    <div class="modal-body">
                        <input type="hidden" id="detailId" />
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Ambil Dari Master Rule</label>
                                <select id="detailRuleId" class="form-select"></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Jenis Hari</label>
                                <select id="detailDayType" class="form-select">
                                    <option value="holiday_special">Holiday Special</option>
                                    <option value="workday">Workday</option>
                                    <option value="weekend">Weekend</option>
                                    <option value="holiday">Holiday</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Source</label>
                                <select id="detailSourceType" class="form-select">
                                    <option value="manual">Manual</option>
                                    <option value="master">Master</option>
                                </select>
                            </div>
                            <div class="col-md-3"><label class="form-label">Jam Mulai</label><input id="detailHourStart" type="number" min="0" max="24" step="0.01" class="form-control" required /></div>
                            <div class="col-md-3"><label class="form-label">Jam Akhir</label><input id="detailHourEnd" type="number" min="0" max="24" step="0.01" class="form-control" required /></div>
                            <div class="col-md-3"><label class="form-label">Faktor</label><input id="detailMultiplier" type="number" min="0" step="0.01" class="form-control" required /></div>
                            <div class="col-md-3"><label class="form-label">Urutan</label><input id="detailSortOrder" type="number" min="0" max="9999" class="form-control" value="0" /></div>
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" id="detailIsBreak" type="checkbox" />
                                    <label class="form-check-label">Istirahat / jam ini tidak dihitung</label>
                                </div>
                            </div>
                            <div class="col-md-12"><label class="form-label">Catatan</label><textarea id="detailNotes" class="form-control" rows="2"></textarea></div>
                            <div class="col-md-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" id="detailActive" type="checkbox" checked />
                                    <label class="form-check-label">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copyDayTypeModal" 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 Jenis Kerja</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="copyDayTypeForm">
                    <div class="modal-body">
                        <div class="mb-2">
                            <label class="form-label">Profil Sumber</label>
                            <select id="copySourceProfilId" class="form-select" required></select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Profil Target</label>
                            <select id="copyTargetProfilId" class="form-select" required></select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Jenis Hari</label>
                            <select id="copyDayType" class="form-select" required>
                                <option value="holiday_special">Holiday Special</option>
                                <option value="workday">Hari Kerja</option>
                                <option value="weekend">Weekend</option>
                                <option value="holiday">Hari Libur</option>
                            </select>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" id="copyReplaceExisting" type="checkbox" checked />
                            <label class="form-check-label">Timpa rule target untuk jenis hari yang sama</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-primary" type="submit">Copy</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/sortablejs/Sortable.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const profilModal = new bootstrap.Modal(document.getElementById('profilModal'));
            const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
            const copyDayTypeModal = new bootstrap.Modal(document.getElementById('copyDayTypeModal'));

            let profilRows = [];
            let detailRows = [];
            let refs = { rules: [] };
            let activeProfilId = null;
            let detailSortables = [];
            let isSavingOrder = false;
            const dayTypeOrder = ['holiday_special', 'holiday', 'weekend', 'workday'];
            const dayTypeMeta = {
                holiday_special: {
                    label: 'Holiday Special',
                    badge: 'SPECIAL x4',
                    subtitle: 'Dipakai saat tanggal premium ditandai di Master Kalender.',
                    groupClass: 'special'
                },
                holiday: {
                    label: 'Hari Libur',
                    badge: 'Holiday',
                    subtitle: 'Rule lembur pada hari libur biasa / nasional.',
                    groupClass: ''
                },
                weekend: {
                    label: 'Weekend',
                    badge: 'Weekend',
                    subtitle: 'Rule lembur pada akhir pekan / libur mingguan.',
                    groupClass: ''
                },
                workday: {
                    label: 'Hari Kerja',
                    badge: 'Workday',
                    subtitle: 'Rule lembur setelah jam kerja normal karyawan selesai.',
                    groupClass: ''
                }
            };

            const profilTable = $('#profilTable').DataTable({
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'name' },
                    { data: 'description', render: (v) => `<div class="profil-desc">${(v || '-')}</div>` },
                    { data: 'details_count' },
                    { data: 'is_active', render: (v) => v ? '<span class="badge text-bg-success">Active</span>' : '<span class="badge text-bg-secondary">Inactive</span>' },
                    { data: null, orderable: false, render: (d, t, r) => `
                        <button class="btn btn-sm btn-outline-info btn-manage" data-id="${r.id}">Kelola</button>
                        <button class="btn btn-sm btn-outline-success 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 normalizeFactor = (v) => {
                const n = Number(v || 0);
                return n.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
            };

            const formatOrdinalRange = (hourStart, hourEnd) => {
                const s = Number(hourStart || 0);
                const e = Number(hourEnd || 0);
                if (s === e) {
                    return `Jam ke-${s}`;
                }
                return `Jam ke-${s} s/d ${e}`;
            };

            const wrapHour = (v) => {
                const n = ((Math.floor(v) % 24) + 24) % 24;
                return String(n).padStart(2, '0') + ':00';
            };

            const buildExampleSegments = (row) => {
                const s = Number(row.hour_start || 0);
                const e = Number(row.hour_end || 0);
                if (s <= 0 || e <= 0 || e < s) return [];
                const base = row.day_type === 'workday'
                    ? 17
                    : (row.day_type === 'holiday_special' ? 0 : 8);
                const segments = [];
                for (let i = s; i <= e; i += 1) {
                    const startClock = base + (i - 1);
                    const endClock = startClock + 1;
                    segments.push(`${wrapHour(startClock)} - ${wrapHour(endClock)}`);
                }
                return segments;
            };

            const buildExampleStackHtml = (row) => {
                const segments = buildExampleSegments(row);
                if (!segments.length) return '<span class="text-muted">-</span>';
                return segments.map((seg) => `<span class="rule-seg">${seg}</span>`).join('');
            };

            const buildRuleTitle = (row) => row.is_break
                ? `${formatOrdinalRange(row.hour_start, row.hour_end)} (Istirahat)`
                : formatOrdinalRange(row.hour_start, row.hour_end);

            const dayTypeLabel = (v) => ({
                holiday_special: 'Holiday Special',
                workday: 'Hari Kerja',
                weekend: 'Weekend',
                holiday: 'Hari Libur'
            }[v] || v || '-');

            const renderDetailList = () => {
                const $el = $('#detailList');
                detailSortables.forEach((s) => { if (s && s.destroy) s.destroy(); });
                detailSortables = [];
                if (!activeProfilId) {
                    $el.html('<div class="rule-empty">Pilih profil dulu untuk mengelola rule.</div>');
                    return;
                }

                const rows = [...detailRows].sort((a, b) => {
                    const aDay = String(a.day_type || '');
                    const bDay = String(b.day_type || '');
                    const aDayIdx = dayTypeOrder.indexOf(aDay);
                    const bDayIdx = dayTypeOrder.indexOf(bDay);
                    if (aDayIdx !== bDayIdx) return (aDayIdx === -1 ? 999 : aDayIdx) - (bDayIdx === -1 ? 999 : bDayIdx);
                    const aSort = Number(a.sort_order || 0);
                    const bSort = Number(b.sort_order || 0);
                    if (aSort !== bSort) return aSort - bSort;
                    return Number(a.hour_start || 0) - Number(b.hour_start || 0);
                });

                const grouped = rows.reduce((acc, row) => {
                    const k = row.day_type || 'workday';
                    if (!acc[k]) acc[k] = [];
                    acc[k].push(row);
                    return acc;
                }, {});

                const html = dayTypeOrder.map((dayType) => {
                    const items = grouped[dayType] || [];
                    const meta = dayTypeMeta[dayType] || {
                        label: dayTypeLabel(dayType),
                        badge: dayTypeLabel(dayType),
                        subtitle: '',
                        groupClass: ''
                    };
                    const firstFactor = Number(items[0]?.day_type === 'workday' ? 1 : 0);
                    const normalBlock = dayType === 'workday'
                        ? `<div class="rule-item"><div class="rule-head"><span class="rule-range">Jam Kerja Normal (dinamis)</span><span class="rule-factor">x${normalizeFactor(firstFactor)}</span></div><div class="rule-meta">Mengikuti Profil Jam Kerja karyawan | ${dayTypeLabel(dayType)}</div></div>`
                        : '';
                    const cards = items.map((r) => `
                        <div class="rule-item ${r.is_active ? '' : 'inactive'} ${r.is_break ? 'break-rule' : ''} ${r.day_type === 'holiday_special' ? 'special-rule' : ''}" data-id="${r.id}">
                            <div class="rule-head">
                                <span class="rule-range">${buildRuleTitle(r)}</span>
                                <div class="d-flex align-items-center gap-2">
                                    ${r.is_break ? '<span class="rule-break-badge">BREAK</span>' : ''}
                                    <span class="rule-factor">x${normalizeFactor(r.multiplier)}</span>
                                </div>
                            </div>
                            <div class="rule-meta">
                                ${dayTypeLabel(r.day_type)} | Urutan: ${Number(r.sort_order || 0)} | Source: ${r.rule_code ? `${r.rule_code}` : 'Manual'}${r.is_break ? ' | Break tidak dihitung' : ''}
                            </div>
                            <div class="rule-example">
                                <div class="mb-1">Contoh jam (stacking):</div>
                                <div class="rule-stack">${buildExampleStackHtml(r)}</div>
                            </div>
                            <div class="rule-action d-flex gap-1">
                                <button class="btn btn-outline-primary btn-detail-edit" data-id="${r.id}">Edit</button>
                                <button class="btn btn-outline-danger btn-detail-delete" data-id="${r.id}">Delete</button>
                            </div>
                        </div>
                    `).join('');
                    const emptyHtml = !items.length
                        ? `<div class="rule-empty">
                                Belum ada rule ${meta.label} pada profil ini.
                                ${dayType === 'holiday_special'
                                    ? '<div class="small mt-1">Sistem akan fallback x4, tetapi lebih aman jika preset disimpan eksplisit di profil.</div><button class="btn btn-sm btn-warning text-white btn-apply-special-preset-inline" type="button">Terapkan Preset x4</button>'
                                    : ''}
                           </div>`
                        : '';
                    return `
                        <div class="rule-day-group ${meta.groupClass}">
                            <div class="rule-day-title">
                                <div>
                                    <div>${meta.label}</div>
                                    <div class="rule-day-subtitle">${meta.subtitle}</div>
                                </div>
                                <span class="rule-day-badge">${meta.badge}</span>
                            </div>
                            <div class="rule-day-shell">
                            <div class="rule-board" data-day-type="${dayType}">
                                ${normalBlock}
                                ${cards}
                                ${emptyHtml}
                            </div>
                            </div>
                        </div>
                    `;
                }).join('');

                $el.html(html);
                bindRuleSortable();
            };

            const saveDetailOrder = (payload) => {
                if (!activeProfilId || !payload.length) return;
                if (isSavingOrder) return;
                isSavingOrder = true;
                $.post(`{{ url('/master-profil-perkalian-jam') }}/${activeProfilId}/details/reorder`, { orders: payload })
                    .done((resp) => {
                        loadDetails();
                        loadProfiles();
                        Swal.fire({ icon: 'success', title: 'Urutan disimpan', text: resp?.message || 'OK', timer: 1100, showConfirmButton: false });
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Simpan urutan gagal', 'error'))
                    .always(() => {
                        isSavingOrder = false;
                    });
            };

            const collectOrderPayload = (container) => {
                const payload = [];
                const cards = Array.from(container.querySelectorAll('.rule-item[data-id]'));
                cards.forEach((card, idx) => {
                    const id = Number(card.getAttribute('data-id') || 0);
                    if (!id) return;
                    payload.push({ id, sort_order: (idx + 1) * 10 });
                });
                return payload;
            };

            const bindRuleSortable = () => {
                document.querySelectorAll('#detailList .rule-board[data-day-type]').forEach((container) => {
                    const sortable = new Sortable(container, {
                        animation: 120,
                        draggable: '.rule-item[data-id]',
                        handle: '.rule-head',
                        onEnd: function () {
                            const payload = collectOrderPayload(container);
                            saveDetailOrder(payload);
                        }
                    });
                    detailSortables.push(sortable);
                });
            };

            const loadRefs = () => {
                return $.getJSON('{{ route('master_profil_perkalian_jam.refs') }}').done((resp) => {
                    refs = resp.data || refs;
                    const options = ['<option value="">- Manual (Tidak ambil master) -</option>']
                        .concat((refs.rules || []).map((r) => `<option value="${r.id}">${r.code} - ${r.name} (${r.day_type}, ${Number(r.hour_start).toFixed(2)}-${Number(r.hour_end).toFixed(2)}, ${Number(r.multiplier).toFixed(2)}x)</option>`));
                    $('#detailRuleId').html(options.join(''));
                });
            };

            const loadProfiles = () => {
                return $.getJSON('{{ route('master_profil_perkalian_jam.data') }}').done((resp) => {
                    profilRows = resp.data || [];
                    profilTable.clear().rows.add(profilRows).draw();
                    const opts = (profilRows || []).map((r) => `<option value="${r.id}">${r.code} - ${r.name}</option>`).join('');
                    $('#copySourceProfilId').html(opts);
                    $('#copyTargetProfilId').html(opts);
                    if (activeProfilId) {
                        $('#copyTargetProfilId').val(String(activeProfilId));
                    }
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load profil', 'error'));
            };

            const loadDetails = () => {
                if (!activeProfilId) {
                    detailRows = [];
                    renderDetailList();
                    $('#detailTitle').text('-');
                    $('#btnAddDetail').prop('disabled', true);
                    $('#btnCopyDayType').prop('disabled', true);
                    $('#btnApplyDynamicBreakPreset').prop('disabled', true);
                    $('#btnApplyAllInPreset').prop('disabled', true);
                    $('#btnApplyHolidaySpecialPreset').prop('disabled', true);
                    return;
                }
                $.getJSON(`{{ url('/master-profil-perkalian-jam') }}/${activeProfilId}/details`)
                    .done((resp) => {
                        detailRows = resp.data || [];
                        renderDetailList();
                        $('#btnCopyDayType').prop('disabled', false);
                        $('#btnApplyDynamicBreakPreset').prop('disabled', false);
                        $('#btnApplyAllInPreset').prop('disabled', false);
                        $('#btnApplyHolidaySpecialPreset').prop('disabled', false);
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load detail', 'error'));
            };

            const fillDetailFromRule = (ruleId) => {
                const rule = (refs.rules || []).find((r) => Number(r.id) === Number(ruleId));
                if (!rule) return;
                $('#detailDayType').val(rule.day_type || 'workday');
                $('#detailHourStart').val(Number(rule.hour_start || 1));
                $('#detailHourEnd').val(Number(rule.hour_end || 1));
                $('#detailMultiplier').val(Number(rule.multiplier || 1));
                $('#detailSourceType').val('master');
            };

            const applyDetailDayTypeDefaults = () => {
                const dayType = String($('#detailDayType').val() || 'workday');
                if (dayType !== 'holiday_special') {
                    return;
                }
                if (!$('#detailRuleId').val()) {
                    $('#detailHourStart').val('1');
                    $('#detailHourEnd').val('24');
                    if (!$('#detailIsBreak').is(':checked')) {
                        $('#detailMultiplier').val('4');
                    }
                }
                $('#detailSortOrder').val('10');
            };

            $('#btnAddProfil').on('click', function () {
                $('#profilModalTitle').text('Tambah Profil');
                $('#profilId').val('');
                $('#profilCode').val('');
                $('#profilName').val('');
                $('#profilDescription').val('');
                $('#profilActive').prop('checked', true);
                profilModal.show();
            });

            $('#profilTable').on('click', '.btn-manage', function () {
                const id = Number($(this).data('id'));
                const row = profilRows.find((x) => Number(x.id) === id);
                if (!row) return;
                activeProfilId = id;
                $('#detailTitle').text(`${row.code} - ${row.name}`);
                $('#btnAddDetail').prop('disabled', false);
                $('#btnCopyDayType').prop('disabled', false);
                $('#btnApplyDynamicBreakPreset').prop('disabled', false);
                $('#btnApplyAllInPreset').prop('disabled', false);
                $('#btnApplyHolidaySpecialPreset').prop('disabled', false);
                $('#copyTargetProfilId').val(String(id));
                loadDetails();
            });

            $('#profilTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = profilRows.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#profilModalTitle').text('Edit Profil');
                $('#profilId').val(row.id);
                $('#profilCode').val(row.code || '');
                $('#profilName').val(row.name || '');
                $('#profilDescription').val(row.description || '');
                $('#profilActive').prop('checked', !!row.is_active);
                profilModal.show();
            });

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

                const defaultCode = String((row.code || 'COPY') + '-COPY').toUpperCase().slice(0, 40);
                const defaultName = String((row.name || 'Profil') + ' (Copy)').slice(0, 180);

                Swal.fire({
                    title: 'Copy Profil?',
                    html: `
                        <div class="text-start">
                            <div class="mb-2 small text-muted">Profil sumber: <b>${(row.code || '-') + ' - ' + (row.name || '-')}</b></div>
                            <div class="mb-2">
                                <label class="form-label mb-1">Kode Profil Baru</label>
                                <input id="swalCopyCode" class="form-control" value="${defaultCode}" maxlength="40" />
                                <div class="form-text">Jika kode sudah ada, sistem akan auto-tambah suffix.</div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1">Nama Profil Baru</label>
                                <input id="swalCopyName" class="form-control" value="${defaultName}" maxlength="180" />
                            </div>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Copy',
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const code = ($('#swalCopyCode').val() || '').toString().trim();
                        const name = ($('#swalCopyName').val() || '').toString().trim();
                        if (!code) {
                            Swal.showValidationMessage('Kode wajib diisi');
                            return false;
                        }
                        if (!name) {
                            Swal.showValidationMessage('Nama wajib diisi');
                            return false;
                        }
                        return { code, name };
                    }
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    const payload = { code: res.value.code, name: res.value.name, copy_details: 1 };
                    $.post(`{{ url('/master-profil-perkalian-jam') }}/${id}/copy`, payload)
                        .done((resp) => {
                            loadProfiles();
                            const newId = Number(resp?.data?.id || 0);
                            if (newId > 0) {
                                // Auto fokus ke profil hasil copy supaya user langsung bisa lihat detailnya.
                                activeProfilId = newId;
                                $('#copyTargetProfilId').val(String(newId));
                                $('#detailTitle').text(`${resp.data.code} - ${resp.data.name}`);
                                $('#btnAddDetail').prop('disabled', false);
                                $('#btnCopyDayType').prop('disabled', false);
                                $('#btnApplyDynamicBreakPreset').prop('disabled', false);
                                $('#btnApplyAllInPreset').prop('disabled', false);
                                $('#btnApplyHolidaySpecialPreset').prop('disabled', false);
                                loadDetails();
                            }
                            Swal.fire('Success', resp?.message || 'Copied', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Copy failed', 'error'));
                });
            });

            $('#profilForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#profilId').val();
                const payload = {
                    code: ($('#profilCode').val() || '').toString().trim(),
                    name: ($('#profilName').val() || '').toString().trim(),
                    description: ($('#profilDescription').val() || '').toString().trim(),
                    is_active: $('#profilActive').is(':checked') ? 1 : 0
                };
                $.ajax({
                    url: id ? `{{ url('/master-profil-perkalian-jam') }}/${id}` : '{{ route('master_profil_perkalian_jam.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    profilModal.hide();
                    loadProfiles();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

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

            $('#btnAddDetail').on('click', function () {
                if (!activeProfilId) return;
                $('#detailModalTitle').text('Tambah Detail Rule');
                $('#detailId').val('');
                $('#detailRuleId').val('');
                $('#detailDayType').val('holiday_special');
                $('#detailHourStart').val('1');
                $('#detailHourEnd').val('24');
                $('#detailMultiplier').val('4');
                $('#detailSortOrder').val('10');
                $('#detailSourceType').val('manual');
                $('#detailIsBreak').prop('checked', false);
                $('#detailMultiplier').prop('readonly', false);
                $('#detailNotes').val('');
                $('#detailActive').prop('checked', true);
                detailModal.show();
            });

            $('#btnCopyDayType').on('click', function () {
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil target dulu', 'warning');
                    return;
                }
                if (!$('#copySourceProfilId').val() && profilRows.length) {
                    $('#copySourceProfilId').val(String(profilRows[0].id));
                }
                $('#copyTargetProfilId').val(String(activeProfilId));
                copyDayTypeModal.show();
            });

            $('#btnApplyAllInPreset').on('click', function () {
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil dulu', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Terapkan ALL-IN (No OT)?',
                    html: `
                        <div class="text-start small">
                            <div>Ini akan menghapus semua detail rule profil aktif, lalu mengganti menjadi:</div>
                            <div class="mt-2"><b>Workday</b>: Jam ke-1 s/d 24 = x0</div>
                            <div><b>Weekend</b>: Jam ke-1 s/d 24 = x0</div>
                            <div><b>Holiday</b>: Jam ke-1 s/d 24 = x0</div>
                            <div><b>Holiday Special</b>: Jam ke-1 s/d 24 = x0</div>
                            <div class="mt-2 text-muted">Hasilnya: lembur tidak diakui untuk perhitungan OT (nilai OT menjadi 0).</div>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, terapkan'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/master-profil-perkalian-jam') }}/${activeProfilId}/details/preset-all-in`)
                        .done((resp) => {
                            loadDetails();
                            loadProfiles();
                            Swal.fire('Success', resp?.message || 'Preset diterapkan', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Preset gagal diterapkan', 'error'));
                });
            });

            const triggerHolidaySpecialPreset = () => {
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil dulu', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Terapkan Holiday Special x4?',
                    html: `
                        <div class="text-start small">
                            <div>Rule Holiday Special akan diset ulang menjadi:</div>
                            <div class="mt-2"><b>Jam ke-1 s/d 24 = x4</b></div>
                            <div class="mt-2 text-muted">Dipakai penuh 24 jam saat tanggal di Master Kalender ditandai Holiday Special.</div>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, terapkan'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/master-profil-perkalian-jam') }}/${activeProfilId}/details/preset-holiday-special`)
                        .done((resp) => {
                            loadDetails();
                            loadProfiles();
                            Swal.fire('Success', resp?.message || 'Preset diterapkan', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Preset gagal diterapkan', 'error'));
                });
            };

            $('#btnApplyHolidaySpecialPreset').on('click', function () {
                triggerHolidaySpecialPreset();
            });

            $('#btnApplyDynamicBreakPreset').on('click', function () {
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil dulu', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Terapkan dummy break dinamis?',
                    html: `
                        <div class="text-start small">
                            <div>Rule Hari Kerja akan diganti menjadi:</div>
                            <div class="mt-2">1. Jam ke-1 = x1.5</div>
                            <div>2. Jam ke-2 = BREAK x0</div>
                            <div>3. Jam ke-3 = x1.5</div>
                            <div>4. Jam ke-4 s/d 5 = x2</div>
                            <div>5. Jam ke-6 = x3</div>
                            <div>6. Jam ke-7 s/d 24 = x4</div>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, terapkan'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/master-profil-perkalian-jam') }}/${activeProfilId}/details/preset-dynamic-break`)
                        .done((resp) => {
                            loadDetails();
                            loadProfiles();
                            Swal.fire('Success', resp?.message || 'Preset diterapkan', 'success');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Preset gagal diterapkan', 'error'));
                });
            });

            $('#detailRuleId').on('change', function () {
                const id = Number($(this).val() || 0);
                if (!id) {
                    applyDetailDayTypeDefaults();
                    return;
                }
                fillDetailFromRule(id);
            });

            $('#detailDayType').on('change', function () {
                applyDetailDayTypeDefaults();
            });

            $('#detailList').on('click', '.btn-detail-edit', function () {
                const id = Number($(this).data('id'));
                const row = detailRows.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#detailModalTitle').text('Edit Detail Rule');
                $('#detailId').val(row.id);
                $('#detailRuleId').val(row.perkalian_jam_id ? String(row.perkalian_jam_id) : '');
                $('#detailDayType').val(row.day_type || 'workday');
                $('#detailHourStart').val(Number(row.hour_start || 1));
                $('#detailHourEnd').val(Number(row.hour_end || 1));
                $('#detailMultiplier').val(Number(row.multiplier || 1));
                $('#detailSortOrder').val(Number(row.sort_order || 0));
                $('#detailSourceType').val(row.source_type || 'manual');
                $('#detailIsBreak').prop('checked', !!row.is_break);
                $('#detailMultiplier').prop('readonly', !!row.is_break);
                $('#detailNotes').val(row.notes || '');
                $('#detailActive').prop('checked', !!row.is_active);
                detailModal.show();
            });

            $('#detailIsBreak').on('change', function () {
                const isBreak = $(this).is(':checked');
                $('#detailMultiplier').prop('readonly', isBreak);
                if (isBreak) {
                    $('#detailMultiplier').val('0');
                } else if (String($('#detailMultiplier').val() || '') === '0') {
                    $('#detailMultiplier').val('1');
                }
            });

            $('#detailForm').on('submit', function (e) {
                e.preventDefault();
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil dulu', 'warning');
                    return;
                }
                const id = $('#detailId').val();
                const payload = {
                    perkalian_jam_id: $('#detailRuleId').val() || '',
                    day_type: $('#detailDayType').val(),
                    hour_start: $('#detailHourStart').val(),
                    hour_end: $('#detailHourEnd').val(),
                    multiplier: $('#detailMultiplier').val(),
                    is_break: $('#detailIsBreak').is(':checked') ? 1 : 0,
                    sort_order: $('#detailSortOrder').val(),
                    source_type: $('#detailSourceType').val(),
                    notes: $('#detailNotes').val(),
                    is_active: $('#detailActive').is(':checked') ? 1 : 0
                };
                $.ajax({
                    url: id ? `{{ url('/master-profil-perkalian-jam/details') }}/${id}` : `{{ url('/master-profil-perkalian-jam') }}/${activeProfilId}/details`,
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    detailModal.hide();
                    loadDetails();
                    loadProfiles();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

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

            $('#detailList').on('click', '.btn-apply-special-preset-inline', function () {
                triggerHolidaySpecialPreset();
            });

            $('#copyDayTypeForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    source_profil_id: Number($('#copySourceProfilId').val() || 0),
                    target_profil_id: Number($('#copyTargetProfilId').val() || 0),
                    day_type: $('#copyDayType').val(),
                    replace_existing: $('#copyReplaceExisting').is(':checked') ? 1 : 0
                };
                $.post('{{ route('master_profil_perkalian_jam.copy_day_type') }}', payload)
                    .done((resp) => {
                        copyDayTypeModal.hide();
                        if (Number(payload.target_profil_id) === Number(activeProfilId)) {
                            loadDetails();
                        }
                        loadProfiles();
                        Swal.fire('Success', resp?.message || 'Copied', 'success');
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Copy failed', 'error'));
            });

            $.when(loadRefs()).always(() => {
                loadProfiles();
                loadDetails();
            });
        });
    </script>
@endpush