@extends('layouts.admin')

@section('title', 'Create 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">Create Slider</h1>
        <p class="page-subtitle">Add a new image slider to the homepage</p>
    </div>
</div>

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

            <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') }}" required placeholder="e.g. Banking Made Simple">
                    @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', 0) }}" min="0" placeholder="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" placeholder="e.g. Experience the future of digital banking.">{{ old('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') }}" placeholder="e.g. Get Started">
                </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') }}" placeholder="e.g. /register (leave empty for register page)">
                </div>
            </div>

            <div class="form-group">
                <label for="image" class="form-label">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" required>
                @error('image')
                <div class="form-error">{{ $message }}</div>
                @enderror
                <span class="form-help">Recommended: 1920x600px. Max 5MB. JPEG, PNG, GIF, WebP.</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', '1') == '1' ? '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>
                    Create Slider
                </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