@extends('layouts.admin')

@section('title', __('Edit 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">{{ __('Edit Slider') }}</h1>
            <p class="mb-0 text-muted">{{ __('Edit slider details and manage items') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.slider.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary mr-2">
                <i class="fas fa-arrow-left"></i> {{ __('Back to List') }}
            </a>
            <a href="{{ route('admin.slider.show', ['locale' => app()->getLocale(), 'slider' => $slider]) }}" class="btn btn-info">
                <i class="fas fa-eye"></i> {{ __('View Slider') }}
            </a>
        </div>
    </div>

    <!-- Edit 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.update', ['locale' => app()->getLocale(), 'slider' => $slider]) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <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', $slider->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', $slider->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', $slider->type) == 'hero' ? 'selected' : '' }}>{{ __('Hero') }}</option>
                                        <option value="banner" {{ old('type', $slider->type) == 'banner' ? 'selected' : '' }}>{{ __('Banner') }}</option>
                                        <option value="carousel" {{ old('type', $slider->type) == 'carousel' ? 'selected' : '' }}>{{ __('Carousel') }}</option>
                                        <option value="gallery" {{ old('type', $slider->type) == 'gallery' ? 'selected' : '' }}>{{ __('Gallery') }}</option>
                                        <option value="general" {{ old('type', $slider->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', $slider->language) == 'en' ? 'selected' : '' }}>{{ __('English') }}</option>
                                        <option value="ar" {{ old('language', $slider->language) == 'ar' ? 'selected' : '' }}>{{ __('Arabic') }}</option>
                                        <option value="all" {{ old('language', $slider->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', $slider->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', $slider->priority) }}" 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', $slider->start_date ? $slider->start_date->format('Y-m-d\TH:i') : '') }}">
                                    @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', $slider->end_date ? $slider->end_date->format('Y-m-d\TH:i') : '') }}">
                                    @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', $slider->is_published) ? '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> {{ __('Update Slider') }}
                                    </button>
                                    <a href="{{ route('admin.slider.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                                        {{ __('Cancel') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Slider Stats -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h6 class="m-0 font-weight-bold text-primary">{{ __('Statistics') }}</h6>
                            </div>
                            <div class="card-body">
                                <div class="row text-center">
                                    <div class="col-6">
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $slider->items()->count() }}</div>
                                        <div class="text-xs text-muted">{{ __('Items') }}</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($slider->analytics()->sum('views') ?? 0) }}</div>
                                        <div class="text-xs text-muted">{{ __('Views') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Slider Items Management -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Slider Items') }}</h6>
            <a href="{{ route('admin.slider.item.create', ['locale' => app()->getLocale(), 'slider' => $slider]) }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> {{ __('Add Item') }}
            </a>
        </div>
        <div class="card-body">
            @if($slider->items->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>{{ __('Order') }}</th>
                                <th>{{ __('Title') }}</th>
                                <th>{{ __('Image') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($slider->items->sortBy('sort_order') as $item)
                            <tr>
                                <td>{{ $item->sort_order }}</td>
                                <td>
                                    <strong>{{ $item->title_en ?: $item->title_ar }}</strong>
                                    @if($item->description_en || $item->description_ar)
                                        <br><small class="text-muted">{{ Str::limit($item->description_en ?: $item->description_ar, 50) }}</small>
                                    @endif
                                </td>
                                <td>
                                    @if($item->image)
                                        <img src="{{ $item->image->url ?? '#' }}" alt="" class="img-thumbnail" style="width: 60px; height: 40px; object-fit: cover;">
                                    @else
                                        <span class="text-muted">{{ __('No image') }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($item->is_active)
                                        <span class="badge badge-success">{{ __('Active') }}</span>
                                    @else
                                        <span class="badge badge-secondary">{{ __('Inactive') }}</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.slider.item.edit', ['locale' => app()->getLocale(), 'slider' => $slider, 'item' => $item]) }}" class="btn btn-sm btn-primary" title="{{ __('Edit') }}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('admin.slider.item.show', ['locale' => app()->getLocale(), 'slider' => $slider, 'item' => $item]) }}" class="btn btn-sm btn-info" title="{{ __('View') }}">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <form action="{{ route('admin.slider.item.destroy', ['locale' => app()->getLocale(), 'slider' => $slider, 'item' => $item]) }}" method="POST" class="d-inline" onsubmit="return confirm('{{ __('Are you sure you want to delete this item?') }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger" title="{{ __('Delete') }}">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-layer-group fa-4x text-muted mb-4"></i>
                    <h4 class="text-muted">{{ __('No items found') }}</h4>
                    <p class="text-muted mb-4">{{ __('Add items to make your slider functional') }}</p>
                    <a href="{{ route('admin.slider.item.create', ['locale' => app()->getLocale(), 'slider' => $slider]) }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> {{ __('Add First Item') }}
                    </a>
                </div>
            @endif
        </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 Edit loaded');
});
</script>
@endpush