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

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

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

        // 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,
            $resepsionisAllowedFields,
            $securityAllowedFields,
        ) {
            if ($isResepsionis) {
                return in_array($fieldName, $resepsionisAllowedFields);
            } elseif ($isSecurity) {
                return true; // Initially allow all fields for security, will be controlled by JS
            }
            return true;
        }
    @endphp

    @if ($isSecurity)
        <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">Pilih Opsi Input:</h6>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="inputOption" id="inputOption1" value="full">
                            <label class="form-check-label" for="inputOption1">
                                <strong>Opsi 1: Input Lengkap</strong>
                                <br>
                                <small class="text-muted">Security dapat mengisi semua field, Resepsionis tidak dapat
                                    mengisi field apapun</small>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="inputOption" id="inputOption2"
                                value="partial" checked>
                            <label class="form-check-label" for="inputOption2">
                                <strong>Opsi 2: Input Parsial</strong>
                                <br>
                                <small class="text-muted">Security dan Resepsionis mengisi field sesuai peran
                                    masing-masing</small>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <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('trtamu.store') }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="input_type" id="selectedInputOption" value="partial">
                        <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',
                                            'default' => '0',
                                        ],
                                        [
                                            'name' => 'qty_shoescover',
                                            'label' => 'Shoes Cover',
                                            'type' => 'number',
                                            'placeholder' => '0',
                                            'col' => 1,
                                            'note' => 'Jumlah Shoes Cover yang dipinjam',
                                            'default' => '0',
                                        ],
                                        [
                                            'name' => 'qty_earplug',
                                            'label' => 'Ear Plug',
                                            'type' => 'number',
                                            'placeholder' => '0',
                                            'col' => 1,
                                            'note' => 'Jumlah Ear Plug yang dipinjam',
                                            'default' => '0',
                                        ],
                                    ],
                                ];
                            @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'] }}"
                                                        data-field="{{ $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 }}"
                                                                {{ old($field['name']) == $option->$idColumn ? 'selected' : '' }}>
                                                                {{ $option->$nameColumn }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                @elseif ($field['type'] === 'number' && isset($field['note']))
                                                    <div class="input-group input-group-sm">
                                                        <input
                                                            class="form-control form-control-sm @error($field['name']) is-invalid @enderror"
                                                            type="number" name="{{ $field['name'] }}"
                                                            placeholder="{{ $field['placeholder'] ?? '' }}"
                                                            id="{{ $field['name'] }}" data-field="{{ $field['name'] }}"
                                                            min="0"
                                                            value="{{ old($field['name'], isset($field['default']) ? $field['default'] : '0') }}"
                                                            style="width: 80px;">
                                                    </div>
                                                @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'] }}" data-field="{{ $field['name'] }}"
                                                        max="{{ date('Y-m-d') }}" 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>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            const isResepsionis = {{ json_encode($isResepsionis) }};
            const isSecurity = {{ json_encode($isSecurity) }};
            const resepsionisFields = {!! json_encode($resepsionisAllowedFields) !!};
            const securityFields = {!! json_encode($securityAllowedFields) !!};

            function updateFieldAccess() {
                if (isResepsionis) {
                    // For resepsionis, check if security has selected option 1
                    const securitySelectedOption = $('#selectedInputOption').val();
                    if (securitySelectedOption === 'full') {
                        // If security chose option 1, disable all fields for resepsionis
                        $('input, select').prop('disabled', true);
                        $('#autoUpdateCheck, #autoUpdateCheck1').prop('disabled', true);
                    } else {
                        // Default behavior for resepsionis - enable only their allowed fields
                        $('input, select').each(function() {
                            const fieldName = $(this).data('field');
                            if (fieldName) {
                                $(this).prop('disabled', !resepsionisFields.includes(fieldName));
                            }
                        });
                        $('#autoUpdateCheck, #autoUpdateCheck1').prop('disabled', true);
                    }
                } else if (isSecurity) {
                    const selectedOption = $('input[name="inputOption"]:checked').val();
                    $('#selectedInputOption').val(selectedOption);

                    if (selectedOption === 'full') {
                        // Option 1: Security has full access
                        $('input, select').prop('disabled', false);
                        $('#autoUpdateCheck, #autoUpdateCheck1').prop('disabled', false);
                    } else {
                        // Option 2: Partial access (default behavior)
                        $('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();

            // Update fields when input option changes
            $('input[name="inputOption"]').change(function() {
                const selectedOption = $(this).val();
                // Update the hidden input with 'full' or 'partial'
                $('#selectedInputOption').val(selectedOption);
                updateFieldAccess();
            });

            $('#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);
                $('input[type="date"]').val('');
                $('input[name="qty_hairnet"]').val('0');
                $('input[name="qty_shoescover"]').val('0');
                $('input[name="qty_earplug"]').val('0');

                // Reset to default option (Option 2)
                $('#inputOption2').prop('checked', true);
                $('#selectedInputOption').val('partial');
                updateFieldAccess();
            });

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

            $('input[type="number"]').on('keydown', function(e) {
                if (e.key === 'e' || e.key === '.') {
                    e.preventDefault();
                }
            });

            $('input[name="JumlahPersonel"]').on('input change', function() {
                if (this.value <= 0) {
                    this.value = 1;
                }
                this.value = Math.floor(Math.abs(this.value));
            });

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

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

            // Auto-update setup
            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);
                }
            });

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

                if (tanggalMasuk && jamMasuk) {
                    var dateTimeMasuk = new Date(tanggalMasuk + 'T' + jamMasuk);
                    var currentDateTime = new Date();

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

                if (tanggalKeluar && jamKeluar) {
                    var dateTimeKeluar = new Date(tanggalKeluar + 'T' + jamKeluar);
                    var currentDateTime = new Date();

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

                    if (tanggalMasuk && jamMasuk) {
                        var dateTimeMasuk = new Date(tanggalMasuk + 'T' + jamMasuk);
                        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() {
                        validateDateTime();
                        updateExitDateMin();
                    });

            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 ($('#autoUpdateCheck').is(':checked')) {
                    updateDateTime();
                }

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

                if (!validateDateTime()) {
                    return;
                }

                this.submit();
            });
        });
    </script>
@endpush