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

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

    @php
        // Check user roles
        $isResepsionis = session('user')->idroles === 'rspion';
        $isSecurity = session('user')->idroles === 'scrity';
        $isFullInput = $list->input_type === 'full';

        // Define field access by role
        $resepsionisAllowedFields = [
            'NamaTamu', 'KTP_SIM_IDCARD', 'Instansi', 'JumlahPersonel',
            'department_id', 'subdepartment_id', 'PICYangDituju',
            'qty_earplug', 'qty_shoescover', 'qty_hairnet'
        ];

        $securityAllowedFields = [
            'Nomor_Polisi', 'jeniskendaraan_id', 'typekendaraan_id',
            'TanggalMasuk', 'JamMasuk', 'TanggalKeluar', 'JamKeluar', 'KTP_SIM_IDCARD'
        ];

        function isFieldAllowed($fieldName, $isResepsionis, $isSecurity, $isFullInput, $resepsionisAllowedFields, $securityAllowedFields) {
            if ($isFullInput) {
                // If full input was selected, only security can edit
                if ($isSecurity) {
                    return true;
                }
                return false;
            } else {
                // Partial input logic
                if ($isResepsionis) {
                    return in_array($fieldName, $resepsionisAllowedFields);
                } elseif ($isSecurity) {
                    return in_array($fieldName, $securityAllowedFields);
                }
            }
            return true;
        }
    @endphp

    <div class="card shadow-lg mx-4 mb-4">
        <div class="card-body p-3">
            <div class="row">
                <div class="col-12">
                    <h6 class="mb-3">Mode Input:</h6>
                    <div class="badge bg-{{ $isFullInput ? 'primary' : 'info' }} text-white">
                        {{ $isFullInput ? 'Input Lengkap' : 'Input Parsial' }}
                    </div>
                    @if ($isFullInput && !$isSecurity)
                        <div class="alert alert-warning mt-3">
                            Data ini hanya dapat diubah oleh Security karena menggunakan mode Input Lengkap
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <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')
                        <div class="card-body">
                            @php
                                $sections = [
                                    'Kedatangan Tamu' => [
                                        ['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 Tamu' => [
                                        ['name' => 'NamaTamu', 'label' => 'Nama Tamu', 'type' => 'text', 'placeholder' => 'Ex.: Nama Tamu', 'col' => 3],
                                        ['name' => 'KTP_SIM_IDCARD', 'label' => 'KTP/SIM/ID Card', 'type' => 'text', 'placeholder' => 'Ex.: xxxx', 'col' => 3],
                                        ['name' => 'Instansi', 'label' => 'Instansi', 'type' => 'text', 'placeholder' => 'Ex.: Instansi', 'col' => 3],
                                        ['name' => 'JumlahPersonel', 'label' => 'Jumlah Personel', 'type' => 'number', 'placeholder' => 'Ex.: xxxx', 'col' => 3],
                                    ],
                                    'PIC di MSJ' => [
                                        ['name' => 'PICYangDituju', 'label' => 'PIC yang dituju', 'type' => 'text', 'placeholder' => 'Ex.: xxxx', 'col' => 3],
                                        ['name' => 'department_id', 'label' => 'Department', 'type' => 'enum', 'query' => 'SELECT id, nama_department FROM mst_department', 'col' => 3],
                                        ['name' => 'subdepartment_id', 'label' => 'Subdepartment', 'type' => 'enum', 'query' => 'SELECT id, nama_subdepartment FROM mst_subdepartment', 'col' => 3],
                                    ],
                                    'Perlengkapan K3' => [
                                        ['name' => 'qty_hairnet', 'label' => 'Hairnet', 'type' => 'number', 'placeholder' => '0', 'col' => 1, 'note' => 'Jumlah Hairnet yang dipinjam'],
                                        ['name' => 'qty_shoescover', 'label' => 'Shoes Cover', 'type' => 'number', 'placeholder' => '0', 'col' => 1, 'note' => 'Jumlah Shoes Cover yang dipinjam'],
                                        ['name' => 'qty_earplug', 'label' => 'Ear Plug', 'type' => 'number', 'placeholder' => '0', 'col' => 1, 'note' => 'Jumlah Ear Plug yang dipinjam'],
                                    ],
                                ];
                            @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'] }}"
                                                        {{ !isFieldAllowed($field['name'], $isResepsionis, $isSecurity, $isFullInput, $resepsionisAllowedFields, $securityAllowedFields) ? 'disabled' : '' }}>
                                                    <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 }}" {{ $list->{$field['name']} == $option->$idColumn ? 'selected' : '' }}>
                                                            {{ $option->$nameColumn }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                <input class="form-control form-control-sm @error($field['name']) is-invalid @enderror" 
                                                    type="{{ $field['type'] }}" 
                                                    name="{{ $field['name'] }}" 
                                                    placeholder="{{ $field['placeholder'] ?? '' }}"
                                                    id="{{ $field['name'] }}"
                                                    max="{{ date('Y-m-d') }}"
                                                    value="{{ $list->{$field['name']} }}"
                                                    {{ !isFieldAllowed($field['name'], $isResepsionis, $isSecurity, $isFullInput, $resepsionisAllowedFields, $securityAllowedFields) ? 'disabled' : '' }}>
                                            @endif
                                            @error($field['name'])
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    @if($field['name'] === 'JamMasuk' && !$isResepsionis)
                                        <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="autoUpdateCheckJamMasuk">
                                                    <label class="custom-control-label" for="autoUpdateCheckJamMasuk">
                                                        <i class="fas fa-clock" title="Auto-update Date/Time"></i>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if($field['name'] === 'JamKeluar' && !$isResepsionis)
                                        <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="autoUpdateCheckJamKeluar">
                                                    <label class="custom-control-label" for="autoUpdateCheckJamKeluar">
                                                        <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>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            const isResepsionis = {{ json_encode($isResepsionis) }};
            const isSecurity = {{ json_encode($isSecurity) }};
            const isFullInput = {{ json_encode($isFullInput) }};

            function updateFieldAccess() {
                if (isFullInput) {
                    // If full input mode, only security can edit
                    if (!isSecurity) {
                        $('input, select').prop('disabled', true);
                        $('#autoUpdateCheckJamMasuk, #autoUpdateCheckJamKeluar').prop('disabled', true);
                    }
                } else {
                    // Partial input mode logic
                    if (isResepsionis) {
                        $('input, select').each(function() {
                            const fieldName = $(this).data('field');
                            if (fieldName) {
                                $(this).prop('disabled', !resepsionisFields.includes(fieldName));
                            }
                        });
                        $('#autoUpdateCheckJamMasuk, #autoUpdateCheckJamKeluar').prop('disabled', true);
                    } else if (isSecurity) {
                        $('input, select').each(function() {
                            const fieldName = $(this).data('field');
                            if (fieldName) {
                                $(this).prop('disabled', !securityFields.includes(fieldName));
                            }
                        });
                        $('input[name^="qty_"]').prop('disabled', true);
                    }
                }
            }

            // Initial field access setup
            updateFieldAccess();

            if (isResepsionis) {
                $('#autoUpdateCheckJamMasuk, #autoUpdateCheckJamKeluar').prop('disabled', true);
            } else if (isSecurity) {
                $('input[name^="qty_"]').prop('disabled', true);
            }

            // Your existing code starts here with role-based modifications
            function updateDateTime(field) {
                if (!isResepsionis) {
                    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="' + field + '"]').val(formattedTime);
                    $('input[name="Tanggal' + field.replace('Jam', '') + '"]').val(formattedDate);
                }
            }
            function updateDateTime(field) {
                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="' + field + '"]').val(formattedTime);
                $('input[name="Tanggal' + field.replace('Jam', '') + '"]').val(formattedDate);
            }

            let autoUpdateIntervals = {};

            function startAutoUpdate(field) {
                updateDateTime(field);
                autoUpdateIntervals[field] = setInterval(() => updateDateTime(field), 1000);
            }

            function stopAutoUpdate(field) {
                clearInterval(autoUpdateIntervals[field]);
            }


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

            $('#autoUpdateCheckJamMasuk, #autoUpdateCheckJamKeluar').prop('checked', false);

            $('#autoUpdateCheckJamMasuk, #autoUpdateCheckJamKeluar').change(function() {
                var field = this.id.replace('autoUpdateCheck', '');
                if (this.checked) {
                    startAutoUpdate(field);
                    $('input[name="' + field + '"], input[name="Tanggal' + field.replace('Jam', '') + '"]').prop('readonly', true);
                } else {
                    stopAutoUpdate(field);
                    $('input[name="' + field + '"], input[name="Tanggal' + field.replace('Jam', '') + '"]').prop('readonly', false);
                }
            });


            $('input[name="JumlahPersonel"]').on('input change', function() {
                if (this.value <= 0) {
                    this.value = 1;
                }
                // Ensure the value is always a whole number
                this.value = Math.floor(Math.abs(this.value));
            });

            function isSameDay(d1, d2) {
                return d1.getFullYear() === d2.getFullYear() &&
                    d1.getMonth() === d2.getMonth() &&
                    d1.getDate() === d2.getDate();
            }

            function validateDates() {
                var tanggalMasuk = $('input[name="TanggalMasuk"]').val() ? new Date($('input[name="TanggalMasuk"]').val()) : null;
                var tanggalKeluar = $('input[name="TanggalKeluar"]').val() ? new Date($('input[name="TanggalKeluar"]').val()) : null;
                var currentDate = new Date();
                currentDate.setHours(0, 0, 0, 0);

                if (tanggalMasuk && tanggalMasuk > currentDate && !isSameDay(tanggalMasuk, currentDate)) {
                    alert('Tanggal Masuk tidak boleh lebih dari hari ini');
                    return false;
                }

                if (tanggalKeluar && tanggalKeluar > currentDate && !isSameDay(tanggalKeluar, currentDate)) {
                    alert('Tanggal Keluar tidak boleh lebih dari hari ini');
                    return false;
                }

                if (tanggalMasuk && tanggalKeluar && tanggalKeluar < tanggalMasuk) {
                    alert('Tanggal Keluar harus setelah Tanggal Masuk');
                    return false;
                }

                return true;
            }

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

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

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

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

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

            $('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 = new Date(tanggalMasuk + 'T' + jamMasuk);
                var dateTimeKeluar = new Date(tanggalKeluar + 'T' + jamKeluar);
                var currentDateTime = new Date();

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

                    updateExitDateMin();

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

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

            $('#{{ $dmenu }}-form').submit(function(e) {
                e.preventDefault();
                console.log('Form submitted');
                
                if (!isResepsionis) {
                    if ($('#autoUpdateCheckJamMasuk').is(':checked')) {
                        updateDateTime('JamMasuk');
                    }

                    if ($('#autoUpdateCheckJamKeluar').is(':checked')) {
                        updateDateTime('JamKeluar');
                    }
                    
                    if (!validateDateTime()) {
                        return;
                    }
                }

                this.submit();
            });

            $('#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>');
                }
            });
        });
    </script>
@endpush