@extends('layouts.app')

@section('content')
<section class="section light">
    <div class="container">
        <div class="post-header" style="margin-bottom: 40px;">
            <h1 style="font-size: 3rem;">Add New Slide</h1>
            <p>Upload an image and set the text for a new home page slider.</p>
        </div>

        <div class="form-container">
            @if($errors->any())
                <div class="alert-error">
                    <ul style="margin-left: 20px;">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('slider.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>Main Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" placeholder="e.g., Where Kindness Meets Action" required autofocus>
                </div>

                <div class="form-group">
                    <label>Subtitle / Top Label</label>
                    <input type="text" name="subtitle" value="{{ old('subtitle') }}" placeholder="e.g., Empowering Communities">
                </div>

                <div class="form-group">
                    <label>Short Description</label>
                    <textarea name="description" rows="3" placeholder="A brief sentence for the slide...">{{ old('description') }}</textarea>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div class="form-group">
                        <label>Button Text</label>
                        <input type="text" name="button_text" value="{{ old('button_text', 'Learn More') }}" placeholder="e.g., Donate Now">
                    </div>

                    <div class="form-group">
                        <label>Button Link</label>
                        <input type="text" name="button_link" value="{{ old('button_link', '#') }}" placeholder="e.g., /donate">
                    </div>
                </div>

                <div class="form-group">
                    <label>Slider Image</label>
                    <input type="file" name="image" accept="image/*" required>
                    <p style="font-size: 0.8rem; color: #888; margin-top: 10px;">Recommended size: 1920x800px (Max 5MB)</p>
                </div>

                <div class="form-group">
                    <label>Display Order</label>
                    <input type="number" name="order" value="{{ old('order', 0) }}" style="width: 100px;">
                </div>

                <div style="text-align: right; margin-top: 40px;">
                    <a href="{{ route('slider.index') }}" style="margin-right: 20px; color: #666; text-decoration: none; font-weight: 600;">Cancel</a>
                    <button type="submit" class="button button-primary" style="margin: 0; padding: 16px 50px;">Add Slide</button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection