@extends('layouts.app')

@section('title', 'Add Research Projects')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Add Research Projects</h1>
                    <p class="text-gray-600 mt-1">Provide details about your research projects and funding</p>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500">Application #{{ $application->application_number }}</div>
                </div>
            </div>
        </div>

        <!-- Tabular Research Projects Form -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form action="{{ route('applicant.research-projects.store', $application) }}" method="POST" enctype="multipart/form-data" id="research-projects-form">
                @csrf

                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-flask"></i>
                        Research Project Entries
                    </h3>
                    
                    <div class="info-box mb-4">
                        <i class="fas fa-info-circle"></i>
                        <p>You can add multiple research projects. Each entry should represent a separate funded research project or grant.</p>
                    </div>
                    
                    <div id="projects-container">
                        @php
                            $projects = old('projects', []);
                            if (empty($projects)) {
                                $projects = [[]]; // Start with one empty project
                            }
                        @endphp
                        
                        @foreach($projects as $index => $project)
                        <div class="project-entry" data-index="{{ $index }}">
                            <div class="entry-header">
                                <h4 class="entry-title">
                                    <i class="fas fa-microscope"></i>
                                    Research Project {{ $index + 1 }}
                                </h4>
                                @if($index > 0)
                                    <button type="button" class="btn-remove" onclick="removeProject({{ $index }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                @endif
                            </div>
                            
                            <div class="space-y-6">
                                <!-- Project Title -->
                                <div>
                                    <label for="project_{{ $index }}_title" class="block text-sm font-medium text-gray-700 mb-2">
                                        Project Title <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="projects[{{ $index }}][project_title]" id="project_{{ $index }}_title" 
                                           value="{{ old("projects.{$index}.project_title", $project['project_title'] ?? '') }}" required
                                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                           placeholder="Enter the research project title">
                                    @error("projects.{$index}.project_title")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Funding Agency and Role -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="project_{{ $index }}_funding_agency" class="block text-sm font-medium text-gray-700 mb-2">
                                            Funding Agency <span class="text-red-500">*</span>
                                        </label>
                                        <input type="text" name="projects[{{ $index }}][funding_agency]" id="project_{{ $index }}_funding_agency" 
                                               value="{{ old("projects.{$index}.funding_agency", $project['funding_agency'] ?? '') }}" required
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                               placeholder="e.g., DST, CSIR, UGC">
                                        @error("projects.{$index}.funding_agency")
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="project_{{ $index }}_role" class="block text-sm font-medium text-gray-700 mb-2">
                                            Your Role <span class="text-red-500">*</span>
                                        </label>
                                        <select name="projects[{{ $index }}][role]" id="project_{{ $index }}_role" required
                                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="">Select Role</option>
                                            @foreach(App\Models\ResearchProject::ROLES as $key => $label)
                                            <option value="{{ $key }}" {{ old("projects.{$index}.role", $project['role'] ?? '') === $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error("projects.{$index}.role")
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Amount and Status -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="project_{{ $index }}_amount" class="block text-sm font-medium text-gray-700 mb-2">
                                            Funding Amount (₹) <span class="text-red-500">*</span>
                                        </label>
                                        <input type="number" name="projects[{{ $index }}][amount]" id="project_{{ $index }}_amount" 
                                               value="{{ old("projects.{$index}.amount", $project['amount'] ?? '') }}" required min="0" step="0.01"
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                               placeholder="Enter amount in rupees">
                                        @error("projects.{$index}.amount")
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="project_{{ $index }}_status" class="block text-sm font-medium text-gray-700 mb-2">
                                            Project Status <span class="text-red-500">*</span>
                                        </label>
                                        <select name="projects[{{ $index }}][status]" id="project_{{ $index }}_status" required
                                                class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="">Select Status</option>
                                            @foreach(App\Models\ResearchProject::STATUSES as $key => $label)
                                            <option value="{{ $key }}" {{ old("projects.{$index}.status", $project['status'] ?? '') === $key ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error("projects.{$index}.status")
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Duration -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="project_{{ $index }}_start_date" class="block text-sm font-medium text-gray-700 mb-2">
                                            Start Date <span class="text-red-500">*</span>
                                        </label>
                                        <input type="date" name="projects[{{ $index }}][start_date]" id="project_{{ $index }}_start_date" 
                                               value="{{ old("projects.{$index}.start_date", $project['start_date'] ?? '') }}" required
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error("projects.{$index}.start_date")
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="project_{{ $index }}_end_date" class="block text-sm font-medium text-gray-700 mb-2">
                                            End Date
                                        </label>
                                        <input type="date" name="projects[{{ $index }}][end_date]" id="project_{{ $index }}_end_date" 
                                               value="{{ old("projects.{$index}.end_date", $project['end_date'] ?? '') }}"
                                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <p class="text-sm text-gray-500 mt-1">Leave blank if project is ongoing</p>
                                        @error("projects.{$index}.end_date")
                                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Description -->
                                <div>
                                    <label for="project_{{ $index }}_description" class="block text-sm font-medium text-gray-700 mb-2">
                                        Project Description <span class="text-red-500">*</span>
                                    </label>
                                    <textarea name="projects[{{ $index }}][description]" id="project_{{ $index }}_description" rows="4" required
                                              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                              placeholder="Describe the research project, objectives, methodology, etc.">{{ old("projects.{$index}.description", $project['description'] ?? '') }}</textarea>
                                    @error("projects.{$index}.description")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Outcomes -->
                                <div>
                                    <label for="project_{{ $index }}_outcomes" class="block text-sm font-medium text-gray-700 mb-2">
                                        Project Outcomes
                                    </label>
                                    <textarea name="projects[{{ $index }}][outcomes]" id="project_{{ $index }}_outcomes" rows="3"
                                              class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                              placeholder="Describe the outcomes, publications, patents, etc. (if any)">{{ old("projects.{$index}.outcomes", $project['outcomes'] ?? '') }}</textarea>
                                    @error("projects.{$index}.outcomes")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Certificate Upload -->
                                <div>
                                    <label for="project_{{ $index }}_certificate" class="block text-sm font-medium text-gray-700 mb-2">
                                        Supporting Document
                                    </label>
                                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4">
                                        <div class="text-center">
                                            <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                                            <div class="text-sm text-gray-600 mb-2">
                                                Upload project sanction letter, completion certificate, or other supporting documents
                                            </div>
                                            <input type="file" name="projects[{{ $index }}][certificate]" id="project_{{ $index }}_certificate" 
                                                   accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                                   class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                                            <div class="text-xs text-gray-500 mt-1">
                                                Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB)
                                            </div>
                                        </div>
                                    </div>
                                    @error("projects.{$index}.certificate")
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    
                    <div class="add-more-container">
                        <button type="button" class="btn btn-outline" onclick="addProject()">
                            <i class="fas fa-plus"></i>
                            Add Another Research Project
                        </button>
                    </div>
                    
                    <!-- Total Funding Summary -->
                    <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                        <h4 class="text-lg font-semibold text-green-900 mb-2">
                            <i class="fas fa-calculator"></i>
                            Total Funding Summary
                        </h4>
                        <div id="total-funding-summary" class="text-green-800">
                            <!-- Total will be calculated here -->
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between mt-8">
                    <a href="{{ route('applicant.research-projects.index', $application) }}" 
                       class="bg-gray-600 text-white px-6 py-2 rounded-md hover:bg-gray-700 transition-colors">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors">
                        Add All Research Projects
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.project-entry {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.entry-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
}

.entry-title i {
    margin-right: 0.5rem;
    color: #667eea;
}

.btn-remove {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-remove:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.add-more-container {
    text-align: center;
    margin-top: 2rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-outline {
    background: white;
    color: #4f46e5;
    border: 2px solid #4f46e5;
}

.btn-outline:hover {
    background: #4f46e5;
    color: white;
}

.btn i {
    margin-right: 0.5rem;
}

.info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
}

.info-box i {
    color: #3b82f6;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-box p {
    margin: 0;
    color: #1e40af;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .project-entry {
        padding: 1rem;
    }
    
    .entry-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@push('scripts')
<script>
let projectIndex = {{ count($projects) }};

function addProject() {
    const container = document.getElementById('projects-container');
    const newEntry = createProjectEntry(projectIndex);
    container.appendChild(newEntry);
    projectIndex++;
    updateTotalFunding();
}

function removeProject(index) {
    const entry = document.querySelector(`[data-index="${index}"]`);
    if (entry) {
        entry.remove();
        updateTotalFunding();
    }
}

function updateTotalFunding() {
    const allAmountInputs = document.querySelectorAll('[id^="project_"][id$="_amount"]');
    let totalFunding = 0;
    let totalProjects = 0;
    
    allAmountInputs.forEach(input => {
        const amount = parseFloat(input.value) || 0;
        if (amount > 0) {
            totalFunding += amount;
            totalProjects++;
        }
    });
    
    const summaryDiv = document.getElementById('total-funding-summary');
    summaryDiv.innerHTML = `
        <div class="flex justify-between items-center">
            <span><strong>Total Projects:</strong> ${totalProjects}</span>
            <span><strong>Total Funding:</strong> ₹${totalFunding.toLocaleString('en-IN')}</span>
        </div>
    `;
}

function createProjectEntry(index) {
    const div = document.createElement('div');
    div.className = 'project-entry';
    div.setAttribute('data-index', index);
    
    div.innerHTML = `
        <div class="entry-header">
            <h4 class="entry-title">
                <i class="fas fa-microscope"></i>
                Research Project ${index + 1}
            </h4>
            <button type="button" class="btn-remove" onclick="removeProject(${index})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="space-y-6">
            <!-- Project Title -->
            <div>
                <label for="project_${index}_title" class="block text-sm font-medium text-gray-700 mb-2">
                    Project Title <span class="text-red-500">*</span>
                </label>
                <input type="text" name="projects[${index}][project_title]" id="project_${index}_title" 
                       required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="Enter the research project title">
            </div>

            <!-- Funding Agency and Role -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="project_${index}_funding_agency" class="block text-sm font-medium text-gray-700 mb-2">
                        Funding Agency <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="projects[${index}][funding_agency]" id="project_${index}_funding_agency" 
                           required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="e.g., DST, CSIR, UGC">
                </div>

                <div>
                    <label for="project_${index}_role" class="block text-sm font-medium text-gray-700 mb-2">
                        Your Role <span class="text-red-500">*</span>
                    </label>
                    <select name="projects[${index}][role]" id="project_${index}_role" required
                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Select Role</option>
                        @foreach(App\\Models\\ResearchProject::ROLES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Amount and Status -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="project_${index}_amount" class="block text-sm font-medium text-gray-700 mb-2">
                        Funding Amount (₹) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" name="projects[${index}][amount]" id="project_${index}_amount" 
                           required min="0" step="0.01" onchange="updateTotalFunding()"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Enter amount in rupees">
                </div>

                <div>
                    <label for="project_${index}_status" class="block text-sm font-medium text-gray-700 mb-2">
                        Project Status <span class="text-red-500">*</span>
                    </label>
                    <select name="projects[${index}][status]" id="project_${index}_status" required
                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">Select Status</option>
                        @foreach(App\\Models\\ResearchProject::STATUSES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Duration -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="project_${index}_start_date" class="block text-sm font-medium text-gray-700 mb-2">
                        Start Date <span class="text-red-500">*</span>
                    </label>
                    <input type="date" name="projects[${index}][start_date]" id="project_${index}_start_date" 
                           required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <div>
                    <label for="project_${index}_end_date" class="block text-sm font-medium text-gray-700 mb-2">
                        End Date
                    </label>
                    <input type="date" name="projects[${index}][end_date]" id="project_${index}_end_date" 
                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-sm text-gray-500 mt-1">Leave blank if project is ongoing</p>
                </div>
            </div>

            <!-- Description -->
            <div>
                <label for="project_${index}_description" class="block text-sm font-medium text-gray-700 mb-2">
                    Project Description <span class="text-red-500">*</span>
                </label>
                <textarea name="projects[${index}][description]" id="project_${index}_description" rows="4" required
                          class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Describe the research project, objectives, methodology, etc."></textarea>
            </div>

            <!-- Outcomes -->
            <div>
                <label for="project_${index}_outcomes" class="block text-sm font-medium text-gray-700 mb-2">
                    Project Outcomes
                </label>
                <textarea name="projects[${index}][outcomes]" id="project_${index}_outcomes" rows="3"
                          class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Describe the outcomes, publications, patents, etc. (if any)"></textarea>
            </div>

            <!-- Certificate Upload -->
            <div>
                <label for="project_${index}_certificate" class="block text-sm font-medium text-gray-700 mb-2">
                    Supporting Document
                </label>
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-4">
                    <div class="text-center">
                        <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                        <div class="text-sm text-gray-600 mb-2">
                            Upload project sanction letter, completion certificate, or other supporting documents
                        </div>
                        <input type="file" name="projects[${index}][certificate]" id="project_${index}_certificate" 
                               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                               class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <div class="text-xs text-gray-500 mt-1">
                            Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    return div;
}

// Initialize calculations on page load
document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners to existing amount inputs
    const existingAmountInputs = document.querySelectorAll('[id^="project_"][id$="_amount"]');
    existingAmountInputs.forEach(input => {
        input.addEventListener('change', updateTotalFunding);
    });
    
    updateTotalFunding();
});
</script>
@endpush
@endsection