@extends('layouts.app')

@section('title', 'Edit 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-warning text-dark">
                    <h4 class="mb-0">
                        <i class="fas fa-edit me-2"></i>
                        Edit Innovation
                    </h4>
                </div>
                <div class="card-body p-4">
                    <form method="POST" action="{{ route('innovations.update', $innovation) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Basic Information -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Basic Information</h5>
                            
                            <div class="row">
                                <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', $innovation->title) }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 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', $innovation->categories->pluck('id')->toArray())) ? '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>

                            <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', $innovation->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', $innovation->region) == 'Central' ? 'selected' : '' }}>Central</option>
                                        <option value="Eastern" {{ old('region', $innovation->region) == 'Eastern' ? 'selected' : '' }}>Eastern</option>
                                        <option value="Northern" {{ old('region', $innovation->region) == 'Northern' ? 'selected' : '' }}>Northern</option>
                                        <option value="Western" {{ old('region', $innovation->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', $innovation->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', $innovation->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', $innovation->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', $innovation->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', $innovation->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', $innovation->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', $innovation->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', $innovation->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</label>
                                    <select class="form-select @error('stage') is-invalid @enderror" 
                                            id="stage" name="stage">
                                        <option value="">Select Stage</option>
                                        <option value="idea" {{ old('stage', $innovation->stage) == 'idea' ? 'selected' : '' }}>Idea</option>
                                        <option value="prototype" {{ old('stage', $innovation->stage) == 'prototype' ? 'selected' : '' }}>Prototype</option>
                                        <option value="pilot" {{ old('stage', $innovation->stage) == 'pilot' ? 'selected' : '' }}>Pilot</option>
                                        <option value="commercial" {{ old('stage', $innovation->stage) == 'commercial' ? 'selected' : '' }}>Commercial</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', $innovation->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', $innovation->target_audience) }}</textarea>
                                @error('target_audience')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Current Media -->
                        @if($innovation->images && count($innovation->images) > 0)
                            <div class="mb-4">
                                <h5 class="text-primary mb-3">Current Images</h5>
                                <div class="row">
                                    @foreach($innovation->images as $index => $image)
                                        <div class="col-md-3 mb-2">
                                            <div class="position-relative">
                                                <img src="{{ asset('images/' . $innovation->images[0]) }}" 
                                                     class="img-thumbnail" alt="Current Image {{ $index + 1 }}">
                                                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0" 
                                                        onclick="removeImage({{ $index }})">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Media Upload -->
                        <div class="mb-4">
                            <h5 class="text-primary mb-3">Add More Media & Documents</h5>
                            
                            <div class="mb-3">
                                <label for="images" class="form-label">Additional Images</label>
                                <input type="file" class="form-control @error('images.*') is-invalid @enderror" 
                                       id="images" name="images[]" multiple accept="image/*">
                                <div class="form-text">Upload additional 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">Additional 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 additional 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">Video URL</label>
                                <input type="url" class="form-control @error('video_url') is-invalid @enderror" 
                                       id="video_url" name="video_url" value="{{ old('video_url', $innovation->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', $innovation->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', $innovation->solutions) }}</textarea>
                                @error('solutions')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="partnerships" class="form-label">Partnerships</label>
                                <textarea class="form-control @error('partnerships') is-invalid @enderror" 
                                          id="partnerships" name="partnerships" rows="2">{{ old('partnerships', $innovation->partnerships) }}</textarea>
                                @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', $innovation->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-warning">
                                <i class="fas fa-save me-2"></i>Update Innovation
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function removeImage(index) {
    // This would need to be implemented with AJAX to remove images from the server
    // For now, just hide the image
    event.target.closest('.col-md-3').style.display = 'none';
}
</script>
@endpush
@endsection