@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <style>
        .accordion-button::after {
            display: none !important;
        }

        .transition-icon {
            transition: transform 0.3s ease;
        }

        .rotate-180 {
            transform: rotate(180deg);
        }

        .lead-radio {
            width: 18px;
            height: 18px;
            border: 2px solid #ced4da;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            border-radius: 50%;
            outline: none;
            transition: all 0.15s ease-in-out;
        }

        .lead-radio:checked {
            border-color: #2dce89;
            background-color: #2dce89;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
        }

        .lead-radio:hover {
            border-color: #2dce89;
        }

        /* Animasi Ikon Collapse (Minimize) */
        .toggle-icon {
            transition: transform 0.3s ease;
        }

        .collapsed .toggle-icon {
            transform: rotate(-90deg);
        }

        /* Drag handle styling */
        .drag-handle {
            cursor: grab;
            color: #adb5bd;
            padding: 4px;
            transition: color 0.15s ease;
        }

        .drag-handle:hover {
            color: #6c757d;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .sortable-ghost {
            opacity: 0.4;
            background: #e9ecef !important;
        }

        .sortable-chosen {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .clause-column-list {
            column-count: 2;
            column-gap: 1.5rem;
        }

        .clause-column-item {
            break-inside: avoid;
            display: block;
            margin-bottom: 0.5rem;
        }

        @media (max-width: 767.98px) {
            .clause-column-list {
                column-count: 1;
            }
        }
    </style>

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to('schdhr') }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">

                {{-- Info Header --}}
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Informasi Jadwal Audit</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            {{-- Kiri --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Judul Jadwal</label>
                                    <input type="text" class="form-control" id="title"
                                        placeholder="Contoh: Audit Internal Periode I 2026">
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label">Tahun</label>
                                    <input type="text" class="form-control" id="year" placeholder="2026"
                                        maxlength="4">
                                </div>
                                <input type="hidden" id="type" value="internal">
                            </div>
                            {{-- Kanan --}}
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Tanggal Mulai</label>
                                    <input type="date" class="form-control" id="start_date">
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label">Tanggal Selesai</label>
                                    <input type="date" class="form-control" id="end_date">
                                </div>
                                <div class="form-group">
                                    <label class="form-control-label">Deadline NCR</label>
                                    <input type="date" class="form-control" id="ncr_deadline">
                                    <small class="text-muted">Default: 2 minggu setelah tanggal selesai.</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-control-label">Catatan (Opsional)</label>
                                    <textarea class="form-control" id="notes" rows="2" placeholder="Catatan tambahan untuk jadwal ini..."></textarea>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">

                        <div class="d-flex align-items-center">
                            <button type="button" class="btn btn-success mb-0" id="btn-generate">
                                <i class="fas fa-calendar-plus me-1"></i> Generate Sesi
                            </button>
                            <p class="text-secondary text-xs mb-0 ms-3">Klik untuk membuat card sesi per tanggal berdasarkan
                                rentang di atas.</p>
                        </div>
                    </div>
                </div>

                {{-- Container tanggal hasil generate --}}
                <div id="dates-container" class="mt-4"></div>

                {{-- Button aksi bawah --}}
                <div class="row mt-3 mb-4" id="action-buttons-container" style="display: none;">
                    <div class="col-12 d-flex">
                        <button type="button" class="btn btn-info me-2"><i class="fas fa-paper-plane me-1"></i>
                            Posting</button>
                        <button type="button" class="btn btn-primary me-2"><i class="fas fa-save me-1"></i> Simpan
                            Draft</button>
                        <button type="button" class="btn btn-secondary"
                            onclick="window.location='{{ URL::to('schdhr') }}'"><i class="fas fa-arrow-left me-1"></i>
                            Kembali</button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- TEMPLATE --}}

    {{-- Template: Card Tanggal --}}
    <template id="tpl-date-card">
        <div class="card mb-4 date-card shadow-sm" data-date="{RAW_DATE}">
            <div class="card-header pb-0 pt-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="text-success mb-0"><i class="fas fa-calendar-day me-2"></i>{FORMATTED_DATE}</h6>
                    <span class="badge bg-light text-dark session-count-badge">0 sesi</span>
                </div>
            </div>
            <hr class="horizontal dark mt-2 mb-0">
            <div class="card-body pt-2 pb-3">
                <div class="sessions-container"></div>
                <button type="button" class="btn btn-sm btn-outline-primary mt-3 mb-0 btn-add-session">
                    <i class="fas fa-plus me-1"></i> Tambah Session
                </button>
            </div>
        </div>
    </template>

    {{-- Template: Sesi --}}
    <template id="tpl-session">
        <div class="session-block border rounded mb-3 bg-white shadow-sm">
            {{-- Header Sesi --}}
            <div class="p-3 d-flex justify-content-between align-items-center"
                style="background-color: #f8f9fa; border-radius: 6px 6px 0 0; border-bottom: 1px solid #e9ecef;">
                <div class="d-flex align-items-center">
                    <i class="fas fa-grip-vertical me-3 drag-handle" title="Drag untuk pindahkan urutan"></i>
                    <p class="text-sm font-weight-bold text-dark mb-0" style="cursor: pointer;" data-bs-toggle="collapse"
                        data-bs-target="#collapse{SESSION_ID}" aria-expanded="true">
                        <i class="fas fa-chevron-down me-2 toggle-icon"></i> Sesi #{SESSION_NO}
                        <span class="session-label text-secondary fw-normal"></span>
                    </p>
                </div>
                <button type="button" class="btn btn-link text-danger p-0 mb-0 btn-remove-session" title="Hapus Sesi">
                    <i class="fas fa-times fa-lg"></i>
                </button>
            </div>

            {{-- Body Sesi --}}
            <div class="collapse show" id="collapse{SESSION_ID}">
                <div class="p-3">
                    {{-- Baris 1: Tipe Sesi, Waktu, Departemen --}}
                    <div class="row g-2 mb-2">
                        <div class="col-md-3">
                            <label class="form-control-label text-xs">Tipe Sesi</label>
                            <select class="form-select form-select-sm select2-dynamic session-type-select"
                                name="session_type">
                                <option value="audit">Audit</option>
                                <option value="open_meeting">Opening Meeting</option>
                                <option value="closing_audit">Closing Audit</option>
                                <option value="closing_meeting">Closing Meeting</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-control-label text-xs">Waktu</label>
                            <div class="d-flex align-items-center">
                                <input type="time" class="form-control form-control-sm" name="time_start"
                                    style="min-height:36px;">
                                <span class="mx-2 text-muted fw-bold">—</span>
                                <input type="time" class="form-control form-control-sm" name="time_end"
                                    style="min-height:36px;">
                            </div>
                        </div>
                        <div class="col-md-5 audit-only-field">
                            <label class="form-control-label text-xs">Departemen</label>
                            <select class="form-select form-select-sm select2-dynamic dept-select" name="iddepartments">
                                <option value="">-- Pilih Departemen --</option>
                            </select>
                        </div>
                    </div>

                    {{-- Baris 2: PIC/MR, Keterangan --}}
                    <div class="row g-2 mb-3">
                        <div class="col-md-3 pic-select-field">
                            <label class="form-control-label text-xs">PIC / MR</label>
                            <select class="form-select form-select-sm select2-dynamic pic-select" name="pic_mr" multiple
                                style="min-height:36px;"></select>
                        </div>
                        <div class="col-md-3 closing-audit-only-field" style="display: none;">
                            <label class="form-control-label text-xs">PIC / MR</label>
                            <input type="text" class="form-control form-control-sm" name="pic_mr_text"
                                placeholder="Nama PIC / MR" style="min-height:36px;">
                        </div>
                        <div class="col-md-3 meeting-only-field" style="display: none;">
                            <label class="form-control-label text-xs">Auditor</label>
                            <input type="text" class="form-control form-control-sm" name="auditor_name"
                                placeholder="Nama auditor" style="min-height:36px;">
                        </div>
                        <div class="col-md-9 description-field">
                            <label class="form-control-label text-xs">Keterangan</label>
                            <input type="text" class="form-control form-control-sm" name="description"
                                placeholder="Opsional" style="min-height:36px;">
                        </div>
                    </div>

                    {{-- Daftar Auditor --}}
                    <div class="mb-3 audit-only-field">
                        <div class="d-flex align-items-center mb-2">
                            <button type="button" class="btn btn-sm btn-light border btn-add-auditor text-dark">
                                <i class="fas fa-user-plus me-1"></i> Tambah Auditor
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-borderless mb-0 auditor-table w-100"
                                style="background-color: #f8f9fa; border-radius: 6px;">
                                <thead class="border-bottom" style="background-color: #f1f2f5;">
                                    <tr>
                                        <th class="py-2 px-3 text-secondary text-xs">Auditor</th>
                                        <th class="text-center py-2 px-3 text-secondary text-xs" width="100">Lead</th>
                                        <th class="text-center py-2 px-3 text-secondary text-xs" width="80">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Klausul ISO yang Diaudit --}}
                    <div class="iso-sections rounded border audit-only-field" style="background-color: #fff;">
                        <div class="px-3 py-2 font-weight-bold text-xs text-uppercase border-bottom"
                            style="background-color: #f1f2f5; border-radius: 6px 6px 0 0;">
                            Klausul yang Diaudit
                        </div>
                        <div class="p-3 clauses-container">
                            <p class="text-muted text-sm mb-0">
                                Pilih departemen terlebih dahulu
                            </p>
                        </div>
                    </div>

                    {{-- SMK3 textarea --}}
                    <div class="mt-3 audit-only-field">
                        <label class="form-control-label text-xs">SMK3 (Opsional)
                            <small>Beri Enter Untuk Memisahkan Baris</small>
                        </label>
                        <textarea class="form-control form-control-sm" name="smK3" rows="2"
                            placeholder="Catatan SMK3 untuk sesi ini..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </template>

    {{-- Template: Baris Auditor --}}
    <template id="tpl-auditor-row">
        <tr class="auditor-row border-bottom">
            <td class="align-middle px-3">
                <select class="form-select form-select-sm select2-dynamic px-0 text-sm auditor-select" name="idauditor">
                    <option value="">-- Pilih Auditor --</option>
                </select>
            </td>
            <td class="text-center align-middle px-3">
                <input class="lead-radio" type="radio" name="lead_auditor_{SESSION_ID}">
            </td>
            <td class="text-center align-middle px-3">
                <button type="button" class="btn btn-sm btn-outline-danger mb-0 px-2 py-1 btn-remove-auditor"
                    style="box-shadow: none;">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </td>
        </tr>
    </template>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        var departments = @json($departments ?? []);
        var globalPicMrOptions = @json($globalPicMrOptions ?? []);
        var auditors = @json($auditors ?? []);
        var standards = @json($standards ?? []);
        var clauses = @json($clauses ?? []);
        var departmentDefaultClauses = @json($departmentDefaultClauses ?? []);
    </script>
    <script>
        $(document).ready(function() {

            $('.select2-header').select2({
                width: '100%'
            });

            var namaBulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September',
                'Oktober', 'November', 'Desember'
            ];
            var namaHari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];

            function generateId() {
                return Math.random().toString(36).substr(2, 9);
            }

            function formatTanggal(dateStr) {
                var d = new Date(dateStr);
                return namaHari[d.getDay()] + ', ' + d.getDate() + ' ' + namaBulan[d.getMonth()] + ' ' + d
                    .getFullYear();
            }

            function getDepartmentById(departmentId) {
                return departments.find(function(department) {
                    return String(department.iddepartments) === String(departmentId);
                }) || null;
            }

            function usesGlobalPicOptions($session) {
                var type = $session.find('.session-type-select').val();
                return type === 'open_meeting' || type === 'closing_meeting' || type === 'closing_audit';
            }

            function getDepartmentPicValues(deptId) {
                var department = getDepartmentById(deptId);

                if (!department || !department.pics) {
                    return [];
                }

                return department.pics.map(function(pic) {
                    return String(pic.id);
                });
            }

            function populatePicOptions($session, deptId, selectedValues) {
                deptId = deptId || $session.find('[name="iddepartments"]').val();
                var $picSelect = $session.find('[name="pic_mr"]');
                var department = getDepartmentById(deptId);
                var pics = usesGlobalPicOptions($session) ?
                    globalPicMrOptions :
                    (department && department.pics ? department.pics : []);
                selectedValues = (selectedValues || []).map(function(value) {
                    return String(value);
                });

                $picSelect.empty();

                pics.forEach(function(pic) {
                    $picSelect.append(new Option(pic.label, pic.id, false, selectedValues.includes(String(
                        pic.id))));
                });

                selectedValues.forEach(function(value) {
                    value = String(value);
                    if (value.startsWith('name:') && $picSelect.find('option[value="' + value.replace(/"/g,
                            '\\"') + '"]').length === 0) {
                        $picSelect.append(new Option(value.substring(5), value, true, true));
                    }
                });

                if ($picSelect.hasClass('select2-hidden-accessible')) {
                    $picSelect.trigger('change.select2');
                }
            }

            var sessionCounter = {};
            var ncrDeadlineManuallyChanged = false;

            function addDaysToDate(dateString, days) {
                if (!dateString) return '';

                var date = new Date(dateString + 'T00:00:00');
                date.setDate(date.getDate() + days);

                var yyyy = date.getFullYear();
                var mm = String(date.getMonth() + 1).padStart(2, '0');
                var dd = String(date.getDate()).padStart(2, '0');

                return `${yyyy}-${mm}-${dd}`;
            }

            function getDefaultNcrDeadline() {
                return addDaysToDate($('#end_date').val(), 14);
            }

            function syncDefaultNcrDeadline() {
                if (ncrDeadlineManuallyChanged) return;

                var defaultDeadline = getDefaultNcrDeadline();
                if (defaultDeadline) {
                    $('#ncr_deadline').val(defaultDeadline);
                }
            }

            $('#end_date').on('change', function() {
                syncDefaultNcrDeadline();
            });

            $('#ncr_deadline').on('change', function() {
                ncrDeadlineManuallyChanged = !!$(this).val();

                if (!ncrDeadlineManuallyChanged) {
                    syncDefaultNcrDeadline();
                }
            });

            $('#btn-generate').click(function() {
                let startDate = $('#start_date').val();
                let endDate = $('#end_date').val();

                if (!startDate || !endDate) {
                    Swal.fire('Peringatan', 'Harap isi tanggal mulai dan selesai.', 'warning');
                    return;
                }
                if (new Date(startDate) > new Date(endDate)) {
                    Swal.fire('Peringatan', 'Tanggal selesai harus sama atau lebih dari tanggal mulai.',
                        'warning');
                    return;
                }

                if ($('#dates-container').children().length > 0) {
                    Swal.fire({
                        title: 'Generate Ulang?',
                        text: 'Data sesi yang sudah diisi akan hilang. Lanjutkan?',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, generate ulang',
                        cancelButtonText: 'Batal'
                    }).then((result) => {
                        if (result.isConfirmed) doGenerate(startDate, endDate);
                    });
                } else {
                    doGenerate(startDate, endDate);
                }
            });

            function doGenerate(startDate, endDate) {
                $('#dates-container').empty();
                sessionCounter = {};

                let current = new Date(startDate);
                let last = new Date(endDate);

                while (current <= last) {
                    let yyyy = current.getFullYear();
                    let mm = String(current.getMonth() + 1).padStart(2, '0');
                    let dd = String(current.getDate()).padStart(2, '0');
                    let rawDate = `${yyyy}-${mm}-${dd}`;
                    let formatted = formatTanggal(rawDate);

                    sessionCounter[rawDate] = 0;

                    let cardHtml = $('#tpl-date-card').html()
                        .replace(/{RAW_DATE}/g, rawDate)
                        .replace(/{FORMATTED_DATE}/g, formatted);

                    let $card = $(cardHtml);
                    $('#dates-container').append($card);

                    addSessionBlock($card.find('.sessions-container'), rawDate);
                    updateSessionCount($card, rawDate);

                    initSortable($card.find('.sessions-container')[0]);

                    current.setDate(current.getDate() + 1);
                }

                $('#action-buttons-container').fadeIn();
                $('html, body').animate({
                    scrollTop: $('#dates-container').offset().top - 80
                }, 500);
            }

            function getPreviousSessionEndTime($container) {
                let $lastSession = $container.find('.session-block').last();
                return $lastSession.length ? $lastSession.find('[name="time_end"]').val() : '';
            }

            function addSessionBlock($container, rawDate) {
                let previousEndTime = getPreviousSessionEndTime($container);
                let sessionId = generateId();
                sessionCounter[rawDate] = (sessionCounter[rawDate] || 0) + 1;
                let sessionNo = sessionCounter[rawDate];

                let sessionHtml = $('#tpl-session').html()
                    .replace(/{SESSION_ID}/g, sessionId)
                    .replace(/{SESSION_NO}/g, sessionNo);

                let $session = $(sessionHtml);

                $session.find('.btn-remove-session').click(function(e) {
                    e.stopPropagation();
                    let $dateCard = $session.closest('.date-card');
                    $session.slideUp('fast', function() {
                        $(this).remove();
                        updateSessionCount($dateCard, rawDate);
                    });
                });

                addAuditorRow($session.find('tbody'), sessionId);
                $container.append($session);

                if (previousEndTime) {
                    $session.find('[name="time_start"]').val(previousEndTime);
                }

                populateDropdowns($session, sessionId);

                $session.find('.btn-add-auditor').click(function() {
                    addAuditorRow($session.find('tbody'), sessionId);
                });

            }

            function populateDropdowns($session, sessionId) {
                var $deptSelect = $session.find('.dept-select');
                departments.forEach(function(d) {
                    var label = d.department_label || (d.name + ' - ' + (d.username || ('Dept #' + d
                        .iddepartments)) + ' (' + d.kode_utama + ' / ' + d.prefix + ')');
                    $deptSelect.append('<option value="' + d.iddepartments + '">' + label + '</option>');
                });

                var $clausesContainer = $session.find('.clauses-container');
                $clausesContainer.empty();

                var badgeColors = ['primary', 'warning', 'success', 'info', 'secondary'];

                var accordionId = 'accordion-clauses-' + sessionId;
                var htmlAccordion = '<div class="accordion accordion-sm" id="' + accordionId + '">';

                standards.forEach(function(std, i) {
                    var color = badgeColors[i % badgeColors.length];
                    var stdClauses = clauses.filter(function(c) {
                        return c.idstandards == std.idstandards;
                    });

                    if (stdClauses.length === 0) return;

                    var targetId = 'collapse-' + std.idstandards + '-' + sessionId;
                    var headingId = 'heading-' + std.idstandards + '-' + sessionId;
                    var selectAllId = 'select-all-' + std.idstandards + '-' + sessionId;

                    htmlAccordion +=
                        `
                                                                                                                                                <div class="accordion-item mb-2 border rounded">
                                                                                                                                                    <h2 class="accordion-header" id="${headingId}">
                                                                                                                                                        <button class="accordion-button collapsed py-2 px-3 bg-light d-flex align-items-center w-100" type="button" data-bs-toggle="collapse" data-bs-target="#${targetId}" aria-expanded="false" aria-controls="${targetId}">
                                                                                                                                                            <div class="d-flex align-items-center flex-grow-1">
                                                                                                                                                                <span class="badge bg-${color} me-2">${std.code}</span>
                                                                                                                                                                <span class="text-sm fw-bold text-dark">${std.name || 'Standar ISO'}</span>
                                                                                                                                                            </div>
                                                                                                                                                            <div class="d-flex align-items-center ms-auto">
                                                                                                                                                                <span class="me-3 text-xs text-muted clause-counter-${std.idstandards}-${sessionId}">0 / ${stdClauses.length} Dipilih</span>
                                                                                                                                                                <i class="fas fa-chevron-down text-sm text-secondary transition-icon"></i>
                                                                                                                                                            </div>
                                                                                                                                                        </button>
                                                                                                                                                    </h2>
                                                                                                                                                    <div id="${targetId}" class="accordion-collapse collapse" aria-labelledby="${headingId}" data-bs-parent="#${accordionId}">
                                                                                                                                                        <div class="accordion-body p-3">
                                                                                                                                                            <div class="form-check form-switch mb-3 pb-2 border-bottom">
                                                                                                                                                                <input class="form-check-input select-all-klausul" type="checkbox" id="${selectAllId}" data-std-id="${std.idstandards}" data-session-id="${sessionId}">
                                                                                                                                                                <label class="form-check-label text-sm fw-bold" for="${selectAllId}">Pilih Semua Klausul ${std.code}</label>
                                                                                                                                                            </div>
                                                                                                                                                            <div class="clause-column-list">`;

                    stdClauses.forEach(function(c) {
                        htmlAccordion +=
                            `
                                                                                                                                                                <div class="clause-column-item">
                                                                                                                                                                    <div class="form-check">
                                                                                                                                                                        <input class="form-check-input clause-check std-${std.idstandards}-${sessionId}" type="checkbox" id="chk-clause-${c.idclauses}-${sessionId}" value="${c.idclauses}">
                                                                                                                                                                        <label class="form-check-label text-sm text-wrap" for="chk-clause-${c.idclauses}-${sessionId}">${c.clause_number} - ${c.clause_name}</label>
                                                                                                                                                                    </div>
                                                                                                                                                                </div>`;
                    });

                    htmlAccordion +=
                        `
                                                                                                                                                            </div>
                                                                                                                                                        </div>
                                                                                                                                                    </div>
                                                                                                                                                </div>`;
                });

                htmlAccordion += '</div>';

                if (htmlAccordion === '<div class="accordion accordion-sm" id="' + accordionId + '"></div>') {
                    $clausesContainer.html('<p class="text-muted text-sm mb-0">Tidak ada klausul tersedia.</p>');
                } else {
                    $clausesContainer.html(htmlAccordion);
                }

                if ($clausesContainer.children().length === 0) {
                    $clausesContainer.html('<p class="text-muted text-sm mb-0">Tidak ada klausul tersedia.</p>');
                }

                $session.find('.select2-dynamic').select2({
                    width: '100%'
                });
            }

            function addAuditorRow($tbody, sessionId) {
                let html = $('#tpl-auditor-row').html().replace(/{SESSION_ID}/g, sessionId);
                let $row = $(html);

                var $auditorSelect = $row.find('.auditor-select');
                auditors.forEach(function(a) {
                    $auditorSelect.append('<option value="' + a.idauditor + '">' + a.name + '</option>');
                });

                $row.find('.btn-remove-auditor').click(function() {
                    $row.find('.select2-dynamic').select2('destroy');
                    $row.fadeOut('fast', function() {
                        $(this).remove();
                    });
                });

                $tbody.append($row);
                $row.find('.select2-dynamic').select2({
                    width: '100%'
                });
            }

            function updateSessionCount($card, rawDate) {
                let count = $card.find('.session-block').length;
                $card.find('.session-count-badge').text(count + ' sesi');
            }

            function initSortable(container) {
                new Sortable(container, {
                    handle: '.drag-handle',
                    animation: 200,
                    ghostClass: 'sortable-ghost',
                    chosenClass: 'sortable-chosen',
                    onEnd: function() {
                        $(container).find('.session-block').each(function(i) {
                            $(this).find('.session-name').text('Sesi #' + (i + 1));
                        });
                    }
                });
            }

            $(document).on('click', '.btn-add-session', function() {
                let $card = $(this).closest('.date-card');
                let rawDate = $card.data('date');
                let $container = $card.find('.sessions-container');
                addSessionBlock($container, rawDate);
                updateSessionCount($card, rawDate);
            });

            $(document).on('change', '.dept-select', function() {
                var $session = $(this).closest('.session-block');
                var deptId = $(this).val();
                populatePicOptions($session, deptId, getDepartmentPicValues(deptId));
                applyDepartmentDefaultClauses($session, deptId);
            });

            $(document).on('change', '.session-type-select, .audit-only-field select, input[type="time"]',
                function() {
                    var $session = $(this).closest('.session-block');
                    var type = $session.find('.session-type-select').val();

                    if (type === 'audit') {
                        $session.find('.audit-only-field').slideDown('fast');
                    } else {
                        $session.find('.audit-only-field').slideUp('fast');
                    }

                    var usesFreeText = type === 'open_meeting' || type === 'closing_meeting' ||
                        type === 'closing_audit';
                    var isClosingAudit = type === 'closing_audit';
                    $session.find('.meeting-only-field').toggle(usesFreeText);
                    $session.find('.pic-select-field').toggle(!isClosingAudit);
                    $session.find('.closing-audit-only-field').toggle(isClosingAudit);
                    $session.find('.description-field').toggleClass('col-md-9', !usesFreeText)
                        .toggleClass('col-md-6', usesFreeText);

                    populatePicOptions($session, null, $session.find('[name="pic_mr"]').val() || []);
                    updateSessionLabel($session);
                });

            function updateSessionLabel($session) {
                var type = $session.find('.session-type-select').val();
                var dept = $session.find('.dept-select option:selected').text().trim();
                var startTime = $session.find('input[type="time"]').eq(0).val();
                var endTime = $session.find('input[type="time"]').eq(1).val();

                var label = '';
                if (type === 'audit' && dept && dept !== '-- Pilih Departemen --') {
                    label = '- ' + dept;
                } else if (type === 'open_meeting') {
                    label = '- Opening Meeting';
                } else if (type === 'closing_meeting') {
                    label = '- Closing Meeting';
                } else if (type === 'closing_audit') {
                    label = '- Closing Audit';
                }

                if (startTime && endTime) {
                    label += ' · ' + startTime + ' - ' + endTime;
                }

                $session.find('.session-label').text(label);
            }

            $(document).on('change', '.select-all-klausul', function() {
                let stdId = $(this).data('std-id');
                let sessionId = $(this).data('session-id');
                let isChecked = $(this).is(':checked');
                let $context = $(this).closest('.session-block');

                $context.find(`.std-${stdId}-${sessionId}`).prop('checked', isChecked);

                updateClauseCounter(stdId, sessionId, $context);
            });

            $(document).on('change', '.clause-check', function() {
                let classes = $(this).attr('class').split(' ');
                let stdClass = classes.find(c => c.startsWith('std-'));

                if (stdClass) {
                    let parts = stdClass.split('-');
                    let stdId = parts[1];
                    let sessionId = parts[2];
                    let $context = $(this).closest('.session-block');

                    updateClauseCounter(stdId, sessionId, $context);
                }
            });

            function updateClauseCounter(stdId, sessionId, $context) {
                $context = $context || $(document);
                let total = $context.find(`.std-${stdId}-${sessionId}`).length;
                let checked = $context.find(`.std-${stdId}-${sessionId}:checked`).length;

                $context.find(`.clause-counter-${stdId}-${sessionId}`).text(`${checked} / ${total} Dipilih`);

                $context.find(`#select-all-${stdId}-${sessionId}`).prop('checked', total > 0 && checked === total);
            }

            function refreshAllClauseCounters($session) {
                $session.find('.select-all-klausul').each(function() {
                    updateClauseCounter($(this).data('std-id'), $(this).data('session-id'), $session);
                });
            }

            function selectedClauseValues($session) {
                return $session.find('.clause-check:checked').map(function() {
                    return String($(this).val());
                }).get();
            }

            function sameClauseSelection(current, defaults) {
                current = current.map(String).sort();
                defaults = defaults.map(String).sort();

                return current.length === defaults.length && current.every(function(value, index) {
                    return value === defaults[index];
                });
            }

            function setClauseSelection($session, clauseIds) {
                clauseIds = (clauseIds || []).map(String);
                $session.find('.clause-check').prop('checked', false);
                clauseIds.forEach(function(id) {
                    $session.find('.clause-check[value="' + id.replace(/"/g, '\\"') + '"]').prop('checked',
                        true);
                });
                refreshAllClauseCounters($session);
            }

            function applyDepartmentDefaultClauses($session, deptId) {
                if ($session.find('.session-type-select').val() !== 'audit') {
                    return;
                }

                var defaults = (departmentDefaultClauses[String(deptId)] || []).map(String);

                if (defaults.length === 0) {
                    return;
                }

                var current = selectedClauseValues($session);

                if (sameClauseSelection(current, defaults)) {
                    return;
                }

                if (current.length > 0 && !window.confirm('Ganti pilihan klausul dengan default departemen ini?')) {
                    return;
                }

                setClauseSelection($session, defaults);
            }

            $(document).on('show.bs.collapse hide.bs.collapse', '.accordion-collapse', function(e) {
                var $icon = $(this).parent().find('.accordion-button i.fa-chevron-down');
                if (e.type === 'show') {
                    $icon.addClass('rotate-180');
                } else {
                    $icon.removeClass('rotate-180');
                }
            });

            function collectScheduleData(status) {
                let payload = {
                    status: status,
                    title: $('#title').val(),
                    year: $('#year').val(),
                    type: $('#type').val(),
                    start_date: $('#start_date').val(),
                    end_date: $('#end_date').val(),
                    ncr_deadline: $('#ncr_deadline').val(),
                    notes: $('#notes').val(),
                    dates: []
                };

                $('.date-card').each(function() {
                    let dateStr = $(this).data('date');
                    let dateData = {
                        date: dateStr,
                        sessions: []
                    };

                    $(this).find('.session-block').each(function(index) {
                        let $session = $(this);

                        let sessionData = {
                            session_no: index + 1,
                            session_type: $session.find('[name="session_type"]').val(),
                            time_start: $session.find('[name="time_start"]').val(),
                            time_end: $session.find('[name="time_end"]').val(),
                            iddepartments: $session.find('[name="iddepartments"]').val(),
                            pic_mr: $session.find('[name="pic_mr"]').val() || [],
                            pic_mr_text: $session.find('[name="pic_mr_text"]').val(),
                            auditor_name: $session.find('[name="auditor_name"]').val(),
                            description: $session.find('[name="description"]').val(),
                            smK3: $session.find('[name="smK3"]').val(),
                            auditors: [],
                            clauses: []
                        };

                        $session.find('.auditor-row').each(function() {
                            let auditorId = $(this).find('[name="idauditor"]').val();
                            let isLead = $(this).find('.lead-radio').is(':checked') ? 1 : 0;

                            if (auditorId) {
                                sessionData.auditors.push({
                                    idauditor: auditorId,
                                    is_lead: isLead
                                });
                            }
                        });

                        $session.find('.clause-check:checked').each(function() {
                            sessionData.clauses.push($(this).val());
                        });

                        dateData.sessions.push(sessionData);
                    });

                    if (dateData.sessions.length > 0) {
                        payload.dates.push(dateData);
                    }
                });

                return payload;
            }

            function validateScheduleTimes(data) {
                for (let dateItem of data.dates) {
                    for (let session of dateItem.sessions) {
                        if (!session.time_start || !session.time_end) {
                            Swal.fire('Peringatan',
                                'Waktu mulai dan selesai wajib diisi untuk setiap sesi.',
                                'warning');
                            return false;
                        }

                        if (session.time_end < session.time_start) {
                            Swal.fire('Peringatan',
                                'Waktu selesai harus sama atau lebih dari waktu mulai.',
                                'warning');
                            return false;
                        }
                    }
                }

                return true;
            }

            $('#action-buttons-container .btn-primary').click(function() {
                var data = collectScheduleData(0);
                submitSchedule(data);
            });

            $('#action-buttons-container .btn-info').click(function() {
                var data = collectScheduleData(1);
                submitSchedule(data);
            });

            function submitSchedule(data) {
                if (!data.title || !data.year || !data.start_date || !data.end_date) {
                    Swal.fire('Peringatan', 'Harap isi Judul, Tahun, Tanggal Mulai dan Tanggal Selesai.',
                        'warning');
                    return;
                }
                if (data.ncr_deadline && new Date(data.ncr_deadline) < new Date(data.end_date)) {
                    Swal.fire('Peringatan', 'Deadline NCR harus sama atau lebih dari tanggal selesai.',
                        'warning');
                    return;
                }
                if (data.dates.length === 0) {
                    Swal.fire('Peringatan', 'Belum ada sesi yang di-generate.', 'warning');
                    return;
                }
                if (!validateScheduleTimes(data)) {
                    return;
                }

                $.ajax({
                    url: '{{ URL::to('schdhr') }}',
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    beforeSend: function() {
                        Swal.fire({
                            title: 'Menyimpan...',
                            text: 'Harap tunggu',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });
                    },
                    success: function(res) {
                        Swal.fire('Berhasil', res.message, 'success').then(() => {
                            window.location = '{{ URL::to('schdhr') }}';
                        })
                    },
                    error: function(xhr) {
                        let msg = xhr.responseJSON ? xhr.responseJSON.message : 'Terjadi kesalahan.';
                        Swal.fire('Gagal', msg, 'error');
                    }
                })
            }
        });
    </script>
@endpush