@extends('layouts.admin')

<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.6/css/dx.light.css">

<style>
    #file-manager-container {
        display: none;
    }
</style>
@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @include('elements.alert-error')
                        <form id="video_form"
                            action="{{ isset($video) ? route('admin.video.update', $video->id) : route('admin.video.store') }}"
                            method="POST" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">
                            @csrf
                            @if (isset($video))
                                @method('PUT')
                            @endif

                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#master" data-bs-toggle="tab" aria-expanded="false" class="nav-link active"
                                        aria-selected="true" role="tab">
                                        General
                                    </a>
                                </li>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <li class="nav-item" data-target-form="#profileForm">
                                        <a href="#{{ $locale }}" data-bs-toggle="tab" aria-expanded="true"
                                            class="nav-link" aria-selected="false" role="tab" tabindex="-1">
                                            {{ ucfirst($language) }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="tab-content mb-0 b-0">
                                <div class="tab-pane active show" id="master">

                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="images">Video Thumb Image: <span
                                                class="text-danger">*</span></label>

                                        <div class="col-6">
                                            <input type="file" class="form-control mt-2" id="thumb_image"
                                                name="thumb_image" accept="image/*">
                                        </div>
                                        <div class="col-3">
                                            @if (isset($video) && $video->thumb_image)
                                                <a href="{{ asset('storage/' . $video->thumb_image) }}" target="_blank"
                                                    class="btn btn-sm btn-primary" style="margin-top: 12px;">View</a>
                                            @else
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="video">Video: <span
                                                class="text-danger">*</span></label>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-primary" id="upload_button">Select
                                                Video</button>
                                                <p id="err-message" class="pt-1"></p>
                                        </div>
                                        <div class="col-3">
                                            @php
                                                $videoUploadValue = '';
                                                if (!empty($video)) {
                                                    $videoUploadValue = $video->directory_name
                                                        ? $video->directory_name.'/'.$video->video_upload
                                                        : $video->video_upload;
                                                }
                                            @endphp

                                            <input type="hidden" id="video_upload" name="video_upload" value="{{ $videoUploadValue }}" />

                                            @if (!empty($video) && $video->video_upload)

                                                @php
                                                    $videoPath = $video->directory_name
                                                        ? 'storage/video_upload/'.$video->directory_name.'/'.$video->video_upload
                                                        : 'storage/video_upload/'.$video->video_upload;
                                                @endphp

                                                <div>
                                                    <a href="{{ asset($videoPath) }}"
                                                        target="_blank" class="btn btn-sm btn-primary">View</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Status -->
                                    <div class="row mb-3">
                                        <label class="col-3 col-form-label" for="status">Status: </label>
                                        <div class="col-6">
                                            <div class="col-3 col-form-label form-check form-switch">
                                                <input type="checkbox" class="form-check-input" id="customSwitch1"
                                                    name="status" value="1"
                                                    {{ old('status', $video->status ?? 1) == 1 ? 'checked' : '' }}>

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


                                </div>

                                @foreach (config('translatable.locales') as $locale => $language)
                                    <div class="tab-pane fade" id="{{ $locale }}">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-3">
                                                    <label class="col-3 col-form-label"
                                                        for="title_{{ $language }}">Title:<span
                                                            class="text-danger">*</span></label>
                                                    <div class="col-9">
                                                        <input type="text" class="form-control"
                                                            id="title_{{ $language }}" name="title[{{ $language }}]"
                                                            placeholder="Title"
                                                            value="{{ old('title.' . $language, $video ? $video->getTranslation('title', $language) : '') }}">
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-3 col-form-label"
                                                        for="description_{{ $language }}">Description: <span
                                                            class="text-danger">*</span></label>
                                                    <div class="col-9">
                                                        <textarea class="form-control" id="description_{{ $language }}" name="description[{{ $language }}]"
                                                            placeholder="Description">{{ old('description.' . $language, $video ? $video->getTranslation('description', $language) : '') }}</textarea>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit"
                                    value="add">{{ isset($video) ? 'Update' : 'Save' }}</button>
                                <a href="{{ route('admin.video.index') }}" class="btn btn-outline-danger">Cancel</a>
                            </div>
                        </form>
                    </div>
                    <div class="demo-container" id="file-manager-container">
                        <div id="file-manager"></div>
                        <div id="photo-popup"></div>
                    </div>

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


@section('scripts')
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script src="https://cdn3.devexpress.com/jslib/21.2.6/js/dx.all.js"></script>



    <script>
        $(document).ready(function () {
            $.validator.addMethod("safeInput", function (value, element) {
                return /^[a-zA-Z0-9\s\-_,.;:'"()!?/&]+$/.test(value);
            }, "Invalid characters in input");

            $("#video_form").validate({
                ignore: [],
                rules: {
                    thumb_image: {
                        required: function() {
                            return !{{ isset($video) ? 'true' : 'false' }};
                        },
                        extension: "jpg|jpeg|png|gif"
                    },
                    video_upload: {
                        required: true
                    },
                    "title[en]": {
                        required: true,
                        maxlength: 255
                    },
                    "description[en]": {
                        required: true,
                        minlength: 10
                    }
                    @php $locales = config('translatable.locales'); @endphp
                    @foreach ($locales as $locale => $language)
                        @if ($language != 'en')
                        ,"title[{{ $language }}]": {
                            required: true,
                            maxlength: 255,
                        },
                        "description[{{ $language }}]": {
                            required: true,
                            minlength: 10
                        }
                        @endif
                    @endforeach
                },
                messages: {
                    thumb_image: {
                        required: "Please upload a video image",
                        extension: "Only image files (jpg, jpeg, png, gif) are allowed"
                    },
                    video_upload: {
                        required: "Please upload a video"
                    },
                    "title[en]": {
                        required: "Please enter a title",
                        maxlength: "The title cannot exceed 255 characters"
                    },
                    "description[en]": {
                        required: "Please provide a description",
                        minlength: "The description must be at least 10 characters long"
                    }
                    @foreach ($locales as $locale => $language)
                        @if ($language != 'en')
                        ,"title[{{ $language }}]": {
                            required: "Name is required",
                            maxlength: "The title in {{ $language }} cannot exceed 255 characters"
                        },
                        "description[{{ $language }}]": {
                            required: "Description is required",
                            minlength: "The description in {{ $language }} must be at least 10 characters long"
                        }
                        @endif
                    @endforeach
                },
                invalidHandler: function(event, validator) {
                    if (validator.errorList.length) {
                        // Get the first invalid element
                        var firstError = validator.errorList[0].element;

                        // Find which tab-pane it's in
                        var tabPane = $(firstError).closest('.tab-pane');

                        if (tabPane.length) {
                            var tabId = tabPane.attr('id');
                            // Activate the related tab
                            $('a[href="#' + tabId + '"]').tab('show');
                        }
                    }
                },
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('text-danger');

                    if (element.attr("name") === "video_upload") {
                        error.appendTo("#err-message");
                    } else {
                        error.insertAfter(element);
                    }

                    let errorMessages = [];
                    $('#video_form').find('.invalid-feedback').each(function () {
                        errorMessages.push($(this).text());
                    });
                    if (errorMessages.length > 0) {
                        $('#error_messages').html(errorMessages.join('<br>')).show();
                    }
                },
                highlight: function (element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function (form) {
                    $('#error_messages').hide();
                    form.submit();
                }
            });
        });


        $(document).ready(function() {
            const provider = new DevExpress.fileManagement.RemoteFileSystemProvider({
                endpointUrl: 'file-manager',
            });

            const fileManager = $('#file-manager').dxFileManager({
                name: 'fileManager',
                fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({
                    getItems: function(parentDir) {
                        return $.ajax({
                            url: "{{ route('files') }}",
                            method: 'GET',
                            dataType: 'json',
                            data: {
                                directory: parentDir.path || ''
                            },
                        }).fail(function(jqXHR, textStatus, errorThrown) {
                            console.error("AJAX Error:", textStatus, errorThrown);
                            console.log(jqXHR.responseText);
                        });
                    },

                }),
                currentPath: "/",

                permissions: {
                    create: false,
                    copy: false,
                    move: false,
                    delete: false,
                    rename: false,
                    upload: false,
                    download: false,
                },
                onSelectionChanged(e) {
                    const selectedItems = e.selectedItems;
                    if (selectedItems.length > 0) {
                        const selectedItem = selectedItems[0];
                        if (!selectedItem.isDirectory) {
                            // Set the hidden input field value to the selected file path
                            $('#video_upload').val(selectedItem.path);
                        }
                    }
                },
                onSelectedFileOpened(e) {
                    console.log("test here");
                    const popup = $('#photo-popup').dxPopup('instance');
                    popup.option({
                        title: e.file.name,
                        contentTemplate: `<img src="${e.file.dataItem.url}" class="photo-popup-image" />`,
                    });
                    popup.show();
                },
            }).dxFileManager('instance');

            $('#photo-popup').dxPopup({
                maxHeight: 600,
                hideOnOutsideClick: true,
                showCloseButton: true,
                onContentReady(e) {
                    const $contentElement = e.component.content();
                    $contentElement.addClass('photo-popup-content');
                },
            });

            // Handle the click event on the upload button
            $('#upload_button').on('click', function() {
                $('#file-manager-container').show();

                setTimeout(() => {
                    fileManager.refresh();
                }, 300);
            });
        });
    </script>
@endsection