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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Kedatangan Tamu'])
    <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 back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>

                        {{-- button reset --}}
                        <button class="btn btn-secondary mb-0" type="button" id="reset-button">
                            <i class="fas fa-redo-alt me-1"></i>
                            <span class="font-weight-bold">Reset</span>
                        </button>

                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form method="POST" action="{{ route('trbgmt.store') }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            @php
                                $sections = [
                                    'Kedatangan Barang' => [
                                        [
                                            'name' => 'Nomor_Polisi',
                                            'label' => 'Nopol (A 1234 AB)',
                                            'type' => 'text',
                                            'placeholder' => 'ex.: A 1234 AB',
                                            'col' => 6,
                                        ],
                                        [
                                            'name' => 'TanggalMasuk',
                                            'label' => 'Tanggal Masuk',
                                            'type' => 'date',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'JamMasuk',
                                            'label' => 'Jam Masuk (hh:mm)',
                                            'type' => 'time',
                                            'col' => 2,
                                        ],
                                        [
                                            'name' => 'jeniskendaraan_id',
                                            'label' => 'Jenis Kendaraan',
                                            'type' => 'enum',
                                            'query' => 'SELECT id, jenis_kendaraan FROM mst_jeniskendaraan',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'typekendaraan_id',
                                            'label' => 'Type Kendaraan',
                                            'type' => 'enum',
                                            'query' => 'SELECT id, Nama_typekendaraan FROM mst_typekendaraan',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'TanggalKeluar',
                                            'label' => 'Tanggal Keluar',
                                            'type' => 'date',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'JamKeluar',
                                            'label' => 'Jam Keluar (hh:mm)',
                                            'type' => 'time',
                                            'col' => 2,
                                        ],
                                    ],
                                    'Identitas Sopir' => [
                                        [
                                            'name' => 'NamaSopir',
                                            'label' => 'Nama Sopir',
                                            'type' => 'text',
                                            'placeholder' => 'Ex.: Nama Sopir',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'SIM',
                                            'label' => 'SIM',
                                            'type' => 'text',
                                            'placeholder' => 'Ex.: xxxx',
                                            'col' => 3,
                                        ],
                                    ],
                                    'Dokumen Kendaraan' => [
                                        [
                                            'name' => 'NoKontainer',
                                            'label' => 'Nomor Kontainer',
                                            'type' => 'text',
                                            'placeholder' => 'Ex.: xxxx',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'NoSegel',
                                            'label' => 'Nomor Segel',
                                            'type' => 'text',
                                            'placeholder' => 'Ex.: xxxx',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'NoSuratJalan',
                                            'label' => 'Nomor Surat Jalan',
                                            'type' => 'text',
                                            'placeholder' => 'Ex.: xxxx',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'ekspedisi_id',
                                            'label' => 'Perusahaan/Ekspedisi',
                                            'type' => 'enum',
                                            'query' => 'select id, Nama_Ekspedisi from mst_ekspedisi',
                                            'col' => 3,
                                        ],
                                    ],
                                    'MUAT/BONGKAR' => [
                                        [
                                            'name' => 'bongkarmuat_id',
                                            'label' => 'Keterangan Bongkar Muat',
                                            'type' => 'enum',
                                            'query' => 'select id, Data_Bongkar_Muat from mst_bongkarmuat',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'JumlahPersonel',
                                            'label' => 'Jumlah Personel',
                                            'type' => 'number',
                                            'placeholder' => 'Ex.: 1',
                                            'col' => 3,
                                        ],
                                        [
                                            'name' => 'Penerima_Barang',
                                            'label' => 'Penerima Barang',
                                            'type' => 'text',
                                            'placeholder' => 'Ex.: xxxx',
                                            'col' => 3,
                                        ],
                                    ],
                                ];

                                // Tambahkan elemen "Bukti_Awal" dan "Bukti_Akhir" jika role sesuai
                                if (in_array($user_login->idroles, ['featms', 'PPICSS', 'admins'])) {
                                    $sections['MUAT/BONGKAR'][] = [
                                        'name' => 'Bukti_Awal',
                                        'label' => 'Bukti Awal',
                                        'type' => 'image',
                                        'col' => 1,
                                    ];
                                    $sections['MUAT/BONGKAR'][] = [
                                        'name' => 'Bukti_Akhir',
                                        'label' => 'Bukti Akhir',
                                        'type' => 'image',
                                        'col' => 1,
                                    ];
                                }
                            @endphp

                            @foreach ($sections as $title => $fields)
                                <p class="text-uppercase text-sm">{{ $title }}</p>
                                <hr class="horizontal dark mt-0">
                                <div class="row">
                                    @foreach ($fields as $field)
                                        <div class="col-md-{{ $field['col'] }}">
                                            <div class="form-group">
                                                <label>{{ $field['label'] }}</label>
                                                @if ($field['type'] === 'enum')
                                                    <select
                                                        class="form-select form-select-sm @error($field['name']) is-invalid @enderror"
                                                        name="{{ $field['name'] }}" id="{{ $field['name'] }}">
                                                        <option value="">Pilih {{ $field['label'] }}</option>
                                                        @php
                                                            try {
                                                                $options = DB::select($field['query']);
                                                                $columns = $options
                                                                    ? array_keys((array) $options[0])
                                                                    : [];
                                                                $idColumn = $columns[0] ?? 'id';
                                                                $nameColumn = $columns[1] ?? $idColumn;
                                                            } catch (\Exception $e) {
                                                                $options = [];
                                                                Log::error('Error in enum query: ' . $e->getMessage());
                                                            }
                                                        @endphp
                                                        @foreach ($options as $option)
                                                            <option value="{{ $option->$idColumn }}"
                                                                data-label="{{ strtolower($option->$nameColumn) }}"
                                                                {{ old($field['name']) == $option->$idColumn ? 'selected' : '' }}>
                                                                {{ $option->$nameColumn }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                @elseif ($field['type'] === 'image')
                                                    @if (in_array($user_login->idroles, ['featms', 'PPICSS', 'admins']))
                                                        <div class="col-sm-auto">
                                                            <div class="position-relative">
                                                                <div>
                                                                    <label for="file-input" style="left: -5px !important;"
                                                                        id="{{ $field['name'] }}edit"
                                                                        class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                        <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                                            data-bs-placement="top" title="Edit Image"></i>
                                                                        <span class="sr-only">Edit Image</span>
                                                                    </label>
                                                                    <span
                                                                        class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                        <img src="{{ old($field['name'], asset('/storage/noimage.png')) }}"
                                                                            id="{{ $field['name'] }}preview" alt="image"
                                                                            class="w-60 border-radius-lg shadow-sm">
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <input
                                                            class="form-control @error($field['name']) is-invalid @enderror"
                                                            type="file" id="{{ $field['name'] }}"
                                                            name="{{ $field['name'] }}" accept=".jpg,.jpeg,.png"
                                                            style="display: none;">
                                                        <p class="text-primary text-xs pt-3 mb-0">Maksimal Size : <b>2048 KB
                                                                (2
                                                                MB)
                                                            </b></p>
                                                        <p class="text-primary text-xs pt-1">Format Image : <b>PNG, JPG,
                                                                JPEG</b></p>

                                                        <script>
                                                            document.getElementById('{{ $field['name'] }}').onchange = function(evt) {
                                                                const file = this.files[0];
                                                                const preview = document.getElementById('{{ $field['name'] }}preview');

                                                                if (file) {
                                                                    // Check file type
                                                                    const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
                                                                    if (!validTypes.includes(file.type)) {
                                                                        showWarningPopup('Mohon maaf, file yang dipilih harus berupa gambar PNG, JPG, atau JPEG.');
                                                                        this.value = '';
                                                                        preview.src = '{{ asset('/storage/noimage.png') }}';
                                                                        return;
                                                                    }

                                                                    // Check file size (2048 KB = 2MB)
                                                                    const maxSize = 2048 * 1024; // Convert to bytes
                                                                    if (file.size > maxSize) {
                                                                        const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
                                                                        showWarningPopup(
                                                                            `Mohon maaf, ukuran file terlalu besar (${sizeMB} MB).\nMaksimal ukuran file yang diperbolehkan adalah 2 MB.`
                                                                        );
                                                                        this.value = '';
                                                                        preview.src = '{{ asset('/storage/noimage.png') }}';
                                                                        return;
                                                                    }

                                                                    // If all checks pass, show preview
                                                                    preview.src = URL.createObjectURL(file);
                                                                }
                                                            };

                                                            function showWarningPopup(message) {
                                                                document.getElementById('warningMessage').innerText = message;

                                                                // Initialize and show modal using Bootstrap
                                                                const warningModal = new bootstrap.Modal(document.getElementById('warningModal'));
                                                                warningModal.show();

                                                                // Automatically close after 3 seconds
                                                                setTimeout(() => {
                                                                    warningModal.hide();
                                                                }, 3000);
                                                            }

                                                            document.getElementById('{{ $field['name'] }}edit').addEventListener('click', function() {
                                                                document.getElementById('{{ $field['name'] }}').click();
                                                            });
                                                        </script>
                                                    @endif
                                                @elseif ($field['type'] == 'number')
                                                    <input type="number" name="{{ $field['name'] }}"
                                                        id="{{ $field['name'] }}" {{-- Penting: ID harus sama dengan name --}}
                                                        class="form-control form-control-sm @error($field['name']) is-invalid @enderror"
                                                        value="{{ old($field['name'], $field['default'] ?? '') }}"
                                                        placeholder="{{ $field['placeholder'] ?? '' }}" min="0"
                                                        readonly>
                                                @else
                                                    <input
                                                        class="form-control form-control-sm @error($field['name']) is-invalid @enderror"
                                                        type="{{ $field['type'] }}" name="{{ $field['name'] }}"
                                                        id="{{ $field['name'] }}"
                                                        placeholder="{{ $field['placeholder'] ?? '' }}"
                                                        value="{{ old($field['name']) }}">
                                                @endif
                                                @error($field['name'])
                                                    <div class="invalid-feedback">
                                                        {{ $message }}
                                                    </div>
                                                @enderror
                                            </div>
                                        </div>
                                        @if ($field['name'] === 'JamMasuk')
                                            <div class="col-md-1 d-flex align-items-center">
                                                <div class="form-group mt-5">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input"
                                                            id="autoUpdateCheck">
                                                        <label class="custom-control-label" for="autoUpdateCheck">
                                                            <i class="fas fa-clock" title="Auto-update Date/Time"></i>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if ($field['name'] === 'JamKeluar')
                                            <div class="col-md-1 d-flex align-items-center">
                                                <div class="form-group mt-5">
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input"
                                                            id="autoUpdateCheck1">
                                                        <label class="custom-control-label" for="autoUpdateCheck1">
                                                            <i class="fas fa-clock" title="Auto-update Date/Time"></i>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title" id="warningModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Peringatan
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-3">
                        <i class="fas fa-exclamation-circle text-warning" style="font-size: 48px;"></i>
                    </div>
                    <p class="text-center fs-5" id="warningMessage"></p>
                </div>
                <div class="modal-footer justify-content-center border-0">
                    <button type="button" class="btn btn-warning px-4 py-2" data-bs-dismiss="modal">
                        <i class="fas fa-check me-2"></i>Mengerti
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const select = document.getElementById('bongkarmuat_id');
            const input = document.getElementById('JumlahPersonel');

            function updateJumlahPersonelField() {
                const selectedOption = select.options[select.selectedIndex];
                const label = (selectedOption.dataset.label || '').toLowerCase();

                if (label === 'staff' || label === 'anjem') {
                    input.readOnly = false; // supaya bisa set value
                    input.value = 0;
                    input.readOnly = true;
                } else {
                    input.readOnly = false;
                    if (input.value === '' || parseInt(input.value) === 0) {
                        input.value = 1;
                    }
                }
            }

            // Jalankan saat halaman dimuat
            updateJumlahPersonelField();

            // Jalankan saat pilihan berubah
            select.addEventListener('change', updateJumlahPersonelField);
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#reset-button').click(function() {
                $('#{{ $dmenu }}-form')[0].reset();
                stopAutoUpdate();
                stopAutoUpdate1();
                $('input[name="TanggalMasuk"], input[name="JamMasuk"], input[name="TanggalKeluar"], input[name="JamKeluar"]')
                    .prop('readonly', false);
                $('#autoUpdateCheck, #autoUpdateCheck1').prop('checked', false);
            });


            $('#jeniskendaraan_id').change(function() {
                var jenisKendaraanId = $(this).val();
                console.log('Selected Jenis Kendaraan ID:', jenisKendaraanId);

                if (jenisKendaraanId) {
                    $.ajax({
                        url: '{{ URL::to('/') }}/get-type-kendaraan/' + jenisKendaraanId,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log('Response Data:', data);

                            $('#typekendaraan_id').empty();
                            $('#typekendaraan_id').append(
                                '<option value="">Pilih Type Kendaraan</option>');
                            $.each(data, function(key, value) {
                                $('#typekendaraan_id').append('<option value="' + value
                                    .id + '">' + value.Nama_typekendaraan +
                                    '</option>');
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error('Error fetching data:', error);
                            console.error('XHR:', xhr);
                        }
                    });
                } else {
                    $('#typekendaraan_id').empty();
                    $('#typekendaraan_id').append('<option value="">Pilih Type Kendaraan</option>');
                }
            });

            $('#department_id').change(function() {
                var departmentId = $(this).val();
                if (departmentId) {
                    $.ajax({
                        url: '{{ URL::to('/') }}/get-subdepartment/' + departmentId,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $('#subdepartment_id').empty();
                            $('#subdepartment_id').append(
                                '<option value="">Pilih Subdepartment</option>');
                            $.each(data, function(key, value) {
                                $('#subdepartment_id').append('<option value="' + value
                                    .id + '">' + value.nama_subdepartment +
                                    '</option>');
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error('Error fetching data:', error);
                            console.error('XHR:', xhr);
                        }
                    });
                } else {
                    $('#subdepartment_id').empty();
                    $('#subdepartment_id').append('<option value="">Pilih Subdepartment</option>');
                }
            });

            function validateImage(file, maxSize) {
                const validFormats = ['image/png', 'image/jpeg', 'image/jpg'];
                const maxSizeInBytes = maxSize * 1024; // Convert KB to bytes

                if (!validFormats.includes(file.type)) {
                    return "Invalid file format. Please upload a PNG, JPG, or JPEG image.";
                }

                if (file.size > maxSizeInBytes) {
                    return `File size exceeds ${maxSize} KB. Please upload a smaller image.`;
                }

                return null; // No error
            }

            // Function to display alert
            function showAlert(message, type = 'warning') {
                // Set the alert message in the modal body
                $('#alertModalBody').html(`
                    <div class="alert alert-${type}" role="alert">
                        ${message}
                    </div>
                `);

                // Show the modal
                var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
                alertModal.show();

                // Automatically close the modal after 5 seconds
                setTimeout(() => {
                    alertModal.hide();
                }, 5000);
            }

            // Add event listeners for image inputs
            $('input[type="file"]').on('change', function() {
                const file = this.files[0];
                const maxSize = 2048; // 2MB limit

                if (file) {
                    const error = validateImage(file, maxSize);
                    if (error) {
                        showAlert(error);
                        this.value = ''; // Clear the file input
                        $(`#${this.id}preview`).attr('src', '{{ asset('/storage/noimage.png') }}');
                    } else {
                        $(`#${this.id}preview`).attr('src', URL.createObjectURL(file));
                    }
                }
            });

            function updateDateTime() {
                var now = new Date();

                // Format tanggal (YYYY-MM-DD for date input)
                var formattedDate = now.toISOString().split('T')[0];

                // Format waktu (HH:mm for time input)
                var hours = ("0" + now.getHours()).slice(-2);
                var minutes = ("0" + now.getMinutes()).slice(-2);
                var formattedTime = hours + ":" + minutes;

                // Update nilai input
                $('input[name="TanggalMasuk"]').val(formattedDate);
                $('input[name="JamMasuk"]').val(formattedTime);
            }

            function updateDateTime1() {
                var now = new Date();

                // Format tanggal (YYYY-MM-DD for date input)
                var formattedDate = now.toISOString().split('T')[0];

                // Format waktu (HH:mm for time input)
                var hours = ("0" + now.getHours()).slice(-2);
                var minutes = ("0" + now.getMinutes()).slice(-2);
                var formattedTime = hours + ":" + minutes;

                // Update nilai input
                $('input[name="TanggalKeluar"]').val(formattedDate);
                $('input[name="JamKeluar"]').val(formattedTime);
            }

            function validateDateTime() {
                var tanggalMasuk = $('input[name="TanggalMasuk"]').val();
                var jamMasuk = $('input[name="JamMasuk"]').val();
                var tanggalKeluar = $('input[name="TanggalKeluar"]').val();
                var jamKeluar = $('input[name="JamKeluar"]').val();

                if (!tanggalMasuk || !jamMasuk) {
                    alert('Mohon isi tanggal dan jam masuk');
                    return false;
                }

                var dateTimeMasuk = new Date(tanggalMasuk + 'T' + jamMasuk);
                var dateTimeKeluar = tanggalKeluar && jamKeluar ? new Date(tanggalKeluar + 'T' + jamKeluar) : null;
                var currentDateTime = new Date();

                if (dateTimeMasuk > currentDateTime) {
                    alert('Waktu masuk tidak boleh lebih dari waktu sekarang');
                    return false;
                }

                if (dateTimeKeluar) {
                    if (dateTimeKeluar > currentDateTime) {
                        alert('Waktu keluar tidak boleh lebih dari waktu sekarang');
                        return false;
                    }

                    if (dateTimeKeluar <= dateTimeMasuk) {
                        alert('Waktu keluar harus setelah waktu masuk');
                        return false;
                    }
                }

                return true;
            }

            function updateExitDateMin() {
                var entryDate = $('input[name="TanggalMasuk"]').val();
                if (entryDate) {
                    $('input[name="TanggalKeluar"]').attr('min', entryDate);
                }
            }

            $('input[name="TanggalMasuk"], input[name="JamMasuk"], input[name="TanggalKeluar"], input[name="JamKeluar"]')
                .on('change', function() {
                    var tanggalMasuk = $('input[name="TanggalMasuk"]').val();
                    var jamMasuk = $('input[name="JamMasuk"]').val();
                    var tanggalKeluar = $('input[name="TanggalKeluar"]').val();
                    var jamKeluar = $('input[name="JamKeluar"]').val();

                    var dateTimeMasuk = tanggalMasuk && jamMasuk ? new Date(tanggalMasuk + 'T' + jamMasuk) :
                        null;
                    var dateTimeKeluar = tanggalKeluar && jamKeluar ? new Date(tanggalKeluar + 'T' +
                        jamKeluar) : null;
                    var currentDateTime = new Date();

                    if (this.name === 'TanggalMasuk' || this.name === 'JamMasuk') {
                        if (dateTimeMasuk && dateTimeMasuk > currentDateTime) {
                            $('input[name="TanggalMasuk"], input[name="JamMasuk"]').addClass('future-date');
                            this.setCustomValidity('Waktu masuk tidak boleh lebih dari waktu sekarang');

                        } else {
                            $('input[name="TanggalMasuk"], input[name="JamMasuk"]').removeClass('future-date');
                            this.setCustomValidity('');
                        }

                        updateExitDateMin();

                        if (dateTimeMasuk && dateTimeKeluar && dateTimeKeluar <= dateTimeMasuk) {
                            $('input[name="TanggalKeluar"], input[name="JamKeluar"]').addClass('invalid-date');

                        } else {
                            $('input[name="TanggalKeluar"], input[name="JamKeluar"]').removeClass(
                                'invalid-date');
                        }
                    } else if (this.name === 'TanggalKeluar' || this.name === 'JamKeluar') {
                        if (dateTimeKeluar && dateTimeKeluar > currentDateTime) {
                            $('input[name="TanggalKeluar"], input[name="JamKeluar"]').addClass('future-date');
                            this.setCustomValidity('Waktu keluar tidak boleh lebih dari waktu sekarang');
                        } else {
                            $('input[name="TanggalKeluar"], input[name="JamKeluar"]').removeClass(
                                'future-date invalid-date');
                            this.setCustomValidity('');
                        }
                    }
                });

            let autoUpdateInterval;
            let autoUpdateInterval1;

            function startAutoUpdate() {
                updateDateTime(); // Update immediately
                autoUpdateInterval = setInterval(updateDateTime, 1000); // Then update every second
            }

            function startAutoUpdate1() {
                updateDateTime1(); // Update immediately
                autoUpdateInterval1 = setInterval(updateDateTime1, 1000); // Then update every second
            }

            function stopAutoUpdate() {
                clearInterval(autoUpdateInterval);
            }

            function stopAutoUpdate1() {
                clearInterval(autoUpdateInterval1);
            }

            // Initialize auto-update based on checkbox state
            if ($('#autoUpdateCheck').is(':checked')) {
                startAutoUpdate();
                $('input[name="TanggalMasuk"], input[name="JamMasuk"]').prop('readonly', true);
            }

            if ($('#autoUpdateCheck1').is(':checked')) {
                startAutoUpdate1();
                $('input[name="TanggalKeluar"], input[name="JamKeluar"]').prop('readonly', true);
            }

            // Toggle auto-update on checkbox change
            $('#autoUpdateCheck').change(function() {
                if (this.checked) {
                    startAutoUpdate();
                    $('input[name="TanggalMasuk"], input[name="JamMasuk"]').prop('readonly', true);
                } else {
                    stopAutoUpdate();
                    $('input[name="TanggalMasuk"], input[name="JamMasuk"]').prop('readonly', false);
                }
            });

            $('#autoUpdateCheck1').change(function() {
                if (this.checked) {
                    startAutoUpdate1();
                    $('input[name="TanggalKeluar"], input[name="JamKeluar"]').prop('readonly', true);
                } else {
                    stopAutoUpdate1();
                    $('input[name="TanggalKeluar"], input[name="JamKeluar"]').prop('readonly', false);
                }
            });

            $('#{{ $dmenu }}-form').submit(function(e) {
                e.preventDefault();
                console.log('Form submitted');

                if ($('#autoUpdateCheck').is(':checked')) {
                    updateDateTime();
                }

                if ($('#autoUpdateCheck1').is(':checked')) {
                    updateDateTime1();
                }

                if (!validateDateTime()) {
                    return;
                }

                this.submit();
            });

            var today = new Date().toISOString().split('T')[0];

            updateExitDateMin();

            // Custom styling and validation for disabled dates
            $('input[type="date"]').on('input', function() {
                var selectedDate = new Date(this.value);
                var currentDate = new Date();

                if (selectedDate > currentDate) {
                    $(this).addClass('future-date');

                } else {
                    $(this).removeClass('future-date');

                }
            });
        });
    </script>
    <style>
        .modal-header {
            border-bottom: none;
            padding: 1rem 1rem 0.5rem;
        }

        .modal-content {
            border: none;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        #warningMessage {
            color: #664d03;
            font-size: 16px !important;
            line-height: 1.5;
            margin: 0;
            white-space: pre-line;
        }

        .modal-header .btn-close {
            background-color: transparent;
            opacity: 0.5;
        }

        .modal-header .btn-close:hover {
            opacity: 1;
        }

        .text-warning {
            color: #ffc107 !important;
        }

        .bg-warning {
            background-color: #fff3cd !important;
            color: #664d03;
        }

        .btn-warning {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #000;
        }

        .btn-warning:hover {
            background-color: #ffca2c;
            border-color: #ffc720;
            color: #000;
        }

        .modal-title {
            font-weight: 600;
        }
    </style>
@endpush