@php
    $isEdit = isset($slider);
@endphp

<div class="form-grid">
    <div class="form-group">
        <label class="form-label" for="small_title">Small Title</label>

        <input
            class="form-control"
            id="small_title"
            type="text"
            name="small_title"
            value="{{ old('small_title', $slider->small_title ?? '') }}"
            placeholder="Welcome to CCULB Resort"
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="title">
            Main Title <span class="required">*</span>
        </label>

        <input
            class="form-control"
            id="title"
            type="text"
            name="title"
            value="{{ old('title', $slider->title ?? '') }}"
            required
        >
    </div>

    <div class="form-group full">
        <label class="form-label" for="description">Description</label>

        <textarea
            class="form-control slider-textarea"
            id="description"
            name="description"
            rows="5"
        >{{ old('description', $slider->description ?? '') }}</textarea>
    </div>

    <div class="form-group">
        <label class="form-label" for="button_text">Button Text</label>

        <input
            class="form-control"
            id="button_text"
            type="text"
            name="button_text"
            value="{{ old('button_text', $slider->button_text ?? '') }}"
            placeholder="Explore Resort"
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="button_url">Button URL</label>

        <input
            class="form-control"
            id="button_url"
            type="text"
            name="button_url"
            value="{{ old('button_url', $slider->button_url ?? '') }}"
            placeholder="/rooms"
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="sort_order">
            Sort Order <span class="required">*</span>
        </label>

        <input
            class="form-control"
            id="sort_order"
            type="number"
            name="sort_order"
            value="{{ old('sort_order', $slider->sort_order ?? 0) }}"
            min="0"
            max="9999"
            required
        >
    </div>

    <div class="form-group">
        <label class="form-label" for="image">
            Slider Image
            @if (!$isEdit)
                <span class="required">*</span>
            @endif
        </label>

        @if ($isEdit && $slider->image)
            <div class="slider-preview">
                <img
                    src="{{ asset('storage/'.$slider->image) }}"
                    alt="{{ $slider->title }}"
                >
            </div>
        @endif

        <input
            class="form-control"
            id="image"
            type="file"
            name="image"
            accept=".jpg,.jpeg,.png,.webp"
            {{ $isEdit ? '' : 'required' }}
        >

        <div class="form-help">
            Recommended size: 1920×900 pixels. Maximum 5 MB.
        </div>
    </div>

    <div class="form-group full">
        <label class="form-check">
            <input type="hidden" name="status" value="0">

            <input
                type="checkbox"
                name="status"
                value="1"
                @checked(old('status', $slider->status ?? true))
            >

            <span>
                <strong>Active Slider</strong><br>
                <small class="form-help">
                    Only active sliders will appear on the website.
                </small>
            </span>
        </label>
    </div>
</div>

<div class="form-actions">
    <button class="btn btn-primary" type="submit">
        {{ $isEdit ? 'Update Slider' : 'Create Slider' }}
    </button>

    <a class="btn btn-secondary" href="{{ route('admin.sliders.index') }}">
        Cancel
    </a>
</div>

@push('styles')
    <style>
        .required {
            color: #c53030;
        }

        .slider-textarea {
            min-height: 115px;
            resize: vertical;
        }

        .slider-preview {
            height: 180px;
            margin-bottom: 10px;
            overflow: hidden;
            border-radius: 9px;
            background: #edf1f3;
        }

        .slider-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
@endpush