@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-gray-900">
                    {{ __(' Documents') }}
                </h2>
                <a href="{{ route('certificate-request.index') }}" class="bg-main-dark text-main-light active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded">Documents Requests</a>
            </div>
            <p class="mt-1 text-md text-gray-600">
                {{ __('View and manage documents') }}
            </p>
        </header>

        <section class="mt-2 mb-6">
            <button
                class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded  w-full text-left font-semibold"
                onclick="toggleAccordion(event)">
                Add new document
            </button>
            <form class="bg-white p-4 rounded-lg shadow-md mt-2 hidden transition duration-300 ease-in-out text-xs"
                action="{{ route('documents.store') }}" method="POST">
                @csrf
                <label for="name" class="block font-semibold text-xs">Name:</label>
                <input type="text" id="name" name="name" class="w-full p-2 border rounded mb-4 text-xs"
                    placeholder="Enter item name" required>

                <label for="description" class="block font-semibold text-xs">Description:</label>
                <textarea type="text" id="description" name="description" class="w-full p-2 border rounded mb-4 text-xs"
                    placeholder="Enter item description" required></textarea>

                <label class="block font-semibold text-xs">Fields:</label>
                <div id="field-container" class="space-y-2">
                    <div class="field-group flex items-center space-x-2">
                        <input type="text" name="fields[]" class="w-full p-2 border rounded text-xs"
                            placeholder="Enter field" required>
                        <button type="button" onclick="removeField(this)"
                            class="text-red-500 text-xs font-bold px-2">✕</button>
                    </div>
                </div>

                <button type="button" onclick="addField()" class="text-blue-500 text-xs font-semibold mt-2">+ Add
                    Field</button><br><br>

                <button type="submit"
                    class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-2 px-4 rounded align-right">
                    Add Item
                </button>
            </form>
        </section>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            <h2 class="text-lg font-semibold mb-4">Documents List</h2>
            <div class="bg-white shadow overflow-x-auto rounded-lg">
                <table class="w-full border-collapse rounded bg-main-light">
                    <thead class="bg-main-dark text-main-light text-sm">
                        <tr>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Service Name</th>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Description</th>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Fields</th>
                            <th
                                class="py-2 px-4 text-left whitespace-nowrap">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($documents as $item)
                            <tr>
                                <td class="border p-1 px-3">{{ $item->name }}</td>
                                <td class="border p-1 px-3">{{ $item->description }}</td>
                                <td class="border p-1 px-3">{{ $item->fields }}</td>
                                <td class="border p-1 px-3 text-center">
                                    <div class="flex justify-end gap-2 relative">
                                        <div>
                                            <button
                                                class="bg-main-dark text-main-light hover:underline active:bg-main-light active:text-main-dark text-xs py-1 px-3 rounded"
                                                onclick="openModal({{ json_encode($item) }})">
                                                Edit
                                            </button>
                                        </div>
                                        <div>
                                            <button class="bg-danger-dark text-danger-light hover:underline active:bg-danger-light active:text-danger-dark text-xs py-1 px-3 rounded"
                                                onclick="confirmationForm('Are you sure you want to delete this document?', 'delete-form-{{ $item->id }}')">Delete</button>
                                            <form id="delete-form-{{ $item->id }}" class="hidden"
                                                action="{{ route('documents.destroy', ['id' => $item->id]) }}"
                                                method="POST">
                                                @method('DELETE')
                                                @csrf
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="border p-2" colspan="2">No items found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        <div id="modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
                <button onclick="closeModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
                    ✕
                </button>

                <h2 class="text-lg font-semibold mb-4">Edit Budget</h2>
                <form id="edit-form" action="" method="POST">
                    @method('PUT')
                    @csrf
                    <label for="name" class="block font-semibold text-xs">Name:</label>
                    <input type="text" id="name-edit" name="name" class="w-full p-2 border rounded mb-4 text-xs"
                        placeholder="Enter budget name" required>

                    <label for="description" class="block font-semibold text-xs">Description:</label>
                    <textarea id="description-edit" name="description" class="w-full p-2 border rounded mb-4 text-xs"
                        placeholder="Enter budget description" required></textarea>

                    <label for="fields" class="block font-semibold text-xs">Fields:</label>
                    <div id="field-container-edit" class="space-y-2">
                        <div class="field-group flex items-center space-x-2">
                            <input type="text" name="fields[]" class="w-full p-2 border rounded text-xs"
                                placeholder="Enter field" required>
                            <button type="button" onclick="removeField(this)"
                                class="text-red-500 text-xs font-bold px-2">✕</button>
                        </div>
                    </div>

                    <button type="button" onclick="addEditField()" class="text-blue-500 text-xs font-semibold mt-2">+ Add
                        Field</button><br><br>

                    <button type="submit" class="bg-green-500 text-main-light px-4 py-2 rounded mt-4 w-full">Save
                        Changes</button>
                </form>
            </div>
        </div>

    </main>
@endsection

@section('scripts')
    <script>
        function toggleAccordion(e) {
            const form = e.currentTarget.nextElementSibling;
            form.classList.toggle("hidden");
        }
    </script>

    <script>
        function openModal(data) {
            console.log(data);
            document.getElementById('edit-form').action = '/documents/' + data.id;
            document.getElementById('name-edit').value = data.name;
            document.getElementById('description-edit').value = data.description;
            document.getElementById('modal').classList.remove('hidden');
            const fields = JSON.parse(data.fields);
            const container = document.getElementById('field-container-edit').innerHTML = '';
            fields.forEach(field => {
                addEditField(field);
            });
        }

        function closeModal() {
            document.getElementById('modal').classList.add('hidden');
        }
    </script>

    <script>
        function addField() {
            const container = document.getElementById('field-container');

            const fieldGroup = document.createElement('div');
            fieldGroup.classList.add('field-group', 'flex', 'items-center', 'space-x-2');

            const input = document.createElement('input');
            input.type = 'text';
            input.name = 'fields[]';
            input.classList.add('w-full', 'p-2', 'border', 'rounded', 'text-xs');
            input.placeholder = 'Enter field';
            input.required = true;

            const removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.classList.add('text-red-500', 'text-xs', 'font-bold', 'px-2');
            removeBtn.textContent = '✕';
            removeBtn.onclick = function() {
                removeField(removeBtn);
            };

            fieldGroup.appendChild(input);
            fieldGroup.appendChild(removeBtn);
            container.appendChild(fieldGroup);
        }

        function addEditField(value="") {
            const container = document.getElementById('field-container-edit');

            const fieldGroup = document.createElement('div');
            fieldGroup.classList.add('field-group', 'flex', 'items-center', 'space-x-2');

            const input = document.createElement('input');
            input.type = 'text';
            input.name = 'fields[]';
            input.classList.add('w-full', 'p-2', 'border', 'rounded', 'text-xs');
            input.placeholder = 'Enter field';
            input.required = true;
            input.value = value ?? "";

            const removeBtn = document.createElement('button');
            removeBtn.type = 'button';
            removeBtn.classList.add('text-red-500', 'text-xs', 'font-bold', 'px-2');
            removeBtn.textContent = '✕';
            removeBtn.onclick = function() {
                removeField(removeBtn);
            };

            fieldGroup.appendChild(input);
            fieldGroup.appendChild(removeBtn);
            container.appendChild(fieldGroup);
        }

        function removeField(button) {
            const fieldGroup = button.parentNode;
            fieldGroup.remove();
        }
    </script>
@endsection