@extends('admin.layouts.leadManagement')
@section('content')
    <div class="main-box">
        <div class="country">
            <p class="heading">Countries </p>
            {{-- <input type="text" id="countrySearch" placeholder="Search countries"> --}}
            <div class="single-input">
                {{-- <label for="" class="field-label">Enter Search countries</label> --}}
                <input type="text"  class="input-field"  id="countrySearch" placeholder="Search countries"
                    aria-label="Title">
            </div>
            <ul class="list">
                @foreach ($countries as $country)
 
                    {{-- <option {{ $country->id == old('country_id') ? 'selected' : '' }}
                        value="{{ $country->id }}">
                        {{ $country->name }}
                    </option> --}}

                <li class="list-item single-country" id="single-country{{ $country['id'] }}" onclick="selectCountry({{ $country['id'] }})">
                    {{-- <img src="{{ asset('backend') }}/presentation/images/united-kingdom.jpg" alt="united-kingdom"
                        width="100%" height="100%"> --}}
                        @if($country['image'])
                            <img src="{{ asset($country['image']) }}" alt="{{ $country['name'] }}"
                            width="100%" height="100%">
                        @else
                        <img src="{{ asset('backend/image/default-post.png') }}" alt="{{ $country['name'] }}"
                        width="100%" height="100%">
                        @endif
                      
                    <p class="country-name">
                        {{ $country['name'] }}
                    </p>
                </li>
                @endforeach
            </ul>
            {{-- <ul class="list">
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/united-kingdom.jpg" alt="united-kingdom"
                        width="100%" height="100%">
                    <p class="country-name">
                        UK
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/united-states-of-america.jpg"
                        alt="united-states-of-america" width="100%" height="100%">
                    <p class="country-name">
                        USA
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/australia.jpg" alt="australia" width="100%"
                        height="100%">
                    <p class="country-name">
                        Australia
                    </p>
                </li>

                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/canada.jpg" alt="canada" width="100%"
                        height="100%">
                    <p class="country-name">
                        Canada
                    </p>
                </li>

                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/united-arab-emirates.jpg" alt="Dubai"
                        width="100%" height="100%">
                    <p class="country-name">
                        Dubai
                    </p>
                </li>

                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/germany.jpg" alt="germany" width="100%"
                        height="100%">
                    <p class="country-name">
                        Germany
                    </p>
                </li>

                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/ireland.jpg" alt="ireland" width="100%"
                        height="100%">
                    <p class="country-name">
                        Ireland
                    </p>
                </li>

                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/new-zealand.jpg" alt="new-zealand" width="100%"
                        height="100%">
                    <p class="country-name">
                        New Zealand
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/singapore.jpg" alt="singapore" width="100%"
                        height="100%">
                    <p class="country-name">
                        Singapore
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/switzerland.jpg" alt="switzerland" width="100%"
                        height="100%">
                    <p class="country-name">
                        Switzerland
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/italy.jpg" alt="italy" width="100%"
                        height="100%">
                    <p class="country-name">
                        Italy
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/france.jpg" alt="france" width="100%"
                        height="100%">
                    <p class="country-name">
                        France
                    </p>
                </li>

                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/netherlands.jpg" alt="netherlands" width="100%"
                        height="100%">
                    <p class="country-name">
                        Netherlands
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/sweden.jpg" alt="sweden" width="100%"
                        height="100%">
                    <p class="country-name">
                        Sweden
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/spain.jpg" alt="spain" width="100%"
                        height="100%">
                    <p class="country-name">
                        Spain
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/austria.jpg" alt="austria" width="100%"
                        height="100%">
                    <p class="country-name">
                        Austria
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/denmark.jpg" alt="denmark" width="100%"
                        height="100%">
                    <p class="country-name">
                        Denmark
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/finland.jpg" alt="finland" width="100%"
                        height="100%">
                    <p class="country-name">
                        Finland
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/hungary.jpg" alt="hungary" width="100%"
                        height="100%">
                    <p class="country-name">
                        Hungary
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/lithuania.jpg" alt="lithuania" width="100%"
                        height="100%">
                    <p class="country-name">
                        Luthiania
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/cyprus.jpg" alt="cyprus" width="100%"
                        height="100%">
                    <p class="country-name">
                        Cyprus
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/Poland-Flag.jpg" alt="Poland-Flag"
                        width="100%" height="100%">
                    <p class="country-name">
                        Poland
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/czech-republic.jpg" alt="czech-republic"
                        width="100%" height="100%">
                    <p class="country-name">
                        Czech Republic
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/malaysia.jpg" alt="malaysia" width="100%"
                        height="100%">
                    <p class="country-name">
                        Malaysia
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/mauritius.jpg" alt="mauritius" width="100%"
                        height="100%">
                    <p class="country-name">
                        Mauritius
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/Japan.jpg" alt="Japan" width="100%"
                        height="100%">
                    <p class="country-name">
                        Japan
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/Vietnam.jpg" alt="Vietnam" width="100%"
                        height="100%">
                    <p class="country-name">
                        Vietnam
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/Malta-Flag.jpg" alt="Malta-Flag" width="100%"
                        height="100%">
                    <p class="country-name">
                        Malta
                    </p>
                </li>
                <li class="list-item single-country">
                    <img src="{{ asset('backend') }}/presentation/images/miscellaneous.jpg" alt="miscellaneous"
                        width="100%" height="100%">
                    <p class="country-name">
                        Miscellaneous
                    </p>
                </li>
            </ul> --}}
        </div>

        <div class="emptyDiv">
            <p class="emptyMsg">Please select your preferred country!</p>
        </div>

        <div class="box-wrpr">
            <div class="category">
                <p class="heading">Select Category 
                    @if (userCan('presentation_category.view'))
                    <a href="{{ route('presentationcategory.index') }}"
                    class="edit">Edit</a>
                    @endif
                    </p>
                

                <ul class="list" id="select_category_data">
                     {{-- <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            General Presentation
                        </p>
                    </li> --}}
                    {{-- 
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Enquiry Form
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Financial Documents
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Visa Documents
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Documents Checklist
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            NOOSR
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Application Guide & Method ( Entry Requirements)
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Application Procedure
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Financial Documents- Application
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Financial Documents- Visa
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            GTE Form
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Application Forms
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Application Documents
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Visa Forms & Documentation
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Samples & Formats
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Authority Form
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Course Comparison Sheet
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            University Brochures
                        </p>
                    </li>
                    <li class="list-item single-category">
                        <img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%"
                            height="100%">
                        <p class="category-name">
                            Key Webinar Links
                        </p>
                    </li> --}}
                </ul>
            </div>

            <div class="folderEmpty">
                <p class="emptyMsg">Please select your preferred folder!</p>
                <p class="emptyMsg" style="display: none">No Search Documents Found!</p>
            </div>

            <div class="documentDiv">
                <div class="input-section">
                    <div class="inputLgDiv">
                        <input class="documentSearch" id="documentSearch" type="text" placeholder="Search Document" value="" onkeydown="handleEnterKey(event)">
                        <button class="search-btn" aria-label="search-icon" onclick="documentSearch()">
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M17.7043 16.2848L14.3054 12.8958C15.402 11.4988 15.9971 9.77351 15.9948 7.99743C15.9948 6.41569 15.5258 4.86947 14.647 3.5543C13.7683 2.23913 12.5192 1.21408 11.0579 0.608771C9.59657 0.00346512 7.98855 -0.15491 6.43721 0.153672C4.88586 0.462254 3.46085 1.22393 2.34239 2.34239C1.22393 3.46085 0.462254 4.88586 0.153672 6.43721C-0.15491 7.98855 0.00346512 9.59657 0.608771 11.0579C1.21408 12.5192 2.23913 13.7683 3.5543 14.647C4.86947 15.5258 6.41569 15.9948 7.99743 15.9948C9.77351 15.9971 11.4988 15.402 12.8958 14.3054L16.2848 17.7043C16.3777 17.798 16.4883 17.8724 16.6101 17.9231C16.7319 17.9739 16.8626 18 16.9945 18C17.1265 18 17.2572 17.9739 17.379 17.9231C17.5008 17.8724 17.6114 17.798 17.7043 17.7043C17.798 17.6114 17.8724 17.5008 17.9231 17.379C17.9739 17.2572 18 17.1265 18 16.9945C18 16.8626 17.9739 16.7319 17.9231 16.6101C17.8724 16.4883 17.798 16.3777 17.7043 16.2848ZM1.99936 7.99743C1.99936 6.81112 2.35114 5.65146 3.01022 4.66508C3.66929 3.6787 4.60606 2.90991 5.70206 2.45593C6.79807 2.00196 8.00408 1.88317 9.16759 2.11461C10.3311 2.34605 11.3999 2.91731 12.2387 3.75615C13.0775 4.595 13.6488 5.66375 13.8802 6.82726C14.1117 7.99077 13.9929 9.19678 13.5389 10.2928C13.0849 11.3888 12.3162 12.3256 11.3298 12.9846C10.3434 13.6437 9.18373 13.9955 7.99743 13.9955C6.40664 13.9955 4.88101 13.3636 3.75615 12.2387C2.6313 11.1138 1.99936 9.58821 1.99936 7.99743Z"
                                    fill="#066AC9"></path>
                            </svg>
                        </button>
                    </div>
                    @if (userCan('presentation.documentsUpload'))
                    <a href="javascript:;" class="btn-upload" >Upload</a>
                    @endif
                </div>
                
                <p class="documentHeading">Documents</p>
                <div class="documentListDiv" id="documentListDiv">
                    {{-- <div class="documentList">
                        <div class="documentNameDiv">
                            <img src="{{ asset('backend') }}/presentation/images/activeFile.svg" alt="activeFile"
                                width="100%" height="100%">
                            <p class="documentName">Australia General Presentation (India)</p>
                        </div>
                        <div class="dateDiv">
                            <p class="documentDate">25-05-2022</p>
                            <p class="documentSize">0.98 MB</p>
                        </div>
                        <a href="javascript:;" class="documentBtn" target="blank">View Document</a>
                    </div> --}}

                    {{-- <div class="documentList">
                        <div class="documentNameDiv">
                            <img src="{{ asset('backend') }}/presentation/images/activeFile.svg" alt="activeFile"
                                width="100%" height="100%">
                            <p class="documentName">Australia General Presentation (India)</p>
                        </div>
                        <div class="dateDiv">
                            <p class="documentDate">25-05-2022</p>
                            <p class="documentSize">0.98 MB</p>
                        </div>
                        <a href="javascript:;" class="documentBtn" target="blank">View Document</a>
                    </div> --}}

                    {{-- <div class="documentList">
                        <div class="documentNameDiv">
                            <img src="{{ asset('backend') }}/presentation/images/activeFile.svg" alt="activeFile"
                                width="100%" height="100%">
                            <p class="documentName">Australia General Presentation (India)</p>
                        </div>
                        <div class="dateDiv">
                            <p class="documentDate">25-05-2022</p>
                            <p class="documentSize">0.98 MB</p>
                        </div>
                        <a href="javascript:;" class="documentBtn" target="blank">View Document</a>
                    </div> --}}

                    {{-- <div class="documentList">
                        <div class="documentNameDiv">
                            <img src="{{ asset('backend') }}/presentation/images/activeFile.svg" alt="activeFile"
                                width="100%" height="100%">
                            <p class="documentName">Australia General Presentation (India)</p>
                        </div>
                        <div class="dateDiv">
                            <p class="documentDate">25-05-2022</p>
                            <p class="documentSize">0.98 MB</p>
                        </div>
                        <a href="javascript:;" class="documentBtn" target="blank">View Document</a>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
    <div class="loader" style="display: none"></div>
    
    @if (userCan('presentation.documentsUpload'))
    <div class="upload-popup">
        <div class="top">
            <a href="javascript:;" aria-label="close" class="close">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M8.23286 6.99925L13.7414 1.4989C13.906 1.33424 13.9985 1.11091 13.9985 0.878038C13.9985 0.645168 13.906 0.421835 13.7414 0.257171C13.5767 0.0925073 13.3534 0 13.1206 0C12.8877 0 12.6644 0.0925073 12.4998 0.257171L7 5.76627L1.50024 0.257171C1.33559 0.0925073 1.11228 2.06752e-07 0.879436 2.08487e-07C0.646591 2.10222e-07 0.423282 0.0925073 0.258636 0.257171C0.0939896 0.421835 0.0014924 0.645168 0.0014924 0.878038C0.0014924 1.11091 0.0939896 1.33424 0.258636 1.4989L5.76714 6.99925L0.258636 12.4996C0.176683 12.5809 0.111635 12.6776 0.067245 12.7842C0.0228546 12.8907 0 13.005 0 13.1205C0 13.2359 0.0228546 13.3502 0.067245 13.4568C0.111635 13.5633 0.176683 13.66 0.258636 13.7413C0.33992 13.8233 0.436626 13.8884 0.543175 13.9327C0.649725 13.9771 0.764009 14 0.879436 14C0.994863 14 1.10915 13.9771 1.2157 13.9327C1.32225 13.8884 1.41895 13.8233 1.50024 13.7413L7 8.23224L12.4998 13.7413C12.581 13.8233 12.6778 13.8884 12.7843 13.9327C12.8909 13.9771 13.0051 14 13.1206 14C13.236 14 13.3503 13.9771 13.4568 13.9327C13.5634 13.8884 13.6601 13.8233 13.7414 13.7413C13.8233 13.66 13.8884 13.5633 13.9328 13.4568C13.9771 13.3502 14 13.2359 14 13.1205C14 13.005 13.9771 12.8907 13.9328 12.7842C13.8884 12.6776 13.8233 12.5809 13.7414 12.4996L8.23286 6.99925Z"
                        fill="#066AC9" />
                </svg>
            </a>
            <p class="head">Upload Document</p>
        </div>
        <div class="popup-body" id="popup-body">
            <form id="file_upload_by_ajax" class="file_upload_by_ajax" enctype="multipart/form-data">

                <div>
                    <svg id="upload_icon" class="up-icon" width="36" height="28"
                        viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!--after select file add class fill-->
                        <path
                            d="M29.5992 7.36786C28.4984 4.90883 26.5985 2.86851 24.1906 1.55956C21.7828 0.250613 18.9999 -0.25476 16.2683 0.120887C13.5368 0.496533 11.0073 1.73248 9.06743 3.63932C7.12759 5.54617 5.88442 8.01873 5.52842 10.6781C3.81065 11.078 2.30376 12.0772 1.29394 13.486C0.284109 14.8948 -0.158335 16.6151 0.0506259 18.3201C0.259587 20.0251 1.1054 21.5962 2.42744 22.7349C3.74949 23.8736 5.45569 24.5007 7.22203 24.4971C7.69987 24.4971 8.15814 24.3126 8.49603 23.9841C8.83391 23.6556 9.02373 23.2101 9.02373 22.7456C9.02373 22.2811 8.83391 21.8356 8.49603 21.5072C8.15814 21.1787 7.69987 20.9942 7.22203 20.9942C6.26634 20.9942 5.3498 20.6251 4.67403 19.9682C3.99826 19.3113 3.61861 18.4203 3.61861 17.4913C3.61861 16.5622 3.99826 15.6713 4.67403 15.0143C5.3498 14.3574 6.26634 13.9884 7.22203 13.9884C7.69987 13.9884 8.15814 13.8038 8.49603 13.4754C8.83391 13.1469 9.02373 12.7014 9.02373 12.2369C9.02834 10.1654 9.78817 8.16259 11.1683 6.58423C12.5483 5.00588 14.4593 3.95419 16.5616 3.61603C18.664 3.27786 20.8215 3.67511 22.6511 4.73719C24.4806 5.79928 25.8636 7.45743 26.5543 9.41707C26.6573 9.71804 26.8425 9.98617 27.09 10.1928C27.3375 10.3995 27.6381 10.537 27.9597 10.5905C29.1597 10.811 30.2476 11.42 31.046 12.3184C31.8445 13.2168 32.3064 14.3515 32.3566 15.5378C32.4067 16.724 32.0421 17.8918 31.3222 18.8508C30.6023 19.8098 29.5695 20.5036 28.3921 20.819C27.9286 20.9352 27.5315 21.2255 27.2882 21.6263C27.045 22.027 26.9754 22.5052 27.0949 22.9558C27.2143 23.4064 27.513 23.7924 27.9252 24.0289C28.3375 24.2654 28.8294 24.333 29.2929 24.2169C31.189 23.7298 32.8698 22.6545 34.0801 21.1544C35.2903 19.6542 35.9639 17.8111 35.9986 15.9049C36.0332 13.9987 35.4271 12.1336 34.2721 10.5929C33.1171 9.05206 31.4764 7.91975 29.5992 7.36786ZM19.3115 10.9934C19.1401 10.8339 18.9381 10.7089 18.7169 10.6256C18.2783 10.4504 17.7863 10.4504 17.3476 10.6256C17.1265 10.7089 16.9244 10.8339 16.7531 10.9934L11.3479 16.2477C11.0087 16.5775 10.8181 17.0249 10.8181 17.4913C10.8181 17.9577 11.0087 18.405 11.3479 18.7348C11.6872 19.0646 12.1473 19.2499 12.6271 19.2499C13.1069 19.2499 13.5671 19.0646 13.9064 18.7348L16.2306 16.4579V26.2485C16.2306 26.7131 16.4204 27.1586 16.7583 27.487C17.0962 27.8155 17.5544 28 18.0323 28C18.5101 28 18.9684 27.8155 19.3063 27.487C19.6442 27.1586 19.834 26.7131 19.834 26.2485V16.4579L22.1582 18.7348C22.3257 18.899 22.5249 19.0293 22.7445 19.1182C22.964 19.2071 23.1995 19.2529 23.4374 19.2529C23.6752 19.2529 23.9107 19.2071 24.1303 19.1182C24.3498 19.0293 24.5491 18.899 24.7166 18.7348C24.8855 18.572 25.0195 18.3783 25.111 18.1648C25.2024 17.9514 25.2495 17.7225 25.2495 17.4913C25.2495 17.2601 25.2024 17.0311 25.111 16.8177C25.0195 16.6043 24.8855 16.4106 24.7166 16.2477L19.3115 10.9934Z"
                            fill="#747579" />
                    </svg>
                    <p class="p-head">Upload file from device</p>
                    <span class="subhead">Supported formats: docx, dox, xlsx, pdf, jpeg, jpg, png, ppt, pptx</span>
                    <span class="subhead">Size Limit: 10MB</span>
                </div>

                <div class="single-input">
                    <label for="" class="field-label">Enter Title Of Document</label>
                    <input type="text" name="fileTitle" class="input-field" value="" id="fileTitle" placeholder="Enter Title Of Document"
                        aria-label="Title">
                    <img class="edit" src="{{ asset('backend') }}/presentation/images/edit.svg" alt="edit">
                </div>
    
                <div id="adding_section">
                    <div class="file-list" id="fileNameHide">
                        <div id="file_detail" class="files">
                            <img src="{{ asset('backend') }}/lead-management/images/document.svg" alt="document-icon">
                            <p class="f-name"><span id="file_name" class="">Class10Marksheet.png</span>
                                <span id="file_size" class="f-size">File size: 3.7MB</span>
                            </p>
                            <div class="f-actions"> 
                                <a id="remove_file"><img src="{{ asset('backend') }}/presentation/images/cross-grey.svg"
                                        class="remove" alt="cross" onclick="removeFile()"></a>
                            </div>
                        </div>
                    </div>
    
                    <div class="btns">
                        <a href="javascript:;" class="select-file">
                            <input type="file" id="file" class="file" name="file" id="file"
                                aria-label="file">
                                
                            <span id="fileBtnName" class="">
                                <img src="{{ asset('backend') }}/presentation/images/document.svg" alt="document">
                                Select File</span>
                        </a>
                        {{-- <a href="javascript:;" class="select-file">
                            <input type="file" id="file" class="file" name="file" id="file"
                                aria-label="file">
                                <img src="{{ asset('backend') }}/presentation/images/replace.svg" alt="replace">
                            Replace File
                        </a> --}}
                    </div>
                </div>
                {{-- <input type="submit" class="upload-btn" value="Upload"> --}}
                <div class="btns"><button type="submit" class="upload-btn" id="upload-btn">Upload 
                    </button> <div class="loader5 mx-auto my-1" style="display: none;" id="loader5"></div></div>
            </form>
        </div>
    </div>
    @endif
    <div class="overlay"></div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/presentation/css/presentation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{env('CRM_VERSION')}}" />

    <style>

        .loader5 {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{env('CRM_VERSION')}}"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('backend') }}/lead-management/js/common.js?v={{env('CRM_VERSION')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{env('CRM_VERSION')}}"></script>

    <script>
        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            // $(".single-country").click(function() {
            //     $(".loader").show();
            //     $(".single-country").removeClass("active");
            //     $(this).addClass("active");
            //     setTimeout(function() {
            //         $(".loader").hide();
            //     }, 500);
            //     setTimeout(function() {
            //         $(".emptyDiv").hide();
            //         $(".single-category").removeClass("active")
            //         $(".documentDiv").hide();
            //         $(".folderEmpty").show();
            //         $(".box-wrpr").addClass("show");
            //     }, 400);

            // })

            $(".single-category").click(function() {
                $(".loader").show();
                $(".single-category").removeClass("active");
                $(this).addClass("active");
                setTimeout(function() {
                    $(".loader").hide();
                }, 500);
                setTimeout(function() {
                    $(".folderEmpty").hide();
                    $(".documentDiv").show();
                }, 400);

            })
        })

        function selectCountry(id) {
       
            $(".loader").show();
                $(".single-country").removeClass("active");
                $("#single-country"+id).addClass("active");
                // $(this).addClass("active");
                setTimeout(function() {
                    $(".loader").hide();
                }, 500);
                setTimeout(function() {
                    $(".emptyDiv").hide();
                    $(".single-category").removeClass("active")
                    $(".documentDiv").hide();
                    $(".folderEmpty").show();
                    $(".box-wrpr").addClass("show");
                }, 400);

                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '{{ route('presentation.getCountryPresentationCategory') }}',
                    data: {
                        'id': id
                    },
                    success: function(response) {
                            // Assuming response.presentationCategory is an array
                            $('#select_category_data').text('');
                            if (response.presentationCategory && response.presentationCategory.length > 0) {
                                response.presentationCategory.forEach(function (category) {
                                // Create a new list item
                                var listItem = $('<li class="list-item single-category" id="single-category' + category.id + '" onclick="selectCategory(' + category.id + ', ' + id + ')">');
                                
                                // Create an image element
                                var image = $('<img src="{{ asset('backend') }}/presentation/images/folder.svg" alt="folder" width="100%" height="100%">');
                                
                                // Create a paragraph element with the category name
                                var categoryName = $('<p class="category-name">' + category.name + '</p>');

                                // Append the image and category name to the list item
                                listItem.append(image);
                                listItem.append(categoryName);

                                // Append the list item to the target element (replace '#target-element' with your actual target element)
                                $('#select_category_data').append(listItem);
                            });
                            }else{
                                var listItem = $('<p class="emptyMsg">Category Not Found!</p>');
                                $('#select_category_data').append(listItem);
                            }
                       

                    }
                });
        }

        function selectCategory(id, countryID) {
                $(".loader").show();
                $(".single-category").removeClass("active");
                $("#single-category"+id).addClass("active");
               var documentSearch = $("#documentSearch").val();
                // setTimeout(function() {
                //     $(".loader").hide();
                // }, 500);
                // setTimeout(function() {
                //     $(".folderEmpty").hide();
                //     $(".documentDiv").show();
                // }, 400);


                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: '{{ route('presentation.get_documents') }}',
                    data: {
                        'categoryID': id,
                        'countryID': countryID,
                        'documentSearch': documentSearch
                    },
                    success: function(response) {
                        $('#documentListDiv').text("");
                        if ( response.data.uploaded_documents &&  response.data.uploaded_documents.length > 0) {
                        response.data.uploaded_documents.forEach(function (documents) {
                                // Create a new document item container
                                var listItem = $('<div class="documentList">');

                                // Create the document name div
                                var documentNameDiv = $('<div class="documentNameDiv">');
                                var image = $('<img src="{{ asset('backend') }}/presentation/images/activeFile.svg" alt="activeFile" width="100%" height="100%">');
                                var documentName = $('<p class="documentName">' + documents.document_name + '</p>');

                             
                                
                                if("{{userCan('presentation.documentsDelete')}}"){
                                    var closebtn = $('<p class="close" onclick="deleteDocument(' + documents.id + ')">' +
                                    '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                                        '<path d="M7 7L17 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round"></path>' +
                                        '<path d="M17 7L7 17" stroke="#2B3340" stroke-width="2" stroke-linecap="round"></path>' +
                                    '</svg>' +
                                '</p>');

                                documentNameDiv.append(closebtn);
                                }

                                documentNameDiv.append(image);
                                documentNameDiv.append(documentName);

                                // Create the date div
                                var formattedDate = formatDate(documents.updated_at);
                                var fileSizeInBytes = documents.document_size;
                                var fileSizeInMB = fileSizeInBytes / (1024 * 1024); // Convert bytes to megabytes
                                // Use toFixed(2) to round to 2 decimal places
                                var formattedSize = fileSizeInMB.toFixed(2) + ' MB';

                                var dateDiv = $('<div class="dateDiv">');
                                var documentDate = $('<p class="documentDate">'+ formattedDate + '</p>'); // Replace with actual date
                                var documentSize = $('<p class="documentSize">'+ formattedSize + '</p>'); // Replace with actual size
                                dateDiv.append(documentDate);
                                dateDiv.append(documentSize);
                                var documentLink = response.data.document_link + documents.document_location;

                                var file = documentLink.split('\\').pop();
                                var extension = file.substr(file.lastIndexOf("."));

                                var allowedExtensionsRegx = /(\.doc|\.xlsx|\.xls|\.csv|\.docx|\.ppt|\.pptx|\.jpeg|\.jpg|\.png|\.gif)$/i;


                                var newDocumentLink = documentLink;

                                if (allowedExtensionsRegx.test(extension)) {
                                    newDocumentLink = "https://docs.google.com/gview?url=" + encodeURIComponent(documentLink) + "&embedded=true";
                                }

                                // Create the View Document button
                                // var viewDocumentBtn = $('<a href="' + response.data.document_link + documents.document_location + '" class="documentBtn" target="blank">View Document</a>');
                                // var viewDocumentBtn = $('<a href="{{ route('presentationDocument.view',  ['DocumentLink' => '+newDocumentLink+','id' => '+response.data.id+']) }}" class="documentBtn" target="blank">View Document</a>');
                                var viewDocumentBtn = $('<a href="{{ route('presentationDocument.view') }}?documentLink=' + encodeURIComponent(newDocumentLink) + '&id=' + documents.id + '" class="documentBtn" target="_blank">View Document</a>');

                                // var iframeSrc = response.data.document_link + documents.document_location;
                                // var iframe = $('<iframe src="' + newDocumentLink + '" title="Banner Pdf Viewer" allowfullscreen></iframe>');

                                // Append the documentNameDiv, dateDiv, and viewDocumentBtn to the listItem
                                listItem.append(documentNameDiv);
                                listItem.append(dateDiv);
                                listItem.append(viewDocumentBtn);

                                // Append the listItem to the document list container
                                $('#documentListDiv').append(listItem);
                            });
                        }else{
                            var listItem = $('<p class="emptyMsg">Documents Not Found!</p>');
                                $('#documentListDiv').append(listItem);
                        }

                        $(".loader").hide();
                        $(".folderEmpty").hide();
                        $(".documentDiv").show();
                    }
                });

        }

        function formatDate(inputDate) {
        // Assuming inputDate is a valid date string (e.g., "2023-11-13T08:00:15.000000Z")
        var dateObject = new Date(inputDate);
        
        // Define formatting options
        var options = { day: 'numeric', month: 'short', year: 'numeric'};

        // Format the date
        var formattedDate = dateObject.toLocaleDateString('en-US', options);

        return formattedDate;
        }


        $('#file_upload_by_ajax').on('submit', function(e) {
        e.preventDefault();

        formData = new FormData($(this)[0]);
        var file = document.getElementById('file').files[0];
        var fileTitle = $("#fileTitle").val();
        var countryActiveElement = document.querySelector('.single-country.active');
        var categoryActiveElement = document.querySelector('.single-category.active');
        
        if (countryActiveElement.id && categoryActiveElement.id) {
    
            var country_id = countryActiveElement.id.replace('single-country', '');
            var countryName = countryActiveElement.querySelector('.country-name').textContent;

            var presentation_category_id = categoryActiveElement.id.replace('single-category', '');
            var presentationCategoryName = categoryActiveElement.querySelector('.category-name').textContent;

        } else {
            Swal.fire('Plase select Country/Category','','error');
        }
        if(fileTitle == null || fileTitle == ""){
            Swal.fire('File Title is required','','error');
            return 0;
            
        }
        formData.append('country_id', country_id);
        formData.append('countryName', countryName);
        formData.append('presentation_category_id', presentation_category_id);
        formData.append('presentationCategoryName', presentationCategoryName);
        formData.append('file', file);

        if (file != null ) {
            if (file['size'] >= 10000000) {
                code = "Document Upload Maximum Size Only 10 Mb";
                $('#success_popup_text').html(code);
                $('#success-popup').css('display', 'block');
                $('#icons_success_popup').html(
                    `<img src="{{ asset('backend') }}/lead-management/images/error-1.svg" alt="error" width="100%" height="100%">`
                );
                $(".upload-popup").hide();
                $(".overlay").hide();
                //document. ('upload-popup').style.display="none";
                const ele_var = document.querySelectorAll('body');
                ele_var.forEach((element) => {
                    element.classList.remove('no-scroll');
                });
            }else{

                const button = document.getElementById('upload-btn');
                const loader = document.getElementById('loader5');

                // Disable the button
                button.disabled = true;
                button.style.backgroundColor = 'gray';

                // Show the loader
                loader.style.display = 'inline-block';

            
                $.ajax({
                    type: 'POST',
                    url: "{{ route('presentation.documents_upload') }}",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        loader.style.display = 'none';
                    // button.style.display = 'inline-block';
                    button.disabled = false;
                    button.style.backgroundColor = '#055aab';
                        if (res.status == 1) {
                            $('#file, #fileTitle, #file_name').val('');
                            $('#fileBtnName').html(" <img src=\"{{ asset('backend') }}/presentation/images/document.svg\" alt=\"document\"> Select File");
                            $("#fileNameHide").hide();
                            $(".upload-popup").hide();
                            $(".overlay").hide();
                            $("body").removeClass("no-scroll");
                            Swal.fire('Upload File Successfully!','','success');
                            selectCategory(presentation_category_id,country_id);
                        } 
                    },
                    error: (err) => {
                        // Hide the loader on error
                        loader.style.display = 'none';

                        // Enable the button and set its style
                        button.disabled = false;
                        button.style.backgroundColor = '#055aab';

                        // Additional error handling if needed
                        console.error('Error:', err);
                        Swal.fire('Error during upload', '', 'error');
                    }
                });
            }


            
            
        } else {
            Swal.fire('First Upload File','','error');
        }
        
        $('#file_name').html("Select File");
    });

 
    
    function documentSearch() {
        console.log("ff");
        var search = $("#documentSearch").val();
        console.log("search "+search);
    
        var countryActiveElement = document.querySelector('.single-country.active');
        var categoryActiveElement = document.querySelector('.single-category.active');
        
        if (countryActiveElement.id && categoryActiveElement.id) {
    
            var country_id = countryActiveElement.id.replace('single-country', '');
            var presentation_category_id = categoryActiveElement.id.replace('single-category', '');
            selectCategory(presentation_category_id, country_id);

        } else {
            Swal.fire('Plase select Country/Category','','error');
        }
    

    }

    $(".input-field").change(function () { 
        if (!$(this).val()) {
            $(this).parent('.single-input').removeClass('field-not-empty');
        } else {
            $(this).parent('.single-input').addClass('field-not-empty');
        }
    })

    $(".btn-upload").click(function(){
        $('#file, #fileTitle, #file_name').val('');
        $('#fileBtnName').html("<img src=\"{{ asset('backend') }}/presentation/images/document.svg\" alt=\"document\"> Select File");
        $("#fileNameHide").hide();
        $(".upload-popup").show();
        $(".overlay").show();
        $("body").addClass("no-scroll");

    })

    $(".close").click(function(){
        $('#file, #fileTitle, #file_name').val('');
        $('#fileBtnName').html(" <img src=\"{{ asset('backend') }}/presentation/images/document.svg\" alt=\"document\"> Select File");
        $("#fileNameHide").hide();
        $(".upload-popup").hide();
        $(".overlay").hide();
        $("body").removeClass("no-scroll");

    })

    document.getElementById('file').onchange = function() {
        // var file = document.getElementById('file').files[0];
        // $('#file_name').html(file['name']);
        // $("#fileNameHide").show();
        // $('#fileBtnName').html(" <img src=\"{{ asset('backend') }}/presentation/images/replace.svg\" alt=\"replace\"> Replace File");
     
        var fileInput = document.getElementById('file');
    
    if (fileInput.files.length > 0) {
        var file = fileInput.files[0];
        var fileSizeInBytes = file.size;

        // Convert file size to kilobytes (KB)
        var fileSizeInKB = fileSizeInBytes / 1024;

        // Convert file size to megabytes (MB)
        var fileSizeInMB = fileSizeInKB / 1024;

        // Display the file name and size
        $('#file_name').html(file['name']);

        $('#file_size').html('File size: ' + fileSizeInMB.toFixed(2) + ' MB');
        $("#fileNameHide").show();
        $('#fileBtnName').html("<img src=\"{{ asset('backend') }}/presentation/images/replace.svg\" alt=\"replace\"> Replace File");
    }
       
    };

    function removeFile(){
        $('#file, #fileTitle, #file_name').val('');
        $('#fileBtnName').html(" <img src=\"{{ asset('backend') }}/presentation/images/document.svg\" alt=\"document\"> Select File");
        $("#fileNameHide").hide();
    }

    function deleteDocument(documentId) {
        if (confirm('Are you sure you want to delete this Document?')) {
            var document_id = documentId;
            $.ajax({
                type: "POST",
                url: '{{ route('presentation.delete_documents') }}',
                data: { 'document_id': documentId },
                beforeSend: function() {
                    $(".loader").show();
                },
                success: function(res) {
                    $(".loader").hide();
                    var countryActiveElement = document.querySelector('.single-country.active');
                    var categoryActiveElement = document.querySelector('.single-category.active');
                    (res.status == 1) ?   Swal.fire('Document Deleted Successfully','','success'): Swal.fire('Document Not Present','','error');
                    if (countryActiveElement.id && categoryActiveElement.id) {
                
                        var country_id = countryActiveElement.id.replace('single-country', '');
                        var presentation_category_id = categoryActiveElement.id.replace('single-category', '');
                        selectCategory(presentation_category_id, country_id);

                    } else {
                        Swal.fire('Plase select Country/Category','','error');
                    }
                   
                }

            })
        }
    }

   
    </script>
    <script>
        function handleEnterKey(event) {
            // Check if the pressed key is 'Enter'
            if (event.key === 'Enter') {
                documentSearch();
            }
        }
    </script>

<script>
    $(document).ready(function () {
        var countrySearchInput = $('#countrySearch');
        var countryList = $('.list');

        countrySearchInput.on('keyup', function () {
            var userInput = $(this).val().toLowerCase();

            countryList.find('.single-country').filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(userInput) > -1);
            });
        });
    });

</script>
    
@endsection