@extends('layouts.admin')

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

@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 New Slider') }}</h1>
            <p class="mb-0 text-muted">{{ __('Create a new slider for your website') }}</p>
        </div>
        <a href="{{ route('admin.slider.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> {{ __('Back to List') }}
        </a>
    </div>

    <!-- Create Form -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Slider Details') }}</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.slider.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <!-- Basic Information -->
                    <div class="col-lg-8">
                        <div class="form-group">
                            <label for="name">{{ __('Name') }} <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="description">{{ __('Description') }}</label>
                            <textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="type">{{ __('Type') }} <span class="text-danger">*</span></label>
                                    <select name="type" id="type" class="form-control @error('type') is-invalid @enderror" required>
                                        <option value="">{{ __('Select Type') }}</option>
                                        <option value="hero" {{ old('type') == 'hero' ? 'selected' : '' }}>{{ __('Hero') }}</option>
                                        <option value="banner" {{ old('type') == 'banner' ? 'selected' : '' }}>{{ __('Banner') }}</option>
                                        <option value="carousel" {{ old('type') == 'carousel' ? 'selected' : '' }}>{{ __('Carousel') }}</option>
                                        <option value="gallery" {{ old('type') == 'gallery' ? 'selected' : '' }}>{{ __('Gallery') }}</option>
                                        <option value="general" {{ old('type') == 'general' ? 'selected' : '' }}>{{ __('General') }}</option>
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="language">{{ __('Language') }} <span class="text-danger">*</span></label>
                                    <select name="language" id="language" class="form-control @error('language') is-invalid @enderror" required>
                                        <option value="">{{ __('Select Language') }}</option>
                                        <option value="en" {{ old('language') == 'en' ? 'selected' : '' }}>{{ __('English') }}</option>
                                        <option value="ar" {{ old('language') == 'ar' ? 'selected' : '' }}>{{ __('Arabic') }}</option>
                                        <option value="all" {{ old('language') == 'all' ? 'selected' : '' }}>{{ __('All Languages') }}</option>
                                    </select>
                                    @error('language')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="target_audience">{{ __('Target Audience') }}</label>
                                    <input type="text" name="target_audience" id="target_audience" class="form-control @error('target_audience') is-invalid @enderror" value="{{ old('target_audience') }}">
                                    @error('target_audience')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="priority">{{ __('Priority') }}</label>
                                    <input type="number" name="priority" id="priority" class="form-control @error('priority') is-invalid @enderror" value="{{ old('priority', 0) }}" min="0" max="100">
                                    @error('priority')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Scheduling -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="start_date">{{ __('Start Date') }}</label>
                                    <input type="datetime-local" name="start_date" id="start_date" class="form-control @error('start_date') is-invalid @enderror" value="{{ old('start_date') }}">
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="end_date">{{ __('End Date') }}</label>
                                    <input type="datetime-local" name="end_date" id="end_date" class="form-control @error('end_date') is-invalid @enderror" value="{{ old('end_date') }}">
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="is_published">{{ __('Published') }}</label>
                            <div class="form-check">
                                <input type="checkbox" name="is_published" id="is_published" class="form-check-input @error('is_published') is-invalid @enderror" value="1" {{ old('is_published', 1) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_published">{{ __('Make this slider published') }}</label>
                            </div>
                            @error('is_published')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Preview & Actions -->
                    <div class="col-lg-4">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title">{{ __('Preview') }}</h6>
                                <div class="border p-3 text-center bg-white" style="min-height: 200px;">
                                    <i class="fas fa-images fa-3x text-muted mb-2"></i>
                                    <p class="text-muted mb-0">{{ __('Slider preview will appear here') }}</p>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-save"></i> {{ __('Create Slider') }}
                                    </button>
                                    <a href="{{ route('admin.slider.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                                        {{ __('Cancel') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</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>
document.addEventListener('DOMContentLoaded', function() {
    // Date validation
    const startDate = document.getElementById('start_date');
    const endDate = document.getElementById('end_date');

    if (startDate && endDate) {
        endDate.addEventListener('change', function() {
            if (startDate.value && this.value < startDate.value) {
                alert('{{ __("End date must be after start date") }}');
                this.value = '';
            }
        });
    }

    console.log('Slider Create loaded');
});
</script>
@endpush