@extends('layouts.admin')

@section('title', 'Edit Slider: ' . $slider->name)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Edit Slider: {{ $slider->name }}</h1>
    <a href="{{ route('admin.sliders.index', ['domain_id' => $slider->domain_id]) }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to Sliders
    </a>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-images me-2"></i>Slider Information
                </h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.sliders.update', $slider) }}" method="POST" id="sliderForm">
                    @csrf
                    @method('PUT')

                    <!-- Domain Selection -->
                    <div class="mb-4">
                        <label for="domain_id" class="form-label required">Domain</label>
                        <select name="domain_id" id="domain_id" class="form-select @error('domain_id') is-invalid @enderror" required>
                            <option value="">Select Domain</option>
                            @foreach($domains as $domain)
                                <option value="{{ $domain->id }}" {{ $slider->domain_id == $domain->id ? 'selected' : '' }}>
                                    {{ $domain->full_domain }}
                                </option>
                            @endforeach
                        </select>
                        @error('domain_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Slider Name -->
                    <div class="mb-4">
                        <label for="name" class="form-label required">Slider Name</label>
                        <input type="text"
                               name="name"
                               id="name"
                               class="form-control @error('name') is-invalid @enderror"
                               placeholder="Enter slider name"
                               value="{{ old('name', $slider->name) }}"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">A descriptive name for your slider</div>
                    </div>

                    <!-- Slider Slug -->
                    <div class="mb-4">
                        <label for="slug" class="form-label">Slug</label>
                        <input type="text"
                               name="slug"
                               id="slug"
                               class="form-control @error('slug') is-invalid @enderror"
                               placeholder="auto-generated-slug"
                               value="{{ old('slug', $slider->slug) }}">
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">URL-friendly identifier. Auto-generated if left empty.</div>
                    </div>

                    <!-- Description -->
                    <div class="mb-4">
                        <label for="description" class="form-label">Description</label>
                        <textarea name="description"
                                  id="description"
                                  class="form-control @error('description') is-invalid @enderror"
                                  rows="3"
                                  placeholder="Optional description for this slider">{{ old('description', $slider->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Optional description to help identify this slider</div>
                    </div>

                    <!-- Settings Row -->
                    <div class="row">
                        <div class="col-md-6">
                            <!-- Sort Order -->
                            <div class="mb-4">
                                <label for="sort_order" class="form-label">Sort Order</label>
                                <input type="number"
                                       name="sort_order"
                                       id="sort_order"
                                       class="form-control @error('sort_order') is-invalid @enderror"
                                       placeholder="0"
                                       value="{{ old('sort_order', $slider->sort_order) }}"
                                       min="0">
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Order in which sliders appear (lower numbers first)</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <!-- Active Status -->
                            <div class="mb-4">
                                <label class="form-label">Status</label>
                                <div class="form-check form-switch">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox"
                                           name="is_active"
                                           id="is_active"
                                           class="form-check-input"
                                           value="1"
                                           {{ old('is_active', $slider->is_active) ? 'checked' : '' }}>
                                    <label for="is_active" class="form-check-label">
                                        Active
                                    </label>
                                </div>
                                <div class="form-text">Inactive sliders won't be displayed on the website</div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                        <a href="{{ route('admin.sliders.index', ['domain_id' => $slider->domain_id]) }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-2"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-modern-primary">
                            <i class="bi bi-check-circle me-2"></i>Update Slider
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Auto-generate slug from name
    document.getElementById('name').addEventListener('input', function() {
        const name = this.value;
        const slug = name.toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
            .replace(/\s+/g, '-') // Replace spaces with hyphens
            .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
            .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens

        document.getElementById('slug').value = slug;
    });

    // Form validation
    document.getElementById('sliderForm').addEventListener('submit', function(e) {
        const name = document.getElementById('name').value.trim();
        const domainId = document.getElementById('domain_id').value;

        if (!name) {
            e.preventDefault();
            alert('Please enter a slider name.');
            document.getElementById('name').focus();
            return false;
        }

        if (!domainId) {
            e.preventDefault();
            alert('Please select a domain.');
            document.getElementById('domain_id').focus();
            return false;
        }
    });
</script>
@endpush
@endsection