@extends('customer.layouts.app')

@push('stylesheets')
    <style type="text/css">
        /**correct for menu sidebar**/
        #customNavigation.modal.show .modal-dialog-aside {
            top: 0px;
            position: fixed;
        }

        #customNavigation.modal .modal-content {
            margin-top: 0px !important;
        }

        .card-header{
            display: none;
        }

        /***/
        #pdf_container {
            background: white;
            margin: auto;
            padding: 0 10%;
            text-align: center;
            display: none;
            overflow: auto;
            margin-top: 57px;
        }

        @keyframes ldio-x6tru65k92a {
            0% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .ldio-x6tru65k92a div {
            left: 94px;
            top: 49px;
            position: absolute;
            animation: ldio-x6tru65k92a linear 1s infinite;
            background: #718ffe;
            width: 12px;
            height: 22px;
            border-radius: 6px / 11px;
            transform-origin: 6px 51px;
        }

        .ldio-x6tru65k92a div:nth-child(1) {
            transform: rotate(0deg);
            animation-delay: -0.9583333333333334s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(2) {
            transform: rotate(15deg);
            animation-delay: -0.9166666666666666s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(3) {
            transform: rotate(30deg);
            animation-delay: -0.875s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(4) {
            transform: rotate(45deg);
            animation-delay: -0.8333333333333334s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(5) {
            transform: rotate(60deg);
            animation-delay: -0.7916666666666666s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(6) {
            transform: rotate(75deg);
            animation-delay: -0.75s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(7) {
            transform: rotate(90deg);
            animation-delay: -0.7083333333333334s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(8) {
            transform: rotate(105deg);
            animation-delay: -0.6666666666666666s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(9) {
            transform: rotate(120deg);
            animation-delay: -0.625s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(10) {
            transform: rotate(135deg);
            animation-delay: -0.5833333333333334s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(11) {
            transform: rotate(150deg);
            animation-delay: -0.5416666666666666s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(12) {
            transform: rotate(165deg);
            animation-delay: -0.5s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(13) {
            transform: rotate(180deg);
            animation-delay: -0.4583333333333333s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(14) {
            transform: rotate(195deg);
            animation-delay: -0.4166666666666667s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(15) {
            transform: rotate(210deg);
            animation-delay: -0.375s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(16) {
            transform: rotate(225deg);
            animation-delay: -0.3333333333333333s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(17) {
            transform: rotate(240deg);
            animation-delay: -0.2916666666666667s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(18) {
            transform: rotate(255deg);
            animation-delay: -0.25s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(19) {
            transform: rotate(270deg);
            animation-delay: -0.20833333333333334s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(20) {
            transform: rotate(285deg);
            animation-delay: -0.16666666666666666s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(21) {
            transform: rotate(300deg);
            animation-delay: -0.125s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(22) {
            transform: rotate(315deg);
            animation-delay: -0.08333333333333333s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(23) {
            transform: rotate(330deg);
            animation-delay: -0.041666666666666664s;
            background: #718ffe;
        }

        .ldio-x6tru65k92a div:nth-child(24) {
            transform: rotate(345deg);
            animation-delay: 0s;
            background: #718ffe;
        }

        .loadingio-spinner-spinner-59wcyz545i {
            width: 200px;
            height: 200px;
            display: inline-block;
            overflow: hidden;
            background: #ffffff;
        }

        .ldio-x6tru65k92a {
            width: 100%;
            height: 100%;
            position: relative;
            transform: translateZ(0) scale(1);
            backface-visibility: hidden;
            transform-origin: 0 0;
            /* see note above */
        }

        .ldio-x6tru65k92a div {
            box-sizing: content-box;
        }

        #loader {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50vh
        }

        canvas {
            width: 100% !important;
        }

        .icons-container {
            display: flex;
            gap: 10px;
            justify-content: space-between;
            margin-right: 10px;
            padding: 4px;
            background: #323639;
            position: fixed;
            right: -10px;
            top: 0px;
            z-index: 99999;
        }

        #full-screen-btn,
        #downlode-pdf,
        .share-btn,
        #resize-controls,
        #decrease-width,
        #increase-width {
            display: flex;
            align-items: center;
        }

        .share-img {
            margin-top: -2px;
            width: 24px;
        }

        .share-btn {
            margin-right: 10px;
        }

        #close-btn {
            border: none;
            background: none;
            color: #000 !important;
            opacity: 1;
        }

        .cross-icon {
            position: absolute;
            right: 16px;
        }

        .green-tick-icon {
            padding-right: 10px;
            margin-top: -4px;
        }

        .link-content {
            display: flex;
            height: 40px;
            background: #f4f6fc;
            margin-bottom: 20px;
            justify-content: space-between;
        }

        .truncated-input {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toast-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 9999;
        }

        .toast {
            display: none;
            position: relative;
            min-width: 300px;
            padding: 0.75rem 1.25rem;
            margin-bottom: 1rem;
            font-size: 1rem;
            background-color: #ffffff;
            color: #183b56;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            height: 40px;
        }

        .toast.show {
            display: block;
        }

        .share-icon {
            font-weight: 500;
            font-size: 12px;
            line-height: 24px;
            font-family: "Open Sans";
            letter-spacing: 0.2px;
            color: #183b56;
        }

        .modal.show {
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .modal.fadeIn {
            opacity: 0;
            transition: opacity 0.3s ease;
        }


        .icon-button {
            display: flex;
            justify-content: space-evenly;
        }

        .icon-button .btn {
            background: white !important;
        }

        .page-content {
            font-family: "Poppins";
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            letter-spacing: 0.8px;
            color: #242424;
        }

        .modal-body {
            padding: 2px 16px !important;
        }

        .modal {
            position: fixed;
            z-index: 1111;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.6);

        }

        .modal-content {
            margin-top: 60px !important;
        }

        .copy-text {
            font-size: 14px;
        }

        .path-items {
            color: white;
            display: flex;
            justify-content: start;
            align-items: center;
            font-size: 18px;
            overflow-x: auto;
            white-space: nowrap;
            width: 80%;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        @media only screen and (max-width: 768px) {
            .path-items {
                font-size: 12px !important;
                padding-left: 0px;
            }

            #downlode-pdf,
            #full-screen-btn,
            .share-btn,
            .back-arrrow,
            #decrease-width,
            #increase-width {
                width: 16px !important;
            }

            #decrease-width,
            #increase-width {
                width: 25px !important;
            }

            .icons-container {
                margin-right: 0px;
                right: 0px;
                left: 0;
                top: 51px;
            }

            #pdf_container {
                margin-top: 25px;
            }
        }

        .link {
            color: #fff;
        }

        .link:hover {
            color: #4C83FF;
            text-decoration: none;
        }

        svg {
            width: 25px !important;
        }

        .path-items::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        /* Hide the scrollbar track in Webkit browsers */
        .path-items::-webkit-scrollbar-track {
            display: none;
        }

        #increase-width,
        #decrease-width {
            border: none;
            border-radius: 6px;
        }

        .disabled {
            pointer-events: none;
        }

        /*for hide top nav in admin template*/
        .main-panel .navbar {
            display: none;
        }
    </style>
@endpush


@php
    use Illuminate\Support\Carbon;
@endphp

@section('content')
    <h1 style="z-index: 9;position:relative;">
        <div class="float-right mr-1">
            <a href="{{ URL()->previous() }}" class="btn btn-sm btn-primary">Back</a>
        </div>
    </h1>
    <div class="container-fluid" id="pdf-div">

        <div id="pdf_container" style="width: 100%; padding: 0px 40px; display: block;">
            <div style="display: flex;" class="icons-container" id="icons-btn">
                <div style="display:flex;gap:10px;">
                    <span id="resize-controls">
                        <span id="decrease-width" style="cursor: pointer; background: none;">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M6 12L18 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                </g>
                            </svg> </span>
                        <input id="width-percentage"
                            style="color: black; font-weight:600; width:60px; text-align:center;margin-left:5px;margin-right:5px;border-radius:6px;outline:none;border:none;">
                        <span id="increase-width" style="cursor: pointer; background: none;">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#0000000">
                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                <g id="SVGRepo_iconCarrier">
                                    <path d="M6 12H18M12 6V18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round"></path>
                                </g>
                            </svg>
                        </span>
                    </span>
                    <span style="cursor:pointer;" id="full-screen-btn">
                        <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M11.4937 4.5C11.4937 4.89782 11.3357 5.27936 11.0544 5.56066C10.7731 5.84196 10.3916 6 9.99375 6H6V9.99375C6 10.3916 5.84196 10.7731 5.56066 11.0544C5.27936 11.3357 4.89782 11.4937 4.5 11.4937C4.10218 11.4937 3.72064 11.3357 3.43934 11.0544C3.15804 10.7731 3 10.3916 3 9.99375V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H9.99375C10.3916 3 10.7731 3.15804 11.0544 3.43934C11.3357 3.72064 11.4937 4.10218 11.4937 4.5ZM9.99375 24H6V20.0062C6 19.6084 5.84196 19.2269 5.56066 18.9456C5.27936 18.6643 4.89782 18.5062 4.5 18.5062C4.10218 18.5062 3.72064 18.6643 3.43934 18.9456C3.15804 19.2269 3 19.6084 3 20.0062L3 25.5C3 25.8978 3.15804 26.2794 3.43934 26.5607C3.72064 26.842 4.10218 27 4.5 27H9.99375C10.3916 27 10.7731 26.842 11.0544 26.5607C11.3357 26.2794 11.4937 25.8978 11.4937 25.5C11.4937 25.1022 11.3357 24.7206 11.0544 24.4393C10.7731 24.158 10.3916 24 9.99375 24ZM25.5 18.5062C25.1022 18.5062 24.7206 18.6643 24.4393 18.9456C24.158 19.2269 24 19.6084 24 20.0062V24H20.0062C19.6084 24 19.2269 24.158 18.9456 24.4393C18.6643 24.7206 18.5062 25.1022 18.5062 25.5C18.5062 25.8978 18.6643 26.2794 18.9456 26.5607C19.2269 26.842 19.6084 27 20.0062 27H25.5C25.8978 27 26.2794 26.842 26.5607 26.5607C26.842 26.2794 27 25.8978 27 25.5V20.0062C27 19.6084 26.842 19.2269 26.5607 18.9456C26.2794 18.6643 25.8978 18.5062 25.5 18.5062ZM25.5 3H20.0062C19.6084 3 19.2269 3.15804 18.9456 3.43934C18.6643 3.72064 18.5062 4.10218 18.5062 4.5C18.5062 4.89782 18.6643 5.27936 18.9456 5.56066C19.2269 5.84196 19.6084 6 20.0062 6H24V9.99375C24 10.3916 24.158 10.7731 24.4393 11.0544C24.7206 11.3357 25.1022 11.4937 25.5 11.4937C25.8978 11.4937 26.2794 11.3357 26.5607 11.0544C26.842 10.7731 27 10.3916 27 9.99375V4.5C27 4.10218 26.842 3.72064 26.5607 3.43934C26.2794 3.15804 25.8978 3 25.5 3Z"
                                fill="white"></path>
                        </svg>
                    </span>
                </div>
            </div>
            <div></div>
        </div>

        <div id="loader" style="display: none; margin-top: 100px;">
            <div class="loadingio-spinner-spinner-59wcyz545i">
                <div class="ldio-x6tru65k92a">
                </div>

            </div>


        </div>


    </div>
@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>

    <script type="text/javascript">
        var currentAffairPdf = "