@extends('admin.app')
@section('title', 'Add Gallery')

@section('content')

<div class="container-fluid mt-5">

    <div class="row justify-content-center">

        <div class="col-md-6">

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

                <div class="card-header bg-primary text-white">
                    Add Gallery
                </div>

                <div class="card-body">

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="text-muted small mb-2">
                        Only WEBP format allowed • Max size 500 KB
                    </div>

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

                        @csrf

                        <div class="mb-3">
                            <label>Category</label>

                            <select name="category_id" class="form-select">

                                <option value="">Select Category</option>

                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">
                                        {{ $category->name }}
                                    </option>
                                @endforeach

                            </select>
                        </div>

                        <div class="mb-3">
                            <label>Select Type</label>

                            <select name="type"
                                    id="mediaType"
                                    class="form-select">

                                <option value="">Choose Type</option>
                                <option value="image">Image</option>
                                <option value="video">Video</option>

                            </select>
                        </div>

                        <div class="mb-3 d-none" id="imageField">
                            <label>Upload Image</label>

                            <input type="file"
                                   name="image"
                                   class="form-control">
                        </div>

                        <div class="mb-3 d-none" id="videoField">
                            <label>YouTube Video URL</label>

                            <input type="text"
                                   name="youtube_url"
                                   class="form-control"
                                   placeholder="https://www.youtube.com/watch?v=...">
                        </div>

                        <div class="mb-3">
                            <label>Title</label>

                            <input type="text"
                                   name="title"
                                   class="form-control">
                        </div>

                        <div class="mb-3">
                            <label>Alt Text</label>

                            <input type="text"
                                   name="alt"
                                   class="form-control">
                        </div>

                        <button class="btn btn-success">
                            Upload
                        </button>

                        <a href="{{ route('gallery.index') }}"
                           class="btn btn-secondary">
                            Back
                        </a>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

<script>
document.getElementById('mediaType').addEventListener('change', function () {

    let imageField = document.getElementById('imageField');
    let videoField = document.getElementById('videoField');

    imageField.classList.add('d-none');
    videoField.classList.add('d-none');

    if(this.value === 'image'){
        imageField.classList.remove('d-none');
    }

    if(this.value === 'video'){
        videoField.classList.remove('d-none');
    }

});
</script>

@endsection