@extends('layouts.candidate')

@section('title', 'My Documents - M-Ajira')

@section('content')

<!-- Hero Header -->
<section class="animated-bg py-10 md:py-20 relative overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-10 left-10 w-32 md:w-64 h-32 md:h-64 bg-white/10 rounded-full blur-3xl float-animation"></div>
        <div class="absolute bottom-10 right-10 w-40 md:w-80 h-40 md:h-80 bg-white/10 rounded-full blur-3xl float-animation" style="animation-delay: 1s;"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <div class="glass inline-block px-4 md:px-6 py-2 md:py-3 rounded-full mb-4 md:mb-6">
            <span class="text-white font-bold text-sm md:text-lg">📄 Document Management</span>
        </div>
        
        <h1 class="text-4xl md:text-7xl font-black text-white mb-4 md:mb-6">My Documents</h1>
        <p class="text-base md:text-2xl text-white/95 max-w-3xl mx-auto px-4">
            Upload and manage your documents securely
        </p>
    </div>
</section>

<!-- Alerts -->
@if(session('success'))
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 md:-mt-8 mb-6 md:mb-8 relative z-20">
        <div class="glass-card border-2 border-green-400 rounded-2xl p-4 md:p-6">
            <div class="flex items-center space-x-3 md:space-x-4">
                <span class="text-3xl md:text-5xl">✅</span>
                <div class="flex-1 min-w-0">
                    <h3 class="text-base md:text-xl font-bold text-green-800 mb-1">Success!</h3>
                    <p class="text-sm md:text-base text-green-700 break-words">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

@if(session('error'))
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 md:-mt-8 mb-6 md:mb-8 relative z-20">
        <div class="glass-card border-2 border-red-400 rounded-2xl p-4 md:p-6">
            <div class="flex items-center space-x-3 md:space-x-4">
                <span class="text-3xl md:text-5xl">⚠️</span>
                <div class="flex-1 min-w-0">
                    <h3 class="text-base md:text-xl font-bold text-red-800 mb-1">Error</h3>
                    <p class="text-sm md:text-base text-red-700 break-words">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- Main Content -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
    
    <!-- Upload Form -->
    <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-10 mb-8 md:mb-12">
        <div class="flex items-center space-x-3 md:space-x-4 mb-6 md:mb-8">
            <div class="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl md:rounded-2xl flex items-center justify-center text-2xl md:text-3xl">
                📤
            </div>
            <div class="flex-1 min-w-0">
                <h2 class="text-2xl md:text-3xl font-black text-gray-800">Upload New Document</h2>
                <p class="text-sm md:text-base text-gray-600">Add documents to complete your profile</p>
            </div>
        </div>
        
        <form method="POST" action="{{ route('candidate.documents.store') }}" enctype="multipart/form-data">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
                <!-- Document Type -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Document Type *</label>
                    <select name="document_type" required 
                        class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg">
                        <option value="">Select Document Type</option>
                        <option value="passport">🛂 Passport</option>
                        <option value="police_clearance">👮 Police Clearance</option>
                        <option value="national_id">🪪 National ID</option>
                        <option value="trade_certificate">📜 Trade Certificate</option>
                        <option value="education_certificate">🎓 Education Certificate</option>
                        <option value="medical_certificate">🏥 Medical Certificate</option>
                        <option value="mofa">🏛️ MOFA Certificate</option>
                        <option value="attestation">✅ Attestation Certificate</option>
                        <option value="cv">📝 Curriculum Vitae (CV)</option>
                        <option value="photo">📸 Passport Photo</option>
                        <option value="other">📄 Other</option>
                    </select>
                </div>

                <!-- Document Number -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Document Number</label>
                    <input type="text" name="document_number" placeholder="e.g., A12345678"
                        class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg">
                </div>

                <!-- Issue Date -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Issue Date</label>
                    <input type="date" name="issue_date"
                        class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg">
                </div>

                <!-- Expiry Date -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Expiry Date</label>
                    <input type="date" name="expiry_date"
                        class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg">
                </div>

                <!-- Issuing Authority -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Issuing Authority</label>
                    <input type="text" name="issuing_authority" placeholder="e.g., Immigration Department"
                        class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg">
                </div>

                <!-- File Upload -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Upload File (Max 5MB) *</label>
                    <input type="file" name="file" required accept=".pdf,.jpg,.jpeg,.png"
                        class="w-full px-4 md:px-6 py-3 md:py-4 border-2 border-gray-200 rounded-xl md:rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-base md:text-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100">
                    <p class="text-xs text-gray-500 mt-2">📎 Accepted formats: PDF, JPG, PNG</p>
                </div>
            </div>

            <button type="submit" class="w-full md:w-auto btn-primary text-white font-bold py-4 md:py-5 px-8 md:px-12 rounded-xl md:rounded-2xl hover:shadow-2xl text-base md:text-xl">
                📤 Upload Document
            </button>
        </form>
    </div>

    <!-- Documents List -->
    <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-10">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 md:mb-8 space-y-4 md:space-y-0">
            <div class="flex items-center space-x-3 md:space-x-4">
                <div class="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl md:rounded-2xl flex items-center justify-center text-2xl md:text-3xl">
                    📁
                </div>
                <div>
                    <h2 class="text-2xl md:text-3xl font-black text-gray-800">Uploaded Documents</h2>
                    <p class="text-sm md:text-base text-gray-600">{{ $documents->count() }} document(s) uploaded</p>
                </div>
            </div>
        </div>

        <div class="space-y-4 md:space-y-6">
            @forelse($documents as $document)
                <div class="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 rounded-xl md:rounded-2xl p-4 md:p-8 card-hover">
                    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-start space-y-4 lg:space-y-0">
                        <!-- Document Info -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center space-x-3 md:space-x-4 mb-4">
                                <div class="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br 
                                    {{ $document->document_type === 'passport' ? 'from-purple-500 to-pink-500' : 
                                       ($document->document_type === 'police_clearance' ? 'from-blue-500 to-cyan-500' : 
                                       ($document->document_type === 'national_id' ? 'from-green-500 to-emerald-500' : 
                                       ($document->document_type === 'medical_certificate' ? 'from-red-500 to-pink-500' :
                                       ($document->document_type === 'mofa' ? 'from-indigo-500 to-purple-500' :
                                       ($document->document_type === 'attestation' ? 'from-teal-500 to-cyan-500' :
                                       ($document->document_type === 'cv' ? 'from-yellow-500 to-orange-500' :
                                       'from-orange-500 to-red-500')))))) }} 
                                    rounded-xl md:rounded-2xl flex items-center justify-center text-2xl md:text-3xl shadow-lg flex-shrink-0">
                                    @if($document->document_type === 'passport') 🛂
                                    @elseif($document->document_type === 'police_clearance') 👮
                                    @elseif($document->document_type === 'national_id') 🪪
                                    @elseif($document->document_type === 'trade_certificate') 📜
                                    @elseif($document->document_type === 'education_certificate') 🎓
                                    @elseif($document->document_type === 'medical_certificate') 🏥
                                    @elseif($document->document_type === 'mofa') 🏛️
                                    @elseif($document->document_type === 'attestation') ✅
                                    @elseif($document->document_type === 'cv') 📝
                                    @elseif($document->document_type === 'photo') 📸
                                    @else 📄
                                    @endif
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-lg md:text-2xl font-black text-gray-800 break-words">
                                        {{ ucwords(str_replace('_', ' ', $document->document_type)) }}
                                    </h3>
                                    <p class="text-sm md:text-base text-gray-600 font-semibold truncate">{{ $document->file_name }}</p>
                                </div>
                            </div>

                            <!-- Document Details -->
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-4">
                                @if($document->document_number)
                                <div class="p-2 md:p-3 bg-blue-50 rounded-xl">
                                    <p class="text-xs text-blue-600 font-bold mb-1">Document Number</p>
                                    <p class="text-xs md:text-sm font-black text-gray-800 break-words">{{ $document->document_number }}</p>
                                </div>
                                @endif

                                @if($document->issue_date)
                                <div class="p-2 md:p-3 bg-green-50 rounded-xl">
                                    <p class="text-xs text-green-600 font-bold mb-1">Issue Date</p>
                                    <p class="text-xs md:text-sm font-black text-gray-800">{{ $document->issue_date->format('d M Y') }}</p>
                                </div>
                                @endif

                                @if($document->expiry_date)
                                <div class="p-2 md:p-3 bg-orange-50 rounded-xl">
                                    <p class="text-xs text-orange-600 font-bold mb-1">Expiry Date</p>
                                    <p class="text-xs md:text-sm font-black text-gray-800">{{ $document->expiry_date->format('d M Y') }}</p>
                                </div>
                                @endif

                                @if($document->issuing_authority)
                                <div class="p-2 md:p-3 bg-purple-50 rounded-xl">
                                    <p class="text-xs text-purple-600 font-bold mb-1">Issued By</p>
                                    <p class="text-xs md:text-sm font-black text-gray-800 break-words">{{ $document->issuing_authority }}</p>
                                </div>
                                @endif
                            </div>

                            <!-- Verification Status -->
                            <div class="inline-block">
                                <span class="px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-bold
                                    {{ $document->verification_status === 'verified' ? 'bg-green-100 text-green-800 border-2 border-green-300' : 
                                       ($document->verification_status === 'rejected' ? 'bg-red-100 text-red-800 border-2 border-red-300' : 
                                       'bg-orange-100 text-orange-800 border-2 border-orange-300') }}">
                                    @if($document->verification_status === 'verified') ✓ Verified
                                    @elseif($document->verification_status === 'rejected') ✗ Rejected
                                    @else ⏳ Pending Review
                                    @endif
                                </span>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="flex flex-row lg:flex-col gap-2 md:gap-3 lg:ml-6">
                            <a href="{{ Storage::url($document->file_path) }}" target="_blank" 
                               class="flex-1 lg:flex-none bg-gradient-to-r from-blue-500 to-cyan-500 text-white font-bold py-2 md:py-3 px-4 md:px-6 rounded-xl hover:shadow-xl text-center text-sm md:text-base">
                                👁️ View
                            </a>
                            <form method="POST" action="{{ route('candidate.documents.destroy', $document) }}" 
                                  onsubmit="return confirm('Are you sure you want to delete this document?')" class="flex-1 lg:flex-none">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="w-full bg-gradient-to-r from-red-500 to-red-600 text-white font-bold py-2 md:py-3 px-4 md:px-6 rounded-xl hover:shadow-xl text-sm md:text-base">
                                    🗑️ Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-12 md:py-20">
                    <div class="text-6xl md:text-8xl mb-4 md:mb-6">📭</div>
                    <h3 class="text-2xl md:text-3xl font-black text-gray-800 mb-3 md:mb-4">No Documents Yet</h3>
                    <p class="text-base md:text-xl text-gray-600 mb-6 md:mb-8 px-4">Upload your documents to complete your profile and increase your chances!</p>
                    <div class="inline-block p-4 md:p-6 bg-blue-50 rounded-2xl">
                        <p class="text-sm font-bold text-blue-800 mb-2">📋 Required Documents:</p>
                        <ul class="text-left text-sm md:text-base text-gray-700 space-y-1">
                            <li>• Valid Passport</li>
                            <li>• National ID</li>
                            <li>• Police Clearance Certificate</li>
                            <li>• Education Certificates</li>
                            <li>• Medical Certificate (if selected)</li>
                            <li>• MOFA Certificate (if selected)</li>
                            <li>• Attestation Certificate (if selected)</li>
                            <li>• Passport Photo</li>
                        </ul>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</section>

<!-- Help Section -->
<section class="py-12 md:py-20 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50"></div>
    
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="glass-card p-8 md:p-16 rounded-3xl md:rounded-[3rem] text-center">
            <div class="text-5xl md:text-6xl mb-4 md:mb-6">💡</div>
            <h2 class="text-3xl md:text-5xl font-black text-gray-800 mb-4 md:mb-6">Need Help?</h2>
            <p class="text-base md:text-xl text-gray-600 mb-6 md:mb-8 px-4">
                Having trouble uploading documents? Our team is here to assist you!
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-3 md:gap-4">
                <a href="{{ route('candidate.dashboard') }}" class="inline-block glass-white text-gray-800 font-bold px-8 md:px-10 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-lg hover:shadow-lg">
                    Back to Dashboard
                </a>
                <a href="{{ route('contact') }}" class="inline-block btn-primary text-white font-bold px-8 md:px-10 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-lg">
                    Contact Support →
                </a>
            </div>
        </div>
    </div>
</section>

@endsection