@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', [
        'title' => 'Edit Adjustment',
        'title_group' => $title_group,
        'title_menu' => $title_menu,
    ])
    <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="history.back()">
                            <i class="fas fa-arrow-left me-1"></i><span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->edit == '1' && $header->id_tutup_buku == null)
                            <button class="btn btn-primary mb-0" onclick="updateData()">
                                <i class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Styling agar Select2 matches Argon Dashboard inputs */
        .select2-container--default .select2-selection--single {
            height: 38px !important;
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            display: flex !important;
            align-items: center !important;
            background-color: #fff !important;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default .select2-selection--single:hover {
            border-color: #00b7bd !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #495057 !important;
            padding-left: 0.75rem !important;
            font-size: 0.875rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

        span.select2.select2-container {
            width: 100% !important;
        }

        body>.select2-container {
            width: auto !important;
        }

        /* Custom Dropdown Styling */
        .select2-container--default .select2-dropdown {
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
            z-index: 1060 !important;
            overflow: hidden !important;
        }

        /* Custom Search Input */
        .select2-container--default .select2-search--dropdown {
            padding: 8px 10px !important;
            background-color: #f8f9fa !important;
            border-bottom: 1px solid #e9ecef !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #d2d6da !important;
            border-radius: 0.375rem !important;
            padding: 6px 10px !important;
            font-size: 0.875rem !important;
            outline: none !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #00b7bd !important;
        }

        /* Options List */
        .select2-container--default .select2-results>.select2-results__options {
            max-height: 320px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            /* Prevents horizontal scrollbar */
        }

        .select2-container--default .select2-results__option {
            padding: 8px 16px !important;
            font-size: 0.875rem !important;
            color: #495057 !important;
            text-align: left !important;
            white-space: nowrap !important;
            /* Prevents wrapping and forces ellipsis */
            text-overflow: ellipsis !important;
            overflow: hidden !important;
        }

        /* Hover/Highlight state */
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #00b7bd !important;
            color: #fff !important;
            padding-left: 16px !important;
        }

        /* Selected option */
        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #e9ecef !important;
            color: #32325d !important;
        }

        /* Disabled/Header option (like parents) */
        .select2-container--default .select2-results__option[aria-disabled=true] {
            color: #444444 !important;
            background-color: #dcdcdc !important;
            font-weight: 600 !important;
            cursor: not-allowed !important;
        }
    </style>

    <div class="container-fluid py-4">
        <form role="form" id="mutasi-form" onsubmit="event.preventDefault(); return false;">
            @csrf
            @method('PUT')
            <input type="hidden" name="periode" id="periode" value="{{ $periode }}">

            {{-- ===== HEADER ADJUSTMENT ===== --}}
            <div class="card mb-4">
                <div class="card-header pb-0 mt-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="text-uppercase text-xs font-weight-bolder mb-0" style="color: #028284;">
                            Header Adjustment — <span class="text-primary">{{ $header->id_header }}</span>
                        </h6>
                        @php
                            $periodeCarbon = \Carbon\Carbon::createFromFormat('Y-m', $periode);
                            $minTanggal = $periodeCarbon->copy()->startOfMonth()->format('Y-m-d');
                            $maxTanggal = $periodeCarbon->copy()->endOfMonth()->format('Y-m-d');
                        @endphp
                        <span class="badge bg-info py-2 px-3">
                            <i class="fas fa-calendar-alt me-1"></i>
                            Periode:
                            {{ $periodeCarbon->translatedFormat('F Y') }}
                        </span>
                    </div>
                </div>
                <div class="card-body pt-2">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">
                                    Tanggal <span class="text-danger">*</span>
                                </label>

                                <input class="form-control" type="date" name="tanggal" id="tanggal"
                                    value="{{ old('tanggal', $header->tanggal) }}" min="{{ $minTanggal }}"
                                    max="{{ $maxTanggal }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Keterangan</label>
                                <input class="form-control" type="text" name="keterangan_header" id="keterangan_header"
                                    value="{{ $header->keterangan }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== DETAIL ADJUSTMENT ===== --}}
            <div class="card">
                <div class="card-header pb-0 border-bottom">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="text-uppercase text-xs font-weight-bolder mb-0" style="color: #028284;">Edit Detail
                            Transaksi</h6>
                        <div>
                            <span id="info-saldo-atas" class="badge bg-info me-3"
                                style="display:none; font-size: 0.85rem;"></span>
                            @if ($header->id_tutup_buku == null)
                                <button type="button" class="btn btn-sm btn-primary mb-0" onclick="addRow()">
                                    <i class="fas fa-plus me-1"></i> Tambah Baris
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0" id="detail-table">
                            <thead>
                                <tr style="background-color: #00b7bd4f;">
                                    <th class="text-sm font-weight-bolder ps-4" style="width: 5%">No.</th>
                                    <th class="text-sm font-weight-bolder" style="width: 45%">COA (No - Nama COA)</th>
                                    <th class="text-sm font-weight-bolder" style="width: 22%">Debit (Pengeluaran)</th>
                                    <th class="text-sm font-weight-bolder" style="width: 22%">Kredit (Penerimaan)</th>
                                    <th class="text-center text-sm font-weight-bolder" style="width: 6%"></th>
                                </tr>
                            </thead>
                            <tbody id="detail-body">
                                @foreach ($details as $index => $detail)
                                    <tr class="detail-row">
                                        <td class="text-sm font-weight-normal text-center ps-4 row-number">
                                            {{ $loop->iteration }}</td>
                                        <td class="p-2">
                                            <select class="coa-select" name="id_coa[]" required
                                                {{ $header->id_tutup_buku != null ? 'disabled' : '' }}>
                                                <option value="">-- Pilih COA --</option>
                                                @foreach ($coas as $coa)
                                                    <option value="{{ $coa->id_coa }}"
                                                        {{ $detail->id_coa == $coa->id_coa ? 'selected' : '' }}
                                                        {{ $coa->is_parent ? 'disabled class=font-weight-bold style=background-color:#f8f9fa' : '' }}>
                                                        {!! str_repeat('&nbsp;', $coa->level * 4) !!}{{ $coa->id_coa }} - {{ $coa->nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="p-2">
                                            <input type="text" class="form-control input-debit text-end" name="debit[]"
                                                placeholder="0"
                                                value="{{ $detail->jumlah > 0 ? number_format($detail->jumlah, 2, ',', '.') : '' }}"
                                                oninput="formatRupiahInput(this); autoFillOpposite(this, 'debit'); calculateTotal()"
                                                {{ $header->id_tutup_buku != null ? 'disabled' : '' }}>
                                        </td>
                                        <td class="p-2">
                                            <input type="text" class="form-control input-kredit text-end" name="kredit[]"
                                                placeholder="0"
                                                value="{{ $detail->jumlah < 0 ? number_format(abs($detail->jumlah), 2, ',', '.') : '' }}"
                                                oninput="formatRupiahInput(this); autoFillOpposite(this, 'kredit'); calculateTotal()"
                                                {{ $header->id_tutup_buku != null ? 'disabled' : '' }}>
                                        </td>
                                        <td class="text-center p-2">
                                            @if ($header->id_tutup_buku == null)
                                                <button type="button" class="btn btn-link text-danger mb-0 px-2"
                                                    onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr style="background-color: #f8f9fa;">
                                    <td class="ps-4"></td>
                                    <td class="text-end font-weight-bold py-3 pe-3">
                                        <span class="text-dark">Total</span>
                                    </td>
                                    <td class="py-3 px-2">
                                        <input type="text" id="total-debit"
                                            class="form-control font-weight-bold text-dark border-0 bg-transparent text-end"
                                            readonly value="Rp 0">
                                    </td>
                                    <td class="py-3 px-2">
                                        <input type="text" id="total-kredit"
                                            class="form-control font-weight-bold text-dark border-0 bg-transparent text-end"
                                            readonly value="Rp 0">
                                    </td>
                                    <td></td>
                                </tr>
                                <tr id="balance-row">
                                    <td colspan="5" class="text-center py-2">
                                        <span id="balance-status" class="badge bg-secondary text-sm px-4 py-2">
                                            Menghitung...
                                        </span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        function updateBadge() {
            let textToShow = null;
            $('.detail-row').each(function() {
                if ($(this).data('saldo_text')) {
                    textToShow = $(this).data('saldo_text');
                }
            });
            if (textToShow) {
                $('#info-saldo-atas').text(textToShow).show();
            } else {
                $('#info-saldo-atas').hide();
            }
        }

        // Removed initCoaSearch and filterCoaOptions

        $(document).on('change', '.coa-select', function() {
            var select = $(this);
            var id_coa = select.val();
            var row = select.closest('tr');

            // Prevent duplicate COA
            if (id_coa) {
                var isDuplicate = false;
                $('.coa-select').not(select).each(function() {
                    if ($(this).val() == id_coa) {
                        isDuplicate = true;
                    }
                });

                if (isDuplicate) {
                    Swal.fire('Peringatan', 'COA ini sudah dipilih di baris lain!', 'warning');
                    select.val('').trigger('change');
                    return;
                }
            }

            row.removeData('saldo');
            row.removeData('saldo_text');
            updateBadge();

            if (id_coa) {
                $.ajax({
                    url: "{{ url('/trsadj/api/fetchSaldo') }}",
                    type: "GET",
                    data: {
                        id_coa: id_coa,
                        periode: $('#periode').val()
                    },
                    success: function(res) {
                        if (res.status === 'success') {
                            row.data('saldo', res.saldo_akhir);
                            row.data('saldo_text', 'Saldo ' + res.nama_coa + ': ' + res
                                .saldo_formatted);
                            $('#info-saldo-atas').text(row.data('saldo_text')).show();
                            checkSaldoLimit();
                        } else {
                            updateBadge();
                        }
                    }
                });
            }
        });

        function checkSaldoLimit(isSubmitting = false) {
            var isValid = true;
            $('.detail-row').each(function() {
                var row = $(this);
                var saldo = row.data('saldo');
                if (saldo !== null && saldo !== undefined) {
                    var k = parseInt(row.find('.input-kredit').val().replace(/[^0-9]/g, '') || 0);
                    if (k > saldo) {
                        isValid = false;
                        if (isSubmitting) {
                            var limit = 'Rp ' + new Intl.NumberFormat('id-ID').format(saldo);
                            Swal.fire('Peringatan Saldo',
                                'Nominal pengeluaran melebihi saldo kas/bank saat ini! (Limit tersisa: ' +
                                limit + ')', 'warning');
                        }
                    }
                }
            });
            return isValid;
        }

        function initCoaSelect2(element) {
            $(element).select2({
                width: '100%',
                placeholder: '-- Pilih COA --',
                allowClear: true,
                escapeMarkup: function(markup) {
                    return markup;
                }
            });
        }

        $(document).ready(function() {
            calculateTotal();
            $('.coa-select').each(function() {
                initCoaSelect2(this);
            });
            $('.coa-select').each(function() {
                if ($(this).val()) {
                    $(this).trigger('change');
                }
            });
        });

        function formatRupiahInput(element) {
            let value = element.value.replace(/[^,\d]/g, '').toString();
            let split = value.split(',');
            let sisa = split[0].length % 3;
            let rupiah = split[0].substr(0, sisa);
            let ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            if (ribuan) {
                let separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
            element.value = rupiah ? rupiah : '';
        }

        function autoFillOpposite(element, type) {
            var rows = $('.detail-row');
            if (rows.length !== 2) return;

            var currentRow = $(element).closest('tr');
            var otherRow = rows.not(currentRow);
            var val = $(element).val();
            var numVal = parseInt(val.replace(/[^0-9]/g, '') || 0);

            if (type === 'debit') {
                otherRow.find('.input-kredit').val(val);
                if (numVal > 0) {
                    currentRow.find('.input-kredit').val('').prop('readonly', true);
                    otherRow.find('.input-debit').val('').prop('readonly', true);
                } else {
                    currentRow.find('.input-kredit').prop('readonly', false);
                    otherRow.find('.input-debit').prop('readonly', false);
                }
            } else {
                otherRow.find('.input-debit').val(val);
                if (numVal > 0) {
                    currentRow.find('.input-debit').val('').prop('readonly', true);
                    otherRow.find('.input-kredit').val('').prop('readonly', true);
                } else {
                    currentRow.find('.input-debit').prop('readonly', false);
                    otherRow.find('.input-kredit').prop('readonly', false);
                }
            }
        }

        function calculateTotal() {
            let totalDebit = 0;
            let totalKredit = 0;

            $('.input-debit').each(function() {
                let val = $(this).val() || '';

                val = val.replace(/Rp/gi, '').trim();

                if (val.includes(',')) {
                    val = val.replace(/\./g, '').replace(',', '.');
                } else if (!/^\d+\.\d{1,2}$/.test(val)) {
                    val = val.replace(/\./g, '');
                }

                if (val) totalDebit += parseFloat(val) || 0;
            });

            $('.input-kredit').each(function() {
                let val = $(this).val() || '';

                val = val.replace(/Rp/gi, '').trim();

                if (val.includes(',')) {
                    val = val.replace(/\./g, '').replace(',', '.');
                } else if (!/^\d+\.\d{1,2}$/.test(val)) {
                    val = val.replace(/\./g, '');
                }

                if (val) totalKredit += parseFloat(val) || 0;
            });

            $('#total-debit').val('Rp ' + new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(totalDebit));

            $('#total-kredit').val('Rp ' + new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(totalKredit));

            var statusEl = $('#balance-status');
            var diff = Math.abs(totalDebit - totalKredit);

            if (totalDebit === 0 && totalKredit === 0) {
                statusEl.text('Belum ada data')
                    .removeClass('bg-success bg-danger')
                    .addClass('bg-secondary');
            } else if (diff < 0.01) {
                statusEl.text('✓ Balance (Debit = Kredit)')
                    .removeClass('bg-secondary bg-danger')
                    .addClass('bg-success');
            } else {
                statusEl.text('✗ Tidak Balance (Selisih: Rp ' + new Intl.NumberFormat('id-ID', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }).format(diff) + ')')
                    .removeClass('bg-secondary bg-success')
                    .addClass('bg-danger');
            }

            checkSaldoLimit();
        }

        function addRow() {
            var rowCount = $('.detail-row').length + 1;
            var rawHtml = `
                <tr class="detail-row">
                    <td class="text-sm font-weight-normal text-center ps-4 row-number">${rowCount}</td>
                    <td class="p-2">
                        <select class="coa-select" name="id_coa[]" required>
                            <option value="">-- Pilih COA --</option>
                            @foreach ($coas as $coa)
                                <option value="{{ $coa->id_coa }}" {{ $coa->is_parent ? 'disabled class=font-weight-bold style=background-color:#f8f9fa' : '' }}>{!! str_repeat('&nbsp;', $coa->level * 4) !!}{{ $coa->id_coa }} - {{ $coa->nama }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td class="p-2">
                        <input type="text" class="form-control input-debit text-end" name="debit[]" placeholder="0"
                            oninput="formatRupiahInput(this); calculateTotal()">
                    </td>
                    <td class="p-2">
                        <input type="text" class="form-control input-kredit text-end" name="kredit[]" placeholder="0"
                            oninput="formatRupiahInput(this); calculateTotal()">
                    </td>
                    <td class="text-center p-2">
                        <button type="button" class="btn btn-link text-danger mb-0 px-2" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
            `;
            $('#detail-body').append(rawHtml);
            var newRow = $('#detail-body .detail-row:last');
            initCoaSelect2(newRow.find('.coa-select')[0]);
            renumberRows();
        }

        function removeRow(btn) {
            if ($('.detail-row').length > 2) {
                $(btn).closest('tr').remove();
                renumberRows();
                calculateTotal();
            } else {
                Swal.fire('Info', 'Minimal harus ada 2 detail transaksi!', 'info');
            }
        }

        function renumberRows() {
            $('.detail-row').each(function(i) {
                $(this).find('.row-number').text(i + 1);
            });
        }

        function updateData() {
            var form = $('#mutasi-form');

            if (!form[0].checkValidity()) {
                form[0].reportValidity();
                return;
            }

            let totalD = $('#total-debit').val() || '';
            let totalK = $('#total-kredit').val() || '';

            totalD = totalD.replace(/Rp/gi, '').trim();
            totalK = totalK.replace(/Rp/gi, '').trim();

            if (totalD.includes(',')) {
                totalD = totalD.replace(/\./g, '').replace(',', '.');
            } else if (!/^\d+\.\d{1,2}$/.test(totalD)) {
                totalD = totalD.replace(/\./g, '');
            }

            if (totalK.includes(',')) {
                totalK = totalK.replace(/\./g, '').replace(',', '.');
            } else if (!/^\d+\.\d{1,2}$/.test(totalK)) {
                totalK = totalK.replace(/\./g, '');
            }

            totalD = parseFloat(totalD) || 0;
            totalK = parseFloat(totalK) || 0;

            if (totalD === 0 && totalK === 0) {
                Swal.fire('Peringatan', 'Minimal harus ada nominal Debit atau Kredit', 'warning');
                return;
            }

            if (Math.abs(totalD - totalK) >= 0.01) {
                Swal.fire('Peringatan', 'Total Debit dan Kredit harus seimbang (Balance)!', 'warning');
                return;
            }

            if (!checkSaldoLimit(true)) {
                return;
            }

            let details = [];
            $('.detail-row').each(function() {
                var coaSelect = $(this).find('.coa-select')[0];
                var coa = coaSelect ? coaSelect.value : null;
                var d = $(this).find('.input-debit').val() || '';
                var k = $(this).find('.input-kredit').val() || '';

                d = d.replace(/Rp/gi, '').trim();
                k = k.replace(/Rp/gi, '').trim();

                if (d.includes(',')) {
                    d = d.replace(/\./g, '').replace(',', '.');
                } else if (!/^\d+\.\d{1,2}$/.test(d)) {
                    d = d.replace(/\./g, '');
                }

                if (k.includes(',')) {
                    k = k.replace(/\./g, '').replace(',', '.');
                } else if (!/^\d+\.\d{1,2}$/.test(k)) {
                    k = k.replace(/\./g, '');
                }

                let debit = parseFloat(d) || 0;
                let kredit = parseFloat(k) || 0;

                if (coa && (debit > 0 || kredit > 0)) {
                    details.push({
                        id_coa: coa,
                        debit: debit.toFixed(2),
                        kredit: kredit.toFixed(2)
                    });
                }
            });

            let payload = {
                _token: '{{ csrf_token() }}',
                _method: 'PUT',
                tanggal: $('#tanggal').val(),
                keterangan_header: $('#keterangan_header').val(),
                details: details
            };

            $.ajax({
                url: "{{ url($url_menu . '/edit/' . encrypt($header->id_header)) }}",
                type: "POST",
                data: payload,
                beforeSend: function() {
                    Swal.fire({
                        title: 'Menyimpan Perubahan...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(res) {
                    if (res.status === 'success') {
                        Swal.fire('Berhasil', res.message, 'success').then(() => {
                            window.location.href = res.redirect;
                        });
                    } else {
                        Swal.fire('Gagal', res.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error');
                }
            });
        }

        // Transaction Lock Heartbeat & Release with 10-minute Idle Timeout
        $(document).ready(function() {
            var idHeader = "{{ $header->id_header }}";
            var lastActivity = Date.now();
            var idleTimeout = 600000; // 10 minutes in milliseconds

            // Reset idle timer on user activity
            $(document).on('mousemove keydown click scroll', function() {
                lastActivity = Date.now();
            });

            var refreshLockInterval = setInterval(function() {
                // Check if user is idle for more than 10 minutes
                if (Date.now() - lastActivity >= idleTimeout) {
                    clearInterval(refreshLockInterval);
                    releaseLock();
                    Swal.fire({
                        title: 'Sesi Edit Habis',
                        text: 'Sesi edit telah habis karena Anda tidak aktif selama 10 menit.',
                        icon: 'info',
                        confirmButtonText: 'OK',
                        allowOutsideClick: false
                    }).then(() => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                    return;
                }

                $.ajax({
                    url: "{{ route('transaction-lock.refresh') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id_header: idHeader
                    },
                    success: function(res) {
                        if (res.status === 'locked') {
                            clearInterval(refreshLockInterval);
                            Swal.fire({
                                title: 'Transaksi Terkunci',
                                text: res.message,
                                icon: 'warning',
                                confirmButtonText: 'OK',
                                allowOutsideClick: false
                            }).then(() => {
                                window.location.href = "{{ url($url_menu) }}";
                            });
                        }
                    }
                });
            }, 15000); // refresh every 15 seconds

            function releaseLock() {
                var url = "{{ route('transaction-lock.release') }}";
                var data = new URLSearchParams();
                data.append('_token', "{{ csrf_token() }}");
                data.append('id_header', idHeader);

                if (navigator.sendBeacon) {
                    navigator.sendBeacon(url, data);
                } else {
                    $.ajax({
                        url: url,
                        type: "POST",
                        async: false,
                        data: {
                            _token: "{{ csrf_token() }}",
                            id_header: idHeader
                        }
                    });
                }
            }

            $(window).on('unload beforeunload', function() {
                releaseLock();
            });
        });
    </script>
@endpush