@extends('layouts.admin')

@section('title', 'Application Documents')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">Application Documents</h2>
        <p class="text-body-tertiary lh-sm">Manage documents for application #{{ $application->id ?? '1' }}</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <div class="btn-group" role="group">
            <a href="{{ route('admin.operations.applications.show', $application->id ?? 1) }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-arrow-left me-2"></span>Back to Application
            </a>
            <button class="btn btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">
                <span class="fas fa-upload me-2"></span>Upload Document
            </button>
        </div>
    </div>
</div>

<!-- Application Info Card -->
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-xl me-3">
                                <div class="avatar-name rounded-circle bg-warning-subtle text-warning">
                                    <span class="fas fa-file-alt fs-3"></span>
                                </div>
                            </div>
                            <div>
                                <h4 class="mb-1">{{ $application->type ?? 'Belt Promotion Application' }}</h4>
                                <p class="text-body-tertiary mb-1">Applicant: {{ $application->applicant_name ?? 'John Doe' }}</p>
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-phoenix badge-phoenix-info me-2">{{ $application->belt_level ?? 'Black Belt' }}</span>
                                    <span class="text-body-tertiary fs-9">
                                        <span class="fas fa-calendar-day me-1"></span>
                                        Applied {{ $application->created_at ? $application->created_at->format('M d, Y') : 'recently' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="text-center">
                                    <h3 class="mb-0 text-primary">{{ $documentCount ?? '0' }}</h3>
                                    <p class="text-body-tertiary mb-0 fs-9">Documents</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center">
                                    <h3 class="mb-0 text-success">{{ $approvedDocuments ?? '0' }}</h3>
                                    <p class="text-body-tertiary mb-0 fs-9">Approved</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Document Requirements -->
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Required Documents</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    @foreach($requiredDocuments ?? [] as $requirement)
                    <div class="col-lg-4">
                        <div class="card bg-body-highlight border h-100">
                            <div class="card-body p-3">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="avatar avatar-s me-2">
                                        @if($requirement['submitted'])
                                        <div class="avatar-name rounded-circle bg-success-subtle text-success">
                                            <span class="fas fa-check"></span>
                                        </div>
                                        @else
                                        <div class="avatar-name rounded-circle bg-warning-subtle text-warning">
                                            <span class="fas fa-clock"></span>
                                        </div>
                                        @endif
                                    </div>
                                    <h6 class="mb-0">{{ $requirement['name'] ?? 'Document' }}</h6>
                                </div>
                                <p class="text-body-tertiary fs-9 mb-2">{{ $requirement['description'] ?? 'Required document for application' }}</p>
                                @if($requirement['submitted'])
                                    <span class="badge badge-phoenix badge-phoenix-success">Submitted</span>
                                @else
                                    <span class="badge badge-phoenix badge-phoenix-warning">Pending</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                    
                    @if(empty($requiredDocuments))
                    <div class="col-12">
                        <div class="text-center py-3">
                            <span class="text-body-tertiary">No specific document requirements defined</span>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Documents List -->
<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">Uploaded Documents</h6>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex align-items-center">
                            <div class="search-box me-3">
                                <form class="position-relative">
                                    <input class="form-control search-input search" type="search" placeholder="Search documents..." aria-label="Search" />
                                    <span class="fas fa-search search-box-icon"></span>
                                </form>
                            </div>
                            <div class="btn-group" role="group">
                                <button class="btn btn-phoenix-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <span class="fas fa-filter me-2"></span>Filter
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">All Documents</a></li>
                                    <li><a class="dropdown-item" href="#">Approved</a></li>
                                    <li><a class="dropdown-item" href="#">Pending</a></li>
                                    <li><a class="dropdown-item" href="#">Rejected</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                @if($documents->isNotEmpty())
                <div class="table-responsive scrollbar">
                    <table class="table table-sm fs-9 mb-0">
                        <thead>
                            <tr>
                                <th class="sort border-top border-translucent ps-3" data-sort="document">Document</th>
                                <th class="sort border-top border-translucent" data-sort="type">Type</th>
                                <th class="sort border-top border-translucent" data-sort="size">Size</th>
                                <th class="sort border-top border-translucent" data-sort="uploaded">Uploaded</th>
                                <th class="sort border-top border-translucent" data-sort="status">Status</th>
                                <th class="sort border-top border-translucent pe-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach($documents as $document)
                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                <td class="document align-middle ps-3">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-s me-2">
                                            <div class="avatar-name rounded-circle bg-info-subtle text-info">
                                                @if(str_contains($document->file_type ?? '', 'pdf'))
                                                    <span class="fas fa-file-pdf"></span>
                                                @elseif(str_contains($document->file_type ?? '', 'image'))
                                                    <span class="fas fa-file-image"></span>
                                                @elseif(str_contains($document->file_type ?? '', 'word'))
                                                    <span class="fas fa-file-word"></span>
                                                @else
                                                    <span class="fas fa-file"></span>
                                                @endif
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-semibold">{{ $document->name ?? 'Document' }}</h6>
                                            <p class="text-body-tertiary mb-0 fs-9">{{ $document->description ?? 'No description' }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="type align-middle">
                                    <span class="badge badge-phoenix badge-phoenix-info">{{ $document->category ?? 'General' }}</span>
                                </td>
                                <td class="size align-middle">
                                    <span class="text-body-tertiary">{{ $document->file_size_formatted ?? '0 KB' }}</span>
                                </td>
                                <td class="uploaded align-middle">
                                    <span class="text-body-tertiary">{{ $document->created_at ? $document->created_at->format('M d, Y') : 'Unknown' }}</span>
                                </td>
                                <td class="status align-middle">
                                    @if($document->status == 'approved')
                                        <span class="badge badge-phoenix badge-phoenix-success">Approved</span>
                                    @elseif($document->status == 'rejected')
                                        <span class="badge badge-phoenix badge-phoenix-danger">Rejected</span>
                                    @else
                                        <span class="badge badge-phoenix badge-phoenix-warning">Pending Review</span>
                                    @endif
                                </td>
                                <td class="align-middle white-space-nowrap pe-3">
                                    <div class="btn-reveal-trigger position-static">
                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown">
                                            <span class="fas fa-ellipsis-h fs-10"></span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end py-2">
                                            <a class="dropdown-item" href="{{ $document->download_url ?? '#' }}" target="_blank">
                                                <span class="fas fa-download me-2"></span>Download
                                            </a>
                                            <a class="dropdown-item" href="{{ $document->preview_url ?? '#' }}" target="_blank">
                                                <span class="fas fa-eye me-2"></span>Preview
                                            </a>
                                            @if($document->status == 'pending')
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item text-success" href="#" onclick="approveDocument({{ $document->id }})">
                                                <span class="fas fa-check me-2"></span>Approve
                                            </a>
                                            <a class="dropdown-item text-danger" href="#" onclick="rejectDocument({{ $document->id }})">
                                                <span class="fas fa-times me-2"></span>Reject
                                            </a>
                                            @endif
                                            <div class="dropdown-divider"></div>
                                            <form method="POST" action="{{ route('admin.applications.documents.destroy', [$application->id ?? 1, $document->id]) }}" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button class="dropdown-item text-danger" type="submit" onclick="return confirm('Delete this document?')">
                                                    <span class="fas fa-trash me-2"></span>Delete
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-5">
                    <span class="fas fa-file-upload text-muted" style="font-size: 3rem;"></span>
                    <p class="text-muted mt-3">No documents uploaded yet</p>
                    <button class="btn btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">
                        <span class="fas fa-upload me-2"></span>Upload First Document
                    </button>
                </div>
                @endif
            </div>
            @if($documents->isNotEmpty())
            <div class="card-footer border-top d-flex justify-content-between align-items-center py-2">
                <div>
                    <span class="text-body-tertiary">Showing {{ $documents->count() }} documents</span>
                </div>
                <div>
                    {{ $documents->links() }}
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Upload Document Modal -->
<div class="modal fade" id="uploadDocumentModal" tabindex="-1" aria-labelledby="uploadDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadDocumentModalLabel">Upload Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.applications.documents.store', $application->id ?? 1) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="document_file" class="form-label">Select File</label>
                        <input class="form-control" type="file" id="document_file" name="document_file" required 
                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif">
                        <div class="form-text">Supported formats: PDF, DOC, DOCX, JPG, PNG, GIF (Max: 10MB)</div>
                    </div>
                    <div class="mb-3">
                        <label for="document_name" class="form-label">Document Name</label>
                        <input type="text" class="form-control" id="document_name" name="document_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="document_category" class="form-label">Category</label>
                        <select class="form-select" id="document_category" name="document_category" required>
                            <option value="">Select category...</option>
                            <option value="identity">Identity Document</option>
                            <option value="medical">Medical Certificate</option>
                            <option value="photo">Photo</option>
                            <option value="certification">Previous Certification</option>
                            <option value="waiver">Waiver/Release Form</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="document_description" class="form-label">Description (Optional)</label>
                        <textarea class="form-control" id="document_description" name="document_description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="auto_approve" name="auto_approve">
                            <label class="form-check-label" for="auto_approve">
                                Auto-approve this document
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-phoenix-primary">Upload Document</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Document Review Modal -->
<div class="modal fade" id="reviewDocumentModal" tabindex="-1" aria-labelledby="reviewDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reviewDocumentModalLabel">Review Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="documentPreview" class="text-center">
                    <!-- Document preview will be loaded here -->
                </div>
                <div class="mt-3">
                    <label for="review_notes" class="form-label">Review Notes</label>
                    <textarea class="form-control" id="review_notes" name="review_notes" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-phoenix-danger" onclick="rejectDocumentWithNotes()">Reject</button>
                <button type="button" class="btn btn-phoenix-success" onclick="approveDocumentWithNotes()">Approve</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function approveDocument(documentId) {
    if (confirm('Approve this document?')) {
        fetch(`/admin/applications/documents/${documentId}/approve`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error approving document');
            }
        });
    }
}

function rejectDocument(documentId) {
    if (confirm('Reject this document?')) {
        fetch(`/admin/applications/documents/${documentId}/reject`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error rejecting document');
            }
        });
    }
}

function approveDocumentWithNotes() {
    const notes = document.getElementById('review_notes').value;
    // Implementation for approve with notes
    console.log('Approve with notes:', notes);
    $('#reviewDocumentModal').modal('hide');
}

function rejectDocumentWithNotes() {
    const notes = document.getElementById('review_notes').value;
    // Implementation for reject with notes
    console.log('Reject with notes:', notes);
    $('#reviewDocumentModal').modal('hide');
}

// File upload preview
document.getElementById('document_file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        document.getElementById('document_name').value = file.name.split('.').slice(0, -1).join('.');
    }
});
</script>
@endsection