@extends('layouts.admin')

@section('title', 'Edit Slider')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.sliders') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Sliders
        </a>
        <h1 class="page-title">Edit Slider</h1>
        <p class="page-subtitle">Update slider: {{ $slider->title }}</p>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.sliders.update', $slider) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="form-grid form-grid-2">
                <div class="form-group">
                    <label for="title" class="form-label">Title <span class="required">*</span></label>
                    <input type="text" id="title" name="title" class="form-input @error('title') is-invalid @enderror" value="{{ old('title', $slider->title) }}" required>
                    @error('title')
                    <div class="form-error">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="sort_order" class="form-label">Sort Order</label>
                    <input type="number" id="sort_order" name="sort_order" class="form-input" value="{{ old('sort_order', $slider->sort_order) }}" min="0">
                    <span class="form-help">Lower numbers appear first</span>
                </div>
            </div>

            <div class="form-group">
                <label for="subtitle" class="form-label">Subtitle</label>
                <textarea id="subtitle" name="subtitle" class="form-input" rows="2">{{ old('subtitle', $slider->subtitle) }}</textarea>
            </div>

            <div class="form-grid form-grid-2">
                <div class="form-group">
                    <label for="button_text" class="form-label">Button Text</label>
                    <input type="text" id="button_text" name="button_text" class="form-input" value="{{ old('button_text', $slider->button_text) }}">
                </div>

                <div class="form-group">
                    <label for="button_url" class="form-label">Button URL</label>
                    <input type="text" id="button_url" name="button_url" class="form-input" value="{{ old('button_url', $slider->button_url) }}">
                </div>
            </div>

            @if($slider->image)
            <div class="form-group">
                <label class="form-label">Current Image</label>
                <div style="margin-top:4px;">
                    <img src="{{ asset($slider->image) }}" alt="{{ $slider->title }}" style="max-width:100%; max-height:200px; border-radius:10px; object-fit:cover;">
                </div>
            </div>
            @endif

            <div class="form-group">
                <label for="image" class="form-label">{{ $slider->image ? 'Replace Image' : 'Image' }} {{ $slider->image ? '' : '<span class="required">*</span>' }}</label>
                <input type="file" id="image" name="image" class="form-input @error('image') is-invalid @enderror" accept="image/jpeg,image/png,image/gif,image/webp" {{ $slider->image ? '' : 'required' }}>
                @error('image')
                <div class="form-error">{{ $message }}</div>
                @enderror
                <span class="form-help">Recommended: 1920x600px. Max 5MB.</span>
                <div id="imagePreview" style="margin-top:12px; display:none;">
                    <img id="imagePreviewImg" src="" alt="Preview" style="max-width:100%; max-height:200px; border-radius:10px; object-fit:cover;">
                </div>
            </div>

            <div class="form-group">
                <label class="toggle-switch">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $slider->is_active) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
                <span style="display:inline-block; margin-left:10px; font-size:0.875rem; font-weight:500; color:#495057;">Active (visible on homepage)</span>
            </div>

            <div class="form-actions" style="margin-top:24px;">
                <button type="submit" class="btn btn-primary">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8l3 3 5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    Save Changes
                </button>
                <a href="{{ route('admin.sliders') }}" class="btn btn-outline">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('image').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(ev) {
            document.getElementById('imagePreviewImg').src = ev.target.result;
            document.getElementById('imagePreview').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});
</script>
@endpush
@endsection