@extends('layouts.admin')

@section('title', 'Edit 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">Edit Slider</h1>
            <p class="text-muted mb-0">
                Update slider content or replace its media.
            </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.update', $slider) }}"
                enctype="multipart/form-data"
            >
                @csrf
                @method('PUT')

                <div class="row g-4">

                    <div class="col-md-6">
                        <label for="title" class="form-label">
                            Title
                        </label>

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

                    <div class="col-md-6">
                        <label for="subtitle" class="form-label">
                            Subtitle
                        </label>

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

                    <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', $slider->media_type) === 'image' ? 'selected' : '' }}
                            >
                                Image
                            </option>

                            <option
                                value="video"
                                {{ old('media_type', $slider->media_type) === 'video' ? 'selected' : '' }}
                            >
                                Video
                            </option>
                        </select>
                    </div>

                    <div class="col-md-8">
                        <label for="media" class="form-label">
                            Replace Media
                        </label>

                        <input
                            type="file"
                            id="media"
                            name="media"
                            class="form-control"
                            accept="{{ $slider->media_type === 'video'
                                ? 'video/mp4,video/webm'
                                : 'image/jpeg,image/png,image/webp' }}"
                        >

                        <div class="form-text">
                            Leave empty to keep the existing media.
                            Maximum 50 MB.
                        </div>
                    </div>

                    <div class="col-12">

                        <label class="form-label">
                            Current Media
                        </label>

                        <div
                            class="border rounded-4 p-2 bg-light"
                            style="max-width: 800px;"
                        >
                            @if ($slider->media_type === 'image')

                                <img
                                    src="{{ asset('storage/' . $slider->media_path) }}"
                                    alt="{{ $slider->title }}"
                                    class="img-fluid rounded-3"
                                    style="width: 100%; max-height: 350px; object-fit: cover;"
                                >

                            @else

                                <video
                                    src="{{ asset('storage/' . $slider->media_path) }}"
                                    class="w-100 rounded-3"
                                    style="max-height: 350px;"
                                    controls
                                    preload="metadata"
                                ></video>

                            @endif
                        </div>

                    </div>

                    <div class="col-12 d-none" id="newPreviewWrapper">

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

                        <div
                            class="border rounded-4 p-2 bg-light"
                            style="max-width: 800px;"
                        >
                            <img
                                id="newImagePreview"
                                src=""
                                alt="New preview"
                                class="img-fluid rounded-3 d-none"
                                style="max-height: 350px; width: 100%; object-fit: cover;"
                            >

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

                    </div>

                    <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', $slider->button_text) }}"
                            class="form-control"
                            maxlength="100"
                        >
                    </div>

                    <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', $slider->button_url) }}"
                            class="form-control"
                            maxlength="500"
                        >
                    </div>

                    <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', $slider->sort_order) }}"
                            class="form-control"
                            min="0"
                            max="9999"
                            required
                        >
                    </div>

                    <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', $slider->status ? '1' : '0') === '1' ? 'selected' : '' }}
                            >
                                Active
                            </option>

                            <option
                                value="0"
                                {{ old('status', $slider->status ? '1' : '0') === '0' ? 'selected' : '' }}
                            >
                                Inactive
                            </option>
                        </select>
                    </div>

                    <div class="col-12">
                        <hr class="my-2">

                        <button
                            type="submit"
                            class="btn btn-primary px-4"
                        >
                            Update 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 wrapper = document.getElementById('newPreviewWrapper');
    const imagePreview = document.getElementById('newImagePreview');
    const videoPreview = document.getElementById('newVideoPreview');

    function resetPreview() {
        wrapper.classList.add('d-none');

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

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

        videoPreview.load();
    }

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

        const file = this.files[0];

        resetPreview();

        if (!file) {
            return;
        }

        const objectUrl = URL.createObjectURL(file);

        wrapper.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');
        }
    });

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

        mediaInput.value = '';

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

        resetPreview();
    });

});
</script>

@endsection