@extends('layouts.app')

@section('content')
    <div id="tambah_opd" 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 Daftar OPD</h2>
                </div>
                <form action="{{ route('opd.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">Nama OPD</label>
                            <input id="modal-form-nama" name="nama_opd" value="{{ old('nama_opd') }}" type="text"
                                class="form-control" placeholder="...">
                            @error('nama_opd')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </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-success" 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-success'));
                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-success').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 OPD
            </h2>
            <button data-bs-toggle="modal" data-bs-target="#tambah_opd" class="btn btn-primary">Tambah
                OPD</button>
        </div>
        <table id="opd" class="table table-hover border rounded-2">
            <thead>
                <tr>
                    <th class="text-center align-middle">No</th>
                    <th class="text-center align-middle">Nama OPD</th>
                    <th class="text-center align-middle">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $item)
                    @php
                        $encryptedId = encrypt($item->id);
                    @endphp
                    <tr>
                        <td class="text-center align-middle">{{ $loop->iteration }}</td>
                        <td class="text-center align-middle">{{ $item->nama_opd }}</td>
                        <td class="text-center align-middle">
                            <button class="btn btn-outline-success p-1 edit-button-opd"
                                data-id="{{ $encryptedId }}">Edit</button>
                        </td>
                    </tr>

                    {{-- modal edit --}}
                    <div id="edit-opd-{{ $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 OPD {{ $item->nama_opd }}</h2>
                                </div>
                                <form action="{{ route('opd.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-opd" class="form-label m-0">Nama
                                                OPD</label>
                                            <input id="modal-form-edit-nama-opd" name="nama_opd"
                                                value="{{ old('nama_opd', $item->nama_opd) }}" type="text"
                                                class="form-control" placeholder="...">
                                            @error('nama_opd')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </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() {
            @if (session('modal_open'))
                $('#tambah_opd').modal('show');
            @endif
        });

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

        document.addEventListener('DOMContentLoaded', function() {
            // show modal on edit button click
            // hide the id
            var editButtons = document.querySelectorAll('.edit-button-opd');
            editButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    var itemId = button.getAttribute('data-id');
                    var modal = document.getElementById('edit-opd-' + itemId);
                    if (modal) {
                        var bootstrapModal = new bootstrap.Modal(modal);
                        bootstrapModal.show();
                    } else {
                        console.error('Modal not found for item ID: ' + itemId);
                    }
                });
            });
        });
    </script>
@endsection