@extends('dashboard.layout')

@section('content')
<div class="mx-auto space-y-6 px-3 py-4">
    <!-- Progress Section -->
    @php
        $completedDocs = count(array_filter($required_document, fn($doc) => $doc['status'] == true));
        $progressPercentage = count($required_document) > 0 ? ($completedDocs / count($required_document)) * 100 : 0;
    @endphp
    
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Document Upload</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
                    {{ $completedDocs }} of {{ count($required_document) }} documents completed
                </p>
            </div>
            <div class="text-right">
                <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ round($progressPercentage) }}%</span>
            </div>
        </div>
        
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
            <div class="bg-green-500 h-2 rounded-full transition-all duration-500" 
                 style="width: {{ $progressPercentage }}%"></div>
        </div>
    </div>

    <!-- Success Message -->
    @if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 rounded-lg p-4">
        <div class="flex items-center">
            <i class="fas fa-check-circle text-green-500 text-lg mr-3"></i>
            <div>
                <p class="text-green-800 dark:text-green-300 font-medium">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Documents Form -->
    <form action="{{ route('dashboard.projects.documents.submit', $project->id) }}" 
          method="POST" 
          enctype="multipart/form-data"
          id="documentsForm"
          class="space-y-4">
        @csrf

        <!-- Documents List -->
        <div class="space-y-4">
            @foreach($required_document as $index => $document)
            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 document-item">
                <!-- Document Header -->
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center 
                            @if($document['status']) 
                                bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400
                            @else
                                bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400
                            @endif">
                            <i class="fas 
                                @if($document['type'] == 'file') fa-file 
                                @elseif($document['type'] == 'text') fa-font 
                                @elseif($document['type'] == 'number') fa-hashtag
                                @else fa-file-alt @endif
                            "></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-white">{{ $document['name'] }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 capitalize">
                                {{ $document['type'] }} type
                                @if($document['status'])
                                    <span class="text-green-600 dark:text-green-400 ml-2">
                                        <i class="fas fa-check-circle"></i> Submitted
                                    </span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Hidden fields for document metadata -->
                <input type="hidden" name="documents[{{ $index }}][name]" value="{{ $document['name'] }}">
                <input type="hidden" name="documents[{{ $index }}][type]" value="{{ $document['type'] }}">

                @if($document['status'])
                    <!-- Show submitted document -->
                    <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-green-800 dark:text-green-300 font-medium flex items-center">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    Document Submitted
                                </p>
                                @if($document['type'] == 'file' && $document['value'])
                                    <p class="text-sm text-green-700 dark:text-green-400 mt-1">
                                        File: {{ basename($document['value']) }}
                                    </p>
                                @elseif(in_array($document['type'], ['text', 'number']) && $document['value'])
                                    <p class="text-sm text-green-700 dark:text-green-400 mt-1">
                                        Value: {{ $document['value'] }}
                                    </p>
                                @endif
                            </div>
                        </div>
                    </div>
                @else
                    <!-- Input fields for pending documents -->
                    <div class="space-y-4">
                        @if($document['type'] == 'file')
                            <!-- File Upload -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Upload {{ $document['name'] }}
                                </label>
                                <input type="file" 
                                       name="documents[{{ $index }}][file]"
                                       accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif"
                                       class="file-input block w-full text-sm text-gray-500 dark:text-gray-400
                                              file:mr-4 file:py-2 file:px-3 
                                              file:rounded-lg file:border-0 
                                              file:text-sm file:font-medium
                                              file:bg-blue-50 dark:file:bg-blue-900/30 
                                              file:text-blue-600 dark:file:text-blue-400
                                              hover:file:bg-blue-100 dark:hover:file:bg-blue-900/50
                                              cursor-pointer
                                              bg-gray-50 dark:bg-gray-700
                                              border border-gray-300 dark:border-gray-600
                                              rounded-lg
                                              transition-colors"
                                       onchange="validateFile(this, {{ $index }})">
                                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                    PDF, DOC, DOCX, JPG, PNG, GIF (Max: 10MB)
                                </p>
                                <div id="file-error-{{ $index }}" class="text-red-500 text-xs mt-1 hidden"></div>
                            </div>

                        @elseif($document['type'] == 'text')
                            <!-- Text Input -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ $document['name'] }}
                                </label>
                                <input type="text" 
                                       name="documents[{{ $index }}][value]"
                                       value="{{ old("documents.{$index}.value", $document['value']) }}"
                                       placeholder="Enter {{ $document['name'] }}..."
                                       class="w-full px-4 py-2.5 
                                              border border-gray-300 dark:border-gray-600 
                                              rounded-lg 
                                              bg-white dark:bg-gray-700
                                              text-gray-900 dark:text-white
                                              placeholder-gray-500 dark:placeholder-gray-400
                                              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                              transition-all duration-200"
                                       oninput="validateText(this, {{ $index }})">
                                <div id="text-error-{{ $index }}" class="text-red-500 text-xs mt-1 hidden"></div>
                            </div>

                        @elseif($document['type'] == 'number')
                            <!-- Number Input -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    {{ $document['name'] }}
                                </label>
                                <input type="number" 
                                       name="documents[{{ $index }}][value]"
                                       value="{{ old("documents.{$index}.value", $document['value']) }}"
                                       placeholder="Enter {{ $document['name'] }}..."
                                       class="w-full px-4 py-2.5 
                                              border border-gray-300 dark:border-gray-600 
                                              rounded-lg 
                                              bg-white dark:bg-gray-700
                                              text-gray-900 dark:text-white
                                              placeholder-gray-500 dark:placeholder-gray-400
                                              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                              transition-all duration-200"
                                       oninput="validateNumber(this, {{ $index }})">
                                <div id="number-error-{{ $index }}" class="text-red-500 text-xs mt-1 hidden"></div>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
            @endforeach
        </div>

        <!-- Submit Section -->
        <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
            <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
                <div>
                    <p class="text-gray-600 dark:text-gray-400">
                        @if($progressPercentage == 100)
                            Ready to submit all documents
                        @else
                            {{ count($required_document) - $completedDocs }} documents remaining
                        @endif
                    </p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('dashboard.project.show', $project->id) }}" 
                       class="px-5 py-2.5 
                              border border-gray-300 dark:border-gray-600
                              text-gray-700 dark:text-gray-300 
                              rounded-lg 
                              bg-white dark:bg-gray-800
                              hover:bg-gray-50 dark:hover:bg-gray-700
                              transition-colors duration-200
                              font-medium
                              flex items-center">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back
                    </a>
                    
                    <button type="submit" 
                            id="submitAllBtn"
                            class="px-6 py-2.5 
                                   bg-green-600 hover:bg-green-700
                                   text-white 
                                   rounded-lg 
                                   transition-colors duration-200
                                   font-medium
                                   flex items-center
                                   disabled:opacity-50 disabled:cursor-not-allowed"
                            {{ $progressPercentage < 100 ? 'disabled' : '' }}>
                        <i class="fas fa-paper-plane mr-2"></i>
                        Submit All
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    updateSubmitButton();
});

function validateFile(input, index) {
    const errorDiv = document.getElementById(`file-error-${index}`);
    const file = input.files[0];
    
    if (file) {
        const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/gif'];
        const maxSize = 10 * 1024 * 1024;
        
        if (!validTypes.includes(file.type)) {
            showError(errorDiv, 'Please select a valid file type');
            input.value = '';
        } else if (file.size > maxSize) {
            showError(errorDiv, 'File size must be less than 10MB');
            input.value = '';
        } else {
            hideError(errorDiv);
        }
    }
    
    updateSubmitButton();
}

function validateText(input, index) {
    const errorDiv = document.getElementById(`text-error-${index}`);
    
    if (!input.value.trim()) {
        showError(errorDiv, 'This field is required');
    } else {
        hideError(errorDiv);
    }
    
    updateSubmitButton();
}

function validateNumber(input, index) {
    const errorDiv = document.getElementById(`number-error-${index}`);
    
    if (!input.value.trim()) {
        showError(errorDiv, 'This field is required');
    } else if (isNaN(input.value)) {
        showError(errorDiv, 'Please enter a valid number');
    } else {
        hideError(errorDiv);
    }
    
    updateSubmitButton();
}

function showError(errorDiv, message) {
    errorDiv.textContent = message;
    errorDiv.classList.remove('hidden');
}

function hideError(errorDiv) {
    errorDiv.classList.add('hidden');
}

function updateSubmitButton() {
    const submitBtn = document.getElementById('submitAllBtn');
    const documentItems = document.querySelectorAll('.document-item');
    let allValid = true;
    
    documentItems.forEach(item => {
        const fileInput = item.querySelector('input[type="file"]');
        const textInput = item.querySelector('input[type="text"]');
        const numberInput = item.querySelector('input[type="number"]');
        
        if (fileInput && !fileInput.files[0]) {
            allValid = false;
        } else if ((textInput || numberInput) && (!textInput?.value.trim() && !numberInput?.value.trim())) {
            allValid = false;
        }
    });
    
    submitBtn.disabled = !allValid;
}

document.getElementById('documentsForm').addEventListener('submit', function(e) {
    const submitBtn = document.getElementById('submitAllBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Submitting...';
});
</script>

<style>
.file-input:hover, input[type="text"]:hover, input[type="number"]:hover {
    border-color: #3b82f6;
}

.document-item {
    transition: transform 0.2s ease;
}

.document-item:hover {
    transform: translateY(-1px);
}
</style>
@endsection