@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' && !$is_book_closed)
                            <button class="btn btn-primary mb-0" onclick="updateData()">
                                <i class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan Perubahan</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;
        }

        /* 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">
        @if ($is_book_closed)
            <div class="alert alert-warning text-white" role="alert">
                <strong>Sudah Tutup Buku!</strong> Transaksi ini tidak dapat diubah lagi.
            </div>
        @endif

        <form role="form" id="mutasi-form" onsubmit="event.preventDefault(); return false;">
            @csrf
            @method('PUT')

            {{-- ===== HEADER MUTASI ===== --}}
            <div class="card mb-4">
                <div class="card-header pb-0 mt-2">
                    <h6 class="text-uppercase text-xs font-weight-bolder" style="color: #028284;">
                        Header Mutasi — <span class="text-primary">{{ $header->id_header }}</span>
                    </h6>
                </div>
                <div class="card-body pt-2">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Bank</label>
                                <input type="text" class="form-control"
                                    value="@foreach ($banks as $bank){{ $bank->id_bank == $header->id_bank ? $bank->coa_nama ?? $bank->nama : '' }} @endforeach"
                                    disabled>
                                <input type="hidden" name="id_bank" value="{{ $header->id_bank }}">

                                @if ($selected_bank)
                                    <div class="mt-2 text-sm">
                                        <span class="font-weight-bold" style="color: #6c757d;">Saldo Saat Ini:</span>
                                        @if ($selected_bank->mata_uang !== 'IDR')
                                            <span class="font-weight-bold text-primary ms-1">
                                                {{ \App\Helpers\Format_Helper::getSymbol($selected_bank->mata_uang) }}
                                                {{ number_format($selected_bank->saldo_valas, 2, ',', '.') }}
                                            </span>
                                            <span class="mx-2 text-muted">|</span>
                                            <span class="font-weight-bold text-primary">
                                                Saldo IDR: Rp {{ number_format($selected_bank->saldo_idr, 2, ',', '.') }}
                                            </span>
                                        @else
                                            <span class="font-weight-bold text-primary ms-1">
                                                Rp {{ number_format($selected_bank->saldo_idr, 2, ',', '.') }}
                                            </span>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                        @php
                            $tanggalAwal = \Carbon\Carbon::parse($header->tanggal);
                            $minTanggal = $tanggalAwal->copy()->startOfMonth()->format('Y-m-d');
                            $maxTanggal = $tanggalAwal->copy()->endOfMonth()->format('Y-m-d');
                        @endphp
                        <div class="col-md-4">
                            <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="{{ $tanggalAwal->format('Y-m-d') }}" min="{{ $minTanggal }}"
                                    max="{{ $maxTanggal }}" required {{ $is_book_closed ? 'disabled' : '' }}>
                                <small class="text-muted">
                                    Tanggal hanya dapat diubah dalam periode
                                    {{ $tanggalAwal->translatedFormat('F Y') }}.
                                </small>
                            </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;">Detail Transaksi
                        </h6>
                        @if (!$is_book_closed)
                            <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 class="card-body p-0">
                    <div class="table-responsive">
                        @php
                            $selectedBank = $banks->firstWhere('id_bank', $header->id_bank);
                            $currency = $selectedBank ? $selectedBank->mata_uang : 'IDR';
                            $symbol = \App\Helpers\Format_Helper::getSymbol($currency);
                        @endphp
                        <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 ps-4" style="width: 30%">Keterangan</th>
                                    <th class="text-sm font-weight-bolder" style="width: 30%">COA (No - Nama COA)</th>
                                    <th class="text-sm font-weight-bolder" style="width: 20%">Debit (Pengeluaran)</th>
                                    <th class="text-sm font-weight-bolder" style="width: 20%">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)
                                    @php
                                        $editAmount =
                                            $currency !== 'IDR'
                                                ? $detail->jumlah_valas ?? $detail->jumlah
                                                : $detail->jumlah;
                                    @endphp
                                    @if ($detail->id_coa != $bank_coa_id)
                                        <tr class="detail-row">
                                            <td class="text-sm font-weight-normal text-center ps-4 row-number">
                                                {{ $loop->iteration }}</td>
                                            <td class="p-2">
                                                <input type="text" class="form-control input-keterangan"
                                                    name="keterangan[]" placeholder="Ketik keterangan..."
                                                    value="{{ $detail->keterangan ?? '' }}"
                                                    title="{{ $detail->keterangan ?? '' }}">
                                            </td>
                                            <td class="p-2">
                                                <select class="coa-select" name="id_coa[]" required
                                                    {{ $is_book_closed ? 'disabled' : '' }}>
                                                    <option value="">-- Pilih COA --</option>
                                                    @foreach ($coas as $coa)
                                                        <option value="{{ $coa->id_coa }}" @selected($detail->id_coa == $coa->id_coa)
                                                            @disabled($coa->is_parent)
                                                            class="{{ $coa->is_parent ? 'font-weight-bold text-muted' : '' }}"
                                                            style="{{ $coa->is_parent ? 'background-color:#f8f9fa; font-weight:700;' : '' }}">
                                                            {!! 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="{{ $editAmount > 0 ? number_format($editAmount, 2, ',', '.') : '' }}"
                                                    oninput="formatRupiahInput(this); handleDebitKreditExclusion(this); calculateTotal()"
                                                    {{ $is_book_closed ? 'disabled' : '' }}>
                                            </td>

                                            <td class="p-2">
                                                <input type="text" class="form-control input-kredit text-end"
                                                    name="kredit[]" placeholder="0"
                                                    value="{{ $editAmount < 0 ? number_format(abs($editAmount), 2, ',', '.') : '' }}"
                                                    oninput="formatRupiahInput(this); handleDebitKreditExclusion(this); calculateTotal()"
                                                    {{ $is_book_closed ? 'disabled' : '' }}>
                                            </td>
                                            <td class="text-center p-2">
                                                @if (!$is_book_closed)
                                                    <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>
                                    @endif
                                @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 text-end pe-3">
                                        <input type="hidden" id="total-debit" value="0">
                                        <div id="total-debit-idr-display" class="font-weight-bold text-dark text-sm">Rp 0
                                        </div>
                                        <div id="total-debit-valas-display"
                                            class="text-secondary text-xs font-weight-normal" style="display: none;">
                                        </div>
                                    </td>
                                    <td class="py-3 px-2 text-end pe-3">
                                        <input type="hidden" id="total-kredit" value="0">
                                        <div id="total-kredit-idr-display" class="font-weight-bold text-dark text-sm">Rp 0
                                        </div>
                                        <div id="total-kredit-valas-display"
                                            class="text-secondary text-xs font-weight-normal" style="display: none;">
                                        </div>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr id="balance-row">
                                    <td colspan="5" class="text-center py-2">
                                        <span id="balance-status" class="badge bg-info text-sm px-4 py-2">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Bank/Kas entry akan otomatis disesuaikan untuk menyeimbangkan transaksi
                                        </span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        @php
            $rate = 1;
            if ($selected_bank && $selected_bank->mata_uang !== 'IDR') {
                $kurs = DB::table('mst_kurs')->where('id_perusahaan', session('id_perusahaan'))->where('kode', $selected_bank->mata_uang)->where('kode_lawan', 'IDR')->orderByDesc('id_kurs')->first();
                $rate = $kurs && $kurs->nilai > 0 ? $kurs->nilai : 1;
            }
        @endphp
        const rate = {{ $rate }};
        const bankCurrency = "{{ $selected_bank ? $selected_bank->mata_uang : 'IDR' }}";
        const foreignSymbol =
            "{{ $selected_bank ? \App\Helpers\Format_Helper::getSymbol($selected_bank->mata_uang) : 'Rp' }}";

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

        $(document).on('input', '.input-keterangan', function() {
            $(this).attr('title', $(this).val());
        });

        $(document).ready(function() {
            calculateTotal();
            $('.coa-select').each(function() {
                initCoaSelect2(this);
            });
            $('.detail-row').each(function() {
                let debitInput = $(this).find('.input-debit')[0];
                if (debitInput) {
                    handleDebitKreditExclusion(debitInput);
                }
            });
        });

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

            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;
                } --}}
            }
        });

        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 handleDebitKreditExclusion(element) {
            let row = $(element).closest('tr');
            let debitInput = row.find('.input-debit');
            let kreditInput = row.find('.input-kredit');

            let debitVal = debitInput.val().replace(/[^0-9]/g, '');
            let kreditVal = kreditInput.val().replace(/[^0-9]/g, '');

            if (debitVal && parseInt(debitVal) > 0) {
                kreditInput.val('').prop('readonly', true);
            } else if (kreditVal && parseInt(kreditVal) > 0) {
                debitInput.val('').prop('readonly', true);
            } else {
                debitInput.prop('readonly', false);
                kreditInput.prop('readonly', false);
            }
        }

        function parseAmount(value) {
            value = String(value ?? '')
                .replace(/Rp/gi, '')
                .replace(/\s/g, '')
                .trim();

            if (value === '') return 0;

            // Kalau format Indonesia: 1.000,50 atau 10,50
            if (value.includes(',')) {
                value = value.replace(/\./g, '').replace(',', '.');
                return parseFloat(value) || 0;
            }

            // Kalau format ribuan Indonesia: 1.000 / 10.000 / 1.000.000
            if (/^\d{1,3}(\.\d{3})+$/.test(value)) {
                value = value.replace(/\./g, '');
                return parseFloat(value) || 0;
            }

            // Kalau format biasa: 10 / 1000 / 10.00 / 1000.00
            return parseFloat(value) || 0;
        }

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

            $('.input-debit').each(function() {
                totalDebit += parseAmount($(this).val());
            });

            $('.input-kredit').each(function() {
                totalKredit += parseAmount($(this).val());
            });

            // Hidden value tetap nilai asli yang diinput user
            $('#total-debit').val(totalDebit.toFixed(2));
            $('#total-kredit').val(totalKredit.toFixed(2));

            let formattedDebit = new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 2
            }).format(totalDebit);

            let formattedKredit = new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 0,
                maximumFractionDigits: 2
            }).format(totalKredit);

            /*
             * IDR   -> Rp
             * JPY   -> ¥
             * USD   -> $
             * dst.
             */
            let symbol = bankCurrency === 'IDR' ?
                'Rp' :
                foreignSymbol;

            $('#total-debit-idr-display').text(
                symbol + ' ' + formattedDebit
            );

            $('#total-kredit-idr-display').text(
                symbol + ' ' + formattedKredit
            );

            /*
             * Sudah tidak perlu hitung:
             * totalDebit / rate
             *
             * karena input form edit sudah dalam mata uang bank.
             */
            $('#total-debit-valas-display').hide();
            $('#total-kredit-valas-display').hide();
        }

        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">
                                        <input type="text" class="form-control input-keterangan" name="keterangan[]"
                                            placeholder="Ketik keterangan..." title="">
                                    </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 }}"
                                                    @if ($coa->is_parent) disabled
            class="font-weight-bold text-muted"
            style="background-color:#f8f9fa; font-weight:700;" @endif>
                                                    {!! 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); handleDebitKreditExclusion(this); calculateTotal()">
                    </td>
                    <td class="p-2">
                        <input type="text" class="form-control input-kredit text-end" name="kredit[]" placeholder="0"
                            oninput="formatRupiahInput(this); handleDebitKreditExclusion(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 > 1) {
                $(btn).closest('tr').remove();
                renumberRows();
                calculateTotal();
            } else {
                Swal.fire('Info', 'Minimal harus ada 1 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 = parseInt($('#total-debit').val().replace(/[^0-9]/g, '') || 0);
            let totalK = parseInt($('#total-kredit').val().replace(/[^0-9]/g, '') || 0);

            if (totalD === 0 && totalK === 0) {
                Swal.fire('Peringatan', 'Minimal harus ada satu transaksi', 'warning');
                return;
            }

            let details = [];
            $('.detail-row').each(function() {
                var ket = $(this).find('.input-keterangan').val();
                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();
                if (coa && (d || k)) {
                    details.push({
                        keterangan: ket,
                        id_coa: coa,
                        debit: d || 0,
                        kredit: k || 0
                    });
                }
            });

            let payload = {
                _token: '{{ csrf_token() }}',
                _method: 'PUT',
                id_bank: $('input[name="id_bank"]').val(),
                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