@extends('layouts.admin')

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

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

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" id="sliderTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab" aria-controls="basic" aria-selected="true">
                            <i class="fas fa-info-circle"></i> {{ __('Basic Information') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="content" aria-selected="false">
                            <i class="fas fa-align-left"></i> {{ __('Content & Text') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="false">
                            <i class="fas fa-images"></i> {{ __('Media & Images') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="design-tab" data-bs-toggle="tab" data-bs-target="#design" type="button" role="tab" aria-controls="design" aria-selected="false">
                            <i class="fas fa-palette"></i> {{ __('Design & Styling') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">
                            <i class="fas fa-cog"></i> {{ __('Settings') }}
                        </button>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content mt-4" id="sliderTabContent">
                    <!-- Basic Information Tab -->
                    <div class="tab-pane fade show active" id="basic" role="tabpanel" aria-labelledby="basic-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('English Content') }}</h5>
                                <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 class="form-group">
                                    <label for="subtitle_en">{{ __('Subtitle (English)') }}</label>
                                    <input type="text" class="form-control @error('subtitle_en') is-invalid @enderror" id="subtitle_en" name="subtitle_en" value="{{ old('subtitle_en') }}">
                                    @error('subtitle_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="description_en">{{ __('Description (English)') }}</label>
                                    <textarea class="form-control @error('description_en') is-invalid @enderror" id="description_en" name="description_en" rows="4">{{ old('description_en') }}</textarea>
                                    @error('description_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('Arabic Content') }}</h5>
                                <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 class="form-group">
                                    <label for="subtitle_ar">{{ __('Subtitle (Arabic)') }}</label>
                                    <input type="text" class="form-control @error('subtitle_ar') is-invalid @enderror" id="subtitle_ar" name="subtitle_ar" value="{{ old('subtitle_ar') }}" dir="rtl">
                                    @error('subtitle_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="description_ar">{{ __('Description (Arabic)') }}</label>
                                    <textarea class="form-control @error('description_ar') is-invalid @enderror" id="description_ar" name="description_ar" rows="4" dir="rtl">{{ old('description_ar') }}</textarea>
                                    @error('description_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Content & Text Tab -->
                    <div class="tab-pane fade" id="content" role="tabpanel" aria-labelledby="content-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('Primary Button (English)') }}</h5>
                                <div class="form-group">
                                    <label for="button_text_en">{{ __('Button Text (English)') }}</label>
                                    <input type="text" class="form-control @error('button_text_en') is-invalid @enderror" id="button_text_en" name="button_text_en" value="{{ old('button_text_en') }}">
                                    @error('button_text_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="button_link">{{ __('Button Link') }}</label>
                                    <input type="url" class="form-control @error('button_link') is-invalid @enderror" id="button_link" name="button_link" value="{{ old('button_link') }}">
                                    @error('button_link')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('Primary Button (Arabic)') }}</h5>
                                <div class="form-group">
                                    <label for="button_text_ar">{{ __('Button Text (Arabic)') }}</label>
                                    <input type="text" class="form-control @error('button_text_ar') is-invalid @enderror" id="button_text_ar" name="button_text_ar" value="{{ old('button_text_ar') }}" dir="rtl">
                                    @error('button_text_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('Secondary Button (English)') }}</h5>
                                <div class="form-group">
                                    <label for="secondary_button_text_en">{{ __('Button Text (English)') }}</label>
                                    <input type="text" class="form-control @error('secondary_button_text_en') is-invalid @enderror" id="secondary_button_text_en" name="secondary_button_text_en" value="{{ old('secondary_button_text_en') }}">
                                    @error('secondary_button_text_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="secondary_button_link">{{ __('Button Link') }}</label>
                                    <input type="url" class="form-control @error('secondary_button_link') is-invalid @enderror" id="secondary_button_link" name="secondary_button_link" value="{{ old('secondary_button_link') }}">
                                    @error('secondary_button_link')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="mb-3">{{ __('Secondary Button (Arabic)') }}</h5>
                                <div class="form-group">
                                    <label for="secondary_button_text_ar">{{ __('Button Text (Arabic)') }}</label>
                                    <input type="text" class="form-control @error('secondary_button_text_ar') is-invalid @enderror" id="secondary_button_text_ar" name="secondary_button_text_ar" value="{{ old('secondary_button_text_ar') }}" dir="rtl">
                                    @error('secondary_button_text_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Media & Images Tab -->
                    <div class="tab-pane fade" id="media" role="tabpanel" aria-labelledby="media-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="desktop_image">{{ __('Desktop Image') }}</label>
                                    <input type="file" class="form-control @error('desktop_image_id') is-invalid @enderror" id="desktop_image" name="desktop_image" accept="image/*">
                                    @error('desktop_image_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Recommended size: 1920x1080px') }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="mobile_image">{{ __('Mobile Image') }}</label>
                                    <input type="file" class="form-control @error('mobile_image_id') is-invalid @enderror" id="mobile_image" name="mobile_image" accept="image/*">
                                    @error('mobile_image_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Recommended size: 768x1024px') }}</small>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="video_media">{{ __('Video Media') }}</label>
                                    <input type="file" class="form-control @error('video_media_id') is-invalid @enderror" id="video_media" name="video_media" accept="video/*">
                                    @error('video_media_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Supported formats: MP4, WebM, OGV') }}</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="overlay_image">{{ __('Overlay Image') }}</label>
                                    <input type="file" class="form-control @error('overlay_image_id') is-invalid @enderror" id="overlay_image" name="overlay_image" accept="image/*">
                                    @error('overlay_image_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">{{ __('Optional overlay image for design effects') }}</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Design & Styling Tab -->
                    <div class="tab-pane fade" id="design" role="tabpanel" aria-labelledby="design-tab">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="content_position">{{ __('Content Position') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('content_position') is-invalid @enderror" id="content_position" name="content_position" required>
                                        <option value="left" {{ old('content_position') == 'left' ? 'selected' : '' }}>{{ __('Left') }}</option>
                                        <option value="center" {{ old('content_position') == 'center' ? 'selected' : '' }}>{{ __('Center') }}</option>
                                        <option value="right" {{ old('content_position') == 'right' ? 'selected' : '' }}>{{ __('Right') }}</option>
                                        <option value="top-left" {{ old('content_position') == 'top-left' ? 'selected' : '' }}>{{ __('Top Left') }}</option>
                                        <option value="top-right" {{ old('content_position') == 'top-right' ? 'selected' : '' }}>{{ __('Top Right') }}</option>
                                        <option value="bottom-left" {{ old('content_position') == 'bottom-left' ? 'selected' : '' }}>{{ __('Bottom Left') }}</option>
                                        <option value="bottom-right" {{ old('content_position') == 'bottom-right' ? 'selected' : '' }}>{{ __('Bottom Right') }}</option>
                                    </select>
                                    @error('content_position')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="text_alignment">{{ __('Text Alignment') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('text_alignment') is-invalid @enderror" id="text_alignment" name="text_alignment" required>
                                        <option value="left" {{ old('text_alignment') == 'left' ? 'selected' : '' }}>{{ __('Left') }}</option>
                                        <option value="center" {{ old('text_alignment') == 'center' ? 'selected' : '' }}>{{ __('Center') }}</option>
                                        <option value="right" {{ old('text_alignment') == 'right' ? 'selected' : '' }}>{{ __('Right') }}</option>
                                    </select>
                                    @error('text_alignment')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="text_color">{{ __('Text Color') }} <span class="text-danger">*</span></label>
                                    <input type="color" class="form-control @error('text_color') is-invalid @enderror" id="text_color" name="text_color" value="{{ old('text_color', '#ffffff') }}" required>
                                    @error('text_color')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="button_style">{{ __('Button Style') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('button_style') is-invalid @enderror" id="button_style" name="button_style" required>
                                        <option value="primary" {{ old('button_style') == 'primary' ? 'selected' : '' }}>{{ __('Primary') }}</option>
                                        <option value="secondary" {{ old('button_style') == 'secondary' ? 'selected' : '' }}>{{ __('Secondary') }}</option>
                                        <option value="outline" {{ old('button_style') == 'outline' ? 'selected' : '' }}>{{ __('Outline') }}</option>
                                        <option value="ghost" {{ old('button_style') == 'ghost' ? 'selected' : '' }}>{{ __('Ghost') }}</option>
                                    </select>
                                    @error('button_style')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="overlay_color">{{ __('Overlay Color') }}</label>
                                    <input type="color" class="form-control @error('overlay_color') is-invalid @enderror" id="overlay_color" name="overlay_color" value="{{ old('overlay_color', '#000000') }}">
                                    @error('overlay_color')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="overlay_opacity">{{ __('Overlay Opacity') }} <span class="text-danger">*</span></label>
                                    <input type="range" class="form-control-range @error('overlay_opacity') is-invalid @enderror" id="overlay_opacity" name="overlay_opacity" min="0" max="1" step="0.1" value="{{ old('overlay_opacity', 0.3) }}" required>
                                    <small class="form-text text-muted">{{ __('Current value: ') }}<span id="opacityValue">{{ old('overlay_opacity', 0.3) }}</span></small>
                                    @error('overlay_opacity')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="animation_type">{{ __('Animation Type') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('animation_type') is-invalid @enderror" id="animation_type" name="animation_type" required>
                                        <option value="fade" {{ old('animation_type') == 'fade' ? 'selected' : '' }}>{{ __('Fade') }}</option>
                                        <option value="slide" {{ old('animation_type') == 'slide' ? 'selected' : '' }}>{{ __('Slide') }}</option>
                                        <option value="zoom" {{ old('animation_type') == 'zoom' ? 'selected' : '' }}>{{ __('Zoom') }}</option>
                                        <option value="parallax" {{ old('animation_type') == 'parallax' ? 'selected' : '' }}>{{ __('Parallax') }}</option>
                                        <option value="none" {{ old('animation_type') == 'none' ? 'selected' : '' }}>{{ __('None') }}</option>
                                    </select>
                                    @error('animation_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Settings Tab -->
                    <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="slider_type">{{ __('Slider Type') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('slider_type') is-invalid @enderror" id="slider_type" name="slider_type" required>
                                        <option value="image" {{ old('slider_type') == 'image' ? 'selected' : '' }}>{{ __('Image') }}</option>
                                        <option value="video" {{ old('slider_type') == 'video' ? 'selected' : '' }}>{{ __('Video') }}</option>
                                        <option value="mixed" {{ old('slider_type') == 'mixed' ? 'selected' : '' }}>{{ __('Mixed') }}</option>
                                        <option value="hero" {{ old('slider_type') == 'hero' ? 'selected' : '' }}>{{ __('Hero') }}</option>
                                        <option value="showcase" {{ old('slider_type') == 'showcase' ? 'selected' : '' }}>{{ __('Showcase') }}</option>
                                    </select>
                                    @error('slider_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="language">{{ __('Language') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('language') is-invalid @enderror" id="language" name="language" required>
                                        <option value="both" {{ old('language') == 'both' ? 'selected' : '' }}>{{ __('Both Languages') }}</option>
                                        <option value="en" {{ old('language') == 'en' ? 'selected' : '' }}>{{ __('English Only') }}</option>
                                        <option value="ar" {{ old('language') == 'ar' ? 'selected' : '' }}>{{ __('Arabic Only') }}</option>
                                    </select>
                                    @error('language')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="target_audience">{{ __('Target Audience') }} <span class="text-danger">*</span></label>
                                    <select class="form-control @error('target_audience') is-invalid @enderror" id="target_audience" name="target_audience" required>
                                        <option value="all" {{ old('target_audience') == 'all' ? 'selected' : '' }}>{{ __('All Visitors') }}</option>
                                        <option value="desktop" {{ old('target_audience') == 'desktop' ? 'selected' : '' }}>{{ __('Desktop Only') }}</option>
                                        <option value="mobile" {{ old('target_audience') == 'mobile' ? 'selected' : '' }}>{{ __('Mobile Only') }}</option>
                                        <option value="new_visitors" {{ old('target_audience') == 'new_visitors' ? 'selected' : '' }}>{{ __('New Visitors') }}</option>
                                        <option value="returning_visitors" {{ old('target_audience') == 'returning_visitors' ? 'selected' : '' }}>{{ __('Returning Visitors') }}</option>
                                    </select>
                                    @error('target_audience')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="sort_order">{{ __('Sort Order') }}</label>
                                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                                    @error('sort_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="start_date">{{ __('Start Date') }}</label>
                                    <input type="datetime-local" class="form-control @error('start_date') is-invalid @enderror" id="start_date" name="start_date" value="{{ old('start_date') }}">
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="end_date">{{ __('End Date') }}</label>
                                    <input type="datetime-local" class="form-control @error('end_date') is-invalid @enderror" id="end_date" name="end_date" value="{{ old('end_date') }}">
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <div class="custom-control custom-checkbox mt-4">
                                        <input type="checkbox" class="custom-control-input @error('is_active') is-invalid @enderror" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_active">{{ __('Active') }}</label>
                                        @error('is_active')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input @error('is_published') is-invalid @enderror" id="is_published" name="is_published" value="1" {{ old('is_published', true) ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="is_published">{{ __('Published') }}</label>
                                        @error('is_published')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="form-group mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> {{ __('Create Slider') }}
                    </button>
                    <a href="{{ route('admin.home-sliders.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> {{ __('Cancel') }}
                    </a>
                </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).ready(function() {
    // Update opacity value display
    $('#overlay_opacity').on('input', function() {
        $('#opacityValue').text($(this).val());
    });

    // File input label update
    $('.custom-file-input').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').html(fileName || '{{ __("Choose file...") }}');
    });

    // Form validation
    $('#sliderForm').on('submit', function(e) {
        // Add any custom validation here if needed
    });
});
</script>
@endpush