@extends('templates.dashboard')
@section('isi')
    <style>
        .selected-dates {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            max-height: 150px;
            overflow-y: auto;
        }

        .selected-dates ul {
            list-style: none;
            padding: 0;
        }

        .selected-dates ul li {
            margin-bottom: 5px;
        }

        .selected-shift {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            max-height: 150px;
            overflow-y: auto;
        }

        .selected-shift ul {
            list-style: none;
            padding: 0;
        }

        .selected-shift ul li {
            margin-bottom: 5px;
        }
    </style>
    <div class="row">
        <div class="col-md-12 m project-list">
            <div class="card">
                <div class="row">
                    <div class="col-md-6 p-0 d-flex mt-2">
                        <h4>{{ $title }}</h4>
                    </div>
                    <div class="col-md-6 p-0">
                        <a href="{{ url('/pegawai') }}" class="btn btn-danger btn-sm ms-2">Back</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="p-4">
                    <!-- Tombol untuk memilih mode -->
                    <div class="form-group">
                        <label for="modeSelection">Pilih Mode:</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="mode" id="mode1" value="mode1"
                                checked onclick="toggleForm('mode1')">
                            <label class="form-check-label" for="mode1">Mode 1</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="mode" id="mode2" value="mode2"
                                onclick="toggleForm('mode2')">
                            <label class="form-check-label" for="mode2">Mode 2</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="mode" id="mode3" value="mode3"
                                onclick="toggleForm('mode3')">
                            <label class="form-check-label" for="mode3">Mode 3</label>
                        </div>
                    </div>
                    <form method="post" action="{{ url('/pegawai/shift/proses-tambah-shift3') }}" id="formMode3"
                        onsubmit="prepareShiftData()" style="display: none;">
                        @csrf
                        <div class="form-group">
                            <label for="shift_ids" class="float-left">Shift</label>
                            <input type="hidden" name="user_id" value="{{ $karyawan->id }}">
                            <input type="hidden" name="selected_shift" id="selected_shift">

                            <select class="form-control selectpicker @error('shift_ids') is-invalid @enderror" id="shift_ids"
                                name="shift_ids" data-live-search="true">
                                <option value="">Pilih Shift</option>
                                @foreach ($shift as $s)
                                    <option value="{{ $s->id }}" {{ old('shift_ids') == $s->id ? 'selected' : '' }}>
                                        {{ $s->nama_shift . ' (' . $s->jam_masuk . ' - ' . $s->jam_keluar . ') ' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('shift_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div class="selected-dates mt-3">
                                <strong>Shift:</strong>
                                <ul id="shiftList"></ul>
                            </div>
                        </div>

                       <div class="form-group">
                            <label for="tanggal_mulai" class="float-left">Tanggal Mulai</label>
                            <input type="datetime" class="form-control @error('tanggal_mulai') is-invalid @enderror"
                                id="tanggal_mulai" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}">
                            @error('tanggal_mulai')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="tanggal_akhir" class="float-left">Tanggal Akhir</label>
                            <input type="datetime" class="form-control @error('tanggal_akhir') is-invalid @enderror"
                                id="tanggal_akhir" name="tanggal_akhir" value="{{ old('tanggal_akhir') }}">
                            @error('tanggal_akhir')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                            <input type="hidden" name="tanggal">
                            <input type="hidden" name="status_absen">
                            <input type="hidden" name="user_id" value="{{ $karyawan->id }}">
                        </div>

                        <div class="form-check mb-4">
                            <input name="lock_location" class="form-check-input lock_location" type="checkbox"
                                value="1" id="lock_location">
                            <label class="form-check-label" for="lock_location">
                                Lock Location
                            </label>
                        </div>

                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>
                    <form method="post" action="{{ url('/pegawai/shift/proses-tambah-shift') }}" id="formMode1"
                        style="display: none;">
                        @csrf
                        <div class="form-group">
                            <label for="shift_id" class="float-left">Shift</label>
                            <select class="form-control selectpicker @error('shift_id') is-invalid @enderror" id="shift_id"
                                name="shift_id" data-live-search="true">
                                <option value="">Pilih Shift</option>
                                @foreach ($shift as $s)
                                    @if (old('shift_id') == $s->id)
                                        <option value="{{ $s->id }}" selected>
                                            {{ $s->nama_shift . ' (' . $s->jam_masuk . ' - ' . $s->jam_keluar . ') ' }}
                                        </option>
                                    @else
                                        <option value="{{ $s->id }}">
                                            {{ $s->nama_shift . ' (' . $s->jam_masuk . ' - ' . $s->jam_keluar . ') ' }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                            @error('shift_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="tanggal_mulai" class="float-left">Tanggal Mulai</label>
                            <input type="datetime" class="form-control @error('tanggal_mulai') is-invalid @enderror"
                                id="tanggal_mulai" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}">
                            @error('tanggal_mulai')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="tanggal_akhir" class="float-left">Tanggal Akhir</label>
                            <input type="datetime" class="form-control @error('tanggal_akhir') is-invalid @enderror"
                                id="tanggal_akhir" name="tanggal_akhir" value="{{ old('tanggal_akhir') }}">
                            @error('tanggal_akhir')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                            <input type="hidden" name="tanggal">
                            <input type="hidden" name="status_absen">
                            <input type="hidden" name="user_id" value="{{ $karyawan->id }}">
                        </div>
                        <div class="form-check mb-4">
                            <input name="lock_location" class="form-check-input lock_location" type="checkbox"
                                value="1" id="lock_location">
                            <label class="form-check-label" for="lock_location">
                                Lock Location
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>
                    <form action="{{ url('/pegawai/shift/proses-tambah-shift2') }}" method="POST" id="formMode2"
                        style="display: none;">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $karyawan->id }}">
                        <input type="hidden" name="selected_dates" id="selected_dates">

                        <div class="form-group">
                            <label for="shift_id" class="float-left">Shift</label>
                            <select class="form-control selectpicker @error('shift_id') is-invalid @enderror"
                                id="shift_id" name="shift_id" data-live-search="true">
                                <option value="">Pilih Shift</option>
                                @foreach ($shift as $s)
                                    <option value="{{ $s->id }}"
                                        {{ old('shift_id') == $s->id ? 'selected' : '' }}>
                                        {{ $s->nama_shift . ' (' . $s->jam_masuk . ' - ' . $s->jam_keluar . ') ' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('shift_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <label for="date">Pilih Tanggal:</label>
                        <input type="date" id="date">

                        <div class="selected-dates" id="selectedDatesList">
                            <strong>Tanggal yang Dipilih:</strong>
                            <ul id="datesList"></ul>
                        </div>

                        <div class="form-check mb-4">
                            <input name="lock_location" class="form-check-input lock_location" type="checkbox"
                                value="1" id="lock_location">
                            <label class="form-check-label" for="lock_location">
                                Lock Location
                            </label>
                        </div>

                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>

                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <center>
                        <h3>{{ $karyawan->name }}</h3>
                    </center>
                    <hr>
                    <form action="{{ url('/pegawai/shift/' . $karyawan->id) }}">
                        <div class="row">
                            <div class="col-3">
                                <input type="datetime" class="form-control" name="tanggal" placeholder="Tanggal"
                                    id="tanggal" value="{{ request('tanggal') }}">
                            </div>
                            <div class="col">
                                <button type="submit" id="search"class="border-0 mt-3"
                                    style="background-color: transparent;"><i class="fas fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="mytable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Tanggal</th>
                                    <th>Shift Pegawai</th>
                                    <th>Jam Masuk</th>
                                    <th>Jam Keluar</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($shift_karyawan as $sk)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $sk->tanggal }}</td>
                                        <td>{{ $sk->Shift->nama_shift ?? "--" }}</td>
                                        <td>{{ $sk->Shift->jam_masuk ?? "--" }}</td>
                                        <td>{{ $sk->Shift->jam_keluar ?? "--" }}</td>
                                        <td>
                                            <ul class="action">
                                                <li class="edit">
                                                    <a href="{{ url('/pegawai/edit-shift/' . $sk->id) }}"><i
                                                            class="fa fa-solid fa-edit"></i></a>
                                                </li>
                                                <li class="delete">
                                                    <form action="{{ url('/pegawai/delete-shift/' . $sk->id) }}"
                                                        method="post" class="d-inline">
                                                        @method('delete')
                                                        @csrf
                                                        <input type="hidden" name="user_id"
                                                            value="{{ $karyawan->id }}">
                                                        <button class="border-0" style="background-color: transparent;"
                                                            onClick="return confirm('Are You Sure')"><i
                                                                class="fa fa-solid fa-trash"></i></button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-flex justify-content-end me-4 mb-4">
                    {{ $shift_karyawan->links() }}
                </div>
            </div>
        </div>
    </div>
    @push('script')
        <script>
            // Fungsi untuk menampilkan form sesuai dengan mode yang dipilih
            function toggleForm(mode) {
                if (mode === 'mode1') {
                    document.getElementById('formMode1').style.display = 'block';
                    document.getElementById('formMode2').style.display = 'none';
                    document.getElementById('formMode3').style.display = 'none';
                } else if (mode === 'mode2') {
                    document.getElementById('formMode1').style.display = 'none';
                    document.getElementById('formMode2').style.display = 'block';
                    document.getElementById('formMode3').style.display = 'none';
                } else if (mode === 'mode3') {
                    document.getElementById('formMode1').style.display = 'none';
                    document.getElementById('formMode2').style.display = 'none';
                    document.getElementById('formMode3').style.display = 'block';
                }
            }

            // Secara default tampilkan form mode 1
            toggleForm('mode1');
        </script>
        <script>
            const dateInput = document.getElementById('date');
            const selectedDatesList = document.getElementById('datesList');
            const selectedDatesInput = document.getElementById('selected_dates');
            const selectedDates = new Set(); // Menyimpan tanggal yang dipilih

            dateInput.addEventListener('change', () => {
                const dateValue = dateInput.value;
                if (dateValue && !selectedDates.has(dateValue)) {
                    selectedDates.add(dateValue);

                    const listItem = document.createElement('li');
                    listItem.textContent = dateValue;

                    const removeButton = document.createElement('button');
                    removeButton.textContent = 'Hapus';
                    removeButton.style.marginLeft = '10px';
                    removeButton.type = 'button';
                    removeButton.addEventListener('click', () => {
                        selectedDates.delete(dateValue);
                        selectedDatesList.removeChild(listItem);
                        updateHiddenInput();
                    });

                    listItem.appendChild(removeButton);
                    selectedDatesList.appendChild(listItem);
                    updateHiddenInput();
                }
                dateInput.value = '';
            });

            function updateHiddenInput() {
                selectedDatesInput.value = JSON.stringify([...selectedDates]); // Kirim sebagai JSON array
            }
        </script>
        <script>
            $(document).ready(function() {
    let selectedShift = []; // Menggunakan array biasa
    $('#shift_ids').on('change', function() {
        let shiftValue = $(this).val();
        let shiftText = $("#shift_ids option:selected").text();

        if (shiftValue) {
            selectedShift.push(shiftValue); // Menambahkan shiftValue langsung ke array

            let listItem = $('<li>').text(shiftText);
            let removeButton = $('<button>').text('Hapus')
                .css({
                    'margin-left': '10px',
                    'cursor': 'pointer'
                })
                .addClass('btn btn-danger btn-sm')
                .attr('type', 'button');

            // Event untuk menghapus item tertentu
            removeButton.on('click', function() {
                let index = selectedShift.indexOf(shiftValue);
                if (index !== -1) {
                    selectedShift.splice(index, 1);
                }
                listItem.remove();
                updateHiddenInput();
            });

            listItem.append(removeButton);
            $('#shiftList').append(listItem);
            updateHiddenInput();
        }
        $(this).val('');
    });

    function updateHiddenInput() {
        $('#selected_shift').val(JSON.stringify(selectedShift));
        console.log("Data shift terkini:", selectedShift); // Debugging log
    }
});

            function prepareShiftData() {
                $('#selected_shift').val(JSON.stringify([...selectedShift]));
            }
        </script>
        <script>
            $(function() {
                var lock_location = $('#lock_location').val();
                $('#lock_location').prop('checked', lock_location == "1");

                $('body').on('change', '#lock_location', function(event) {
                    if (this.checked) {
                        $('#lock_location').val(1)
                    } else {
                        $('#lock_location').val(null)
                    }
                });
            });
        </script>
    @endpush
@endsection