{% extends 'base.html' %}
{% load static %}

{% block title %}{{ client.get_full_name }}'s Documents -RuralPointADVANCE{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="md:flex md:items-center md:justify-between">
                <div class="flex-1 min-w-0">
                    <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                        {{ client.get_full_name }}'s Documents
                    </h2>
                    <p class="mt-1 text-sm text-gray-500">
                        Manage and verify client's KYC documents
                    </p>
                </div>
                <div class="mt-4 flex md:mt-0 md:ml-4">
                    <button type="button" onclick="openUploadModal()" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-opacity-90 focus:outline-none">
                        <i class="fas fa-upload mr-2"></i>
                        Upload Document
                    </button>
                </div>
            </div>
        </div>

        <!-- Document Sections -->
        <div class="space-y-8">
            <!-- National ID Section -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-id-card text-primary mr-2"></i>
                        National ID
                        <span class="text-sm text-gray-500 ml-2">Front and back scanned copies</span>
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {% for doc in id_documents %}
                        <div class="relative group">
                            <div class="aspect-w-3 aspect-h-2 rounded-lg overflow-hidden bg-gray-100">
                                {% if doc.thumbnail %}
                                    <img src="{{ doc.thumbnail.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% elif doc.file.url|lower|slice:"-4:" in '.jpg,.png,.gif,.jpeg' %}
                                    <img src="{{ doc.file.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% else %}
                                    <div class="flex items-center justify-center h-full">
                                        <i class="fas fa-file-alt text-4xl text-gray-400"></i>
                                    </div>
                                {% endif %}
                                <!-- Overlay with actions -->
                                <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center space-x-4">
                                    <button onclick="previewDocument('{{ doc.file.url }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-eye text-gray-700"></i>
                                    </button>
                                    <a href="{{ doc.file.url }}" download class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-download text-gray-700"></i>
                                    </a>
                                    {% if user.is_staff %}
                                    <button onclick="deleteDocument('{{ doc.id }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-trash text-red-600"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mt-2">
                                <p class="text-sm font-medium text-gray-900">{{ doc.name }}</p>
                                <p class="text-xs text-gray-500">Uploaded {{ doc.created_at|date:"M d, Y" }}</p>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-span-2">
                            <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                                <i class="fas fa-id-card text-gray-400 text-3xl mb-3"></i>
                                <p class="text-sm text-gray-500">No ID documents uploaded yet</p>
                                <button onclick="openUploadModal('id_document')" class="mt-2 text-sm text-primary hover:text-opacity-80">
                                    Upload ID Document
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Selfie Photo Section -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-camera text-primary mr-2"></i>
                        Selfie Photo
                        <span class="text-sm text-gray-500 ml-2">Recent photo for verification</span>
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {% for doc in selfie_documents %}
                        <div class="relative group">
                            <div class="aspect-w-3 aspect-h-4 rounded-lg overflow-hidden bg-gray-100">
                                {% if doc.thumbnail %}
                                    <img src="{{ doc.thumbnail.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% elif doc.file.url|lower|slice:"-4:" in '.jpg,.png,.gif,.jpeg' %}
                                    <img src="{{ doc.file.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% else %}
                                    <div class="flex items-center justify-center h-full">
                                        <i class="fas fa-file-alt text-4xl text-gray-400"></i>
                                    </div>
                                {% endif %}
                                <!-- Overlay with actions -->
                                <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center space-x-4">
                                    <button onclick="previewDocument('{{ doc.file.url }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-eye text-gray-700"></i>
                                    </button>
                                    <a href="{{ doc.file.url }}" download class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-download text-gray-700"></i>
                                    </a>
                                    {% if user.is_staff %}
                                    <button onclick="deleteDocument('{{ doc.id }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-trash text-red-600"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mt-2">
                                <p class="text-sm font-medium text-gray-900">{{ doc.name }}</p>
                                <p class="text-xs text-gray-500">Uploaded {{ doc.created_at|date:"M d, Y" }}</p>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-span-2">
                            <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                                <i class="fas fa-camera text-gray-400 text-3xl mb-3"></i>
                                <p class="text-sm text-gray-500">No selfie photo uploaded yet</p>
                                <button onclick="openUploadModal('selfie')" class="mt-2 text-sm text-primary hover:text-opacity-80">
                                    Upload Selfie
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Utility Bill Section -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-file-invoice text-primary mr-2"></i>
                        Utility Bill
                        <span class="text-sm text-gray-500 ml-2">Recent utility bill for address verification</span>
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {% for doc in utility_documents %}
                        <div class="relative group">
                            <div class="aspect-w-3 aspect-h-4 rounded-lg overflow-hidden bg-gray-100">
                                {% if doc.thumbnail %}
                                    <img src="{{ doc.thumbnail.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% elif doc.file.url|lower|slice:"-4:" in '.jpg,.png,.gif,.jpeg' %}
                                    <img src="{{ doc.file.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% else %}
                                    <div class="flex items-center justify-center h-full">
                                        <i class="fas fa-file-alt text-4xl text-gray-400"></i>
                                    </div>
                                {% endif %}
                                <!-- Overlay with actions -->
                                <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center space-x-4">
                                    <button onclick="previewDocument('{{ doc.file.url }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-eye text-gray-700"></i>
                                    </button>
                                    <a href="{{ doc.file.url }}" download class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-download text-gray-700"></i>
                                    </a>
                                    {% if user.is_staff %}
                                    <button onclick="deleteDocument('{{ doc.id }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-trash text-red-600"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mt-2">
                                <p class="text-sm font-medium text-gray-900">{{ doc.name }}</p>
                                <p class="text-xs text-gray-500">Uploaded {{ doc.created_at|date:"M d, Y" }}</p>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-span-2">
                            <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                                <i class="fas fa-file-invoice text-gray-400 text-3xl mb-3"></i>
                                <p class="text-sm text-gray-500">No utility bill uploaded yet</p>
                                <button onclick="openUploadModal('utility_bill')" class="mt-2 text-sm text-primary hover:text-opacity-80">
                                    Upload Utility Bill
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Bank Statement Section -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-university text-primary mr-2"></i>
                        Bank Statement
                        <span class="text-sm text-gray-500 ml-2">Last 6 months bank statement</span>
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {% for doc in bank_documents %}
                        <div class="relative group">
                            <div class="aspect-w-3 aspect-h-4 rounded-lg overflow-hidden bg-gray-100">
                                {% if doc.thumbnail %}
                                    <img src="{{ doc.thumbnail.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% elif doc.file.url|lower|slice:"-4:" in '.jpg,.png,.gif,.jpeg' %}
                                    <img src="{{ doc.file.url }}" alt="{{ doc.name }}" class="object-cover">
                                {% else %}
                                    <div class="flex items-center justify-center h-full">
                                        <i class="fas fa-file-pdf text-4xl text-gray-400"></i>
                                    </div>
                                {% endif %}
                                <!-- Overlay with actions -->
                                <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center space-x-4">
                                    <button onclick="previewDocument('{{ doc.file.url }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-eye text-gray-700"></i>
                                    </button>
                                    <a href="{{ doc.file.url }}" download class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-download text-gray-700"></i>
                                    </a>
                                    {% if user.is_staff %}
                                    <button onclick="deleteDocument('{{ doc.id }}')" class="p-2 bg-white rounded-full hover:bg-gray-100">
                                        <i class="fas fa-trash text-red-600"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="mt-2">
                                <p class="text-sm font-medium text-gray-900">{{ doc.name }}</p>
                                <p class="text-xs text-gray-500">Uploaded {{ doc.created_at|date:"M d, Y" }}</p>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-span-2">
                            <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                                <i class="fas fa-university text-gray-400 text-3xl mb-3"></i>
                                <p class="text-sm text-gray-500">No bank statement uploaded yet</p>
                                <button onclick="openUploadModal('bank_statement')" class="mt-2 text-sm text-primary hover:text-opacity-80">
                                    Upload Bank Statement
                                </button>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div id="uploadModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
    <div class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                <div>
                    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary">
                        <i class="fas fa-upload text-white"></i>
                    </div>
                    <div class="mt-3 text-center sm:mt-5">
                        <h3 class="text-base font-semibold leading-6 text-gray-900">Upload Document</h3>
                        <form id="uploadForm" class="mt-6">
                            <input type="hidden" name="client_id" value="{{ client.id }}">
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">Document Type</label>
                                    <select name="document_type" id="documentType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm">
                                        <option value="id_document">National ID</option>
                                        <option value="selfie">Selfie Photo</option>
                                        <option value="utility_bill">Utility Bill</option>
                                        <option value="bank_statement">Bank Statement</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">Description</label>
                                    <textarea name="description" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm"></textarea>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700">File</label>
                                    <input type="file" name="file" required accept="image/*,.pdf" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-opacity-90">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
                    <button type="button" onclick="submitUpload()" class="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-opacity-90 sm:col-start-2">Upload</button>
                    <button type="button" onclick="closeUploadModal()" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div id="previewModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
    <div class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all max-w-4xl w-full">
                <div class="absolute top-0 right-0 pt-4 pr-4">
                    <button type="button" onclick="closePreviewModal()" class="rounded-md bg-white text-gray-400 hover:text-gray-500">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <div class="p-6">
                    <div id="previewContent" class="min-h-[400px] flex items-center justify-center">
                        <!-- Preview content will be inserted here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function openUploadModal(documentType = null) {
    if (documentType) {
        document.getElementById('documentType').value = documentType;
    }
    document.getElementById('uploadModal').classList.remove('hidden');
}

function closeUploadModal() {
    document.getElementById('uploadModal').classList.add('hidden');
    document.getElementById('uploadForm').reset();
}

function submitUpload() {
    const form = document.getElementById('uploadForm');
    const formData = new FormData(form);
    
    fetch('/users/{{ client.id }}/documents/upload/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': getCsrfToken()
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            window.location.reload();
        } else {
            alert('Error uploading document: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error uploading document. Please try again.');
    });
}

function previewDocument(url) {
    const previewModal = document.getElementById('previewModal');
    const previewContent = document.getElementById('previewContent');
    const fileExtension = url.split('.').pop().toLowerCase();
    
    previewContent.innerHTML = '';
    
    if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
        const img = document.createElement('img');
        img.src = url;
        img.className = 'max-w-full max-h-[70vh] object-contain';
        previewContent.appendChild(img);
    } else if (fileExtension === 'pdf') {
        const iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.className = 'w-full h-[70vh]';
        previewContent.appendChild(iframe);
    } else {
        previewContent.innerHTML = `
            <div class="text-center">
                <i class="fas fa-file-alt text-6xl text-gray-400 mb-4"></i>
                <p class="text-gray-600">Preview not available for this file type</p>
                <a href="${url}" download class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-opacity-90">
                    <i class="fas fa-download mr-2"></i>Download File
                </a>
            </div>
        `;
    }
    
    previewModal.classList.remove('hidden');
}

function closePreviewModal() {
    document.getElementById('previewModal').classList.add('hidden');
}

function deleteDocument(id) {
    if (!confirm('Are you sure you want to delete this document?')) return;
    
    fetch(`/utils/documents/${id}/delete/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCsrfToken()
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            window.location.reload();
        } else {
            alert('Error deleting document: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error deleting document. Please try again.');
    });
}

function getCsrfToken() {
    const name = 'csrftoken';
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Close modals with Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeUploadModal();
        closePreviewModal();
    }
});

// Close modals when clicking outside
document.addEventListener('click', function(event) {
    const modals = [
        document.getElementById('uploadModal'),
        document.getElementById('previewModal')
    ];
    
    modals.forEach(modal => {
        if (event.target === modal) {
            modal.classList.add('hidden');
        }
    });
});
</script>
{% endblock %}