@extends('Admin.layout')
@section('content')

    <div class="d-flex align-items-center mb-3">
        <a href="{{ route('edit_restaurant', $restaurant->id) }}" class="btn btn-icon bg-white me-2 shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </a>
        <h5 class="mb-0"> Documents </h5>
    </div>

    <div class="d-flex flex-column flex-sm-row gap-2 gap-sm-3 my-4">
        <a href="{{ route('edit_restaurant', $restaurant->id) }}" class="btn d-flex align-items-center justify-content-center justify-content-sm-start">
            <i class="ti tabler-user me-2"></i>
            <span> Profile Details</span>
        </a>
        <a href="#" class="btn btn-primary d-flex align-items-center justify-content-center justify-content-sm-start">
            <i class="ti tabler-checklist me-2"></i>
            <span> Documents </span>
        </a>
    </div>

    <div class="card">
        <div class="card-body p-3 p-md-4 p-lg-5">
            <div class="row g-3 g-md-4 justify-content-center p-3">

                @foreach ($documentTypes as $docType)
                    @php 
                        $doc = $documents->get($docType->id); 
                        $filePath = ($doc && $doc->file_path) ? asset('storage/' . $doc->file_path) : '';
                        $extension = ($doc && $doc->file_path) ? strtolower(pathinfo($doc->file_path, PATHINFO_EXTENSION)) : '';
                        $isPdf = ($extension === 'pdf');
                        $hasFile = !empty($filePath);
                    @endphp

                    <div class="col-12 col-lg-6 col-xl-5 mb-4">
                        <div class="card border-0 shadow-sm h-100 overflow-hidden">
                            <div class="card-body p-3 p-md-4">

                                <div class="d-flex justify-content-between align-items-center mb-3 mb-md-4">
                                    <h5 class="fw-semibold mb-0 fs-6 fs-md-5">Upload {{ $docType->name }}</h5>

                                    @if($doc)
                                        @php
                                            $badge = 'warning';
                                            if ($doc->status === 'Approved') $badge = 'success';
                                            if ($doc->status === 'Rejected') $badge = 'danger';
                                        @endphp
                                        <span class="badge bg-{{ $badge }}">{{ $doc->status }}</span>
                                    @endif
                                </div>

                                <div id="doc_{{ $docType->id }}_uploadArea" class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4 text-center">

                                    {{-- Upload Placeholder --}}
                                    <div id="doc_{{ $docType->id }}_uploadContent" class="d-flex flex-column align-items-center justify-content-center text-center @if($hasFile) d-none @endif">
                                        <label for="doc_{{ $docType->id }}_file" class="mb-2" style="cursor:pointer;">
                                            <i class="ti tabler-upload text-warning fs-1"></i>
                                        </label>

                                        <input type="file"
                                            id="doc_{{ $docType->id }}_file"
                                            class="d-none"
                                            accept="image/jpeg,image/png,image/jpg,application/pdf"
                                            onchange="handleUpload(event, {{ $docType->id }}, {{ $restaurant->id }})">

                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small">Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small">Supported formats: <strong>PDF, JPG, PNG</strong></p>
                                        <p class="text-secondary mb-0 small">Max file size: <strong>5 MB</strong></p>
                                    </div>

                                    {{-- Image Preview --}}
                                    <img id="doc_{{ $docType->id }}_preview_img"
                                        src="{{ ($hasFile && !$isPdf) ? $filePath : '' }}"
                                        alt="{{ $docType->name }}"
                                        class="img-fluid rounded-4 w-100 object-fit-contain @if(!$hasFile || $isPdf) d-none @endif"
                                        style="max-height:220px;"
                                        onclick="document.getElementById('doc_{{ $docType->id }}_file').value=''; document.getElementById('doc_{{ $docType->id }}_file').click();"
                                        role="button">

                                    {{-- PDF Preview Container --}}
                                    <div id="doc_{{ $docType->id }}_preview_pdf_container" class="@if(!$hasFile || !$isPdf) d-none @endif position-relative">
                                        <object id="doc_{{ $docType->id }}_preview_pdf"
                                                data="{{ ($hasFile && $isPdf) ? $filePath : '' }}"
                                                type="application/pdf"
                                                width="100%"
                                                height="220px"
                                                class="rounded-4 overflow-hidden border">
                                        </object>
                                        <button type="button" 
                                                class="btn btn-sm btn-light border position-absolute top-0 end-0 m-2 shadow-sm"
                                                onclick="document.getElementById('doc_{{ $docType->id }}_file').value=''; document.getElementById('doc_{{ $docType->id }}_file').click();">
                                                Change File
                                        </button>
                                    </div>

                                </div>

                                {{-- Action Controls --}}
                                <div class="d-flex justify-content-end mt-2">
                                    <div class="btn-group border border-primary rounded-3">
                                        <a href="{{ $filePath ?: '#' }}" 
                                           id="doc_{{ $docType->id }}_downloadBtn"
                                           class="btn @if(!$hasFile) disabled @endif" 
                                           download 
                                           target="_blank">
                                            <i class="ti tabler-download text-primary fs-5"></i>
                                        </a>

                                        <button type="button" 
                                                class="btn @if(!$hasFile) disabled @endif"
                                                id="doc_{{ $docType->id }}_previewBtn"
                                                onclick="openPreview('{{ $filePath }}')"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#documentPreviewModal">
                                            <i class="ti tabler-eye text-info fs-5"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="row g-2 g-md-3 mt-3">
                                    <div class="col-6">
                                        <button type="button"
                                            class="btn btn-light w-100 text-secondary fw-semibold"
                                            data-bs-toggle="modal" data-bs-target="#rejectModal"
                                            onclick="document.getElementById('reject_doc_id').value='{{ $doc->id ?? '' }}'"
                                            {{ (!$hasFile) ? 'disabled' : '' }}>
                                            Reject
                                        </button>
                                    </div>
                                    <div class="col-6">
                                        <button type="button"
                                            class="btn btn-primary w-100 text-white fw-semibold"
                                            data-bs-toggle="modal" data-bs-target="#approveModal"
                                            onclick="document.getElementById('approve_doc_id').value='{{ $doc->id ?? '' }}'"
                                            {{ (!$hasFile) ? 'disabled' : '' }}>
                                            Approve
                                        </button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>

    {{-- Reject Modal --}}
    <div class="modal fade" id="rejectModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <input type="hidden" id="reject_doc_id">
                <h5 class="fw-bold mb-2">Reject Document</h5>
                <p class="text-muted">Please provide a reason for rejection</p>
                <textarea id="reject_reason" class="form-control mb-3" rows="3"
                    placeholder="e.g. Image is blurry, details unreadable"></textarea>
                <div class="d-flex justify-content-center gap-3 mt-2">
                    <button type="button" class="btn btn-outline-primary p-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger p-3" id="confirmReject">Yes, Reject</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Preview Modal --}}
    <div class="modal fade" id="documentPreviewModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content rounded-4">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Document Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center p-0 pb-3">
                    <img id="previewModalImg" src="" alt="Document Preview" class="img-fluid rounded-3 d-none" style="max-height: 80vh;">
                    <iframe id="previewModalPdf" src="" class="w-100 rounded-3 d-none" style="height: 75vh;" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    {{-- Approve Modal --}}
    <div class="modal fade" id="approveModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <input type="hidden" id="approve_doc_id">
                <h5 class="fw-bold mb-2">Approve Document</h5>
                <p class="text-muted">Are you sure you want to approve this document?</p>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary p-3" id="confirmApprove">Yes, Approve</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        const csrfToken = '{{ csrf_token() }}';

        function handleUpload(event, documentTypeId, restaurantId) {
            const input = event.target;
            const file = input.files[0];
            if (!file) return;

            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
            if (!allowedTypes.includes(file.type)) {
                showToast('Please upload PDF, JPG, or PNG files only.', 'error');
                input.value = '';
                return;
            }
            if (file.size > 5 * 1024 * 1024) {
                showToast('Maximum file size is 5 MB.', 'error');
                input.value = '';
                return;
            }

            const formData = new FormData();
            formData.append('restaurant_id', restaurantId);
            formData.append('document_type_id', documentTypeId);
            formData.append('file', file);

            $.ajax({
                url: "{{ route('document_upload') }}",
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken },
                data: formData,
                processData: false,
                contentType: false,

                success: function (data) {
                    if (!data.success) {
                        showToast(data.message || 'Upload failed.', 'error');
                        return;
                    }

                    const uploadContent = document.getElementById('doc_' + documentTypeId + '_uploadContent');
                    const imgPreview = document.getElementById('doc_' + documentTypeId + '_preview_img');
                    const pdfContainer = document.getElementById('doc_' + documentTypeId + '_preview_pdf_container');
                    const pdfObject = document.getElementById('doc_' + documentTypeId + '_preview_pdf');
                    
                    uploadContent.classList.add('d-none');

                    const isPdf = data.file_url.toLowerCase().endsWith('.pdf');

                    if (isPdf) {
                        imgPreview.classList.add('d-none');
                        imgPreview.src = '';
                        pdfObject.data = data.file_url;
                        pdfContainer.classList.remove('d-none');
                    } else {
                        pdfContainer.classList.add('d-none');
                        pdfObject.data = '';
                        imgPreview.src = data.file_url;
                        imgPreview.classList.remove('d-none');
                    }

                    // Enable Control Buttons
                    const downloadBtn = document.getElementById('doc_' + documentTypeId + '_downloadBtn');
                    const previewBtn = document.getElementById('doc_' + documentTypeId + '_previewBtn');
                    
                    downloadBtn.href = data.file_url;
                    downloadBtn.classList.remove('disabled');

                    previewBtn.setAttribute('onclick', "openPreview('" + data.file_url + "')");
                    previewBtn.classList.remove('disabled');

                    const card = document.getElementById('doc_' + documentTypeId + '_uploadArea').closest('.card-body');
                    card.querySelector('[data-bs-target="#rejectModal"]').disabled = false;
                    card.querySelector('[data-bs-target="#approveModal"]').disabled = false;
                },

                error: function () {
                    showToast('Network error during upload.', 'error');
                },

                complete: function () {
                    input.value = '';
                }
            });
        }

        function openPreview(fileUrl) {
            const imgEl = document.getElementById('previewModalImg');
            const pdfEl = document.getElementById('previewModalPdf');

            if (fileUrl.toLowerCase().endsWith('.pdf')) {
                imgEl.classList.add('d-none');
                imgEl.src = '';
                pdfEl.src = fileUrl;
                pdfEl.classList.remove('d-none');
            } else {
                pdfEl.classList.add('d-none');
                pdfEl.src = '';
                imgEl.src = fileUrl;
                imgEl.classList.remove('d-none');
            }
        }

        document.getElementById('confirmApprove').addEventListener('click', function () {
            approveDocument(this);
        });

        document.getElementById('confirmReject').addEventListener('click', function () {
            rejectDocument(this);
        });

        function approveDocument(btn) {
            const docId = document.getElementById('approve_doc_id').value;
            if (!docId) return;

            btn.disabled = true;
            btn.innerText = 'Processing...';

            $.ajax({
                url: "{{ route('document_status') }}",
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken },
                contentType: 'application/json',
                data: JSON.stringify({ id: docId, status: 'Approved' }),

                success: function (data) {
                    if (data.success) {
                        sessionStorage.setItem('toastMessage', data.message || 'Document approved.');
                        sessionStorage.setItem('toastType', 'success');
                        location.reload();
                    } else {
                        showToast(data.message || 'Something went wrong.', 'error');
                        btn.disabled = false;
                        btn.innerText = 'Yes, Approve';
                    }
                },

                error: function () {
                    showToast('Something went wrong.', 'error');
                    btn.disabled = false;
                    btn.innerText = 'Yes, Approve';
                }
            });
        }

        function rejectDocument(btn) {
            const docId = document.getElementById('reject_doc_id').value;
            const reason = document.getElementById('reject_reason').value;

            if (!docId) return;

            btn.disabled = true;
            btn.innerText = 'Processing...';

            $.ajax({
                url: "{{ route('document_status') }}",
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken },
                contentType: 'application/json',
                data: JSON.stringify({ id: docId, status: 'Rejected', reason: reason }),

                success: function (data) {
                    if (data.success) {
                        sessionStorage.setItem('toastMessage', data.message || 'Document rejected.');
                        sessionStorage.setItem('toastType', 'error');
                        location.reload();
                    } else {
                        showToast(data.message || 'Something went wrong.', 'error');
                        btn.disabled = false;
                        btn.innerText = 'Yes, Reject';
                    }
                },

                error: function () {
                    showToast('Something went wrong.', 'error');
                    btn.disabled = false;
                    btn.innerText = 'Yes, Reject';
                }
            });
        }
    </script>

@endsection