@extends('adminlte::page')

@section('title', __('title.edit_slider'))

@section('content_top_nav_right')
    <x-navbar-language-widget />
@endsection

@section('plugins.Flag', true)
@section('plugins.BsCustomFileInput', true)
@section('plugins.Pace', true)
@section('plugins.Toastr', true)
@section('plugins.Sweetalert2', true)

@section('content_header')
    <x-breadcrumbs title="{{ __('title.edit_slider') }}" currentActive="{{ __('title.edit') }}" :addLink="[__('title.sliders') => route('sliders.index')]" />
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-default">
                <form action="{{ route('sliders.update', $slider->id) }}" method="POST" role="form" enctype="multipart/form-data" id="sliderForm">
                    @method('PUT')
                    @csrf
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="title">{{ __('form.title') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                        id="title" placeholder="{{ __('form.placeholder_title') }}" value="{{ old('title', $slider->title) }}" autofocus required>
                                    @error('title')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>

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

                                <div class="form-group">
                                    <label for="link">{{ __('form.link') }} ({{ __('form.optional') }})</label>
                                    <input type="url" name="link" class="form-control @error('link') is-invalid @enderror"
                                        id="link" placeholder="https://example.com" value="{{ old('link', $slider->link) }}">
                                    @error('link')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="image">{{ __('form.image') }}</label>
                                    <div class="custom-file">
                                        <input type="file" name="image" class="custom-file-input @error('image') is-invalid @enderror"
                                            id="image" accept="image/*">
                                        <label class="custom-file-label" for="image">{{ __('form.choose_file') }}</label>
                                        @error('image')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <small class="form-text text-muted">{{ __('form.max_file_size') }}: 1MB. {{ __('form.leave_empty_to_keep_current') }}</small>
                                </div>

                                @if($slider->image)
                                <div class="form-group">
                                    <label>{{ __('form.current_image') }}</label>
                                    <div>
                                        <img src="{{ asset('storage/images/' . $slider->image) }}" alt="{{ $slider->title }}" class="img-fluid" style="max-height: 200px;">
                                    </div>
                                </div>
                                @endif

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="order">{{ __('form.order') }}</label>
                                            <input type="number" name="order" class="form-control @error('order') is-invalid @enderror"
                                                id="order" min="0" value="{{ old('order', $slider->order) }}">
                                            @error('order')
                                                <div class="invalid-feedback">
                                                    {{ $message }}
                                                </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="is_active">{{ __('form.status') }}</label>
                                            <div class="form-check">
                                                <input type="checkbox" name="is_active" class="form-check-input" id="is_active" value="1" 
                                                    {{ old('is_active', $slider->is_active) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="is_active">
                                                    {{ __('table.active') }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">{{ __('title.preview') }}</h3>
                                </div>
                                <div class="card-body">
                                    <div id="preview-container">
                                        <div style="position: relative; max-height: 200px; overflow: hidden; border-radius: 4px;">
                                            <img id="preview-image" src="{{ $image ? $image : asset('storage/images/' . $slider->image) }}" 
                                                class="d-block w-100" alt="Preview" style="max-height: 200px; object-fit: cover; width: 100%;">
                                            <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 15px;">
                                                <h5 id="preview-title" style="color: white; margin: 0; font-size: 1rem;">{{ $slider->title }}</h5>
                                                <p id="preview-description" style="color: white; margin: 5px 0 0 0; font-size: 0.875rem;">{{ $slider->description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">{{ __('button.update') }}</button>
                        <a href="{{ route('sliders.index') }}" class="btn btn-secondary">{{ __('button.cancel') }}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@push('js')
    @include('layouts.partials._notification')
    @include('layouts.partials._switch_lang')
    @include('admin.sliders._script')
    <script>
        $(function() {
            bsCustomFileInput.init();
        });
    </script>
@endpush

@section('footer')
    @include('layouts.partials._footer')
@stop