@extends('layouts.app')

@section('content')
    <div id="tambah-kategori" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header" style="display: flex; justify-content: center;">
                    <h2 class="fw-medium fs-base">Tambah Kategori Acara</h2>
                </div>
                <form action="{{ route('kategori.create') }}" method="POST">
                    <div class="modal-body grid columns-12 gap-4 gap-y-3">
                        @csrf
                        <div class="g-col-12 mb-3">
                            <label for="modal-form-nama" class="form-label m-0">Kategori Acara</label>
                            <input id="modal-form-nama" name="kategori_acara" value="{{ old('kategori_acara') }}"
                                type="text" class="form-control" placeholder="...">
                            @error('kategori_acara')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="g-col-12 mb-3">
                            <label for="modal-form-nama-penyelenggara" class="form-label m-0">Nama Penyelenggara
                                Acara</label>
                            <select id="modal-form-nama-penyelenggara" name="nama_penyelenggara" data-search="true"
                                class="js-select2">
                                <option></option>
                                @foreach ($nama_penyelenggara as $item)
                                    <option value="{{ $item->nama_penyelenggara }}"
                                        data-nip="{{ $item->nip_penyelenggara }}"
                                        {{ old('nama_penyelenggara') == $item->nama_penyelenggara ? 'selected' : '' }}>
                                        {{ $item->nama_penyelenggara }}
                                    </option>
                                @endforeach
                            </select>
                            @error('nama_penyelenggara')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <script></script>
                        <div class="g-col-12 mb-3">
                            <label for="modal-form-nip" class="form-label m-0">NIP Penyelenggara Acara</label>
                            <input id="modal-form-nip" name="nip" value="{{ old('nip') }}" type="text"
                                class="form-control" placeholder="Hanya 16 karakter" maxlength="16"
                                onchange="validateNumber(this)" readonly>
                            @error('nip')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="g-col-12 mb-3">
                            <div class="row">
                                <div class="col-6">
                                    <label for="waktu-mulai" class="form-label m-0">Waktu Mulai</label>
                                    <input id="waktu-mulai" name="waktu_mulai" value="{{ old('waktu_mulai') }}"
                                        type="datetime-local" class="form-control" placeholder="Pilih waktu mulai acara">
                                    @error('waktu_mulai')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-6">
                                    <label for="waktu-selesai" class="form-label m-0">Waktu Selesai </label>
                                    <input id="waktu-selesai" name="waktu_selesai" value="{{ old('waktu_selesai') }}"
                                        type="datetime-local" class="form-control" placeholder="Pilih waktu selesai acara">
                                    @error('waktu_selesai')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div> <!-- END: Modal Body -->
                    <!-- BEGIN: Modal Footer -->
                    <div class="modal-footer text-end">
                        <button type="button" data-bs-dismiss="modal"
                            class="btn btn-outline-secondary w-20 me-1">Cancel</button>
                        <button type="submit" class="btn btn-primary w-20">Simpan</button>
                    </div> <!-- END: Modal Footer -->
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Info sukses bosku --}}
    @if (session('success'))
        <div id="info-modal" class="modal fade" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body p-0">
                        <div class="p-5 text-center">
                            <i data-feather="check-circle" class="w-25 h-25 text-success mx-auto mt-3"></i>
                            <div class="fs-5 mt-2">Success!</div>
                            <div class="text-secondary mt-2">{{ session('success') }}</div>
                        </div>
                        <div class="px-5 mb-5 text-center">
                            <button type="button" class="btn btn-primary w-50" data-bs-dismiss="modal">OK</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-backdrop fade show" style="z-index: 1040;"></div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var modal = new bootstrap.Modal(document.getElementById('info-modal'));
                modal.show();

                var closeButton = document.querySelector('[data-bs-dismiss="modal"]');
                closeButton.addEventListener('click', function() {
                    modal.hide();

                    // Remove the backdrop manually
                    var backdrop = document.querySelector('.modal-backdrop');
                    if (backdrop) {
                        backdrop.remove();
                    }

                    // Remove the 'modal-open' class from the body
                    document.body.classList.remove('modal-open');
                });

                // Remove backdrop and modal-open class when modal is hidden
                document.getElementById('info-modal').addEventListener('hidden.bs.modal', function() {
                    var backdrop = document.querySelector('.modal-backdrop');
                    if (backdrop) {
                        backdrop.remove();
                    }
                    document.body.classList.remove('modal-open');
                });
            });
        </script>
    @endif

    <div class="card p-4 m-2 table-responsive">
        <div class="intro-y d-flex justify-content-between align-items-center mb-4">
            <h2 class="fs-lg fw-medium mb-2 me-auto">
                Daftar Kategori Acara
            </h2>
            <button data-bs-toggle="modal" data-bs-target="#tambah-kategori" class="btn btn-primary">Tambah Kategori
                Acara</button>
        </div>
        <table id="absenKegiatan" class="table table-hover border rounded-2">
            <thead>
                <tr>
                    <th class="text-center align-middle">No</th>
                    <th class="text-center align-middle">Kategori Acara</th>
                    <th class="text-center align-middle">Status Acara</th>
                    <th class="text-center align-middle">Nama Penyelenggara</th>
                    <th class="text-center align-middle">NIP Penyelenggara</th>
                    <th class="text-center align-middle">Waktu Mulai</th>
                    <th class="text-center align-middle">Waktu Selesai</th>
                    <th class="text-center align-middle">Link Absensi</th>
                    <th class="text-center align-middle">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $item)
                    @php
                        $now = \Carbon\Carbon::now();
                        $waktu_mulai = \Carbon\Carbon::parse($item->waktu_mulai);
                        $waktu_selesai = \Carbon\Carbon::parse($item->waktu_selesai);

                        if ($now->between($waktu_mulai, $waktu_selesai)) {
                            $status_acara = 'Sedang Berlangsung';
                        } elseif ($now->lt($waktu_mulai)) {
                            $status_acara = 'Belum Mulai';
                        } else {
                            $status_acara = 'Selesai';
                        }

                        $encryptedId = encrypt($item->id);
                    @endphp
                    <tr>
                        <td class="text-center align-middle">{{ $loop->iteration }}</td>
                        <td class="text-center align-middle">{{ $item->kategori_acara }}</td>
                        <td class="text-center align-middle">{{ $status_acara }}</td>
                        <td class="text-center align-middle">{{ $item->nama_penyelenggara }}</td>
                        <td class="text-center align-middle">{{ $item->nip }}</td>
                        <td class="text-center align-middle">
                            {{ Carbon\Carbon::parse($item->waktu_mulai)->format('d-m-Y (H:i)') }}</td>
                        <td class="text-center align-middle">
                            {{ Carbon\Carbon::parse($item->waktu_selesai)->format('d-m-Y (H:i)') }}</td>

                        <td class="text-center align-middle">
                            <button class="btn btn-outline-primary p-1 copy-btn"
                                data-link="{{ route('formulir.absensi', ['kategori_kegiatan' => $item->kategori_acara]) }}">Copy
                                Link</button>
                        </td>
                        <td class="text-center align-middle">
                            <button class="btn btn-outline-success p-1 edit-button"
                                data-id="{{ $encryptedId }}">Edit</button>
                        </td>
                    </tr>

                    {{-- modal edit --}}
                    <div id="edit-kategori-{{ $encryptedId }}"
                        class="modal fade @if (session('err_edit')) show @endif" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-md">
                            <div class="modal-content">
                                <div class="modal-header" style="display: flex; justify-content: center;">
                                    <h2 class="fw-medium fs-base">Edit Kategori Acara {{ $item->kategori_acara }}</h2>
                                </div>
                                <form action="{{ route('kategori.update', ['id' => encrypt($item->id)]) }}"
                                    method="POST">
                                    <div class="modal-body grid columns-12 gap-4 gap-y-3">
                                        @csrf
                                        @method('patch')
                                        <div class="g-col-12 mb-3">
                                            <label for="modal-form-edit-nama" class="form-label m-0">Kategori
                                                Acara</label>
                                            <input id="modal-form-edit-nama" name="kategori_acara"
                                                value="{{ old('kategori_acara', $item->kategori_acara) }}" type="text"
                                                class="form-control" placeholder="...">
                                            @error('kategori_acara')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="g-col-12 mb-3">
                                            <label for="modal-form-edit-nama-penyelenggara" class="form-label m-0">Nama
                                                Penyelenggara Acara</label>
                                            <select id="modal-form-edit-nama-penyelenggara" name="nama_penyelenggara"
                                                class="js-select2 form-control">
                                                <option></option>
                                                @foreach ($nama_penyelenggara as $item_penyelenggara)
                                                    <option value="{{ $item_penyelenggara->nama_penyelenggara }}"
                                                        data-nip="{{ $item_penyelenggara->nip_penyelenggara }}"
                                                        {{ old('nama_penyelenggara', $item->nama_penyelenggara) == $item_penyelenggara->nama_penyelenggara ? 'selected' : '' }}>
                                                        {{ $item_penyelenggara->nama_penyelenggara }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('nama_penyelenggara')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="g-col-12 mb-3">
                                            <label for="modal-form-edit-nip" class="form-label m-0">NIP Penyelenggara
                                                Acara</label>
                                            <input id="modal-form-edit-nip" name="nip"
                                                value="{{ old('nip', $item->nip) }}" type="text" class="form-control"
                                                placeholder="Hanya 16 karakter" maxlength="16"
                                                onchange="validateNumber(this)" readonly>
                                            @error('nip')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="g-col-12 mb-3">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label for="edit-waktu-mulai" class="form-label m-0">Waktu
                                                        Mulai</label>
                                                    <input id="edit-waktu-mulai" name="waktu_mulai"
                                                        value="{{ old('waktu_mulai', $item->waktu_mulai) }}"
                                                        type="datetime-local" class="form-control"
                                                        placeholder="Pilih waktu mulai acara">
                                                    @error('waktu_mulai')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                                <div class="col-6">
                                                    <label for="edit-waktu-selesai" class="form-label m-0">Waktu
                                                        Selesai</label>
                                                    <input id="edit-waktu-selesai" name="waktu_selesai"
                                                        value="{{ old('waktu_selesai', $item->waktu_selesai) }}"
                                                        type="datetime-local" class="form-control"
                                                        placeholder="Pilih waktu selesai acara">
                                                    @error('waktu_selesai')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer text-end">
                                        <button type="button" data-bs-dismiss="modal"
                                            class="btn btn-outline-secondary w-20 me-1">Cancel</button>
                                        <button type="submit" class="btn btn-primary w-20">Simpan</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@section('pageScript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script>
        $(document).ready(function() {
            // Inisialisasi select2 pada modal tambah
            $('#modal-form-nama-penyelenggara').select2({
                dropdownParent: $('#tambah-kategori'),
                placeholder: "Pilih Nama",
                minimumResultsForSearch: 0,
            });

            $('#modal-form-nama-penyelenggara').one('select2:open', function(e) {
                $('input.select2-search__field').prop('placeholder', 'Cari...');
            });

            // Inisialisasi modal tambah jika session('modal_open') ada
            @if (session('modal_open'))
                $('#tambah-kategori').modal('show');
            @endif

            // Inisialisasi clipboard.js untuk copy link
            var clipboard = new ClipboardJS('.copy-btn', {
                text: function(trigger) {
                    return trigger.getAttribute('data-link');
                }
            });

            clipboard.on('success', function(e) {
                $(e.trigger).tooltip({
                    title: "Link copied!",
                    placement: "top",
                    trigger: "manual"
                }).tooltip('show');

                setTimeout(function() {
                    $(e.trigger).tooltip('hide');
                }, 2000);
            });

            clipboard.on('error', function(e) {
                $(e.trigger).tooltip({
                    title: "Failed to copy!",
                    placement: "top",
                    trigger: "manual"
                }).tooltip('show');

                setTimeout(function() {
                    $(e.trigger).tooltip('hide');
                }, 2000);
            });

            // Inisialisasi modal edit saat tombol edit diklik
            $('.edit-button').on('click', function() {
                var itemId = $(this).data('id');
                var modal = $('#edit-kategori-' + itemId);

                if (modal.length) {
                    var bootstrapModal = new bootstrap.Modal(modal.get(0));
                    bootstrapModal.show();

                    // Inisialisasi select2 di dalam modal edit
                    modal.find('#modal-form-edit-nama-penyelenggara').select2({
                        dropdownParent: modal,
                        placeholder: "Pilih Nama",
                        minimumResultsForSearch: 0,
                    });

                    // Penanganan perubahan pada dropdown penyelenggara
                    modal.find('#modal-form-edit-nama-penyelenggara').on('change', function() {
                        var selectedOption = $(this).find(':selected');
                        var nip = selectedOption.data('nip');
                        modal.find('#modal-form-edit-nip').val(nip || '');
                    });
                } else {
                    console.error('Modal not found for item ID: ' + itemId);
                }
            });

            // Penanganan perubahan pada dropdown penyelenggara pada modal tambah
            $('#modal-form-nama-penyelenggara').on('change', function() {
                var selectedOption = $(this).find(':selected');
                var nip = selectedOption.data('nip');
                $('#modal-form-nip').val(nip || '');
            });
        });

        function validateNumber(input) {
            input.value = input.value.replace(/[^0-9]/g, '');
        }
    </script>
@endsection