@extends('website.mobile.layouts.app-secondary')
@section('title')
    {{ __('document_vault') }}
@endsection
@section('main')
    <div class="dashboard-wrapper">
        <div class="container">
            <div class="row">
                <x-website.candidate.sidebar />
                <div class="col-lg-9">
                    <div class="dashboard-right">
                        <div class="dashboard-right-header rt-mb-32 flex-row align-items-center">
                            <div class="left-text m-0">
                                <h3 class="f-size-18 lh-1 m-0">{{ __('document_vault') }}</h3>
                            </div>
                            <span class="sidebar-open-nav">
                                <i class="ph-list"></i>
                            </span>
                        </div>
                        <div class="cadidate-dashboard-tabs">
                            <ul class="nav nav-pills h_38ul" id="pills-tab" role="tablist">
                                {{-- All Category  --}}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-all-tab" data-bs-toggle="pill" data-bs-target=""
                                        type="button" role="tab" aria-controls="pills-personal" aria-selected="true">
                                        {{-- <x-svg.user-icon /> --}}
                                        {{-- <i class="ph-file"></i> --}}

                                        {{ __('all') }}
                                    </button>
                                </li>

                                {{-- Application Category  --}}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link " id="pills-application-tab" data-bs-toggle="pill"
                                        data-bs-target="" type="button" role="tab" aria-controls="pills-profile"
                                        aria-selected="false">
                                        {{-- <x-svg.user-round-icon /> --}}
                                        {{ __('application') }}
                                    </button>
                                </li>

                                {{-- Visa Category  --}}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link " id="pills-visa-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-experience" type="button" role="tab"
                                        aria-controls="pills-experience" aria-selected="false">
                                        {{-- <x-svg.briefcase-icon /> --}}
                                        {{ __('visa') }}
                                    </button>
                                </li>

                                {{-- Financial Category  --}}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link " id="pills-financial-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-social" type="button" role="tab"
                                        aria-controls="pills-social" aria-selected="false">
                                        {{-- <x-svg.globe2-icon /> --}}
                                        {{ __('financial') }}
                                    </button>
                                </li>

                                {{-- Account Category  --}}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-additional-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-setting" type="button" role="tab"
                                        aria-controls="pills-setting" aria-selected="false">
                                        {{-- <x-svg.cog-icon /> --}}
                                        {{ __('additional') }}
                                    </button>
                                </li>
                            </ul>


                            <div class="d-flex justify-content-center">
                                <div id="loader" class="">
                                    <div class="spinner-border text-info " role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>

                                </div>
                            </div>

                            <button id="load_modal" type="button" class="hidden" data-bs-toggle="modal"
                                data-bs-target="#iframe_modal">
                                Launch demo modal
                            </button>
                            <div class="modal fade" id="iframe_modal" tabindex="-1" aria-labelledby="exampleModal2Label"
                                aria-hidden="true">
                                <div class="modal-dialog modal-xl ">
                                    <div class="modal-content">
                                    <div class="modal-header custom-header">
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                        <div class="ratio ratio-4x3 dynamic_iframe">
                                            <iframe id="iframe_document" src="" title="Document Viewer"
                                                allowfullscreen></iframe>
                                             <img style="display: none;-webkit-user-select: none;"
                                                    src="" id="document_file">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="accordionExample2" class="accordion accordion-icon accordion-bg-light "></div>
                            <div id="pills-section-additional">

                            </div>




                            <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content m-2">
                                        <div class="modal-header modal_header">

                                            <div><span id="upload_modal_title"
                                                    class="align-middle fw-bold fs-5 text-dark upload_modal_title">
                                                </span>
                                            </div>



                                            <button type="button"
                                                class="btn btn-sm btn-white btn-round mb-0 p-0 position-absolute close-button"
                                                data-bs-dismiss="modal" aria-label="Close">✕</button>

                                        </div>
                                        <div class="modal-body p-2">
                                            <div id="doc_name_input">
                                                <div>
                                                    <label for="document_name" class="fw-bold p-0 mb-2">Document
                                                        Name</label>
                                                    <input type="text" name="document_name" id="document_name" />
                                                </div>
                                                <div class="my-3 mb-1 d-flex justify-content-center">
                                                    <button id="next_upload"
                                                        class="btn btn-success border border-grey w-25">
                                                        <span class="text-grey fs-6">Next</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div id="regular_upload">
                                                <div id="upload_icon"
                                                    class="d-flex justify-content-center upload_icon my-1">
                                                    <svg data-v-600095a0="" width="25px" height="25px"
                                                        viewBox="0 0 40 40" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg" class="h-10 w-10">
                                                        <path d="M15.0003 28.334V18.334L11.667 21.6673" stroke="#697386"
                                                            stroke-width="2.11607" stroke-linecap="round"
                                                            stroke-linejoin="round"></path>
                                                        <path d="M15 18.334L18.3333 21.6673" stroke="#697386"
                                                            stroke-width="2.11607" stroke-linecap="round"
                                                            stroke-linejoin="round"></path>
                                                        <path
                                                            d="M36.6663 16.6673V25.0007C36.6663 33.334 33.333 36.6673 24.9997 36.6673H14.9997C6.66634 36.6673 3.33301 33.334 3.33301 25.0007V15.0007C3.33301 6.66732 6.66634 3.33398 14.9997 3.33398H23.333"
                                                            fill="url(#paint0_linear_1096_170322)"></path>
                                                        <path
                                                            d="M36.6663 16.6673V25.0007C36.6663 33.334 33.333 36.6673 24.9997 36.6673H14.9997C6.66634 36.6673 3.33301 33.334 3.33301 25.0007V15.0007C3.33301 6.66732 6.66634 3.33398 14.9997 3.33398H23.333"
                                                            stroke="#697386" stroke-width="2.11607"
                                                            stroke-linecap="round" stroke-linejoin="round">
                                                        </path>
                                                        <path
                                                            d="M36.6663 16.6673H29.9997C24.9997 16.6673 23.333 15.0007 23.333 10.0007V3.33398L36.6663 16.6673Z"
                                                            fill="url(#paint1_linear_1096_170322)" stroke="#697386"
                                                            stroke-width="2.11607" stroke-linecap="round"
                                                            stroke-linejoin="round"></path>
                                                        <defs>
                                                            <linearGradient id="paint0_linear_1096_170322" x1="19.9997"
                                                                y1="-59.9992" x2="19.9997" y2="23.5722"
                                                                gradientUnits="userSpaceOnUse">
                                                                <stop stop-color="#7C7C7C"></stop>
                                                                <stop offset="1" stop-color="#7C7C7C"
                                                                    stop-opacity="0"></stop>
                                                            </linearGradient>
                                                            <linearGradient id="paint1_linear_1096_170322" x1="39.6426"
                                                                y1="-1.78495" x2="22.4997" y2="14.6436"
                                                                gradientUnits="userSpaceOnUse">
                                                                <stop stop-color="#7C7C7C"></stop>
                                                                <stop offset="1" stop-color="#777777"
                                                                    stop-opacity="0"></stop>
                                                            </linearGradient>
                                                        </defs>
                                                    </svg>
                                                </div>
                                                <p id="modal_replace_text" class="fw-bold text-center">
                                                    Choose File to Upload
                                                </p>
                                                <p data-v-600095a0=""
                                                    class="mt-1 font-medium text-xs w-full text-yocket-neutral-500 text-center">
                                                    Supported formats:
                                                    pdf, png, jpg and jpeg
                                                </p>
                                                <p class="text-center">Size Limit: 5MB</p>

                                                <div class="upload-container">
                                                    <div class="border-container">

                                                        <div class="d-flex justify-content-center">
                                                            <form id="file_upload_form" class="file_upload_form"
                                                                enctype="multipart/form-data">


                                                                <input id="subcategory_name" type="hidden"
                                                                    name="subcategory_name" value=""
                                                                    placeholder="eg. Green Card" />
                                                                <input id="document_subcategory_id" type="hidden"
                                                                    name="document_subcategory_id" value="" />
                                                                <div id="row ">
                                                                    <input id="file"
                                                                        class="form-control file_upload_input"
                                                                        name="file" type='file' />
                                                                </div>
                                                                <div class="row">
                                                                    <div id="modal_warning" class="text-left"></div>
                                                                </div>
                                                                <div class="row mt-3 d-flex justify-content-center">
                                                                    <button class="btn btn-success border border-grey w-50"
                                                                        type="submit">
                                                                        <span class="text-grey fs-6">Upload File</span>
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="modal_footer" class="modal-footer m-0 p-0">
                                            <div id="uploaded_card" class="card w-100 m-0 p-2">
                                                <div class="card-body p-0 m-0">
                                                    <div class="row m-0">
                                                        <div id="modal_footer_title"
                                                            class="col-10 fw-bold fs-6 d-flex align-items-center">

                                                        </div>
                                                        <div
                                                            class="col-2 text-center d-flex justify-content-center align-items-center m-0 p-0">
                                                            <button id="remove_file"
                                                                class="btn btn-link p-0 remove_file d-flex justify-content-center align-items-center"
                                                                type="">✖</button>
                                                        </div>
                                                        <div id="file_size" class="fs-6">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-footer text-center body-font-4 text-gray-500">
            <x-website.footer-copyright />
        </div>
    </div>
@endsection

@section('frontend_links')
    <style>
        /* .dropdown-menu{
                            z-index: 2000000 !important;
                            position: sticky !important;
                        } */
        input[type=file] {
            position: relative;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            opacity: 100;
            cursor: pointer
        }

        .h_38ul {
            height: 38px !important;
        }

        .card-overflow-visible {
            /* padding: 15px; */
            /* overflow: visible; */
        }

        .modal_header {
            background-color: #e2eced
        }

        @media (max-width: 767px) {
            .dashboard-right-header {
                margin: 12px 0 0;
            }

            .dashboard-right-header .left-text {
                margin-bottom: 0 !important;
            }

            .dashboard-right-header .sidebar-open-nav {
                margin: 0;
            }

            .cadidate-dashboard-tabs .nav-pills {
                margin-bottom: 10px;
                justify-content: center;
            }

            .cadidate-dashboard-tabs .nav-pills .nav-link {
                padding: 12px 7px;
            }
        }
    </style>
@endsection

@section('frontend_scripts')
    <script src="{{ asset('frontend') }}/secondary-theme/assets/js/document-upload.js"></script>
@endsection