@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="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="funding_agency" id="funding_agency" 
                                   value="{{ old('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('funding_agency')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="role" class="block text-sm font-medium text-gray-700 mb-2">
                                Your Role <span class="text-red-500">*</span>
                            </label>
                            <select name="role" id="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('role') === $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                                @endforeach
                            </select>
                            @error('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="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="amount" id="amount" 
                                   value="{{ old('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('amount')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                                Project Status <span class="text-red-500">*</span>
                            </label>
                            <select name="status" id="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('status') === $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                                @endforeach
                            </select>
                            @error('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="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="start_date" id="start_date" 
                                   value="{{ old('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('start_date')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="end_date" class="block text-sm font-medium text-gray-700 mb-2">
                                End Date
                            </label>
                            <input type="date" name="end_date" id="end_date" 
                                   value="{{ old('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('end_date')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                            Project Description <span class="text-red-500">*</span>
                        </label>
                        <textarea name="description" id="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('description') }}</textarea>
                        @error('description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Outcomes -->
                    <div>
                        <label for="outcomes" class="block text-sm font-medium text-gray-700 mb-2">
                            Project Outcomes
                        </label>
                        <textarea name="outcomes" id="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('outcomes') }}</textarea>
                        @error('outcomes')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Certificate Upload -->
                    <div>
                        <label for="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-6">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-4"></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="certificate" id="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-2">
                                    Supported formats: PDF, DOC, DOCX, JPG, PNG (Max: 5MB)
                                </div>
                            </div>
                        </div>
                        @error('certificate')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </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 Research Project
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection