@php
    $edit = !empty($galleryVideo->id);
@endphp
@extends('layouts.admin.master')

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} Gallery Video
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4 class="">{{ $edit ? 'Edit' : 'Create' }} Gallery Video</h4>
                            <a href="{{ route('admin.videos.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>
                        <form
                            action="{{ $edit ? route('admin.videos.update', $galleryVideo->id) : route('admin.videos.store') }}"
                            method="POST" class="edit-add-form" id="edit-add-form" enctype="multipart/form-data">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="title">Title <span style="color: red"> * </span></label>
                                    <input type="text" class="form-control" name="title" id="title"
                                           value="{{ $edit ? $galleryVideo->title : old('title') }}"
                                           placeholder="Enter video title" required>
                                </div>

                                <div class="form-group col-md-8 col-sm-12">
                                    <label for="youtube_link">YouTube Link <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="youtube_link" id="youtube_link"
                                           value="{{ $edit ? $galleryVideo->youtube_link : old('youtube_link') }}"
                                           placeholder="Enter YouTube link" required>
                                </div>

                                <div class="form-group col-md-2 col-sm-12">
                                    <label for="order">Order <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" name="order" id="order" min="0"
                                           value="{{ $edit ? $galleryVideo->order : old('order', 0) }}"
                                           required>
                                </div>
                                
                                <div class="form-group col-md-2 col-sm-12">
                                    <label for="is_active">Status <span class="text-danger">*</span></label>
                                    <select class="form-control" name="is_active" id="is_active" required>
                                        <option value="1" {{ ($edit && $galleryVideo->is_active) ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ ($edit && !$galleryVideo->is_active) ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="description">Description <span class="text-danger">*</span></label>
                                    <textarea class="form-control" name="description" id="description"
                                              placeholder="Enter video description"
                                              rows="4"
                                              required>{{ $edit ? $galleryVideo->description : old('description') }}</textarea>
                                </div>

{{--                                <div class="form-group col-md-12">--}}
{{--                                    <label for="video">Upload Video <span class="text-danger">*</span></label>--}}
{{--                                    <input type="file" class="form-control" id="video" name="video"--}}
{{--                                           accept="video/*" {{ $edit ? '' : 'required' }}>--}}
{{--                                    <div id="filePreview" class="mt-2">--}}
{{--                                        @if($edit && $galleryVideo->file_path)--}}
{{--                                            <div class="preview-container" data-existing="true">--}}
{{--                                                <video controls style="max-width: 300px; max-height: 200px;">--}}
{{--                                                    <source src="{{ Storage::url($galleryVideo->file_path) }}" type="video/mp4">--}}
{{--                                                    Your browser does not support the video tag.--}}
{{--                                                </video>--}}
{{--                                            </div>--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                </div>--}}
                            </div>
                            <button type="submit" class="btn btn-primary" id="submit">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <x-generic-validation-error-toastr/>
    <script>
        $(document).ready(function() {
            // const fileInput = document.getElementById('video');
            const filePreview = document.getElementById('filePreview');
            let selectedFile = null;

            {{--fileInput.addEventListener('change', (event) => {--}}
            {{--    selectedFile = event.target.files[0];--}}
            {{--    filePreview.innerHTML = '';--}}

            {{--    if (selectedFile) {--}}
            {{--        const previewContainer = document.createElement('div');--}}
            {{--        previewContainer.className = 'preview-container';--}}
            {{--        previewContainer.style.position = 'relative';--}}
            {{--        previewContainer.style.display = 'inline-block';--}}
            {{--        previewContainer.style.margin = '10px';--}}

            {{--        const preview = document.createElement('video');--}}
            {{--        preview.controls = true;--}}
            {{--        preview.style.maxWidth = '300px';--}}
            {{--        preview.style.maxHeight = '200px';--}}
            {{--        const source = document.createElement('source');--}}
            {{--        source.src = URL.createObjectURL(selectedFile);--}}
            {{--        source.type = selectedFile.type;--}}
            {{--        preview.appendChild(source);--}}

            {{--        const cancelButton = document.createElement('button');--}}
            {{--        cancelButton.textContent = '✖';--}}
            {{--        cancelButton.style.position = 'absolute';--}}
            {{--        cancelButton.style.top = '5px';--}}
            {{--        cancelButton.style.right = '5px';--}}
            {{--        cancelButton.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';--}}
            {{--        cancelButton.style.border = 'none';--}}
            {{--        cancelButton.style.borderRadius = '50%';--}}
            {{--        cancelButton.style.cursor = 'pointer';--}}

            {{--        cancelButton.addEventListener('click', (e) => {--}}
            {{--            e.preventDefault();--}}
            {{--            selectedFile = null;--}}
            {{--            fileInput.value = '';--}}
            {{--            filePreview.innerHTML = '';--}}
            {{--            @if($edit && $galleryVideo->file_path)--}}
            {{--            filePreview.innerHTML = `--}}
            {{--                    <div class="preview-container" data-existing="true">--}}
            {{--                        <video controls style="max-width: 300px; max-height: 200px;">--}}
            {{--                            <source src="{{ Storage::url($galleryVideo->file_path) }}" type="video/mp4">--}}
            {{--                            Your browser does not support the video tag.--}}
            {{--                        </video>--}}
            {{--                    </div>--}}
            {{--                `;--}}
            {{--            @endif--}}
            {{--        });--}}

            {{--        previewContainer.appendChild(preview);--}}
            {{--        previewContainer.appendChild(cancelButton);--}}
            {{--        filePreview.appendChild(previewContainer);--}}
            {{--    }--}}
            {{--});--}}

            const editAddForm = $('#edit-add-form');
            editAddForm.validate({
                rules: {
                    title: {
                        required: true
                    },
                    description: {
                        required: true
                    },
                    order: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    youtube_link: {
                        required: true,
                        url: true
                    },
                    is_active: {
                        required: true
                    },
                    {{--video: {--}}
                    {{--    required: {{ $edit ? 'false' : 'true' }},--}}
                    {{--    accept: "video/*"--}}
                    {{--}--}}
                },
                messages: {
                    title: {
                        required: "Please enter video title"
                    },
                    description: {
                        required: "Please enter description"
                    },
                    order: {
                        required: "Please enter display order",
                        number: "Order must be a number",
                        min: "Order cannot be negative"
                    },
                    youtube_link: {
                        required: "Please enter a YouTube link",
                        url: "Please enter a valid URL"
                    },
                    is_active: {
                        required: "Please select status"
                    },
                    // video: {
                    //     required: "Please upload a video",
                    //     accept: "Please upload a valid video file"
                    // }
                },
                submitHandler: function(htmlForm) {
                    $('.overlay').show();
                    const formData = new FormData(htmlForm);

                    const url = $(htmlForm).attr("action");

                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function(response) {
                            $('.overlay').hide();
                            if (response.alertType && response.message) {
                                toastr[response.alertType](response.message);
                            }
                            if (response.redirectTo) {
                                setTimeout(() => {
                                    window.location.href = response.redirectTo;
                                }, 1000);
                            }
                        },
                        error: function(xhr) {
                            $('.overlay').hide();
                            if (xhr.responseJSON && xhr.responseJSON.errors) {
                                Object.values(xhr.responseJSON.errors).forEach(errors => {
                                    errors.forEach(error => {
                                        toastr.error(error);
                                    });
                                });
                            } else {
                                toastr.error('An error occurred while processing your request.');
                            }
                        }
                    });

                    return false;
                }
            });
        });
    </script>
@endpush