@extends('layouts.app')

@section('title', 'Submit Innovation - Uganda Innovation Portal')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-plus-circle me-2"></i>
                        Submit Your Innovation
                    </h4>
                </div>
                <div class="card-body p-4">
                    <form method="POST" action="{{ route('innovations.store') }}" enctype="multipart/form-data">
                        @csrf

                        <!-- Basic Information -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Basic Information</h5>
                            
                            
                                <div class="col-md-8 mb-3">
                                    <label for="title" class="form-label">Title of the innovation *</label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                           id="title" name="title" value="{{ old('title') }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">Category *</label>
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($categories as $category)
                                            <div class="form-check form-check-inline">
                                                <input
                                                    class="form-check-input @error('category_ids') is-invalid @enderror"
                                                    type="checkbox"
                                                    name="category_ids[]"
                                                    id="category_{{ $category->id }}"
                                                    value="{{ $category->id }}"
                                                    {{ in_array($category->id, old('category_ids', [])) ? 'checked' : '' }}
                                                >
                                                <label class="form-check-label" for="category_{{ $category->id }}">
                                                    {{ $category->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('category_ids')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            

                            <div class="mb-3">
                                <label for="description" class="form-label">Brief description of the innovation (max 3–4 sentences, in simple language) *</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="4" required>{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Location Information -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Location Information</h5>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="region" class="form-label">Region</label>
                                    <select class="form-select @error('region') is-invalid @enderror" 
                                            id="region" name="region">
                                        <option value="">Select Region</option>
                                        <option value="Central" {{ old('region') == 'Central' ? 'selected' : '' }}>Central</option>
                                        <option value="Eastern" {{ old('region') == 'Eastern' ? 'selected' : '' }}>Eastern</option>
                                        <option value="Northern" {{ old('region') == 'Northern' ? 'selected' : '' }}>Northern</option>
                                        <option value="Western" {{ old('region') == 'Western' ? 'selected' : '' }}>Western</option>
                                    </select>
                                    @error('region')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="district" class="form-label">District</label>
                                    <input type="text" class="form-control @error('district') is-invalid @enderror" 
                                           id="district" name="district" value="{{ old('district') }}">
                                    @error('district')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="location" class="form-label">Specific Location</label>
                                    <input type="text" class="form-control @error('location') is-invalid @enderror" 
                                           id="location" name="location" value="{{ old('location') }}">
                                    @error('location')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Contact Information</h5>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="contact_person" class="form-label">Contact Person</label>
                                    <input type="text" class="form-control @error('contact_person') is-invalid @enderror" 
                                           id="contact_person" name="contact_person" value="{{ old('contact_person') }}">
                                    @error('contact_person')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="gender" class="form-label">Gender</label>
                                    <select class="form-select @error('gender') is-invalid @enderror" 
                                            id="gender" name="gender">
                                        <option value="">Select Gender</option>
                                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other / Prefer not to say</option>
                                    </select>
                                    @error('gender')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="contact_email" class="form-label">Contact Email</label>
                                    <input type="email" class="form-control @error('contact_email') is-invalid @enderror" 
                                           id="contact_email" name="contact_email" value="{{ old('contact_email') }}">
                                    @error('contact_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="contact_phone" class="form-label">Contact Phone</label>
                                    <input type="text" class="form-control @error('contact_phone') is-invalid @enderror" 
                                           id="contact_phone" name="contact_phone" value="{{ old('contact_phone') }}">
                                    @error('contact_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-12 mb-3">
                                <label for="organization" class="form-label">
                                    Please indicate your organization, university, company, or innovation hub. If you’re an independent innovator, write “Independent.”
                                </label>
                                <input type="text" 
                                    class="form-control @error('organization') is-invalid @enderror" 
                                    id="organization" 
                                    name="organization" 
                                    value="{{ old('organization') }}"
                                    placeholder="organization, university, company, innovation hub">

                                @error('organization')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="mb-3">
                                <label for="website" class="form-label">Website</label>
                                <input type="url" class="form-control @error('website') is-invalid @enderror" 
                                       id="website" name="website" value="{{ old('website') }}" 
                                       placeholder="https://example.com">
                                @error('website')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Innovation Details -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Innovation Details</h5>
                            
                            <div class="mb-3">
                                <label class="form-label">Which industrial value chain(s) does your innovation contribute to? *</label>
                                <div class="d-flex flex-column gap-2">
                                    @foreach($valueChains as $chain)
                                        <div class="form-check">
                                            <input
                                                class="form-check-input @error('value_chains') is-invalid @enderror"
                                                type="checkbox"
                                                name="value_chains[]"
                                                id="value_chain_{{ \Str::slug($chain) }}"
                                                value="{{ $chain }}"
                                                {{ in_array($chain, old('value_chains', [])) ? 'checked' : '' }}
                                            >
                                            <label class="form-check-label" for="value_chain_{{ \Str::slug($chain) }}">
                                                {{ $chain }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                @error('value_chains')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="start_year" class="form-label">Start year of the innovation</label>
                                    <input type="number"
                                           min="1900"
                                           max="{{ date('Y') + 1 }}"
                                           class="form-control @error('start_year') is-invalid @enderror"
                                           id="start_year"
                                           name="start_year"
                                           value="{{ old('start_year') }}"
                                           placeholder="e.g., 2022">
                                    @error('start_year')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                           
                                <div class="col-md-6 mb-3">
                                    <label for="stage" class="form-label">Development Stage of the innovation</label>
                                    <select class="form-select @error('stage') is-invalid @enderror" 
                                            id="stage" name="stage">
                                        <option value="">Select Stage</option>
                                        <option value="idea" {{ old('stage') == 'idea' ? 'selected' : '' }}>Idea</option>
                                        <option value="prototype" {{ old('stage') == 'prototype' ? 'selected' : '' }}>Prototype (early sample, not in use)</option>
                                        <option value="pilot" {{ old('stage') == 'pilot' ? 'selected' : '' }}>Pilot (being tested by users)</option>
                                        <option value="commercial" {{ old('stage') == 'commercial' ? 'selected' : '' }}>Commercialized (on the market)</option>
                                    </select>
                                    @error('stage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-8 mb-3">
                                    <label for="funding_status" class="form-label">Has this innovation received any form of support?</label>
                                    <select class="form-select @error('funding_status') is-invalid @enderror" 
                                            id="funding_status" name="funding_status">
                                        <option value="">Select Status</option>
                                        <option value="self_funded" {{ old('funding_status') == 'self_funded' ? 'selected' : '' }}>No</option>
                                        <option value="funded" {{ old('funding_status') == 'funded' ? 'selected' : '' }}>Yes</option>
                                        </select>
                                    @error('funding_status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                           

                            <div class="mb-3">
                                <label for="impact_description" class="form-label">Briefly describe the Social Economic Impact of the Innovation.</label>
                                <textarea class="form-control @error('impact_description') is-invalid @enderror" 
                                          id="impact_description" name="impact_description" rows="3">{{ old('impact_description') }}</textarea>
                                @error('impact_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="target_audience" class="form-label">Who are the main beneficiaries of the innovation?</label>
                                <textarea class="form-control @error('target_audience') is-invalid @enderror" 
                                          id="target_audience" name="target_audience" rows="2">{{ old('target_audience') }}</textarea>
                                @error('target_audience')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Media Upload -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Media & Documents</h5>

                            <div class="mb-3">
                                <label for="images1" class="form-label">Upload a photo of the innovator</label>
                                <input type="file" class="form-control @error('images1.*') is-invalid @enderror" 
                                       id="images1" name="images1[]" multiple accept="image/*">
                                <div class="form-text">Upload an image (JPEG, PNG, JPG-Max 2MB each)</div>
                                @error('images1.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="mb-3">
                                <label for="images" class="form-label">Upload a photo of the innovation (product, prototype, or service)</label>
                                <input type="file" class="form-control @error('images.*') is-invalid @enderror" 
                                       id="images" name="images[]" multiple accept="image/*">
                                <div class="form-text">Upload up to 5 images (JPEG, PNG, JPG, GIF - Max 2MB each)</div>
                                @error('images.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="documents" class="form-label">Documents</label>
                                <input type="file" class="form-control @error('documents.*') is-invalid @enderror" 
                                       id="documents" name="documents[]" multiple accept=".pdf,.doc,.docx">
                                <div class="form-text">Upload supporting documents (PDF, DOC, DOCX - Max 5MB each)</div>
                                @error('documents.*')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="video_url" class="form-label">Videos of the Innovation (upload link or file)</label>
                                <input type="url" class="form-control @error('video_url') is-invalid @enderror" 
                                       id="video_url" name="video_url" value="{{ old('video_url') }}" 
                                       placeholder="https://youtube.com/watch?v=...">
                                @error('video_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Additional Information -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Additional Information</h5>
                            
                            <!--
                            <div class="mb-3">
                                <label for="challenges" class="form-label">Challenges Faced</label>
                                <textarea class="form-control @error('challenges') is-invalid @enderror" 
                                          id="challenges" name="challenges" rows="3">{{ old('challenges') }}</textarea>
                                @error('challenges')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="solutions" class="form-label">Solutions Implemented</label>
                                <textarea class="form-control @error('solutions') is-invalid @enderror" 
                                          id="solutions" name="solutions" rows="3">{{ old('solutions') }}</textarea>
                                @error('solutions')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                                -->

                            <div class="mb-3">
                                <label for="partnerships" class="form-label">Type of Ownership</label>
                                <select class="form-select @error('partnerships') is-invalid @enderror"
                                        id="partnerships" name="partnerships">
                                    <option value="">Select Type of Ownership</option>

                                    <option value="individual"
                                        {{ old('partnerships') == 'individual' ? 'selected' : '' }}>
                                        Individual (self-led or personal innovation)
                                    </option>

                                    <option value="institutional"
                                        {{ old('partnerships') == 'institutional' ? 'selected' : '' }}>
                                        Institutional / Organizational (owned or managed by a university, company, NGO, or government agency)
                                    </option>

                                    <option value="collaborative"
                                        {{ old('partnerships') == 'collaborative' ? 'selected' : '' }}>
                                        Partnership / Collaborative (joint ownership between individuals and institutions, or across multiple partners)
                                    </option>
                                </select>

                                @error('partnerships')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>



                            <div class="mb-3">
                                <label for="awards" class="form-label">Awards & Recognition</label>
                                <textarea class="form-control @error('awards') is-invalid @enderror" 
                                          id="awards" name="awards" rows="2">{{ old('awards') }}</textarea>
                                @error('awards')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('innovations.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Back to My Innovations
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Submit Innovation
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection