@extends('Admin.layout')
@section('content')
    <div class="d-flex align-items-center mb-3">
        <a href="{{ route('restaurant_management') }}" 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 — {{ $restaurant->name }}</h5>
    </div>

    <div class="d-flex flex-column flex-sm-row gap-2 gap-sm-3 my-4">
        <a href="{{ route('add_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>

    <form action="{{ route('document_store', $restaurant->id) }}" method="POST" enctype="multipart/form-data"
        id="uploadForm">
        @csrf

        <div class="card">
            <div class="card-body p-5">

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

                    @foreach (['fssai' => 'FSSAI Certificate', 'aadhar' => 'Aadhar Card', 'pan' => 'PAN Card', 'gst' => 'GST Certificate'] as $type => $label)
                        @php $doc = $documents[$type] ?? null; @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">
                                    <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">Upload {{ $label }}</h5>

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

                                        <button type="button" id="{{ $type }}_removeBtn"
                                            class="btn-close position-absolute top-0 end-0 m-3 z-3 {{ $doc && $doc->file_path ? '' : 'd-none' }}"
                                            style="background-color: #fff; padding: 0.5rem; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2);"
                                            onclick="clearPreview('{{ $type }}')" title="Remove / Replace File">
                                        </button>

                                        <div id="{{ $type }}_uploadContent"
                                            class="d-flex flex-column align-items-center justify-content-center text-center {{ $doc && $doc->file_path ? 'd-none' : '' }}">
                                            <label for="{{ $type }}_file" class="mb-2 cursor-pointer">
                                                <i class="ti tabler-upload text-warning fs-1"></i>
                                            </label>
                                            <input type="file" id="{{ $type }}_file"
                                                name="{{ $type }}_file" class="d-none"
                                                accept=".pdf,.jpg,.jpeg,.png"
                                                onchange="previewImage(event, '{{ $type }}')">
                                            <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: <strong>PDF, JPG, PNG</strong>
                                            </p>
                                            <p class="text-secondary mb-0 small">Max: <strong>5 MB</strong></p>
                                        </div>

                                        @if ($doc && $doc->file_path)
                                            @php
                                                $extension = strtolower(pathinfo($doc->file_path, PATHINFO_EXTENSION));
                                                $fileUrl = asset('storage/' . $doc->file_path);
                                            @endphp

                                            @if ($extension === 'pdf')
                                                <iframe id="{{ $type }}_preview" src="{{ $fileUrl }}"
                                                    class="w-100 rounded-4 border mt-2" style="height:220px;"
                                                    frameborder="0">
                                                </iframe>
                                            @else
                                                <img id="{{ $type }}_preview" src="{{ $fileUrl }}"
                                                    alt="{{ $label }}"
                                                    class="img-fluid rounded-4 w-100 object-fit-contain mt-2"
                                                    style="max-height:200px;">
                                            @endif
                                        @endif
                                    </div>

                                    @if ($doc && $doc->file_path)
                                        <div id="{{ $type }}_actionGroup" class="d-flex justify-content-end mt-2">
                                            <div class="btn-group border border-primary rounded-3">
                                                <a href="{{ asset('storage/' . $doc->file_path) }}" download
                                                    class="btn">
                                                    <i class="ti tabler-download text-primary fs-5"></i>
                                                </a>
                                                <a href="{{ asset('storage/' . $doc->file_path) }}" target="_blank"
                                                    class="btn">
                                                    <i class="ti tabler-eye text-info fs-5"></i>
                                                </a>
                                            </div>
                                        </div>
                                    @endif

                                    @php
                                        $statusMap = [
                                            'Pending' => 'warning',
                                            'Approved' => 'success',
                                            'Rejected' => 'danger',
                                        ];
                                        $currentStatus = $doc->status ?? 'Pending';
                                    @endphp
                                    <span
                                        class="badge bg-{{ $statusMap[$currentStatus] ?? 'secondary' }} mt-2">{{ $currentStatus }}</span>

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

                </div>

                <div class="d-flex justify-content-center align-items-center mt-5 gap-5">
                    <button type="submit" class="btn btn-primary" id="submitBtn">Upload Documents</button>
                </div>

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

    <script>
        function previewImage(event, type) {
            const input = event.target;
            const file = input.files[0];
            if (!file) return;

            if (file.size > 5 * 1024 * 1024) {
                alert('Maximum file size is 5 MB.');
                input.value = '';
                return;
            }

            const fileUrl = URL.createObjectURL(file);
            const uploadContent = document.getElementById(type + '_uploadContent');
            const uploadArea = document.getElementById(type + '_uploadArea');
            const removeBtn = document.getElementById(type + '_removeBtn');

            let existingPreview = document.getElementById(type + '_preview');
            if (existingPreview) {
                existingPreview.remove();
            }

            let previewElement;
            if (file.type === 'application/pdf') {
                previewElement = document.createElement('iframe');
                previewElement.id = type + '_preview';
                previewElement.className = 'w-100 rounded-4 border mt-2';
                previewElement.style.height = '220px';
                previewElement.frameBorder = '0';
            } else {
                previewElement = document.createElement('img');
                previewElement.id = type + '_preview';
                previewElement.className = 'img-fluid rounded-4 w-100 object-fit-contain mt-2';
                previewElement.style.maxHeight = '200px';
            }

            previewElement.src = fileUrl;
            uploadArea.appendChild(previewElement);

            if (uploadContent) uploadContent.classList.add('d-none');
            if (removeBtn) removeBtn.classList.remove('d-none');
        }

        function clearPreview(type) {
            const input = document.getElementById(type + '_file');
            const uploadContent = document.getElementById(type + '_uploadContent');
            const removeBtn = document.getElementById(type + '_removeBtn');
            const previewElement = document.getElementById(type + '_preview');
            const actionGroup = document.getElementById(type + '_actionGroup');

            if (input) input.value = '';

            if (previewElement) previewElement.remove();

            if (actionGroup) actionGroup.classList.add('d-none');

            if (removeBtn) removeBtn.classList.add('d-none');
            if (uploadContent) uploadContent.classList.remove('d-none');
        }
    </script>

    <script>
        document.getElementById('submitBtn').addEventListener('click', function() {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('uploadForm').submit();
        });
    </script>
@endsection