@extends('layouts.app')
@section('title', trans('settings.onboarding_title'))

@section('plugin-styles')
    <link href="https://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
@stop

@section('content')
@include('layouts.partials.employee-files')

<div class="content !pt-0">
    <div>
        <h1 class="text-lg-semibold text-custom-grey-900">{{ trans('settings.onboarding_title') }}</h1>
        <p class="text-sm-regular text-custom-grey-600">{{ trans('forms.lbl_onboarding_subtitle') }}</p>
    </div>

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

            <div class="tabs overflow-x-scroll no-scrollbar">
                <button class="tabs-btn-box active min-w-[94px]" data-val="">{{ __('forms.lbl_all') }}</button>
                <button class="tabs-btn-box min-w-[94px]" data-val="complete">{{ __('menu.lbl_complete') }}</button>
                <button class="tabs-btn-box min-w-[94px]" data-val="incomplete">{{ __('menu.lbl_incomplete') }}</button>

                <input type="hidden" name="filterByStatus" value="" />
            </div>
        </div>
    </form>

    <div id="onboarding-lists" class="laravel-pagination">
        @include('onboarding::onboarding.onboardings')
    </div>
</div>
@stop

@section('footer-script')
<script src="{{ asset('js/tailwind/profile.js') }}"></script>
<script src="https://vjs.zencdn.net/4.12/video.js"></script>

<script type="text/javascript">
    var $datable = $('#datatable'),
        url_segment = "{{ request()->has('user_id') ? '?user_id=' . request()->get('user_id') : '' }}";
        //url: "{{ route('tasks.index') }}" + url_segment,

    $('body').on('click', '.tabs-btn-box', function() {
        // Reset all tabs and contents for the second set filter
        $(".tabs-btn-box").removeClass("active");

        // Set new active state for the clicked tab in the filter set
        $(this).addClass("active");

        $("input[name='filterByStatus']").val($(this).data('val'));

        callBackFunc();
    });

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

    callBackFunc = _.debounce(function(data) {
        getItems($('#onboarding-lists'), "{{route('onboarding.index.filter')}}" + url_segment);
    }, 500);

    $("body").on("click", ".onboarding", function(event) {
        if ($(event.target).closest(".onboarding-edit").length ||
            $(event.target).closest(".btn-delete").length) {
            return;
        }

        event.preventDefault();

        let url = "{{ url('onboardings') }}"+ "/" + $(this).data('id')+ url_segment;

        let customLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>', data = null;

        $(this).append(customLoader);
        $(".tasks").append(customLoader);

        PDRequest({
            type    : "GET",
            url     : url,
            isFlash : false,
            data    : data,
            event   : event
        }).then((response) => {
            if(response.status == "success") {
                $(".documents").html(response.documents);
                $(".tasks").html(response.tasks);

                $(".documents-count").html(response.doc_count);

                $(".onboarding-title").html(response.title);

                $("#todos-modal").find(".task").each(function(){
                    const taskID = "modal-" + $(this).attr("id");

                    $(this).attr("id", taskID);

                    $(this).parent().parent().find("label").attr("for", taskID);
                });

                initializeGallery();

                $(".onboarding.active").removeClass("active border-custom-orange-500 shadow-cstm")
                    .addClass("hover:border-custom-orange-500 hover:shadow-cstm");

                $(this).addClass("active border-custom-orange-500 shadow-cstm")
                    .removeClass("hover:border-custom-orange-500 hover:shadow-cstm")
            }

            $(this).find(".custom-loader").remove();
            $(".tasks").find(".custom-loader").remove();
        }).catch(error => {
            $(this).find(".custom-loader").remove();
            $(".tasks").find(".custom-loader").remove();
        });

    });

    $("body").on("change", ".task", function(event) {

        event.preventDefault();

        //"/tasks/"+$(this).data('task')+"/items"

        let url = "{{ route('onboarding.store') }}" + url_segment;

        let customLoader = '<div class="custom-loader"><div class="dot-opacity-loader"><span></span><span></span><span></span></div></div>', data = null;

        $(this).append(customLoader);

        event.preventDefault();

        let checklists = {};

        checklists[$(this).val()] = $(this).is(":checked");

        data = {
            tasks         : checklists,
            onboarding_id : $(this).data('onboarding')
        };

        PDRequest({
            type    : "POST",
            url     : url,
            data    : data,
            event   : event
        }).then((response) => {
            if(response.status == "success") {
                const $el = $("#onboarding-"+$(this).data('onboarding'));
                const $order = $el.find(".onboarding-footer h1").html();

                $el.before(response.onboarding);
                $("#onboarding-"+$(this).data('onboarding')).find(".onboarding-footer h1").html($order);

                if($el.hasClass('active')) {
                    $("#onboarding-"+$(this).data('onboarding')).addClass("active border-custom-orange-500 shadow-cstm")
                        .removeClass("hover:border-custom-orange-500 hover:shadow-cstm");
                }

                $el.remove();
            }

            $(this).find(".custom-loader").remove();
        }).catch(error => {
            $(this).find(".custom-loader").remove();
        });

    });

    if( $( ".video-item" ).length ) {
        $("body").find(".light-gallery").lightGallery({
            videojs   : true,
            autoplay : false,
            selector  : '.video-item'
        });
    }

</script>
@stop