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

{% block title %}{{ client.get_full_name }}'s Documents - HAVEN GRAZURI ADVANCE{% 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">
                        <span>⬆️</span>
                        Upload Document
                    </button>
                </div>
            </div>
        </div>

        <!-- Document Sections -->
        <div class="space-y-8">
            <!-- National ID Section -->
            <div id="id-document" class="bg-white shadow rounded-lg overflow-hidden scroll-mt-20">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <span>🪪</span>
                        National ID
                        <span class="text-sm text-gray-500 ml-2">({{ id_documents|length }} files)</span>
                    </h3>
                </div>
                <div class="p-6">
                    {% if id_documents %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                        {% for doc in id_documents %}
                        <div class="group relative">
                            <a href="{{ doc.file.url }}" target="_blank" class="block">
                                <div class="aspect-square rounded-lg overflow-hidden bg-gray-100 border-2 border-gray-200 hover:border-blue-500 transition-all shadow-sm hover:shadow-md">
                                    {% if doc.file.url|slice:"-4:" == '.pdf' or doc.file.url|slice:"-4:" == '.PDF' %}
                                        <div class="w-full h-full flex flex-col items-center justify-center bg-red-50">
                                            <svg class="w-12 h-12 text-red-600 mb-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z"/>
                                            </svg>
                                            <span class="text-xs text-red-700 font-medium">PDF</span>
                                        </div>
                                    {% else %}
                                        <img src="{{ doc.file.url }}" alt="ID Document" class="w-full h-full object-cover"
                                             onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gray-200\'><svg class=\'w-12 h-12 text-gray-400\' fill=\'currentColor\' viewBox=\'0 0 20 20\'><path d=\'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\'/></svg></div>';">
                                    {% endif %}
                                </div>
                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all rounded-lg flex items-end opacity-0 group-hover:opacity-100">
                                    <div class="p-2 w-full">
                                        <p class="text-white text-xs font-semibold truncate">{{ doc.name }}</p>
                                        <p class="text-white text-xs opacity-90">{{ doc.created_at|date:"M j, Y" }}</p>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute top-2 right-2">
                                <span class="inline-block px-2 py-1 text-xs font-bold rounded-full shadow-sm bg-green-500 text-white">✓</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                        <span class="text-4xl">🪪</span>
                        <p class="text-sm text-gray-500 mt-2">No ID documents uploaded yet</p>
                        <button onclick="openUploadModal('id_document')" 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">
                            <span>⬆️</span> Upload ID Document
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Selfie Photo Section -->
            <div id="selfie" class="bg-white shadow rounded-lg overflow-hidden scroll-mt-20">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <span>📷</span>
                        Selfie Photo
                        <span class="text-sm text-gray-500 ml-2">({{ selfie_documents|length }} files)</span>
                    </h3>
                </div>
                <div class="p-6">
                    {% if selfie_documents %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                        {% for doc in selfie_documents %}
                        <div class="group relative">
                            <a href="{{ doc.file.url }}" target="_blank" class="block">
                                <div class="aspect-square rounded-lg overflow-hidden bg-gray-100 border-2 border-gray-200 hover:border-blue-500 transition-all shadow-sm hover:shadow-md">
                                    <img src="{{ doc.file.url }}" alt="Selfie" class="w-full h-full object-cover"
                                         onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gray-200\'><svg class=\'w-12 h-12 text-gray-400\' fill=\'currentColor\' viewBox=\'0 0 20 20\'><path d=\'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\'/></svg></div>';">
                                </div>
                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all rounded-lg flex items-end opacity-0 group-hover:opacity-100">
                                    <div class="p-2 w-full">
                                        <p class="text-white text-xs font-semibold truncate">{{ doc.name }}</p>
                                        <p class="text-white text-xs opacity-90">{{ doc.created_at|date:"M j, Y" }}</p>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute top-2 right-2">
                                <span class="inline-block px-2 py-1 text-xs font-bold rounded-full shadow-sm bg-green-500 text-white">✓</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                        <span class="text-4xl">📷</span>
                        <p class="text-sm text-gray-500 mt-2">No selfie photo uploaded yet</p>
                        <button onclick="openUploadModal('selfie')" 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">
                            <span>⬆️</span> Upload Selfie
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Utility Bill Section -->
            <div id="utility-bill" class="bg-white shadow rounded-lg overflow-hidden scroll-mt-20">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <span>🧾</span>
                        Utility Bill
                        <span class="text-sm text-gray-500 ml-2">({{ utility_documents|length }} files)</span>
                    </h3>
                </div>
                <div class="p-6">
                    {% if utility_documents %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                        {% for doc in utility_documents %}
                        <div class="group relative">
                            <a href="{{ doc.file.url }}" target="_blank" class="block">
                                <div class="aspect-square rounded-lg overflow-hidden bg-gray-100 border-2 border-gray-200 hover:border-blue-500 transition-all shadow-sm hover:shadow-md">
                                    {% if doc.file.url|slice:"-4:" == '.pdf' or doc.file.url|slice:"-4:" == '.PDF' %}
                                        <div class="w-full h-full flex flex-col items-center justify-center bg-red-50">
                                            <svg class="w-12 h-12 text-red-600 mb-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z"/>
                                            </svg>
                                            <span class="text-xs text-red-700 font-medium">PDF</span>
                                        </div>
                                    {% else %}
                                        <img src="{{ doc.file.url }}" alt="Utility Bill" class="w-full h-full object-cover"
                                             onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gray-200\'><svg class=\'w-12 h-12 text-gray-400\' fill=\'currentColor\' viewBox=\'0 0 20 20\'><path d=\'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\'/></svg></div>';">
                                    {% endif %}
                                </div>
                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all rounded-lg flex items-end opacity-0 group-hover:opacity-100">
                                    <div class="p-2 w-full">
                                        <p class="text-white text-xs font-semibold truncate">{{ doc.name }}</p>
                                        <p class="text-white text-xs opacity-90">{{ doc.created_at|date:"M j, Y" }}</p>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute top-2 right-2">
                                <span class="inline-block px-2 py-1 text-xs font-bold rounded-full shadow-sm bg-green-500 text-white">✓</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-12 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                        <span class="text-4xl">🧾</span>
                        <p class="text-sm text-gray-500 mt-2">No utility bill uploaded yet</p>
                        <button onclick="openUploadModal('utility_bill')" 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">
                            <span>⬆️</span> Upload Utility Bill
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Bank Statement Section -->
            <div id="bank-statement" class="bg-white shadow rounded-lg overflow-hidden scroll-mt-20">
                <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">({{ bank_documents|length }} files)</span>
                    </h3>
                </div>
                <div class="p-6">
                    {% if bank_documents %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                        {% for doc in bank_documents %}
                        <div class="group relative">
                            <a href="{{ doc.file.url }}" target="_blank" class="block">
                                <div class="aspect-square rounded-lg overflow-hidden bg-gray-100 border-2 border-gray-200 hover:border-blue-500 transition-all shadow-sm hover:shadow-md">
                                    {% if doc.file.url|slice:"-4:" == '.pdf' or doc.file.url|slice:"-4:" == '.PDF' %}
                                        <div class="w-full h-full flex flex-col items-center justify-center bg-red-50">
                                            <svg class="w-12 h-12 text-red-600 mb-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z"/>
                                            </svg>
                                            <span class="text-xs text-red-700 font-medium">PDF</span>
                                        </div>
                                    {% else %}
                                        <img src="{{ doc.file.url }}" alt="Bank Statement" class="w-full h-full object-cover"
                                             onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gray-200\'><svg class=\'w-12 h-12 text-gray-400\' fill=\'currentColor\' viewBox=\'0 0 20 20\'><path d=\'M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\'/></svg></div>';">
                                    {% endif %}
                                </div>
                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all rounded-lg flex items-end opacity-0 group-hover:opacity-100">
                                    <div class="p-2 w-full">
                                        <p class="text-white text-xs font-semibold truncate">{{ doc.name }}</p>
                                        <p class="text-white text-xs opacity-90">{{ doc.created_at|date:"M j, Y" }}</p>
                                    </div>
                                </div>
                            </a>
                            <div class="absolute top-2 right-2">
                                <span class="inline-block px-2 py-1 text-xs font-bold rounded-full shadow-sm bg-green-500 text-white">✓</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <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-4xl mb-3"></i>
                        <p class="text-sm text-gray-500 mt-2">No bank statement uploaded yet</p>
                        <button onclick="openUploadModal('bank_statement')" 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">
                            <span>⬆️</span> Upload Bank Statement
                        </button>
                    </div>
                    {% endif %}
                </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">
                        <span>⬆️</span>
                    </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>

{% 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 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 modal with Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeUploadModal();
    }
});

// Smooth scroll to anchor on page load
document.addEventListener('DOMContentLoaded', function() {
    if (window.location.hash) {
        const element = document.querySelector(window.location.hash);
        if (element) {
            setTimeout(() => {
                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
        }
    }
});
</script>
{% endblock %}