@extends('layouts.admin')

@section('title', 'Add Slider | Admin')

@section('content')

<div class="container py-5">

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>
            <h1 class="fw-bold mb-1">Add Slider</h1>
            <p class="text-muted mb-0">
                Create an image or video hero slide.
            </p>
        </div>

        <a
            href="{{ route('admin.sliders.index') }}"
            class="btn btn-outline-secondary"
        >
            Back to Sliders
        </a>

    </div>


    @if ($errors->any())

        <div class="alert alert-danger">

            <strong>Please fix the following:</strong>

            <ul class="mb-0 mt-2">

                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach

            </ul>

        </div>

    @endif


    <div class="card border-0 shadow-sm">

        <div class="card-body p-4 p-lg-5">

            <form
                method="POST"
                action="{{ route('admin.sliders.store') }}"
                enctype="multipart/form-data"
                id="sliderForm"
            >

                @csrf

                <div class="row g-4">

                    {{-- Title --}}
                    <div class="col-md-6">

                        <label
                            for="title"
                            class="form-label"
                        >
                            Title
                        </label>

                        <input
                            type="text"
                            id="title"
                            name="title"
                            value="{{ old('title') }}"
                            class="form-control"
                            maxlength="150"
                            required
                        >

                    </div>


                    {{-- Subtitle --}}
                    <div class="col-md-6">

                        <label
                            for="subtitle"
                            class="form-label"
                        >
                            Subtitle
                        </label>

                        <input
                            type="text"
                            id="subtitle"
                            name="subtitle"
                            value="{{ old('subtitle') }}"
                            class="form-control"
                            maxlength="500"
                        >

                    </div>


                    {{-- Media Type --}}
                    <div class="col-md-4">

                        <label
                            for="media_type"
                            class="form-label"
                        >
                            Media Type
                        </label>

                        <select
                            id="media_type"
                            name="media_type"
                            class="form-select"
                            required
                        >

                            <option
                                value="image"
                                {{ old('media_type', 'image') === 'image' ? 'selected' : '' }}
                            >
                                Image
                            </option>

                            <option
                                value="video"
                                {{ old('media_type') === 'video' ? 'selected' : '' }}
                            >
                                Video
                            </option>

                        </select>

                    </div>


                    {{-- Media --}}
                    <div class="col-md-8">

                        <label
                            for="media"
                            class="form-label"
                        >
                            Upload Media
                        </label>

                        <input
                            type="file"
                            id="media"
                            name="media"
                            class="form-control"
                            accept="image/jpeg,image/png,image/webp,video/mp4,video/webm"
                            required
                        >

                        <div class="form-text">
                            Images: JPG, PNG, WebP.
                            Videos: MP4, WebM.
                            Maximum 50 MB.
                        </div>

                    </div>


                    {{-- Preview --}}
                    <div class="col-12">

                        <div
                            id="mediaPreviewContainer"
                            class="d-none"
                        >

                            <label class="form-label">
                                Preview
                            </label>

                            <div
                                class="border rounded-4 p-2 bg-light"
                                style="max-width: 800px;"
                            >

                                <img
                                    id="imagePreview"
                                    src=""
                                    alt="Preview"
                                    class="img-fluid rounded-3 d-none"
                                    style="max-height: 350px; width: 100%; object-fit: cover;"
                                >

                                <video
                                    id="videoPreview"
                                    class="w-100 rounded-3 d-none"
                                    style="max-height: 350px;"
                                    controls
                                ></video>

                            </div>

                        </div>

                    </div>


                    {{-- Button Text --}}
                    <div class="col-md-6">

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

                        <input
                            type="text"
                            id="button_text"
                            name="button_text"
                            value="{{ old('button_text') }}"
                            class="form-control"
                            maxlength="100"
                            placeholder="Explore Courses"
                        >

                    </div>


                    {{-- Button URL --}}
                    <div class="col-md-6">

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

                        <input
                            type="text"
                            id="button_url"
                            name="button_url"
                            value="{{ old('button_url') }}"
                            class="form-control"
                            maxlength="500"
                            placeholder="/courses"
                        >

                    </div>


                    {{-- Sort Order --}}
                    <div class="col-md-4">

                        <label
                            for="sort_order"
                            class="form-label"
                        >
                            Sort Order
                        </label>

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

                    </div>


                    {{-- Status --}}
                    <div class="col-md-4">

                        <label
                            for="status"
                            class="form-label"
                        >
                            Status
                        </label>

                        <select
                            id="status"
                            name="status"
                            class="form-select"
                            required
                        >

                            <option
                                value="1"
                                {{ old('status', '1') === '1' ? 'selected' : '' }}
                            >
                                Active
                            </option>

                            <option
                                value="0"
                                {{ old('status') === '0' ? 'selected' : '' }}
                            >
                                Inactive
                            </option>

                        </select>

                    </div>


                    <div class="col-12">

                        <hr class="my-2">

                        <button
                            type="submit"
                            class="btn btn-primary px-4"
                        >
                            Create Slider
                        </button>

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

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const mediaInput = document.getElementById('media');
    const mediaType = document.getElementById('media_type');

    const previewContainer =
        document.getElementById('mediaPreviewContainer');

    const imagePreview =
        document.getElementById('imagePreview');

    const videoPreview =
        document.getElementById('videoPreview');


    function resetPreview() {

        imagePreview.classList.add('d-none');
        videoPreview.classList.add('d-none');

        imagePreview.removeAttribute('src');
        videoPreview.removeAttribute('src');

        videoPreview.load();

        previewContainer.classList.add('d-none');
    }


    function updatePreview() {

        const file = mediaInput.files[0];

        resetPreview();

        if (!file) {
            return;
        }

        const objectUrl = URL.createObjectURL(file);

        previewContainer.classList.remove('d-none');

        if (mediaType.value === 'image') {

            imagePreview.src = objectUrl;
            imagePreview.classList.remove('d-none');

        } else {

            videoPreview.src = objectUrl;
            videoPreview.classList.remove('d-none');

        }
    }


    mediaInput.addEventListener('change', updatePreview);

    mediaType.addEventListener('change', function () {

        mediaInput.value = '';

        if (mediaType.value === 'image') {
            mediaInput.accept =
                'image/jpeg,image/png,image/webp';
        } else {
            mediaInput.accept =
                'video/mp4,video/webm';
        }

        resetPreview();
    });

});
</script>

@endsection