@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Documents') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('File a document request here') }}
            </p>
        </header>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6">
            <h2 class="text-lg font-semibold mb-4">Document Request Form</h2>
            <form action="{{ route('certificate-request.store') }}" method="POST" class="grid gap-4 grid-cols-1 md:grid-cols-2">
                @csrf
                <div class="md:col-span-2">
                    <label for="service_id" class="block text-sm font-medium text-gray-700">Document to request</label>
                    <select name="service_id" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" id="service_id" onchange="changeForm(event)">
                        <option value="" selected>Select document type</option>
                        @foreach ($documents as $document)
                            <option value="{{ $document->id }}">{{ $document->name }} - {{ $document->description }}</option>
                        @endforeach
                    </select>
                </div>
                <hr class="md:col-span-2" />
                <div id="dynamic-form" class="w-full md:col-span-2 grid gap-4 grid-cols-1 md:grid-cols-2"></div>
                <div class="col-span-2 flex justify-center mt-6">
                    <button id="dynamic-submit" disabled type="submit"
                        class="bg-main-dark text-main-light active:bg-main-dark active:text-main-light px-6 py-3 rounded-md shadow-lg cursor-pointer">
                        Submit
                    </button>
                </div>
            </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 request history</h2>
            <div class="overflow-x-auto rounded-lg">
                <table class=" min-w-full 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">
                                Id
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Document Type
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Status
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Release Date
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Notes
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Filed Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($requests as $request)
                            <tr>
                                <td class="border p-1 px-3 w-10">{{ $request->id }}</td>
                                <td class="border p-1 px-3" title="{{ $request->service->description }}">{{ $request->service->name }}</td>
                                <td class="border p-1 px-3">
                                    @if($request->is_rejected)
                                        <p class="text-red-600 font-bold">Rejected</p>
                                    @elseif($request->release_date)
                                        <p class="text-green-600 font-bold">Released</p>
                                    @elseif($request->is_accepted)
                                        <p class="text-green-600 font-bold">Accepted</p>
                                    @else
                                        <p class="text-yellow-600 font-bold">Pending</p>
                                    @endif
                                </td>
                                <td class="border p-1 px-3">{{ $request->release_date ? date('M. d, Y', strtotime($request->release_date)) : '' }}</td>
                                <td class="border p-1 px-3">{{ $request->notes }}</td>
                                <td class="border p-1 px-3">{{ $request->created_at->diffForHumans() . ' | ' . $request->created_at->format('M. d, Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td class="border p-2" colspan="5">No items found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $requests->links('pagination::tailwind') }}
            </div>
        </section>
    </main>
@endsection

@section('scripts')
    <script>
        const documents = @json($documents);
        function changeForm(e) {
            if (e.target.value === '') {
                document.getElementById('dynamic-submit').disabled = true;
            } else {
                document.getElementById('dynamic-submit').disabled = false;
            }
            const value = e.currentTarget.value;
            const container = document.getElementById('dynamic-form');
            container.innerHTML = '';
            documents.forEach(document => {
                if (document.id == value) {
                    const fields = JSON.parse(document.fields);
                    fields.forEach(field => {
                        container.innerHTML += `
                            <div>
                                <label for="${field}" class="block text-sm font-medium text-gray-700">${field}</label>
                                <input type="name" name="${field}" id="${field}"
                                    class="mt-1 block w-full p-2 border border-gray-300 rounded-md">
                            </div>
                        `;
                    });
                }
            });
        }
    </script>
@endsection