@extends('layouts.admin')

@section('title', __('Create Event'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Create Event') }}</h1>
            <p class="mb-0 text-muted">{{ __('Add a new event to your website') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.events.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Events') }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.events.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data" id="eventForm">
        @csrf

        <!-- Basic Information -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Basic Information') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title_en">{{ __('Title (English)') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title_en') is-invalid @enderror" id="title_en" name="title_en" value="{{ old('title_en') }}" required>
                            @error('title_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title_ar">{{ __('Title (Arabic)') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title_ar') is-invalid @enderror" id="title_ar" name="title_ar" value="{{ old('title_ar') }}" required dir="rtl">
                            @error('title_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- English Slug -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="slug_en">{{ __('Slug (English)') }}</label>
                            <input type="text" class="form-control @error('slug_en') is-invalid @enderror" id="slug_en" name="slug_en" value="{{ old('slug_en') }}" placeholder="{{ __('Auto-generated from title') }}">
                            @error('slug_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Slug -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="slug_ar">{{ __('Slug (Arabic)') }}</label>
                            <input type="text" class="form-control @error('slug_ar') is-invalid @enderror" id="slug_ar" name="slug_ar" value="{{ old('slug_ar') }}" placeholder="{{ __('Auto-generated from title') }}" dir="rtl">
                            @error('slug_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Event Type -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="event_type">{{ __('Event Type') }} <span class="text-danger">*</span></label>
                            <select class="form-control @error('event_type') is-invalid @enderror" id="event_type" name="event_type" required>
                                <option value="">{{ __('Select Type') }}</option>
                                <option value="conference" {{ old('event_type') == 'conference' ? 'selected' : '' }}>{{ __('Conference') }}</option>
                                <option value="workshop" {{ old('event_type') == 'workshop' ? 'selected' : '' }}>{{ __('Workshop') }}</option>
                                <option value="seminar" {{ old('event_type') == 'seminar' ? 'selected' : '' }}>{{ __('Seminar') }}</option>
                                <option value="webinar" {{ old('event_type') == 'webinar' ? 'selected' : '' }}>{{ __('Webinar') }}</option>
                                <option value="training" {{ old('event_type') == 'training' ? 'selected' : '' }}>{{ __('Training') }}</option>
                                <option value="other" {{ old('event_type') == 'other' ? 'selected' : '' }}>{{ __('Other') }}</option>
                            </select>
                            @error('event_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="status">{{ __('Status') }} <span class="text-danger">*</span></label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                                <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>{{ __('Draft') }}</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>{{ __('Published') }}</option>
                                <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>{{ __('Cancelled') }}</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Featured -->
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('Featured Event') }}</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">
                                    {{ __('Mark as featured') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Date & Time -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Date & Time') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Start Date & Time -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="start_datetime">{{ __('Start Date & Time') }} <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control @error('start_datetime') is-invalid @enderror" id="start_datetime" name="start_datetime" value="{{ old('start_datetime') }}" required>
                            @error('start_datetime')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- End Date & Time -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="end_datetime">{{ __('End Date & Time') }} <span class="text-danger">*</span></label>
                            <input type="datetime-local" class="form-control @error('end_datetime') is-invalid @enderror" id="end_datetime" name="end_datetime" value="{{ old('end_datetime') }}" required>
                            @error('end_datetime')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Timezone -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="timezone">{{ __('Timezone') }} <span class="text-danger">*</span></label>
                            <select class="form-control @error('timezone') is-invalid @enderror" id="timezone" name="timezone" required>
                                <option value="">{{ __('Select Timezone') }}</option>
                                <option value="UTC" {{ old('timezone', 'UTC') == 'UTC' ? 'selected' : '' }}>UTC</option>
                                <option value="Asia/Riyadh" {{ old('timezone') == 'Asia/Riyadh' ? 'selected' : '' }}>Asia/Riyadh (GMT+3)</option>
                                <option value="Europe/London" {{ old('timezone') == 'Europe/London' ? 'selected' : '' }}>Europe/London (GMT+0/+1)</option>
                                <option value="America/New_York" {{ old('timezone') == 'America/New_York' ? 'selected' : '' }}>America/New_York (EST/EDT)</option>
                                <option value="Asia/Dubai" {{ old('timezone') == 'Asia/Dubai' ? 'selected' : '' }}>Asia/Dubai (GMT+4)</option>
                            </select>
                            @error('timezone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Registration Deadline -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="registration_deadline">{{ __('Registration Deadline') }}</label>
                            <input type="datetime-local" class="form-control @error('registration_deadline') is-invalid @enderror" id="registration_deadline" name="registration_deadline" value="{{ old('registration_deadline') }}">
                            @error('registration_deadline')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Location & Capacity -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Location & Capacity') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Is Online -->
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_online" name="is_online" value="1" {{ old('is_online') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_online">
                                    {{ __('This is an online event') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Offline Location -->
                <div id="offlineLocation" style="{{ old('is_online') ? 'display: none;' : '' }}">
                    <div class="row">
                        <!-- Venue Name -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="venue_name">{{ __('Venue Name') }}</label>
                                <input type="text" class="form-control @error('venue_name') is-invalid @enderror" id="venue_name" name="venue_name" value="{{ old('venue_name') }}">
                                @error('venue_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Address -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="address">{{ __('Address') }}</label>
                                <input type="text" class="form-control @error('address') is-invalid @enderror" id="address" name="address" value="{{ old('address') }}">
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- City -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="city">{{ __('City') }}</label>
                                <input type="text" class="form-control @error('city') is-invalid @enderror" id="city" name="city" value="{{ old('city') }}">
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Country -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="country">{{ __('Country') }}</label>
                                <input type="text" class="form-control @error('country') is-invalid @enderror" id="country" name="country" value="{{ old('country') }}">
                                @error('country')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Postal Code -->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="postal_code">{{ __('Postal Code') }}</label>
                                <input type="text" class="form-control @error('postal_code') is-invalid @enderror" id="postal_code" name="postal_code" value="{{ old('postal_code') }}">
                                @error('postal_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Online Details -->
                <div id="onlineDetails" style="{{ !old('is_online') ? 'display: none;' : '' }}">
                    <div class="row">
                        <!-- Meeting Link -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="meeting_link">{{ __('Meeting Link') }}</label>
                                <input type="url" class="form-control @error('meeting_link') is-invalid @enderror" id="meeting_link" name="meeting_link" value="{{ old('meeting_link') }}" placeholder="https://zoom.us/...">
                                @error('meeting_link')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Meeting ID -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="meeting_id">{{ __('Meeting ID') }}</label>
                                <input type="text" class="form-control @error('meeting_id') is-invalid @enderror" id="meeting_id" name="meeting_id" value="{{ old('meeting_id') }}">
                                @error('meeting_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Meeting Password -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="meeting_password">{{ __('Meeting Password') }}</label>
                                <input type="text" class="form-control @error('meeting_password') is-invalid @enderror" id="meeting_password" name="meeting_password" value="{{ old('meeting_password') }}">
                                @error('meeting_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Platform -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="platform">{{ __('Platform') }}</label>
                                <select class="form-control @error('platform') is-invalid @enderror" id="platform" name="platform">
                                    <option value="">{{ __('Select Platform') }}</option>
                                    <option value="zoom" {{ old('platform') == 'zoom' ? 'selected' : '' }}>Zoom</option>
                                    <option value="teams" {{ old('platform') == 'teams' ? 'selected' : '' }}>Microsoft Teams</option>
                                    <option value="google_meet" {{ old('platform') == 'google_meet' ? 'selected' : '' }}>Google Meet</option>
                                    <option value="webex" {{ old('platform') == 'webex' ? 'selected' : '' }}>Cisco Webex</option>
                                    <option value="other" {{ old('platform') == 'other' ? 'selected' : '' }}>Other</option>
                                </select>
                                @error('platform')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Max Attendees -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="max_attendees">{{ __('Maximum Attendees') }}</label>
                            <input type="number" class="form-control @error('max_attendees') is-invalid @enderror" id="max_attendees" name="max_attendees" value="{{ old('max_attendees') }}" min="1">
                            <small class="form-text text-muted">{{ __('Leave empty for unlimited') }}</small>
                            @error('max_attendees')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Registration Required -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('Registration Settings') }}</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="registration_required" name="registration_required" value="1" {{ old('registration_required', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="registration_required">
                                    {{ __('Registration required to attend') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Content') }}</h6>
            </div>
            <div class="card-body">
                <!-- English Description -->
                <div class="form-group">
                    <label for="description_en">{{ __('Description (English)') }} <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('description_en') is-invalid @enderror" id="description_en" name="description_en" rows="8" required>{{ old('description_en') }}</textarea>
                    @error('description_en')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Arabic Description -->
                <div class="form-group">
                    <label for="description_ar">{{ __('Description (Arabic)') }} <span class="text-danger">*</span></label>
                    <textarea class="form-control @error('description_ar') is-invalid @enderror" id="description_ar" name="description_ar" rows="8" required dir="rtl">{{ old('description_ar') }}</textarea>
                    @error('description_ar')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Summary -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Summary & Excerpt') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Summary -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="short_description_en">{{ __('Short Description (English)') }}</label>
                            <textarea class="form-control @error('short_description_en') is-invalid @enderror" id="short_description_en" name="short_description_en" rows="4" placeholder="{{ __('Brief description for event listing...') }}">{{ old('short_description_en') }}</textarea>
                            @error('short_description_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Summary -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="short_description_ar">{{ __('Short Description (Arabic)') }}</label>
                            <textarea class="form-control @error('short_description_ar') is-invalid @enderror" id="short_description_ar" name="short_description_ar" rows="4" placeholder="{{ __('Brief description for event listing...') }}" dir="rtl">{{ old('short_description_ar') }}</textarea>
                            @error('short_description_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Media -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('Media') }}</h6>
            </div>
            <div class="card-body">
                <!-- Featured Image -->
                <div class="form-group">
                    <label for="featured_image">{{ __('Featured Image') }}</label>
                    <input type="file" class="form-control-file @error('featured_image') is-invalid @enderror" id="featured_image" name="featured_image" accept="image/*">
                    <small class="form-text text-muted">{{ __('Recommended size: 800x600px. Max file size: 2MB') }}</small>
                    @error('featured_image')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Gallery Images -->
                <div class="form-group">
                    <label for="gallery_images">{{ __('Gallery Images') }}</label>
                    <input type="file" class="form-control-file @error('gallery_images') is-invalid @enderror" id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                    <small class="form-text text-muted">{{ __('Select multiple images. Max 10 images, 2MB each') }}</small>
                    @error('gallery_images')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- SEO & Settings -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('SEO & Settings') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Meta Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_title_en">{{ __('Meta Title (English)') }}</label>
                            <input type="text" class="form-control @error('meta_title_en') is-invalid @enderror" id="meta_title_en" name="meta_title_en" value="{{ old('meta_title_en') }}" maxlength="60">
                            <small class="form-text text-muted">{{ __('60 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_title_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Meta Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_title_ar">{{ __('Meta Title (Arabic)') }}</label>
                            <input type="text" class="form-control @error('meta_title_ar') is-invalid @enderror" id="meta_title_ar" name="meta_title_ar" value="{{ old('meta_title_ar') }}" maxlength="60" dir="rtl">
                            <small class="form-text text-muted">{{ __('60 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_title_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- English Meta Description -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_description_en">{{ __('Meta Description (English)') }}</label>
                            <textarea class="form-control @error('meta_description_en') is-invalid @enderror" id="meta_description_en" name="meta_description_en" rows="3" maxlength="160">{{ old('meta_description_en') }}</textarea>
                            <small class="form-text text-muted">{{ __('160 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_description_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Meta Description -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_description_ar">{{ __('Meta Description (Arabic)') }}</label>
                            <textarea class="form-control @error('meta_description_ar') is-invalid @enderror" id="meta_description_ar" name="meta_description_ar" rows="3" maxlength="160" dir="rtl">{{ old('meta_description_ar') }}</textarea>
                            <small class="form-text text-muted">{{ __('160 characters max. Auto-generated if empty.') }}</small>
                            @error('meta_description_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Tags -->
                <div class="form-group">
                    <label for="tags">{{ __('Tags') }}</label>
                    <input type="text" class="form-control @error('tags') is-invalid @enderror" id="tags" name="tags" value="{{ old('tags') }}" placeholder="{{ __('Enter tags separated by commas') }}">
                    <small class="form-text text-muted">{{ __('Separate tags with commas') }}</small>
                    @error('tags')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="card shadow mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.events.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">{{ __('Cancel') }}</a>
                    <div>
                        <button type="button" class="btn btn-outline-primary" id="saveDraft">{{ __('Save as Draft') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Create Event') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize TinyMCE for English description
    tinymce.init({
        selector: '#description_en',
        height: 400,
        menubar: false,
        plugins: 'lists link image code',
        toolbar: 'bold italic underline | bullist numlist | link image | code',
        images_upload_handler: function(blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('image', blobInfo.blob(), blobInfo.filename());

            $.ajax({
                url: '{{ route("admin.events.upload-image", ["locale" => app()->getLocale()]) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure('Upload failed');
                    }
                },
                error: function() {
                    failure('Upload failed');
                }
            });
        }
    });

    // Initialize TinyMCE for Arabic description
    tinymce.init({
        selector: '#description_ar',
        height: 400,
        menubar: false,
        plugins: 'lists link image code',
        toolbar: 'bold italic underline | bullist numlist | link image | code',
        directionality: 'rtl',
        language: 'ar',
        images_upload_handler: function(blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('image', blobInfo.blob(), blobInfo.filename());

            $.ajax({
                url: '{{ route("admin.events.upload-image", ["locale" => app()->getLocale()]) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure('Upload failed');
                    }
                },
                error: function() {
                    failure('Upload failed');
                }
            });
        }
    });

    // Auto-generate slugs
    $('#title_en').on('input', function() {
        if (!$('#slug_en').val()) {
            $('#slug_en').val(slugify($(this).val()));
        }
    });

    $('#title_ar').on('input', function() {
        if (!$('#slug_ar').val()) {
            $('#slug_ar').val(slugify($(this).val()));
        }
    });

    // Auto-generate meta titles
    $('#title_en').on('input', function() {
        if (!$('#meta_title_en').val()) {
            $('#meta_title_en').val($(this).val().substring(0, 60));
        }
    });

    $('#title_ar').on('input', function() {
        if (!$('#meta_title_ar').val()) {
            $('#meta_title_ar').val($(this).val().substring(0, 60));
        }
    });

    // Auto-generate meta descriptions
    $('#short_description_en').on('input', function() {
        if (!$('#meta_description_en').val()) {
            $('#meta_description_en').val($(this).val().substring(0, 160));
        }
    });

    $('#short_description_ar').on('input', function() {
        if (!$('#meta_description_ar').val()) {
            $('#meta_description_ar').val($(this).val().substring(0, 160));
        }
    });

    // Toggle online/offline fields
    $('#is_online').on('change', function() {
        if ($(this).is(':checked')) {
            $('#offlineLocation').hide();
            $('#onlineDetails').show();
        } else {
            $('#offlineLocation').show();
            $('#onlineDetails').hide();
        }
    });

    // Save as draft
    $('#saveDraft').on('click', function() {
        $('#status').val('draft');
        $('#eventForm').submit();
    });

    // Slugify function
    function slugify(text) {
        return text.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');
    }
});
</script>
@endpush