@extends('layouts.app')
@section('title', trans('menu.document_and_protocol'))
@section('plugin-styles')

    <link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
    <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/mime-icons.min.css') }}">
    <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/fsm.css') }}">
@stop

@section('page-styles')

    <style>
        .icon-lg {
            font-size: 2.5rem !important;
        }

        .category .card-body p {
			border : 2px solid;
			padding: 5px 10px;
			display: inline-block;
			opacity: .8;
            font-size: 1rem;
        }
        .modal-body {
            padding: 15px 26px !important;
        }
    </style>

@stop

@section('content')
<div class="content">
    <x-content.header title="{{ __('menu.document_and_protocol') }}" subTitle="{{ $categories->total() }} {{__('title.folders')}}">
        <x-slot:headerRight>
            @can('create', \Modules\OrganizationalDocument\Entities\OrganizationalDocument::class)
                <a href="javascript:;" class="btn-create btn-secondary-base" data-toggle="modal" data-target="#modal-dialog" data-title="{{trans('forms.lbl_create_folder')}}"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new_folder')}}</a>
            @endcan

        </x-slot:headerRight>
    </x-content.header>

    <div id="folder-search-bar" class="flex gap-3 items-center">
        <div class="search-bar w-full lg:w-auto">
            <form method="POST" id="filter-form" onsubmit="return false;">
                <input name="term" type="text" class="album-search search-input w-full lg:w-[320px]" placeholder="{{trans('forms.lbl_search')}}" />
                <x-svg-icon icon="icon-search" />
            </form>
        </div>
    </div>

    <div class="position-relative paginate-section laravel-pagination" id="categories">
        @include('organizationaldocument::categories.list')
    </div>

    @include('organizationaldocument::categories.category_form')
</div>
@stop

@section('footer-script')
    <!-- plugin js for this page -->
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
    <!-- Custom js for this page-->
    <script type="text/javascript">
    $('#btn-crop span').text("{{trans('forms.lbl_crop')}}");

        itemOrganSearch = _.debounce( function() {

            console.log('{{route('organizational-documents.index_by_filter')}}');
            
            getItems($('#categories'), '{{route('organizational-documents.index_by_filter')}}', false);

        }, 500);

        $('#filter-form input').on("keyup", function(event) {

            itemOrganSearch();

        });

        @can('create', \Modules\OrganizationalDocument\Entities\OrganizationalDocument::class)

            drEvent.on('dropify.beforeClear', function(event, element){
                if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {

                    let form = drEvent.parents("form[name='modal-form']"),
                        id = form.find("input[name='id']").val(),
                        url = form.attr('action')+"/"+id+"/cover-image";

                    if(Number(id) > 0) {
                        return PDRequest({
                            type    : "DELETE",
                            url     : url
                        }).then(function(response){
                            PDTable.draw();
                            return true;
                        });
                    } else {
                        return true;
                    }


                } else {
                    return false;
                }
            });

            $("#categories").sortable({
                items: ".pdrow",
                cursor: 'move',
                opacity: 0.6,
                update: function() {

                    reOrderList("{{route('settings.organizational-documents.categories.reorder')}}");

                }

            });

        @endif


        function preview(item) {

            var data = [], is_pdf = false;

            var obj = {}, dynamicEl = {};

            obj.id = item.id;
            obj.is_pdf = item.is_pdf;
            obj.is_docs = item.is_docs;
            obj.is_file = item.type == "file";
            obj.dynamic = true;
            obj.download =  false;
            obj.fullScreen =  false;
            obj.share = false;

            obj.dynamicEl = [];

            dynamicEl.thumb = ( item.thumb_url ) ? item.thumb_url : "";
            dynamicEl.subHtml = ( item.name ) ? item.name : "";

            if( item.is_image || item.is_docs || item.is_pdf ) {

                dynamicEl.src = ( item.url ) ? item.url : "";

            } else if( item.is_video ) {

                dynamicEl.html = '<video class="lg-video-object lg-html5" controls preload="none">'+
                '<source src="'+(item.url)+'" type="video/mp4">'+
                'Your browser does not support HTML5 video.'+
                '</video>';

            }

            if( item.is_pdf ) {

                is_pdf = true;

            }

            if( item.is_docs) {

                dynamicEl.iframe = true;
                obj.thumbnail =  false;
                obj.zoom =  false;
                obj.hideBarsDelay =  1000;

                var fullUrl = new URL(dynamicEl.src, window.location.origin);
                var encodedUrl = encodeURIComponent(fullUrl.href);
                dynamicEl.src = 'https://view.officeapps.live.com/op/embed.aspx?src='+encodedUrl;
            }

            obj.dynamicEl.push(dynamicEl);

            PDRequest({
                type    : "POST",
                url     : '{{route('organizational-documents.is_protected')}}',
                data    : { 'id' : obj.id, item : JSON.stringify(obj) },
                isFlash : false
            }).then((response) => {

                if(response.status == "success") {

                    if( is_pdf ) {

                        var pdfLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>';

                        $('#modal-preview').modal('show');
                        $('#modal-preview').find(".loader-section").append(pdfLoader);
                        PDPDFViewer(obj.dynamicEl[0].src);

                    } else {

                        if ($("#preview-"+obj.id).data('lightGallery')) {

                            $("#preview-"+obj.id).data('lightGallery').destroy(true);

                        }

                        setTimeout(function() {
                            $("#preview-"+obj.id).lightGallery( obj );
                        }, 250);

                    }

                }

            }).catch((response) => {

                $('#modal-pincode').find("input[name='id']").val(obj.id);
                $('#modal-pincode').find("input[name='item']").val(JSON.stringify(obj));

                $('#modal-pincode').modal('show');

            });



        }

        //render pdf as image when employee click on prview button.
        var validatePinCodeForm = $("#modal-pincode form").validate(validateFormObj);
        $("body").on("click", ".btn-preview-with-pincode", function(event) {

            event.preventDefault();
            var url = '{{route('organizational-documents.is_protected')}}',
                data = $("#modal-pincode form").serialize(),
                pdfLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>';

            let form = $(this).parents('#modal-pincode').find('form[name="modal-form"]');

            if(form.valid()){

                PDRequest({
                    type    : "POST",
                    url     : url,
                    data    : data,
                    isFlash : false
                }).then((response) => {

                    if(response.status == "success") {

                        //$destination = JSON.parse(response.item);
                        $destination = response.item;

                        $('#modal-pincode').modal('hide');

                        if( $destination.is_pdf ) {

                            $('#modal-preview').modal('show');
                            $('#modal-preview').find(".loader-section").append(pdfLoader);
                            PDPDFViewer($destination.dynamicEl[0].src);

                        } else {

                            if ($("#preview-"+$destination.id).data('lightGallery')) {

                                $("#preview-"+$destination.id).data('lightGallery').destroy(true);

                            }


                            setTimeout(function() {
                                $("#preview-"+$destination.id).lightGallery( $destination );
                            }, 250);

                        }
                    }

                });
            }
        });
    </script>

@stop