@extends('layouts.admin')

@section('title', 'Edit Event')

@section('content_header')
    <h1>Edit Event</h1>
@stop

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">Edit Event Details</h3>
        </div>
        <form action="{{ route('admin.events.update', $event->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="card-body">
                <div class="form-group">
                    <label for="speaker_ids">Speakers<span class="text-danger">*</span></label>
                    <select name="speaker_ids[]" id="speaker_ids" class="form-control @error('speaker_ids') is-invalid @enderror" style="height: 38px;" multiple>
                        @foreach($speakers as $speaker)
                            <option value="{{ $speaker->id }}" {{ in_array($speaker->id, old('speaker_ids', $event->speakers->pluck('id')->toArray())) ? 'selected' : '' }}>{{ $speaker->name }}</option>
                        @endforeach
                    </select>
                    @error('speaker_ids')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="mode">Mode<span class="text-danger">*</span></label>
                    <select name="mode" class="form-control @error('mode') is-invalid @enderror">
                        <option value="Online" {{ old('mode', $event->mode) == 'Online' ? 'selected' : '' }}>Online</option>
                        <option value="Offline" {{ old('mode', $event->mode) == 'Offline' ? 'selected' : '' }}>Offline</option>
                    </select>
                    @error('mode')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="title">Title<span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title', $event->title) }}">
                    @error('title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="date">Date<span class="text-danger">*</span></label>
                    <input type="date" name="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', $event->formatted_date ?? $event->date) }}">
                    @error('date')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="time">Time<span class="text-danger">*</span></label>
                    <input type="time" name="time" class="form-control @error('time') is-invalid @enderror" value="{{ old('time', $event->formatted_time ?? $event->time) }}">
                    @error('time')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="location">Location<span class="text-danger">*</span></label>
                    <input type="text" name="location" class="form-control @error('location') is-invalid @enderror" value="{{ old('location', $event->location) }}">
                    @error('location')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="duration">Duration</label>
                    <input type="text" name="duration" class="form-control @error('duration') is-invalid @enderror" value="{{ old('duration', $event->duration) }}">
                    @error('duration')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea name="description" class="form-control @error('description') is-invalid @enderror">{{ old('description', $event->description) }}</textarea>
                    @error('description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="image">Event Image<span class="text-danger">*</span></label>
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" name="image" class="custom-file-input @error('image') is-invalid @enderror" id="image">
                            <label class="custom-file-label" for="image">Choose file</label>
                        </div>
                    </div>
                    @if($event->image)
                        <img src="{{ Storage::url($event->image) }}" alt="{{ $event->title }}" width="100" class="mt-2">
                    @endif
                    <small class="form-text text-muted">Maximum file size: 10MB. Supported formats: JPEG, PNG, JPG, GIF, SVG</small>
                    @error('image')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <!-- Existing Event Moments Section -->
                @if($event->moments->count() > 0)
                <div class="form-group">
                    <label>Existing Event Moments</label>
                    <div class="row">
                        @foreach($event->moments as $moment)
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <img src="{{ Storage::url($moment->image) }}" class="card-img-top" alt="Event Moment" style="height: 150px; object-fit: cover;">
                                <div class="card-body">
                                    <input type="hidden" name="existing_moment_ids[]" value="{{ $moment->id }}">
                                    <p class="card-text">{{ $moment->caption ?: 'No caption' }}</p>
                                    <small class="text-muted">This moment will be kept</small>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
                
                <!-- New Event Moments Section -->
                <div class="form-group">
                    <label>Add New Event Moments</label>
                    <div id="moments-container">
                        <div class="moment-item border p-3 mb-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Moment Image</label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" name="moments[]" class="custom-file-input moment-image" accept="image/*">
                                            <label class="custom-file-label">Choose file</label>
                                        </div>
                                    </div>
                                    <small class="form-text text-muted">Maximum file size: 10MB</small>
                                </div>
                                <div class="col-md-6">
                                    <label>Caption (Optional)</label>
                                    <input type="text" name="moment_captions[]" class="form-control" placeholder="Enter caption for this moment">
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-secondary" id="add-moment">Add Another Moment</button>
                    <small class="form-text text-muted">Upload additional images to showcase event moments. These will be displayed on the website for past events.</small>
                </div>
                
                <!-- SEO Settings Section -->
                <h4 class="mb-3">SEO Settings</h4>
                <div class="form-group">
                    <label for="meta_title">Meta Title</label>
                    <input type="text" name="meta_title" class="form-control @error('meta_title') is-invalid @enderror" id="meta_title" placeholder="Enter meta title (optional)" value="{{ old('meta_title', $event->meta_title) }}" maxlength="255">
                    <small class="form-text text-muted">Recommended: 50-60 characters. Leave empty to use event title.</small>
                    @error('meta_title')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="meta_description">Meta Description</label>
                    <textarea name="meta_description" class="form-control @error('meta_description') is-invalid @enderror" id="meta_description" rows="3" placeholder="Enter meta description (optional)">{{ old('meta_description', $event->meta_description) }}</textarea>
                    <small class="form-text text-muted">Recommended: 150-160 characters. Leave empty to auto-generate from content.</small>
                    @error('meta_description')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="robots_content">Robots Content</label>
                    <input type="text" name="robots_content" class="form-control @error('robots_content') is-invalid @enderror" id="robots_content" 
                        placeholder="index, follow" value="{{ old('robots_content', $event->robots_content) }}">
                    <small class="form-text text-muted">Default: index, follow</small>
                    @error('robots_content')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="canonical_url">Canonical URL</label>
                    <input type="url" name="canonical_url" class="form-control @error('canonical_url') is-invalid @enderror" id="canonical_url" 
                        placeholder="https://example.com" value="{{ old('canonical_url', $event->canonical_url) }}">
                    <small class="form-text text-muted">Leave empty to use current page URL</small>
                    @error('canonical_url')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <!-- Open Graph Tags -->
                <hr>
                <h5 class="text-primary mb-3">Open Graph Tags (Social Media)</h5>
                
                <div class="form-group">
                    <label for="og_title">OG Title</label>
                    <input type="text" name="og_title" class="form-control @error('og_title') is-invalid @enderror" id="og_title" 
                        placeholder="Leave empty to use Meta Title or Event Title" value="{{ old('og_title', $event->og_title) }}">
                    @error('og_title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="og_description">OG Description</label>
                    <textarea name="og_description" class="form-control @error('og_description') is-invalid @enderror" id="og_description" rows="2"
                        placeholder="Leave empty to use Meta Description">{{ old('og_description', $event->og_description) }}</textarea>
                    @error('og_description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="og_image">OG Image URL</label>
                    <input type="url" name="og_image" class="form-control @error('og_image') is-invalid @enderror" id="og_image" 
                        placeholder="https://example.com/image.jpg (Leave empty to use event image)" value="{{ old('og_image', $event->og_image) }}">
                    @error('og_image')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <!-- Twitter Card Tags -->
                <hr>
                <h5 class="text-primary mb-3">Twitter Card Tags</h5>
                
                <div class="form-group">
                    <label for="twitter_title">Twitter Title</label>
                    <input type="text" name="twitter_title" class="form-control @error('twitter_title') is-invalid @enderror" id="twitter_title" 
                        placeholder="Leave empty to use OG Title or Meta Title" value="{{ old('twitter_title', $event->twitter_title) }}">
                    @error('twitter_title')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="twitter_description">Twitter Description</label>
                    <textarea name="twitter_description" class="form-control @error('twitter_description') is-invalid @enderror" id="twitter_description" rows="2"
                        placeholder="Leave empty to use OG Description or Meta Description">{{ old('twitter_description', $event->twitter_description) }}</textarea>
                    @error('twitter_description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="twitter_image">Twitter Image URL</label>
                    <input type="url" name="twitter_image" class="form-control @error('twitter_image') is-invalid @enderror" id="twitter_image" 
                        placeholder="https://example.com/image.jpg (Leave empty to use OG Image or event image)" value="{{ old('twitter_image', $event->twitter_image) }}">
                    @error('twitter_image')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>

                <!-- Custom Scripts Section -->
                <hr>
                <h5 class="text-primary mb-3">Custom Scripts (Advanced)</h5>
                
                <div class="form-group">
                    <label for="header_scripts">Header Scripts</label>
                    <textarea name="header_scripts" 
                              class="form-control @error('header_scripts') is-invalid @enderror" 
                              id="header_scripts" 
                              rows="4"
                              placeholder="<script>...</script> or <meta name=... > or other HTML tags ONLY">{{ old('header_scripts', $event->header_scripts) }}</textarea>
                    <small class="form-text text-muted">
                        <strong class="text-danger">⚠️ IMPORTANT:</strong> Only HTML tags (scripts, meta tags, etc.). <strong>DO NOT</strong> add plain text or descriptions here - they will appear as visible text on the website!<br>
                        <strong>Examples:</strong> <code>&lt;script&gt;...&lt;/script&gt;</code>, <code>&lt;meta name="..."&gt;</code>, <code>&lt;!-- comments --&gt;</code>
                    </small>
                    @error('header_scripts')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group">
                    <label for="body_scripts">Body Scripts (JSON-LD Schema)</label>
                    <textarea name="body_scripts" 
                              class="form-control @error('body_scripts') is-invalid @enderror" 
                              id="body_scripts" 
                              rows="6"
                              placeholder="<script type='application/ld+json'>...</script> or other scripts ONLY">{{ old('body_scripts', $event->body_scripts) }}</textarea>
                    <small class="form-text text-muted">
                        <strong class="text-danger">⚠️ IMPORTANT:</strong> Only HTML/JavaScript code. <strong>DO NOT</strong> add plain text - it will display on the website!<br>
                        <strong>Examples:</strong> JSON-LD schema, Google Analytics code, tracking pixels
                    </small>
                    @error('body_scripts')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
                <a href="{{ route('admin.events.index') }}" class="btn btn-default float-right">Cancel</a>
            </div>
        </form>
    </div>
@stop

@push('js')
    <script>
        $(document).ready(function() {
            $('#speaker_ids').select2({
                width: '100%',
                placeholder: 'Select one or more speakers',
                allowClear: true
            });
            
            // Apply validation styling to Select2 if there's an error
            @if($errors->has('speaker_ids'))
                $('#speaker_ids').next('.select2-container').find('.select2-selection--multiple').addClass('is-invalid');
            @endif
            
            $('.custom-file-input').on('change', function() {
                let fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });
            
            // Add moment functionality with debugging
            console.log('Initializing add-moment button...');
            console.log('Button exists:', $('#add-moment').length);
            console.log('Container exists:', $('#moments-container').length);
            
            $('#add-moment').on('click', function(e) {
                e.preventDefault();
                console.log('Add moment button clicked!');
                
                const momentHtml = `
                    <div class="moment-item border p-3 mb-3">
                        <div class="row">
                            <div class="col-md-6">
                                <label>Moment Image</label>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" name="moments[]" class="custom-file-input moment-image" accept="image/*">
                                        <label class="custom-file-label">Choose file</label>
                                    </div>
                                </div>
                                <small class="form-text text-muted">Maximum file size: 10MB</small>
                            </div>
                            <div class="col-md-5">
                                <label>Caption (Optional)</label>
                                <input type="text" name="moment_captions[]" class="form-control" placeholder="Enter caption for this moment">
                            </div>
                            <div class="col-md-1">
                                <label>&nbsp;</label>
                                <button type="button" class="btn btn-sm btn-danger remove-moment" style="width: 100%;">×</button>
                            </div>
                        </div>
                    </div>
                `;
                
                $('#moments-container').append(momentHtml);
                console.log('New moment added!');
            });
            
            // Remove moment functionality
            $(document).on('click', '.remove-moment', function() {
                $(this).closest('.moment-item').remove();
            });
            
            // Handle moment image file input
            $(document).on('change', '.moment-image', function() {
                let fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });
        });
    </script>
    <style>
        .select2-container--default .select2-selection--multiple {
            min-height: 38px !important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #007bff;
            border: 1px solid #0056b3;
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            margin: 2px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: white;
            margin-right: 5px;
        }
        .moment-item {
            background-color: #f8f9fa;
        }
        .select2-container--default .select2-selection--multiple.is-invalid {
            border-color: #dc3545 !important;
        }
        .select2-container--default.select2-container--focus .select2-selection--multiple.is-invalid {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }
    </style>
@endpush