@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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</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</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-full">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <!-- Ruangan -->
                                    <div class="form-group">
                                        <label for="input-{{ $dmenu }}-room-id"
                                            class="form-control-label">Ruangan</label>
                                        <select class="form-select" id="input-{{ $dmenu }}-room-id" name="room_id"
                                            required data-selected-value={{ old('room_id') }}>
                                            {{-- Opsi akan disediakan oleh multi-datepicker berdasarkan tanggal yang dipilih --}}
                                        </select>
                                        @error('room_id')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <!-- Jam Mulai -->
                                            <div class="form-group">
                                                <label for="input-{{ $dmenu }}-start-time"
                                                    class="form-control-label">Jam Mulai</label>
                                                <input id="input-{{ $dmenu }}-start-time" class="form-control"
                                                    type="time" value="{{ old('start_time') }}" name="start_time">
                                                @error('start_time')
                                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <!-- Jam Selesai -->
                                            <div class="form-group">
                                                <label for="input-{{ $dmenu }}-end-time"
                                                    class="form-control-label">Jam Selesai</label>
                                                <input id="input-{{ $dmenu }}-end-time" class="form-control"
                                                    type="time" value="{{ old('end_time') }}" name="end_time">
                                                @error('end_time')
                                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <!-- Durasi -->
                                            <div class="form-group">
                                                <label for="input-{{ $dmenu }}-duration"
                                                    class="form-control-label">Durasi</label>
                                                <div class="input-group">
                                                    <input id="input-{{ $dmenu }}-duration" class="form-control"
                                                        type="text" value="0" aria-describedby="basic-addon2"
                                                        disabled>
                                                    <span class="input-group-text magang-select-none"
                                                        id="basic-addon2">Menit</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <!-- Jadwal Fleksibel -->
                                            <div class="form-group">
                                                <label for="input-{{ $dmenu }}-flexible-time"
                                                    class="form-control-label">Jadwal Fleksibel</label>
                                                <x-single-checkbox id="input-{{ $dmenu }}-flexible-time"
                                                    :checked="old('flexible_time')" :disabled="false" name="flexible_time" />
                                                @error('flexible_time')
                                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <!-- Pemesan -->
                                            <div class="form-group">
                                                <label for="input-{{ $dmenu }}-user-id"
                                                    class="form-control-label">Pemesan</label>
                                                <input id="input-{{ $dmenu }}-user-id" class="form-control"
                                                    type="text" value="{{ $user_login->firstname }}" required disabled
                                                    readonly>
                                                <input type="hidden" name="user_id" value="{{ $user_login->id }}"
                                                    disabled>
                                                @error('user_id')
                                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <!-- Mewakili -->
                                            {{-- <div class="form-group">
                                            <label for="input-{{ $dmenu }}-representation" class="form-control-label">Mewakili</label>
                                            <x-input-search
                                                id="input-{{ $dmenu }}-representation"
                                                dmenu="{{ $dmenu }}"
                                                name="representation_nik"
                                                query="SELECT emp.nik as NIK, dept.nama as Departemen, emp.nama as Nama FROM tabel_karyawan as emp JOIN tabel_departemen as dept ON emp.id_departemen = dept.id WHERE emp.isactive = '1'"
                                                primaryField="NIK"
                                                value1Field="Nama"
                                                value2Field="Departemen"
                                                nullValue="{{ $extra['user_login_employee']->nik }}"
                                                :required="true"
                                            />
                                            @error('representation_nik')
                                                <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                            @enderror
                                        </div> --}}
                                        {{-- perbaikan fitur nama tampil sebelum di searching pada kolom mewakili --}}
                                            <div class="form-group">
                                                <label for="input-{{ $dmenu }}-representation"
                                                    class="form-control-label">Mewakili</label>
                                                <x-input-search id="input-{{ $dmenu }}-representation"
                                                    dmenu="{{ $dmenu }}" name="representation_nik"
                                                    query="SELECT emp.nik as NIK, dept.nama as Departemen, emp.nama as Nama, emp.isactive as _isactive FROM tabel_karyawan as emp JOIN tabel_departemen as dept ON emp.id_departemen = dept.id ORDER BY emp.isactive DESC, emp.nama ASC"
                                                    primaryField="NIK" displayFields="NIK,Departemen,Nama"
                                                    hiddenFields="_isactive" value1Field="Nama" value2Field="Departemen"
                                                    nullValue="{{ isset($data['item']) ? ($data['item']->representation_nik ?? '') : '' }}"
                                                    :disabled="false" />
                                                @error('representation_nik')
                                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group h-full">
                                        <!-- Deskripsi -->
                                        <label for="input-{{ $dmenu }}-description"
                                            class="form-control-label">Deskripsi</label><code> *</code>
                                        <textarea id="input-{{ $dmenu }}-description" class="form-control" rows="5" name="description"
                                            maxlength="255">{{ old('description') }}</textarea>
                                        <!-- <textarea class="form-control" rows="5" name="description" maxlength="255">Percobaan</textarea> -->
                                        @error('description')
                                            <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6" id="input-booking-date">
                                    <!-- Tanggal -->
                                    <div class="form-group">
                                        <label for="input-{{ $dmenu }}-calendar"
                                            class="form-control-label">Tanggal</label>
                                        <x-multi-dateselector-calendar id="input-{{ $dmenu }}-calendar"
                                            dmenu="{{ $dmenu }}" name="dates"
                                            holidays="{{ json_encode($extra['holidays']) }}"
                                            bookings="{{ json_encode($extra['bookings']) }}"
                                            rooms="{{ json_encode($extra['rooms']) }}"
                                            inputRoomId="input-{{ $dmenu }}-room-id" :detailedPopover="$user_login->can('multi-dateselector-calendar-popover-extra')" />
                                        {{-- @error('dates')
                                        <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                    @enderror --}}
                                    </div>
                                </div>
                                <div class="col-md-6" id="schedule-setting">
                                    <!-- Pengaturan Jadwal -->
                                    <div class="form-group">
                                        <label for="input-{{ $dmenu }}-schedule-setting"
                                            class="form-control-label">Pengaturan Jadwal</label>
                                        <div class="magang-form-control table-responsive magang-p-0"
                                            id="input-{{ $dmenu }}-schedule-setting-container">
                                            <table class="table table-flush">
                                                <thead class="magang-sticky magang-top-0 magang-bg-white">
                                                    <tr class="magang-font-semibold magang-bg-gray-200">
                                                        <td
                                                            id="input-{{ $dmenu }}-schedule-setting-simultan-header">
                                                            <label
                                                                for="input-{{ $dmenu }}-schedule-setting-simultan"
                                                                class="magang-m-0 magang-w-full magang-h-6 magang-flex magang-justify-center magang-align-center magang-cursor-pointer">
                                                                <input type="checkbox"
                                                                    id="input-{{ $dmenu }}-schedule-setting-simultan"
                                                                    class="magang-w-6 magang-h-6">
                                                            </label>
                                                        </td>
                                                        <td id="input-{{ $dmenu }}-schedule-setting-action-header">
                                                            ACTION
                                                        </td>
                                                        <td>TANGGAL</td>
                                                        <td>JAM MULAI</td>
                                                        <td>JAM SELESAI</td>
                                                        <td>DURASI</td>
                                                    </tr>
                                                </thead>
                                                <tbody id="input-{{ $dmenu }}-schedule-setting">
                                                    {{-- Baris data waktu yang dipesan akan diisi oleh multi-datepicker --}}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {});

        // Untuk Flexible Schedule Checkbox
        document.addEventListener('DOMContentLoaded', function() {
            const jamMulai = document.getElementById('input-{{ $dmenu }}-start-time');
            const jamSelesai = document.getElementById('input-{{ $dmenu }}-end-time');

            const durasi = document.getElementById('input-{{ $dmenu }}-duration');
            const fleksibel = document.getElementById('input-{{ $dmenu }}-flexible-time');

            const tanggal = document.getElementById('input-booking-date');
            const jadwal = document.getElementById('schedule-setting');

            const kontainerDatePicker = document.getElementById('input-{{ $dmenu }}-calendar');
            let kontainerPengaturanJadwal = null;

            // Checkbox Jadwal Fleksibel
            function togglePengaturanJadwal() {
                if (fleksibel.checked) {
                    jamMulai.disabled = true;
                    jamSelesai.disabled = true;
                    jamMulai.required = false;
                    jamSelesai.required = false;
                    jamMulai.value = '';
                    jamSelesai.value = '';
                    durasi.value = '';

                    // tanggal.classList.remove('col-md-12');
                    // tanggal.classList.add('col-md-6');
                    // jadwal.classList.remove('magang-hidden');

                    kontainerPengaturanJadwal = document.getElementById(
                        'input-{{ $dmenu }}-schedule-setting-container');

                    // // Sesuaikan tinggi kontainerPengaturanJadwal dengan kontainerDatePicker
                    // kontainerPengaturanJadwal.style = "height: " + (kontainerDatePicker.clientHeight + 2) + "px";

                } else {
                    jamMulai.disabled = false;
                    jamSelesai.disabled = false;
                    jamMulai.required = true;
                    jamSelesai.required = true;

                    // tanggal.classList.remove('col-md-6');
                    // tanggal.classList.add('col-md-12');
                    // jadwal.classList.add('magang-hidden');
                }
            }

            fleksibel.addEventListener('change', function() {
                togglePengaturanJadwal();
            });

            togglePengaturanJadwal();

            // Convert to '00'
            // function absolutZero(inputElement) {
            //     if (inputElement.value !== '') {
            //         const time = inputElement.value.split(':');
            //         inputElement.value = `${time[0]}:00`;
            //     }
            // }

            // total durasi
            function hitungDurasi() {
                if (jamMulai.value && jamSelesai.value) {
                    const estimatedDuration = estimateDuration(jamMulai.value, jamSelesai.value);
                    durasi.value = (estimatedDuration > 0) ? estimatedDuration : ("Masukan tidak valid");
                } else {
                    durasi.value = "Masukan tidak valid";
                }
            }

            // absolutZero(jamMulai);
            // absolutZero(jamSelesai);
            hitungDurasi();
            // fleksibel.checked = false;

            // Listening
            ['change', 'input'].forEach(event => {
                jamMulai.addEventListener(event, function() {
                    // absolutZero(jamMulai);
                    hitungDurasi();
                });

                jamSelesai.addEventListener(event, function() {
                    // absolutZero(jamSelesai);
                    hitungDurasi();
                });
            });
        });
        $(document).ready(function() {
            const disabledField = '_isactive';
            const disabledValue = '0';
            const modalId = '#searchModalrepresentation_nik';
            const tableId = '#list_{{ $dmenu }}_representation_nik';

            function hideIsactiveColumn() {
                const modal = $(modalId);
                if (!modal.length) return;

                const $headerCells = modal.find('thead th');
                let isactiveIndex = -1;

                $headerCells.each(function(index) {
                    if ($(this).text().trim() === '_isactive' || $(this).text().trim().toLowerCase() ===
                        'isactive') {
                        isactiveIndex = index;
                        $(this).hide();
                        return false;
                    }
                });

                if (isactiveIndex >= 0) {
                    modal.find('tbody tr').each(function() {
                        $(this).find('td').eq(isactiveIndex).hide();
                    });
                }

                // console.log(`🙈 Hidden _isactive column at index: ${isactiveIndex}`);
            }

            function disableInactiveRows() {
                const modal = $(modalId);
                if (!modal.length) return;

                let disabledCount = 0;

                modal.find('tbody tr').each(function() {
                    const $row = $(this);
                    const $cells = $row.find('td');
                    const isactive = $cells.eq($cells.length - 1).text().trim();
                    const $btn = $row.find('.btn.badge');

                    if (isactive === disabledValue) {
                        disabledCount++;
                        $btn.prop('disabled', true)
                            .removeClass('bg-primary badge-lg')
                            .addClass('bg-secondary disabled')
                            .css({
                                'opacity': '0.5',
                                'cursor': 'not-allowed',
                                'pointer-events': 'none'
                            })
                            .html('<i class="fas fa-ban me-1"></i> Select')
                            .off('click')
                            .on('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                e.stopImmediatePropagation();
                            });

                        $row.addClass('row-disabled').css('background-color', '#f8f9fa');
                    }
                });
                hideIsactiveColumn();
            }

            function overrideSelectFunction() {
                if (typeof select_modal_representation_nik === 'undefined') {
                    return;
                }

                const originalFunction = select_modal_representation_nik;

                window.select_modal_representation_nik = function(id) {
                    console.log(`📞 select_modal called with NIK: ${id}`);

                    let isBlocked = false;

                    $(modalId + ' tbody tr').each(function() {
                        const $cells = $(this).find('td');
                        const nik = $cells.eq(1).text().trim();
                        const isactive = $cells.eq($cells.length - 1).text().trim();

                        if (nik === id && isactive === disabledValue) {
                            isBlocked = true;
                            return false;
                        }
                    });

                    if (isBlocked) {
                        $(modalId).modal('hide');
                        return false;
                    }

                    return originalFunction(id);
                };
            }

            // Event listener ketika modal dibuka
            $(modalId).on('shown.bs.modal', function() {
                setTimeout(disableInactiveRows, 300);
            });

            $(tableId).on('draw.dt', function() {
                setTimeout(function() {
                    disableInactiveRows();
                }, 10);
            });

            setTimeout(overrideSelectFunction, 500);
            setTimeout(overrideSelectFunction, 1500);

            document.addEventListener('click', function(e) {
                const button = e.target.closest('.btn.badge');
                if (!button) return;

                const modal = document.querySelector(modalId);
                if (!modal || !modal.contains(button)) return;

                const row = button.closest('tr');
                if (!row) return;

                const cells = row.querySelectorAll('td');
                const isactive = cells[cells.length - 1].textContent.trim();

                if (isactive === disabledValue) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                }
            }, true);
        });
    </script>
@endpush