@extends('layouts.admin-layout')
@section('title', 'All Galleries')
@section('content')
<div class="content-wrapper">

    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12 mt-3">
                    <form class="category-form" method="post" action="{{ route('admin.galleries.save') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="card card-primary card-box-shadow">
                            <div class="card-body text-center">

                                <h2>Galleries Section</h2> <!-- Commit Heading -->

                                <div class="row">

                                    @php
                                        $galleryPage = \App\Models\Pages::where('name', 'Gallery')->first();
                                        $videoUrl = $galleryPage ? $galleryPage->getFirstMediaUrl('gallery_banner_video') : null;
                                    @endphp

                                    <!-- Banner Video Only -->
                                   {{-- <div class="col-md-12 mb-3">
                                        <label for="BannerVideo">Banner Video</label>
                                        <input type="file" class="form-control form__field visually-hidden"
                                               name="gallery_banner_video" id="BannerVideo" accept="video/*">

                                        <label for="BannerVideo" class="file-input-label form__field form-control">
                                            <i class="fas fa-video"></i> Choose Video
                                        </label>


                                        <video id="VideoPreview" controls
                                               style="width:100%; height:300px; margin-top:10px; {{ $videoUrl ? '' : 'display:none;' }}">
                                            @if($videoUrl)
                                                <source src="{{ $videoUrl }}">
                                            @endif
                                        </video>
                                    </div> --}}

                                    <!-- Gallery Section Title -->
                                    <div class="col-md-12 mb-3">
                                        <label for="gallery_section_second_title">Gallery Section Title</label>
                                        <input type="text" name="gallery_section_second_title" id="gallery_section_second_title"
                                               placeholder="Gallery Section Title"
                                               class="form-control form__field"
                                               value="{{ $galleryPage && $galleryPage->content ? json_decode($galleryPage->content, true)['gallery_section_second_title'] ?? '' : '' }}">
                                    </div>

                                </div>

                                <div class="text-center mt-3">
                                    <button type="submit" class="btn btn-primary custom_btn">
                                        <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                    </button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </section>
</div>
@endsection

@section('script')
<script>
document.getElementById('BannerVideo').addEventListener('change', function() {
    const files = this.files;
    const preview = document.getElementById('VideoPreview');

    if (!files.length) return;

    // Only allow one file
    if (files.length > 1) {
        alert('Only one video file can be uploaded at a time.');
        this.value = '';
        preview.style.display = 'none';
        return;
    }

    const file = files[0];

    // Check if file is a video
    if (!file.type.startsWith('video/')) {
        alert('Only video files are allowed.');
        this.value = '';
        preview.style.display = 'none';
        return;
    }

    // Max size 50 MB
    if (file.size > 50 * 1024 * 1024) {
        alert('File size exceeds 50 MB. Please choose a smaller file.');
        this.value = '';
        preview.style.display = 'none';
        return;
    }

    preview.src = URL.createObjectURL(file);
    preview.style.display = 'block';
});
</script>
@endsection