{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection
{{-- Content --}}
@section('content')
<style>
    .pdfobject-container {
        /* / height: 40vh;width: 19vw; / */
    }

    .object_class {
        height: 40vh;
        width: 25vw;
    }

    /*  Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
        .object_class {
            height: 40vh;
            width: 15vw;
        }
    }

    /* Extra small devices (portrait phones, less than 576px) */
    @media (max-width: 575.98px) {
        .object_class {
            height: 26vh;
            width: 70vw;
        }
    }

    /* Medium devices (tablets, 768px and up)  */
    @media (min-width: 768px) {
        .object_class {
            height: 45vh;
            width: 72vh;
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        .object_class {
            height: 40vh;
            width: 17vw;
        }
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        .object_class {
            height: 26vh;
            width: 23vw;
        }
    }

    @media (width: 1440px) {
        .object_class {
            height: 29vh;
            width: 24vw;
        }
    }

    @media (width: 1024px) {
        .object_class {
            height: 29vh;
            width: 22vw;
        }
    }

    @media (min-width: 320px) and (max-width: 480px) {
        .object_class {
            height: 26vh;
            width: 62vw;
        }
    }

    @media (width: 375px) {
        .object_class {
            height: 26vh;
            width: 65vw;
        }
    }
</style>
    <!--begin::Card-->
    <div class="card shadow-sm">
        <!--begin::Header-->
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <!--begin::Switch-->
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input" type="checkbox" name="option_all" id="show" checked />
                    <span class="form-check-label fw-bold text-muted">
                        Category View
                    </span>
                </label>
                <!--end::Switch-->
            </div>
            <div class="card-toolbar">
                <!--begin::Button-->
                {!! Helper::getListAddBtn(route('training_category_staff.index'), 'Back', 'back') !!}
                <!--end::Button-->
            </div>
        </div>
        <!--end::Header-->
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="d-flex align-items-center position-relative my-1 search-bar d-none">
                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
            </div>
        </div>
        <!--begin::Body-->
        <div class="card-body">
            @include('backend.alerts')
            <div id="div1">
                <div class="row">
                    @foreach ($moduleArray as $moduleData)
                        <!--begin::Col-->
                        <div class="col-lg-6 mb-5">
                            <!--begin::Card-->
                            <div class="card shadow-sm gutter-b card-stretch">
                                <!--begin::Body-->
                                <div class="card-body pt-2">
                                    <!--begin::User-->
                                    <div class="d-flex align-items-center justify-content-center mb-7"
                                        style="min-height: 20rem;">
                                        <!--begin::Pic-->
                                        <div class="flex-shrink-0">
                                            @if (!empty($moduleFiles[$moduleData->id]))
                                                @php
                                                    $filePath = 'module_files/' . $moduleData->id . '/';
                                                    $file = $moduleFiles[$moduleData->id];
                                                    $allowed_types = ['application/pdf', 'image/jpeg', 'image/png'];
                                                    $fileInfo = finfo_open(FILEINFO_MIME_TYPE);
                                                    $detected_type = pathinfo(asset('images/module/' . $file['name']));
                                                @endphp
                                                @if (in_array(strtolower($detected_type['extension']), ['jpg', 'jpeg', 'gif', 'png']))
                                                    <img src="{{ asset($filePath . $file['name']) }}" class="object_class"
                                                        style="pointer-events: none;" />
                                                @elseif(strtolower($detected_type['extension']) == 'pdf')
                                                    <input type="hidden" name=""
                                                        value="{{ asset($filePath . $file['name']) }}">

                                                    <div class="container">
                                                        <div class="row justify-content-center">
                                                                <div id="pdf-container-{{$file['id']}}" class="object_class border rounded p-3 shadow-sm bg-secondary" style="height: 400px; overflow: hidden;"></div>
                                                        </div>
                                                    </div>
                                                    @push('custom-scripts')
                                                    <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
                                                    <script>
                                                        function loadAdobePDF() {
                                                            var url = "{{ asset($filePath . $file['name']) }}";
                                                            const pagesRead = new Set([1]);
                                                            let totalPages, adobeDCView, shownAlert = false;

                                                            adobeDCView = new AdobeDC.View({
                                                                clientId: "{{$ADOBE_DC_CLIENTID}}",
                                                                divId: "pdf-container-{{$file['id']}}"
                                                            });

                                                            let resultPromise = adobeDCView.previewFile({
                                                                content: {
                                                                    location: {
                                                                        url: url
                                                                    }
                                                                },
                                                                metaData: {
                                                                    fileName: "{{ $file['name'] }}"
                                                                }
                                                            }, {
                                                                embedMode: "SIZED_CONTAINER",
                                                                showDownloadPDF: false,
                                                                showPrintPDF: false,
                                                                showFullScreen: false,
                                                                // showAnnotationTools: false,

                                                            });

                                                            resultPromise.then(adobeViewer => {
                                                                adobeViewer.getAPIs().then(apis => {
                                                                apis.getZoomAPIs().setZoomLevel(0.7);
                                                                    adobeDCView.registerCallback(
                                                                    AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
                                                                    function (event) {
                                                                        if (event.type === "PAGE_VIEW") {
                                                                            apis.getZoomAPIs().setZoomLevel(0.7);
                                                                        }

                                                                        let page = event.data.pageNumber;
                                                                        pagesRead.add(page);
                                                                        if (pagesRead.size === totalPages && !shownAlert) {
                                                                            shownAlert = true;
                                                                            // alert("All pages viewed.");
                                                                        }
                                                                    },
                                                                    { enablePDFAnalytics: true }
                                                                );

                                                                    apis.getPDFMetadata()
                                                                        .then(result => {
                                                                            totalPages = result.numPages;
                                                                            console.log('totalPages', totalPages);
                                                                            listenForReads();
                                                                        })
                                                                        .catch(error => console.log(error));
                                                                    apis.enableTextSelection(false);
                                                                });
                                                            });

                                                            function listenForReads() {
                                                                const eventOptions = {
                                                                    enablePDFAnalytics: true
                                                                };

                                                            }
                                                        }
                                                        if (window.AdobeDC && window.AdobeDC.View) {
                                                            loadAdobePDF();
                                                        } else {
                                                            document.addEventListener("adobe_dc_view_sdk.ready", loadAdobePDF);
                                                        }
                                                    </script>

                                                    @endpush
                                                @elseif(strtolower($detected_type['extension']) == 'mp4')
                                                    <video class="object_class" controls disablePictureInPicture
                                                        controlsList="nodownload">
                                                        <source src="{{ asset($filePath . $file['name']) }}"
                                                            type="video/{{ $detected_type['extension'] }}">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                @else
                                                    <div>No Preview Available</div>
                                                @endif
                                            @else
                                                <div>No Preview</div>
                                            @endif
                                        </div>
                                        <!--end::Pic-->
                                    </div>

                                    <!--end::User-->
                                    </br>
                                    <div class="card-body p-0">
                                        <!--begin::Content-->
                                        <div class="card-rounded bg-body mt-n10 position-relative py-5">
                                            <!--begin::Row-->
                                            <div class="row g-0 mb-7">
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Training Name</div>
                                                    <div class="fs-4 fw-bolder text-gray-800">
                                                       @if (!empty($$moduleData->link))<a href="{{ $moduleData->link??'' }}" target="_blank">{{ $moduleData->subject??'' }}</a>
                                                       @else
                                                       {{$moduleData->subject??''}}
                                                       @endif
                                                    </div>
                                                </div>
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Status</div>
                                                    <div class="fs-4 fw-bolder text-gray-800">
                                                        {{ ucwords($moduleData->tstatus??'') }}</div>
                                                </div>
                                            </div>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <div class="row g-0 mb-7">
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Deadline</div>
                                                    <div class="fs-4 fw-bolder text-gray-800">
                                                        {{ date('d-m-Y', strtotime($moduleData->deadline_date??'')) }}</div>
                                                </div>
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Time Left</div>
                                                    <div class="fs-4 fw-bolder text-gray-800">
                                                        @if (!empty($moduleData->deadline_date))
                                                            @php
                                                                $earlier = new DateTime(date('Y-m-d'));
                                                                $later = new DateTime($moduleData->deadline_date);
                                                                $diff = $later->diff($earlier)->format('%a');
                                                            @endphp
                                                            {{ $moduleData->deadline_date >= date('Y-m-d') ? $diff . ' Days' : 'Expired' }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <div class="row g-0 mb-7">
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Test Status</div>
                                                    <div class="fs-4 fw-bolder"
                                                        @if (!empty($moduleData->tresult) && strtolower($moduleData->tresult) == 'fail') style="color:red;" @endif>
                                                        {{ $moduleData->tresult }}</div>
                                                </div>
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Answer Sheet</div>
                                                    <div class="fs-4 fw-bolder">
                                                        @if ( !empty($moduleData->tresult) && in_array(strtolower($moduleData->tresult),['pass','fail']))
                                                            <a href="{{ route('training_individual_user_answer.index', $moduleData->id) }}">Answer sheet</a>
                                                        @else
                                                            Pending
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end::Row-->
                                            <!--begin::Row-->
                                            <div class="row g-0 mb-7">
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Certificate</div>
                                                    <div class="fs-4 fw-bolder text-gray-800">
                                                        @if ($moduleData->tresult == 'Pass')
                                                            @if ($moduleData->module_certificate == 1)
                                                                <a href="{{ route('important_policy_certificate.index', $moduleData->id) }}" target="_blank">Get Certificate</a>
                                                            @else
                                                                <a href="{{ route('training_completed_certificate.index', $moduleData->id) }}" target="_blank">Get Certificate</a>
                                                            @endif
                                                        @else
                                                            Certification Pending
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col mx-5">
                                                    <div class="fs-6 text-gray-400">Description</div>
                                                    <div class="fs-4 fw-bolder text-gray-800">{{ $moduleData->description??'' }}</div>
                                                </div>
                                            </div>
                                            <!--end::Row-->
                                        </div>
                                        <!--end::Content-->
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <a href="{{ route('attend_training_question.start', $moduleData->id) }}" class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 mb-3 attend-que">
                                                {{ $moduleData->tstatus == '' || $moduleData->tstatus == 'pending' ? 'Attend Training' : 'View Files' }}
                                            </a> <br>
                                        </div>
                                        @if ($moduleData->training_attempted >= 1 && strtolower($moduleData->tresult) != 'pass')
                                        <div class="col">
                                            <a href="{{ route('staff_module.training.reset.get', [$moduleData->id, 2]) }}" class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 attend-que">Directly re-attempt questions</a>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end:: Card-->
                        </div>
                        <!--end::Col-->
                    @endforeach
                </div>
            </div>

            <div id="div2">
                <!--begin: Datatable-->
                {!! $html->table() !!}
                <!--end: Datatable-->
            </div>
        </div>
        <!--end::Body-->
    </div>
    <!--end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')
    {!! $html->scripts() !!}
    <script src="//cdn.jsdelivr.net/npm/pdfobject@2.2.5/pdfobject.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#show").click(function() {
                hideShow(this);
            });

            $(document).ready(function() {
                hideShow($("#show"));
            })
        });

        function hideShow(ele) {
            if ($(ele).is(":checked")) {
                $("#div1").show();
                $("#div2").hide();
            } else {
                LaravelDataTables.dataTableBuilder.ajax.reload();
                $("#div1").hide();
                $("#div2").show();
            }
        }

        function actionDelete(ele) {
            var row = $(ele).parents('tr:first');
            if (row) {
                var id = row.attr('id');
                if (id) {
                    var alertText = jQuery.extend({}, deleteAlert);
                    alertText['text'] =
                        "Are you sure you want to delete training category? If you delete it all training data with this category will be deleted."
                    Swal.fire(alertText).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                data: {
                                    id: id,
                                    "_token": "{{ csrf_token() }}",
                                    _method: 'DELETE'
                                },
                                url: "{!! route('training.destroy', 1) !!}",
                                success: function(data) {
                                    if (data.status) {
                                        Swal.fire(deleteSuccessAlert);
                                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                    }
                                }
                            });
                        }
                    });
                }
            }
        }

        $(document).ready(function() {
            @if ($result_popup && $training_result == 'Pass')
                Swal.fire({
                    title: "Training Result: {{ $training_result }}",
                    text: "{{ $result_popup }}",
                    icon: "{{ $training_result == 'Pass' ? 'success' : 'error' }}",
                    button: "Close",
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                }).then(() => {
                    cancelPostMessage();
                });
            @endif
            @if ($result_popup && $training_result == 'Fail')
                Swal.fire({
                    title: "Training Result: {{ $training_result }}",
                    html: "{!! $result_popup !!}",
                    showDenyButton: true,
                    showCancelButton: true,
                    confirmButtonText: `View files & re-attempt questions`,
                    denyButtonText: `Directly re-attempt questions`,
                    cancelButtonText: `Cancel`,
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                }).then((result) => {
                    console.log(result);
                    if (result.isConfirmed) {
                        var ajaxUrl = "{{ $reset_route_1 }}";
                    } else if (result.isDenied) {
                        var ajaxUrl = "{{ $reset_route_2 }}";
                    }
                    else if (result.dismiss === Swal.DismissReason.cancel) {
                        cancelPostMessage();
                    }
                    console.log(ajaxUrl);
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "is_mobile": "{{!empty($isMobile) && $isMobile ? 1 : 0}}",
                            "token": "{{!empty($token) ? $token : ''}}",
                        },
                        url: ajaxUrl,
                        success: function(data) {
                            if (data.url) {
                                window.location.href = data.url;
                            } else {
                                alert('Please try again');
                            }
                        }
                    });
                })
            @endif
            function cancelPostMessage(){
                if (typeof AppBridge !== 'undefined' && AppBridge.postMessage) { AppBridge.postMessage(JSON.stringify({status: true})); }
            }
        });
    </script>
    <script>
        $('#show').on('change', function() {
            if ($('#show').is(":checked")) {
                $('.search-bar').addClass("d-none");
            } else {
                $('.search-bar').removeClass("d-none");
            }
        })
    </script>
@endsection