@extends('layouts.app')

@section('title', 'Create New Project')
@section('description', 'Submit your CSR project for funding')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Create New Project</h1>
            <p class="text-gray-600">Share your vision and start making an impact</p>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <!-- Project Title -->
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                        Project Title *
                    </label>
                    <input type="text" id="title" name="title" required value="{{ old('title') }}"
                           class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                           placeholder="Enter a compelling project title">
                    @error('title')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Short Description -->
                <div>
                    <label for="short_description" class="block text-sm font-medium text-gray-700 mb-2">
                        Short Description *
                    </label>
                    <textarea id="short_description" name="short_description" rows="3" required
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                              placeholder="Brief description of your project (max 200 characters)">{{ old('short_description') }}</textarea>
                    <p class="mt-1 text-xs text-gray-500">This will appear in project cards and search results</p>
                    @error('short_description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Full Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        Full Description *
                    </label>
                    <textarea id="description" name="description" rows="6" required
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                              placeholder="Detailed description of your project, goals, and expected impact">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Project Image -->
                <div>
                    <label for="featured_image" class="block text-sm font-medium text-gray-700 mb-2">
                        Featured Image
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                        <div class="space-y-1 text-center">
                            <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="featured_image" class="relative cursor-pointer bg-white rounded-md font-medium text-csr-blue hover:text-blue-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-csr-blue">
                                    <span>Upload a file</span>
                                    <input id="featured_image" name="featured_image" type="file" class="sr-only" accept="image/*">
                                </label>
                                <p class="pl-1">or drag and drop</p>
                            </div>
                            <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
                        </div>
                    </div>
                    @error('featured_image')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Funding Goal -->
                <div>
                    <label for="funding_goal" class="block text-sm font-medium text-gray-700 mb-2">
                        Funding Goal (₦) *
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 sm:text-sm">₦</span>
                        </div>
                        <input type="number" id="funding_goal" name="funding_goal" required min="10000" step="1000" value="{{ old('funding_goal') }}"
                               class="block w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                               placeholder="Enter funding goal">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Minimum funding goal: ₦10,000</p>
                    @error('funding_goal')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Project Duration -->
                <div>
                    <label for="duration_months" class="block text-sm font-medium text-gray-700 mb-2">
                        Project Duration (months) *
                    </label>
                    <input type="number" id="duration_months" name="duration_months" required min="1" max="60" value="{{ old('duration_months') }}"
                           class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                           placeholder="How long will the project take?">
                    @error('duration_months')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Location -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="region" class="block text-sm font-medium text-gray-700 mb-2">
                            Region *
                        </label>
                        <select id="region" name="region" required
                                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                            <option value="">Select region</option>
                            <option value="North Central" {{ old('region') == 'North Central' ? 'selected' : '' }}>North Central</option>
                            <option value="North East" {{ old('region') == 'North East' ? 'selected' : '' }}>North East</option>
                            <option value="North West" {{ old('region') == 'North West' ? 'selected' : '' }}>North West</option>
                            <option value="South East" {{ old('region') == 'South East' ? 'selected' : '' }}>South East</option>
                            <option value="South South" {{ old('region') == 'South South' ? 'selected' : '' }}>South South</option>
                            <option value="South West" {{ old('region') == 'South West' ? 'selected' : '' }}>South West</option>
                        </select>
                        @error('region')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="location" class="block text-sm font-medium text-gray-700 mb-2">
                            Specific Location
                        </label>
                        <input type="text" id="location" name="location" value="{{ old('location') }}"
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                               placeholder="City, town, or specific area">
                        @error('location')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- SDG Tags -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-3">
                        Sustainable Development Goals (SDGs) *
                    </label>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                        @php
                            $sdgs = [
                                1 => 'No Poverty',
                                2 => 'Zero Hunger',
                                3 => 'Good Health',
                                4 => 'Quality Education',
                                5 => 'Gender Equality',
                                6 => 'Clean Water',
                                7 => 'Clean Energy',
                                8 => 'Decent Work',
                                9 => 'Industry Innovation',
                                10 => 'Reduced Inequalities',
                                11 => 'Sustainable Cities',
                                12 => 'Responsible Consumption',
                                13 => 'Climate Action',
                                14 => 'Life Below Water',
                                15 => 'Life on Land',
                                16 => 'Peace & Justice',
                                17 => 'Partnerships'
                            ];
                        @endphp
                        @foreach($sdgs as $number => $title)
                            <label class="relative flex cursor-pointer rounded-lg border border-gray-300 bg-white p-3 shadow-sm focus:outline-none hover:border-csr-blue">
                                <input type="checkbox" name="sdg_tags[]" value="{{ $number }}" class="sr-only"
                                       {{ in_array($number, old('sdg_tags', [])) ? 'checked' : '' }}>
                                <span class="flex flex-col">
                                    <span class="block text-sm font-medium text-gray-900">SDG {{ $number }}</span>
                                    <span class="mt-1 text-xs text-gray-500">{{ $title }}</span>
                                </span>
                            </label>
                        @endforeach
                    </div>
                    <p class="mt-2 text-xs text-gray-500">Select all SDGs that your project addresses</p>
                    @error('sdg_tags')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Target Beneficiaries -->
                <div>
                    <label for="target_beneficiaries" class="block text-sm font-medium text-gray-700 mb-2">
                        Target Beneficiaries *
                    </label>
                    <input type="number" id="target_beneficiaries" name="target_beneficiaries" required min="1" value="{{ old('target_beneficiaries') }}"
                           class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                           placeholder="How many people will benefit from this project?">
                    @error('target_beneficiaries')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Project Timeline -->
                <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">
                            Project Start Date *
                        </label>
                        <input type="date" id="start_date" name="start_date" required value="{{ old('start_date') }}"
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                        @error('start_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="end_date" class="block text-sm font-medium text-gray-700 mb-2">
                            Expected End Date *
                        </label>
                        <input type="date" id="end_date" name="end_date" required value="{{ old('end_date') }}"
                               class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-csr-blue focus:border-csr-blue">
                        @error('end_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- KPIs -->
                <div>
                    <label for="kpis" class="block text-sm font-medium text-gray-700 mb-2">
                        Key Performance Indicators (KPIs)
                    </label>
                    <textarea id="kpis" name="kpis" rows="4"
                              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-csr-blue focus:border-csr-blue"
                              placeholder="List the key metrics you'll use to measure project success (e.g., number of students trained, trees planted, etc.)">{{ old('kpis') }}</textarea>
                    <p class="mt-1 text-xs text-gray-500">This helps funders understand how you'll measure impact</p>
                    @error('kpis')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Submit Buttons -->
                <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
                    <a href="{{ route('projects.index') }}" 
                       class="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400 transition-colors">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-csr-green text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors">
                        <i class="fas fa-paper-plane mr-2"></i>
                        Submit Project
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Handle SDG checkbox selection styling
document.querySelectorAll('input[name="sdg_tags[]"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            this.closest('label').classList.remove('border-gray-300', 'bg-white');
            this.closest('label').classList.add('border-csr-blue', 'bg-blue-50');
        } else {
            this.closest('label').classList.remove('border-csr-blue', 'bg-blue-50');
            this.closest('label').classList.add('border-gray-300', 'bg-white');
        }
    });
    
    // Set initial state
    if (checkbox.checked) {
        checkbox.closest('label').classList.remove('border-gray-300', 'bg-white');
        checkbox.closest('label').classList.add('border-csr-blue', 'bg-blue-50');
    }
});

// Auto-calculate duration when dates change
document.getElementById('start_date').addEventListener('change', calculateDuration);
document.getElementById('end_date').addEventListener('change', calculateDuration);

function calculateDuration() {
    const startDate = document.getElementById('start_date').value;
    const endDate = document.getElementById('end_date').value;
    
    if (startDate && endDate) {
        const start = new Date(startDate);
        const end = new Date(endDate);
        const diffTime = Math.abs(end - start);
        const diffMonths = Math.ceil(diffTime / (1000 * 60 * 60 * 24 * 30.44)); // Average days per month
        
        if (diffMonths > 0) {
            document.getElementById('duration_months').value = diffMonths;
        }
    }
}

// File upload preview
document.getElementById('featured_image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            // You can add image preview functionality here
            console.log('File selected:', file.name);
        };
        reader.readAsDataURL(file);
    }
});
</script>
@endpush
@endsection