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

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

    @php
        // Check if user has PPICSS role
        $isPPICSS = session('user')->idroles === 'PPICSS';
    @endphp

    <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>

                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '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="{{ URL::to($url_menu . '/' . $idencrypt) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        {{-- Add hidden fields to maintain data when PPICSS role --}}
                        @if ($isPPICSS)
                            <input type="hidden" name="Nomor_Polisi" value="{{ $list->Nomor_Polisi }}">
                            <input type="hidden" name="TanggalMasuk" value="{{ $list->TanggalMasuk }}">
                            <input type="hidden" name="JamMasuk" value="{{ $list->JamMasuk }}">
                            <input type="hidden" name="jeniskendaraan_id" value="{{ $list->jeniskendaraan_id }}">
                            <input type="hidden" name="typekendaraan_id" value="{{ $list->typekendaraan_id }}">
                            <input type="hidden" name="TanggalKeluar" value="{{ $list->TanggalKeluar }}">
                            <input type="hidden" name="JamKeluar" value="{{ $list->JamKeluar }}">
                            <input type="hidden" name="NamaSopir" value="{{ $list->NamaSopir }}">
                            <input type="hidden" name="SIM" value="{{ $list->SIM }}">
                            <input type="hidden" name="JumlahPersonel" value="{{ $list->JumlahPersonel }}">
                            <input type="hidden" name="NoKontainer" value="{{ $list->NoKontainer }}">
                            <input type="hidden" name="NoSegel" value="{{ $list->NoSegel }}">
                            <input type="hidden" name="NoSuratJalan" value="{{ $list->NoSuratJalan }}">
                            <input type="hidden" name="ekspedisi_id" value="{{ $list->ekspedisi_id }}">
                            <input type="hidden" name="bongkarmuat_id" value="{{ $list->bongkarmuat_id }}">
                            <input type="hidden" name="Penerima_Barang" value="{{ $list->Penerima_Barang }}">
                        @endif

                        <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.: xxxx',
                                            '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)
                                {{-- Only show MUAT/BONGKAR section for PPICSS --}}
                                @if (!$isPPICSS || $title === 'MUAT/BONGKAR')
                                    <p class="text-uppercase text-sm">{{ $title }}</p>
                                    <hr class="horizontal dark mt-0">
                                    <div class="row">
                                        @foreach ($fields as $field)
                                            {{-- Only show image fields if PPICSS --}}
                                            @if (!$isPPICSS || ($isPPICSS && $field['type'] === 'image'))
                                                <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) }}"
                                                                        {{ $list->{$field['name']} == $option->$idColumn ? 'selected' : '' }}>
                                                                        {{ $option->$nameColumn }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        @elseif ($field['type'] === 'image')
                                                            <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">
                                                                            @php
                                                                                $imagePath = $list->{$field['name']}
                                                                                    ? asset(
                                                                                        'storage/' .
                                                                                            $list->{$field['name']},
                                                                                    )
                                                                                    : asset('/storage/noimage.png');
                                                                            @endphp
                                                                            <img src="{{ $imagePath }}"
                                                                                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</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) {
                                                                        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 =
                                                                                '{{ isset($list->{$field['name']}) ? asset('storage/' . $list->{$field['name']}) : asset('/storage/noimage.png') }}';
                                                                            return;
                                                                        }

                                                                        const maxSize = 2048 * 1024;
                                                                        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 =
                                                                                '{{ isset($list->{$field['name']}) ? asset('storage/' . $list->{$field['name']}) : asset('/storage/noimage.png') }}';
                                                                            return;
                                                                        }

                                                                        preview.src = URL.createObjectURL(file);
                                                                    }
                                                                };

                                                                document.getElementById('{{ $field['name'] }}edit').addEventListener('click', function() {
                                                                    document.getElementById('{{ $field['name'] }}').click();
                                                                });
                                                            </script>
                                                        @elseif ($field['type'] == 'number')
                                                            @php
                                                                $currentValue = old(
                                                                    $field['name'],
                                                                    $list->{$field['name']} ??
                                                                        ($field['default'] ?? ''),
                                                                );
                                                            @endphp
                                                            <input type="number" name="{{ $field['name'] }}"
                                                                id="{{ $field['name'] }}"
                                                                class="form-control form-control-sm"
                                                                placeholder="{{ $field['placeholder'] ?? '' }}"
                                                                value="{{ $currentValue }}" min="0">
                                                        @else
                                                            <input
                                                                class="form-control form-control-sm @error($field['name']) is-invalid @enderror"
                                                                type="{{ $field['type'] }}" name="{{ $field['name'] }}"
                                                                id="{{ $field['name'] }}" max="{{ date('Y-m-d') }}"
                                                                placeholder="{{ $field['placeholder'] ?? '' }}"
                                                                value="{{ $list->{$field['name']} }}">
                                                        @endif
                                                        @error($field['name'])
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            @endif

                                            @if ($field['name'] === 'JamMasuk' && !$isPPICSS)
                                                <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' && !$isPPICSS)
                                                <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>
                                @endif
                            @endforeach
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Warning Modal --}}
    <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).ready(function() {
            const isPPICSS = {{ json_encode(session('user')->idroles === 'PPICSS') }};

            // Remove the disabled handling since we're using hiding instead
            function updateDateTime() {
                if (!isPPICSS) {
                    var now = new Date();
                    var formattedDate = now.toISOString().split('T')[0];
                    var hours = ("0" + now.getHours()).slice(-2);
                    var minutes = ("0" + now.getMinutes()).slice(-2);
                    var formattedTime = hours + ":" + minutes;

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

            function updateDateTime1() {
                if (!isPPICSS) {
                    var now = new Date();
                    var formattedDate = now.toISOString().split('T')[0];
                    var hours = ("0" + now.getHours()).slice(-2);
                    var minutes = ("0" + now.getMinutes()).slice(-2);
                    var formattedTime = hours + ":" + minutes;

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

            function validateDateTime() {
                if (isPPICSS) {
                    return true; // Skip validation for PPICSS
                }

                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) {
                    showWarningPopup('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) {
                    showWarningPopup('Waktu masuk tidak boleh lebih dari waktu sekarang');
                    return false;
                }

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

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

                return true;
            }

            function showWarningPopup(message) {
                document.getElementById('warningMessage').innerText = message;
                const warningModal = new bootstrap.Modal(document.getElementById('warningModal'));
                warningModal.show();
                setTimeout(() => {
                    warningModal.hide();
                }, 3000);
            }

            let autoUpdateInterval;
            let autoUpdateInterval1;

            function startAutoUpdate() {
                updateDateTime();
                autoUpdateInterval = setInterval(updateDateTime, 1000);
            }

            function startAutoUpdate1() {
                updateDateTime1();
                autoUpdateInterval1 = setInterval(updateDateTime1, 1000);
            }

            function stopAutoUpdate() {
                clearInterval(autoUpdateInterval);
            }

            function stopAutoUpdate1() {
                clearInterval(autoUpdateInterval1);
            }

            if (!isPPICSS) {
                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);
                }

                $('#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();

                if (isPPICSS) {
                    // For PPICSS, only validate the photo upload fields
                    const buktiAwal = $('#Bukti_Awal').val();
                    const buktiAkhir = $('#Bukti_Akhir').val();
                    const hasExistingPhotos = $('#Bukti_Awalpreview').attr('src').includes('storage') ||
                        $('#Bukti_Akhirpreview').attr('src').includes('storage');

                    if (!hasExistingPhotos && !buktiAwal && !buktiAkhir) {
                        showWarningPopup('Mohon upload minimal satu bukti foto');
                        return;
                    }
                } else {
                    if ($('#autoUpdateCheck').is(':checked')) {
                        updateDateTime();
                    }

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

                    if (!validateDateTime()) {
                        return;
                    }
                }

                this.submit();
            });

            if (!isPPICSS) {
                $('#jeniskendaraan_id').change(function() {
                    var jenisKendaraanId = $(this).val();
                    if (jenisKendaraanId) {
                        $.ajax({
                            url: '/api/get-type-kendaraan/' + jenisKendaraanId,
                            type: "GET",
                            dataType: "json",
                            success: function(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.id + ' - ' + value
                                        .Nama_typekendaraan + '</option>');
                                });
                            }
                        });
                    } else {
                        $('#typekendaraan_id').empty();
                        $('#typekendaraan_id').append('<option value="">Pilih Type Kendaraan</option>');
                    }
                });

                var today = new Date().toISOString().split('T')[0];
                $('input[type="date"]').attr('max', today);

                $('input[type="date"]').on('input', function() {
                    var selectedDate = new Date(this.value);
                    var currentDate = new Date();

                    if (selectedDate > currentDate) {
                        $(this).addClass('future-date');
                        this.setCustomValidity('Please select a date no later than today');
                    } else {
                        $(this).removeClass('future-date');
                        this.setCustomValidity('');
                    }
                });
            }
        });

        $('input[type="number"]').on('input', function() {
            if (this.value < 0) {
                this.value = 0;
            }
            // Remove decimals
            this.value = Math.floor(this.value);
        });

        // Prevent "e" and "." input in number fields
        $('input[type="number"]').on('keydown', function(e) {
            if (e.key === 'e' || e.key === '.') {
                e.preventDefault();
            }
        });
    </script>
    <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>
    <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;
        }

        .future-date {
            border-color: #dc3545;
        }
    </style>
@endpush