@extends('layouts.backendTemplate')

@section('content')

    <style>
        .video-responsive {
            position: relative;
            padding-bottom: 56.25%;
            /* Aspect ratio 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
        }

        .video-responsive video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>

    <!--begin::Main-->
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">

        <div class="d-flex flex-column flex-column-fluid">


            @include('uc.admin.breadcrumb', [
                'title' => 'Sub Category Edit',
                'pageName' => 'Edit',
                'pageParent' => 'Sub Category Management',
                'pageParentLink' => url('sub-category'),
            ])
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <div id="kt_app_content_container" class="app-container container-xxl">


                    <form id="frmUpdate" class="form d-flex flex-column flex-lg-row" action="{{ url('update-sub-category') }}"
                        method="post" enctype="multipart/form-data">

                        <input type="hidden" name="id" value="{{ $itemView->id }}">
                        <input type="hidden" name="_method" value="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">


                        {{-- Left --}}
                        <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">

                            <div class="card card-flush py-4">

                                <div class="card-header" style="border: unset;">
                                    <!--begin::Card title-->
                                    <div class="required card-title">
                                        <h2>Active</h2>
                                    </div>
                                    <!--end::Card title-->
                                </div>
                                <div class="card-body pt-0">

                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" name="active" type="checkbox" value="1"
                                            {{ $itemView->active == 1 ? 'checked' : '' }} />
                                    </label>
                                </div>

                            </div>
                        </div>


                        {{-- Right --}}
                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">

                            <div class="card card-flush py-4">

                                @if (Session::has('messageSuccess'))
                                    <div class="card-body">
                                        @include('uc/messageSuccess')
                                    </div>
                                @endif

                                @if (Session::has('messageFail'))
                                    <div class="card-body">
                                        @include('uc/messageFail')
                                    </div>
                                @endif


                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>Overview</h2>
                                    </div>
                                </div>

                                <div class="card-body pt-0">

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Categories</label>
                                        <div class="d-flex align-items-center mt-3">
                                            @foreach ($categoriesView as $item)
                                                <label
                                                    class="form-check form-check-custom form-check-inline form-check-solid me-5 is-invalid">
                                                    <input class="form-check-input" name="categories[]" type="checkbox"
                                                        value="{{ $item->id }}"
                                                        @if (in_array($item->id, explode(',', $itemView->category_ids))) checked @endif>
                                                    <span class="fw-semibold ps-2 fs-6">
                                                        {{ $item->name . '(' . $item->name_en . ')' }}
                                                    </span>
                                                </label>
                                            @endforeach

                                        </div>

                                    </div>

                                    <div class="mb-10 fv-row">
                                        <div class="position-relative d-flex align-items-center">
                                            <span class="svg-icon svg-icon-2 position-absolute mx-4">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path opacity="0.3"
                                                        d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
                                                        fill="currentColor" />
                                                    <path
                                                        d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
                                                        fill="currentColor" />
                                                    <path
                                                        d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
                                                        fill="currentColor" />
                                                </svg>
                                            </span>
                                            <input class="form-control form-control-solid ps-12" type="text"
                                                id="due_date" name="due_date"
                                                value="{{ $itemView->due_date ? date('d-m-Y', strtotime($itemView->due_date)) : '' }}">





                                        </div>
                                    </div>

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Subject</label>
                                        <input disabled type="text" name="name" class="form-control mb-2 col-6"
                                            value="{{ $itemView->name }}" />
                                    </div>


                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Subject (EN)</label>
                                        <input disabled type="text" name="name_en" class="form-control mb-2 col-6"
                                            value="{{ $itemView->name_en }}" />
                                    </div>

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Description</label>
                                        <textarea disabled name="description" id="description" class="form-control " rows="10" cols="50">
                                            {{ $itemView->description }}
                                        </textarea>
                                    </div>


                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Description (EN)</label>
                                        <textarea name="description_en" id="description_en" class="form-control " rows="10" cols="50">
                                         {{ $itemView->description_en }}
                                        </textarea>
                                    </div>

                                    <div class="mb-10">
                                        <label class="form-label">File Video</label>

                                        <div class="text-muted fs-7">Allowed Types .MP4, .MOV</div>
                                        <div class="separator separator-dashed border-gray-300 mb-9 mt-5"></div>
                                        <div class="row g-3 fileuploader-theme-dragdrop">
                                            @foreach ($urlsVideoView as $file)
                                                <div class="col-12 col-md-6 col-lg-4">
                                                    <div class="card-xl-stretch me-md-6">
                                                        <div class="video-responsive">
                                                            <video controls>
                                                                <source src="{{ $file['url'] }}" type="video/mp4">
                                                                <source src="{{ $file['url'] }}" type="video/quicktime">
                                                                Your browser does not support the video tag.
                                                            </video>
                                                        </div>
                                                        <div class="fs-5 fw-bold mt-2">
                                                            {{ $file['name'] . '.' . $file['extension'] }}
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                    </div>


                                    <div class="mb-10">
                                        <label class="form-label">File Image</label>
                                        <div class="text-muted fs-7">Allowed Types .jpg, .bmp, .jpeg, .png</div>

                                        <div class="separator separator-dashed border-gray-300 mb-9 mt-5"></div>
                                        <div class="row g-10">

                                            {{-- <div>
                                                <a href="" style="float:right;" class="btn btn-info">Download
                                                    All</a>
                                            </div> --}}
                                            @foreach ($urlsImageView as $file)
                                                <div class="col-12 col-md-6 col-lg-4">
                                                    <div class="card-xl-stretch me-md-6">
                                                        <a class="d-block overlay mb-4"
                                                            data-fslightbox="lightbox-hot-sales"
                                                            href="{{ $file['url'] }}">
                                                            <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-175px"
                                                                style="background-image:url('{{ $file['url'] }}')">
                                                            </div>
                                                            <div class="overlay-layer bg-dark card-rounded bg-opacity-25">
                                                                <i class="ki-duotone ki-eye fs-2x text-white"></i>
                                                            </div>
                                                        </a>
                                                        <div class="fs-5 fw-bold mt-2">
                                                            {{ $file['name'] . '.' . $file['extension'] }}
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>


                                    <div class="mb-10">
                                        <label class="form-label">File Sound</label>
                                        <div class="text-muted fs-7">Allowed Types .m4a, .mp4, .mp3, .wav</div>
                                        <div class="separator separator-dashed border-gray-300 mb-9 mt-5">
                                        </div>
                                        <div class="row g-10">
                                            @foreach ($urlsSoundView as $file)
                                                <div class="col-12 col-md-6 col-lg-4">
                                                    <div class="video-responsive">
                                                        <video controls>
                                                            <source src="{{ $file['url'] }}" type="video/mp4">
                                                            <source src="{{ $file['url'] }}" type="video/quicktime">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                    </div>
                                                    <div class="fs-5 fw-bold mt-2">
                                                        {{ $file['name'] . '.' . $file['extension'] }}
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>


                                    <div class="mb-10">
                                        <label class="form-label">File Documents</label>

                                        <div class="text-muted fs-7">Allowed Types .pdf, .xls, .doc, .docx, .pptx, .csv,
                                            .txt</div>
                                        <div class="separator separator-dashed border-gray-300 mb-9 mt-5"></div>

                                        <div class="row g-6 g-xl-9 mb-6 mb-xl-9">

                                            @foreach ($urlsDocumentView as $file)
                                                <div class="col-12 col-md-6 col-lg-4">
                                                    <div class="card h-100 ">
                                                        <div
                                                            class="card-body d-flex justify-content-center text-center flex-column p-8">
                                                            <a href="{{ $file['url'] }}" target="_blank"
                                                                class="text-gray-800 text-hover-primary d-flex flex-column">
                                                                <div class="symbol symbol-60px mb-5">
                                                                    <img src="{{ url('assets/media/svg/files/upload.svg') }}"
                                                                        class="theme-light-show" alt="">
                                                                </div>
                                                                <div class="fs-5 fw-bold mb-2">
                                                                    {{ $file['name'] . '.' . $file['extension'] }}
                                                                </div>
                                                            </a>

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

                                        </div>
                                    </div>

                                </div>

                            </div>

                            <div class="d-flex justify-content-end">

                                <a href="{{ url('sub-category') }}" class="btn btn-light me-5">Back</a>

                            </div>

                        </div>


                    </form>
                </div>

            </div>

        </div>

    </div>


@stop




@section('script')

    <script type="text/javascript">
        $(function() {
            $('#due_date').flatpickr({
                enableTime: false,
                dateFormat: 'd-m-Y',
                defaultDate: null, // Do not preselect any date
                onReady: function(selectedDates, dateStr, instance) {
                    // Highlight today's date with a custom CSS class
                    const today = instance.todayDateElem;
                    today.classList.add('flatpickr-today-highlight'); // Add a custom class to today
                }
            });

            // file video
            $('.files-video').fileuploader({
                extensions: ['MP4', 'mp4', 'MOV', 'mov'],
                limit: null,
                fileMaxSize: null,
                changeInput: '<div class="fileuploader-input">' +
                    '<div class="fileuploader-input-inner">' +
                    '<p><i class="fileuploader-icon-main"></i></p>' +
                    '<h6>Drag and drop files here</h6>' +
                    '<p>or</p>' +
                    '<br>' +
                    '<button type="button" class="fileuploader-input-button"><span>${captions.button}</span></button>' +
                    '</div>' +
                    '</div>',
                theme: 'dragdrop',
            });

            // file image
            $('.files-image').fileuploader({
                extensions: ['jpg', 'bmp', 'jpeg', 'png'],
                limit: null,
                fileMaxSize: null,
                changeInput: '<div class="fileuploader-input">' +
                    '<div class="fileuploader-input-inner">' +
                    '<p><i class="fileuploader-icon-main"></i></p>' +
                    '<h6>Drag and drop files here</h6>' +
                    '<p>or</p>' +
                    '<br>' +
                    '<button type="button" class="fileuploader-input-button"><span>${captions.button}</span></button>' +
                    '</div>' +
                    '</div>',
                theme: 'dragdrop',
            });

            // file sound
            $('.files-sound').fileuploader({
                extensions: ['m4a', 'mp4', 'mp3', 'wav'],
                limit: null,
                fileMaxSize: null,
                changeInput: '<div class="fileuploader-input">' +
                    '<div class="fileuploader-input-inner">' +
                    '<p><i class="fileuploader-icon-main"></i></p>' +
                    '<h6>Drag and drop files here</h6>' +
                    '<p>or</p>' +
                    '<br>' +
                    '<button type="button" class="fileuploader-input-button"><span>${captions.button}</span></button>' +
                    '</div>' +
                    '</div>',
                theme: 'dragdrop',
            });

            // file document
            $('.files-document').fileuploader({
                extensions: ['pdf', 'xls', 'doc', 'docx', 'pptx', 'csv', 'txt'],
                limit: null,
                fileMaxSize: null,
                changeInput: '<div class="fileuploader-input">' +
                    '<div class="fileuploader-input-inner">' +
                    '<p><i class="fileuploader-icon-main"></i></p>' +
                    '<h6>Drag and drop files here</h6>' +
                    '<p>or</p>' +
                    '<br>' +
                    '<button type="button" class="fileuploader-input-button"><span>${captions.button}</span></button>' +
                    '</div>' +
                    '</div>',
                theme: 'dragdrop',
            });

            $(document).on("click", "#btn_submit", function(e) {
                e.preventDefault();
                alertLoading("Loading")
                const form = $('#frmUpdate');
                form.submit();
            })

        });
    </script>

    <script>
        const ckOption = {
            toolbar: {
                items: [

                    'heading', '|',
                    'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
                    'removeFormat', '|',
                    'bulletedList', 'numberedList', 'todoList', '|',
                    'outdent', 'indent', '|',
                    'undo', 'redo',
                    '-',
                    'fontColor', 'highlight', '|',
                    'alignment', '|',
                    'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', '|',
                    'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                    'sourceEditing',
                    'exportPDF', 'exportWord', '|',
                    'findAndReplace', 'selectAll', '|',
                ],
                shouldNotGroupWhenFull: true
            },
            // Changing the language of the interface requires loading the language file using the <script> tag.
            // language: 'es',
            list: {
                properties: {
                    styles: true,
                    startIndex: true,
                    reversed: true
                }
            },
            // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
            heading: {
                options: [{
                        model: 'paragraph',
                        title: 'Paragraph',
                        class: 'ck-heading_paragraph'
                    },
                    {
                        model: 'heading1',
                        view: 'h1',
                        title: 'Heading 1',
                        class: 'ck-heading_heading1'
                    },
                    {
                        model: 'heading2',
                        view: 'h2',
                        title: 'Heading 2',
                        class: 'ck-heading_heading2'
                    },
                    {
                        model: 'heading3',
                        view: 'h3',
                        title: 'Heading 3',
                        class: 'ck-heading_heading3'
                    },
                    {
                        model: 'heading4',
                        view: 'h4',
                        title: 'Heading 4',
                        class: 'ck-heading_heading4'
                    },
                    {
                        model: 'heading5',
                        view: 'h5',
                        title: 'Heading 5',
                        class: 'ck-heading_heading5'
                    },
                    {
                        model: 'heading6',
                        view: 'h6',
                        title: 'Heading 6',
                        class: 'ck-heading_heading6'
                    }
                ]
            },
            // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
            placeholder: '',
            // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
            fontFamily: {
                options: [
                    'default',
                    'Arial, Helvetica, sans-serif',
                    'Courier New, Courier, monospace',
                    'Georgia, serif',
                    'Lucida Sans Unicode, Lucida Grande, sans-serif',
                    'Tahoma, Geneva, sans-serif',
                    'Times New Roman, Times, serif',
                    'Trebuchet MS, Helvetica, sans-serif',
                    'Verdana, Geneva, sans-serif'
                ],
                supportAllValues: true
            },
            // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
            fontSize: {
                options: [10, 12, 14, 'default', 18, 20, 22],
                supportAllValues: true
            },
            // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
            // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
            htmlSupport: {
                allow: [{
                    name: /.*/,
                    attributes: true,
                    classes: true,
                    styles: true
                }]
            },
            // Be careful with enabling previews
            // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
            htmlEmbed: {
                showPreviews: true
            },
            // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
            link: {
                decorators: {
                    addTargetToExternalLinks: true,
                    defaultProtocol: 'https://',
                    toggleDownloadable: {
                        mode: 'manual',
                        label: 'Downloadable',
                        attributes: {
                            download: 'file'
                        }
                    }
                }
            },
            // The "super-build" contains more premium features that require additional configuration, disable them below.
            // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
            removePlugins: [
                // These two are commercial, but you can try them out without registering to a trial.
                // 'ExportPdf',
                // 'ExportWord',
                'CKBox',
                'CKFinder',
                'EasyImage',
                // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                // Storing images as Base64 is usually a very bad idea.
                // Replace it on production website with other solutions:
                // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                // 'Base64UploadAdapter',
                'RealTimeCollaborativeComments',
                'RealTimeCollaborativeTrackChanges',
                'RealTimeCollaborativeRevisionHistory',
                'PresenceList',
                'Comments',
                'TrackChanges',
                'TrackChangesData',
                'RevisionHistory',
                'Pagination',
                'WProofreader',
                // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                // from a local file system (file://) - load this site via HTTP server if you enable MathType.
                'MathType',
                // The following features are part of the Productivity Pack and require additional license.
                'SlashCommand',
                'Template',
                'DocumentOutline',
                'FormatPainter',
                'TableOfContents',
                'PasteFromOfficeEnhanced'
            ]
        }


        // This sample still does not showcase all CKEditor&nbsp;5 features (!)
        // Visit https://ckeditor.com/docs/ckeditor5/latest/features/index.html to browse all the features.
        CKEDITOR.ClassicEditor.create(document.getElementById("description"), ckOption)
            .then(editor => {
                // Set the editor to read-only mode
                editor.enableReadOnlyMode('myReadOnlyLock'); // Use any string as a lock ID
            })
            .catch(error => {
                console.error(error);
            });
        CKEDITOR.ClassicEditor.create(document.getElementById("description_en"), ckOption)
            .then(editor => {
                // Set the editor to read-only mode
                editor.enableReadOnlyMode('myReadOnlyLock'); // Use any string as a lock ID
            })
            .catch(error => {
                console.error(error);
            });
    </script>


@endsection