@extends('layouts.app', ['title' => 'Documents | Print Cards'])

@section('content')
    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card card-soft">
                <div class="card-body">
                    <h1 class="h4 mb-3">Upload Card or Document File</h1>
                    <p class="text-muted">PDF, JPG, and PNG accepted. Max upload size: {{ $maxUploadKb / 1024 }} MB. Auto-delete after {{ $autoDeleteDays }} days.</p>
                    <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data" class="row g-3">
                        @csrf
                        <div class="col-12">
                            <label class="form-label">Document Title</label>
                            <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Document Type</label>
                            <select name="document_type" class="form-select" required>
                                <option value="">Choose</option>
                                <option value="PAN Card">PAN Card</option>
                                <option value="ABHA Card">ABHA Card</option>
                                <option value="Aadhaar">Aadhaar</option>
                                <option value="Certificate">Certificate</option>
                                <option value="ID Card">ID Card</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Page Count</label>
                            <input type="number" min="1" name="page_count" class="form-control" value="{{ old('page_count', 1) }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Document File</label>
                            <input type="file" name="document_file" id="document_file" class="form-control" accept="application/pdf,image/png,image/jpeg" required>
                        </div>
                        <div class="col-12">
                            <div class="ratio ratio-4x3 border rounded bg-light" id="previewWrapper" style="display:none;">
                                <iframe id="pdfPreview" title="PDF preview" style="display:none;"></iframe>
                                <img id="imagePreview" alt="Preview" class="w-100 h-100 object-fit-contain" style="display:none;">
                            </div>
                        </div>
                        <div class="col-12 d-grid">
                            <button type="submit" class="btn btn-primary">Upload Document</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card card-soft">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="h5 mb-0">My Documents</h2>
                        <a href="{{ route('orders.create') }}" class="btn btn-outline-primary btn-sm">Create Order</a>
                    </div>
                    @if($documents->isEmpty())
                        <p class="text-muted mb-0">No documents uploaded yet.</p>
                    @else
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>Type</th>
                                        <th>Pages</th>
                                        <th>Approval</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($documents as $document)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $document->title }}</div>
                                                <div class="small text-muted">{{ $document->original_name }}</div>
                                            </td>
                                            <td>{{ $document->document_type }}</td>
                                            <td>{{ $document->page_count }}</td>
                                            <td><span class="status-pill">{{ ucfirst($document->approval_status) }}</span></td>
                                            <td><a href="{{ route('documents.download', $document) }}" class="btn btn-sm btn-outline-secondary">Download</a></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.getElementById('document_file')?.addEventListener('change', function (event) {
            const file = event.target.files[0];
            const pdfPreview = document.getElementById('pdfPreview');
            const imagePreview = document.getElementById('imagePreview');
            const wrapper = document.getElementById('previewWrapper');
            if (!file) {
                wrapper.style.display = 'none';
                pdfPreview.src = '';
                imagePreview.src = '';
                return;
            }
            wrapper.style.display = 'block';
            if (file.type === 'application/pdf') {
                pdfPreview.style.display = 'block';
                imagePreview.style.display = 'none';
                pdfPreview.src = URL.createObjectURL(file);
                imagePreview.src = '';
                return;
            }
            if (file.type.startsWith('image/')) {
                imagePreview.style.display = 'block';
                pdfPreview.style.display = 'none';
                imagePreview.src = URL.createObjectURL(file);
                pdfPreview.src = '';
                return;
            }
            wrapper.style.display = 'none';
        });
    </script>
@endsection