@extends('layouts.admin-layout')
@section('title', 'Events Page')
@section('content')
<div class="content-wrapper">
    <section class="content">
        <div class="container-fluid">

            <div class="row justify-content-center">
                <div class="col-md-12 mt-3">

                    <form method="post" action="{{ route('admin.event.page.save') }}" enctype="multipart/form-data">
                        @csrf

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

                                <h2>Events Page CMS</h2>

                                <div class="row">

                                    {{-- PAGE HEADING --}}
                                    <div class="col-md-12 mb-3">
                                        <label for="heading">Page Heading (Front Banner H1)</label>
                                        <input type="text" id="heading" name="heading"
                                               class="form-control form__field"
                                               placeholder="Enter page heading"
                                               value="{{ $content->heading ?? '' }}">
                                    </div>

                                    {{-- SUB HEADING --}}
                                    <div class="col-md-12 mb-3">
                                        <label for="sub_heading">Bottom Heading (Front marquee text)</label>
                                        <input type="text" id="sub_heading" name="sub_heading"
                                               class="form-control form__field"
                                               placeholder="Enter sub heading"
                                               value="{{ $content->sub_heading ?? '' }}">
                                    </div>

                                    {{-- EVENT VIDEO UPLOAD --}}
                                    <div class="col-md-12 mb-3">
                                        {{-- <label for="eventVideoInput">Upload Banner Video (Max 50 MB)</label>

                                        <input type="file" id="eventVideoInput" name="event_video"
                                               class="form-control form__field visually-hidden" accept="video/mp4">

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

                                        {{-- @if(!empty($pageVideo))
                                            <video id="VideoPreview" controls
                                                   style="width:100%; height:300px; margin-top:10px;">
                                                <source src="{{ $pageVideo }}" type="video/mp4">
                                            </video>
                                        @else
                                            <video id="VideoPreview" controls
                                                   style="width:100%; height:300px; margin-top:10px; display:none;">
                                                <source src="">
                                            </video>
                                        @endif --}}
                                    </div>

                                </div>

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

                            </div>
                        </div>

                    </form>

                </div>
            </div>

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

@section('script')
<script>
document.getElementById('eventVideoInput').addEventListener('change', function() {
    const file = this.files[0];
    const preview = document.getElementById('VideoPreview');

    if (!file) return;

    // Validate file type
    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.');
        this.value = '';
        preview.style.display = 'none';
        return;
    }

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