@extends('layouts.admin')

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

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

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">New Event Details</h3>
        </div>
        <form action="{{ route('admin.events.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <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', [])) ? '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') == 'Online' ? 'selected' : '' }}>Online</option>
                        <option value="Offline" {{ old('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') }}">
                    @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') }}">
                    @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') }}">
                    @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') }}">
                    @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') }}">
                    @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') }}</textarea>
                    @error('description')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                <div class="form-group">
                    <label for="image">Event Image</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>
                    <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" style="display:block;"><strong>{{ $message }}</strong></span>
                    @enderror
                </div>
                
                <!-- Event Moments Section -->
                <div class="form-group">
                    <label>Event Moments (for Past Events)</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 multiple 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') }}" 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') }}</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>
            <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

@section('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
            $('#add-moment').click(function() {
                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);
            });
            
            // 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>
@stop