<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <!-- Axios for AJAX requests -->
    <?php
                                // Decode JSON data arrays
                                $storeAdhar = json_decode(stripslashes(trim($singleVendorDetails->store_adhar, '"')), true) ?: [];
                                $storeDocuments = json_decode(stripslashes(trim($singleVendorDetails->store_documents, '"')), true) ?: [];
                                $storePancard = json_decode(stripslashes(trim($singleVendorDetails->store_pancard, '"')), true) ?: [];
                                $storePictures = json_decode(stripslashes(trim($singleVendorDetails->store_pictures, '"')), true) ?: [];
                                $storeSelfies = json_decode(stripslashes(trim($singleVendorDetails->store_selfies, '"')), true) ?: [];
                                $profileImages = json_decode(stripslashes(trim($singleVendorDetails->profile_image, '"')), true) ?: [];
                            
                                // Utility function to validate image URLs
                                
                            
                                // Define document sections with corresponding folder paths
                                
                            ?>
        <style>
            h3 {
                font-weight: 600;
                font-size: 16px;
                line-height: 16px;
                color: #000000;
            }
            
            .Dashboard_header header .header_box {
            border-bottom: 1px solid #ccc;
            width:98%;
        }
        .Dashboard_header header .header_left_side .second {
             font-size: 14px;
            color: #4D4D4D;
            font-weight: 600;
        }
        .Dashboard_header header {
                border-bottom: none;
            }
    
            table {
                caption-side: bottom;
                border-collapse: collapse;
                width: 100%;
            }
    
            table#dynamic-table {
                width: 100%;
                margin: auto;
                margin-top: 15px;
                border: 1px solid #1B59F8;
            }
    
            table#dynamic-table td input,
            .users-intro-info input,
            textarea {
                border: none;
                outline: none;
            }
    
            table#dynamic-table td {
                background: white;
                color:#2E2E2E;
                font-size: 11.36px;
                font-weight: 400;
                line-height: 16.22px;
                text-align: left;
            }
    
            #t-head {
                background: #F1F3F9;
            }
    
            .Vendor-Detail-section {
                width: 100%;
            }
    
            .Vendor-Detail-section .vendor_1 select {
                border: 1px solid #1b59f8;
                height: 55px;
                width: 173px;
                outline: none;
                border-radius: 4px;
            }
    
            .Vendor-Detail-section .vendor_1 select option {
                font-size: 16px;
                font-weight: 500;
                color: #000000;
            }
    
            .Vendor-Detail-section .vendor_2 button {
                border: 1px solid #1b59f8;
                height: 55px;
                width: 173px;
                outline: none;
                background-color: #ffffff;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 500;
            }
    
            .Vendor-Detail-section .vendor_2 button a {
                color: #000000;
            }
    
            .Vendor-Detail-section h6 {
                font-size: 16px;
                font-weight: 600;
                color: #000000;
                margin-top: 30px;
            }
    
            .list_ul ul li {
                font-size: 16px;
                font-weight: 400 !important;
                color: #333333;
                line-height: 47px;
            }
    
            .vender_detail h4 {
                font-size: 16px;
                font-weight: 600;
                color: #000000;
                margin-top: 25px;
            }
    
            .vender_detail ul {
                padding-left: 0;
            }
    
            .vender_detail ul li {
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                color: #333333;
            }
    
            .opening_button {
                display: flex;
                justify-content: start;
                margin-top: 70px;
                padding: 0 0;
                gap: 80px;
            }
    
            .opening_button button {
                border: 1px solid #000000;
                height: 51px;
                font-size: 24px;
                font-weight: 400;
                color: #000000;
                width: 207px;
                border-radius: 2px;
                background: #ffffff;
                margin-bottom: 0;
            }
    
            .opening_button_1 {
                margin-top: 50px;
            }
    
            @media (max-width: 1430px) and (min-width: 1100px) {
                .opening_button_1 button {
                    width: 100% !important;
                    font-size: 8px !important;
                }
            }
    
            @media (max-width: 1100px) {
                .opening_button button {
                    font-size: 12px;
                    padding: 10px 15px;
                }
    
                /*#grub_1 {*/
                /*    margin: 20px 0;*/
                /*}*/
            }
    
            .input_ty {
                margin-top: 10px;
            }
    
            .input_ty textarea {
                width: 100%;
                height: 366px;
                border: 1px solid #000000;
                outline: none;
                padding: 15px;
                border-radius: 4px;
            }
    
            .input_ty_1 {
                margin-top: 10px;
            }
    
            .input_ty_1 {
                width: 100%;
                height: 366px;
                border: 1px solid #000000;
                outline: none;
                padding: 15px;
                border-radius: 4px;
                background-color: #ffffff;
            }
    
            .opening_button_1 button {
                border: 1px solid #000000;
                height: 51px;
                font-size: 24px !important;
                font-weight: 400;
                color: #000000;
                width: 207px;
                border-radius: 2px;
                background: #ffffff;
                margin-bottom: 0;
            }
    
            #wash_grub p {
                font-size: 16px;
                font-weight: 400;
                line-height: 16px;
                color: #333333;
            }
    
            #wash_grub h6 {
                font-size: 15px;
                font-weight: 400;
                line-height: 16px;
                color: #000000;
            }
    
            #wash_grub ul {
                margin-top: 100px;
                padding-left: 0;
            }
    
            #wash_grub ul li {
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                color: #333333;
            }
    
            .Shop-add-1 {
                box-shadow: 0px 0px 5px 0px #b1b1b1;
                background-color: #FFFFFF;
                padding: 15px 25px;
                margin-top: 20px;
                border-radius: 10px;
            }
    
            .Shop_detail .Shop-add-1 table {
                border: 1px solid #1B59F8;
                width: 100%;
            }
    
            .basic_iinfo ul li {
    
                font-size: 16px;
                font-weight: 400;
                color: #333333;
                line-height: 40px;
            }
    
            .vendor_services {
                margin-top: 30px;
            }
    
            .vendor_services h6 {
                font-size: 16px;
                font-weight: 600;
                color: #000000;
            }
    
    
            .carousel-inner .carousel-item img {
                height: 170px;
            }
    
            .Services_button {
                border: 1px solid #3199ff;
                 width: fit-content; 
                /* height: 67px; */
                padding: 13px;
                background-color: #e8e8e8;
                border-radius: 4px;
            }
    
            .Services_button button {
                background-color: #2148c0;
                color: white;
                border: none;
                font-size: 9px;
                font-weight: 500;
                padding: 12px 25px;
                border-radius: 3px;
                /* margin-left: 15px; */
                opacity:78%;
            }
    
            .vendor_table table {
                border: 1px solid #1B59F8 !important;
                 width: 60% !important;
                 margin-bottom:15px;
            }
    
            .vendor_table table tbody button {
                background-color: #2148c0;
                color: white;
                border: none;
                padding: 5px 30px;
                border-radius: 3px;
            }
    
            .btn_wait {
                float: right;
                margin-top: 10px;
            }
    
            .btn_wait .btn1 {
                color: #ffffff;
                font-size: 9px;
                font-weight: 500;
                background-color: #dba008;
                border: none;
                width:85px;
                height:34px;
                border-radius: 3px;
            }
    
            .btn_wait .btn2 {
                color: #ffffff;
                font-size: 9px;
                font-weight: 500;
                background-color: #f44336;
                border: none;
                padding: 10px 25px;
                border-radius: 3px;
            }
    
            .btn_wait .btn3 {
                color: #ffffff;
                font-size: 9px;
                font-weight: 500;
                background-color: #56b429;
                border: none;
                padding: 10px 25px;
                border-radius: 3px;
            }
    
    
            .Vendor-Detail-section .vendor_1 select {
                border: 1px solid #1b59f8;
                height: 55px;
                width: 173px;
                outline: none;
                border-radius: 4px;
            }
    
            .Vendor-Detail-section .vendor_1 select option {
                font-size: 16px;
                font-weight: 500;
                color: #000000;
            }
    
            .Vendor-Detail-section .vendor_2 button {
                border: 1px solid #1b59f8;
                height: 55px;
                width: 173px;
                outline: none;
                background-color: #ffffff;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 500;
            }
    
            .Vendor-Detail-section .vendor_2 button a {
                color: #000000;
            }
    
            .Vendor-Detail-section h6 {
                font-size: 16px;
                font-weight: 600;
                color: #000000;
                margin-top: 30px;
            }
    
            .list_ul ul li {
                font-size: 16px;
                font-weight: 400 !important;
                color: #333333;
                line-height: 47px;
            }
    
            .vender_detail h4 {
                font-size: 16px;
                font-weight: 600;
                color: #000000;
                margin-top: 25px;
            }
    
            .vender_detail ul {
                padding-left: 0;
            }
    
            .vender_detail ul li {
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                color: #333333;
            }
    
            .opening_button {
                display: flex;
                justify-content: start;
                margin-top: 70px;
                padding: 0 0;
                gap: 80px;
            }
    
            .opening_button button {
                border: 1px solid #000000;
                height: 51px;
                font-size: 24px;
                font-weight: 400;
                color: #000000;
                width: 207px;
                border-radius: 2px;
                background: #ffffff;
                margin-bottom: 0;
            }
    
            .opening_button_1 {
                margin-top: 50px;
            }
    
            @media (max-width: 1430px) and (min-width: 1100px) {
                .opening_button_1 button {
                    width: 100% !important;
                    font-size: 8px !important;
                }
            }
    
            @media (max-width: 1100px) {
                .opening_button button {
                    font-size: 12px;
                    padding: 10px 15px;
                }
    
    
                /*#grub_1 {*/
                /*    margin: 20px 0;*/
                /*}*/
            }
    
            .input_ty {
                margin-top: 10px;
            }
    
            .input_ty textarea {
                width: 100%;
                height: 366px;
                border: 1px solid #000000;
                outline: none;
                padding: 15px;
                border-radius: 4px;
            }
    
            .input_ty_1 {
                margin-top: 10px;
            }
    
            .input_ty_1 {
                width: 100%;
                height: 366px;
                border: 1px solid #000000;
                outline: none;
                padding: 15px;
                border-radius: 4px;
                background-color: #ffffff;
            }
    
    
            .opening_button_1 button {
                border: 1px solid #000000;
                height: 51px;
                font-size: 24px !important;
                font-weight: 400;
                color: #000000;
                width: 207px;
                border-radius: 2px;
                background: #ffffff;
                margin-bottom: 0;
            }
    
            #wash_grub p {
                font-size: 16px;
                font-weight: 400;
                line-height: 16px;
                color: #333333;
            }
    
            #wash_grub h6 {
                font-size: 15px;
                font-weight: 400;
                line-height: 16px;
                color: #000000;
            }
    
            #wash_grub ul {
                margin-top: 100px;
                padding-left: 0;
            }
    
            #wash_grub ul li {
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                color: #333333;
            }
            table th{
                font-size:14px !important;
                font-weight: 600;
                line-height: 16px;
                text-align: left;
                color: #1D2433;
            }
            .vendor_table table tr:nth-child(odd){
                background:#f1f3f9;
            }
            .img_file_name{
                font-size:12px !important;
                color:#1D2433 !important;
                font-weight:400;
                line-height:18px;
                width: fit-content;
            }
        </style>
        <style>
            .table>:not(caption)>*>* {
                border: none;
            }
    
            .table>:not(:last-child)>:last-child>* {
                border: none;
                color: #333333;
                font-weight: 400;
            }
    
            #storeTable {
                background: transparent;
            }
    
            #tableOFStore {
                display: flex;
                margin-left: 20px;
                justify-content:space-between;
            }
            
        .tableContent td {
            word-wrap: break-word;
            white-space: normal;
            max-width: 150px; /* Adjust the max-width as needed */
            flex-basis: calc(33.33% - 20px); /* Adjust the width based on the number of columns */
            margin-bottom: 10px; /* Add margin to separate rows */
            line-height:16px;
        }
            .address_data{
                color:#000000 !important;
                font-size:15px !important;
            }
    
            .tableContent {
                display: flex;
                flex-direction: column;
            }
            .tableContent th{
                font-size:16px !important;
                color:#333;
                line-height:16px;
                height:43px;
            }
            
        </style>
        <style>
            .container1 {
                width: 100%;
                height: 234px;
                display: grid;
                grid-template-rows: 5fr 1fr;
                position: relative;
            }
    
            .imageContainer {
                list-style: none;
                margin: 0;
                padding: 0;
                /*justify-content: center;*/
                display: flex;
                /* justify-content: space-between; */
            }
    
            .tab {
                width: calc(50px + 5px);
                height: calc(50px + 5px);
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
                shape-outside: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
                z-index: 0;
                transition: width 0.5s;
            }
    
            .tab img {
                width: 50px;
                height: 50px;
                z-index: 10;
                cursor: pointer;
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
                shape-outside: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
                transition: width 0.5s;
            }
    
            input[type="radio"] {
                display: none;
            }
    
            .tab {
                background: linear-gradient(#efefef,
                        #efefef var(--line-offset),
                        #021919 var(--line-offset));
            }
    
            [type=radio]:checked~label~.content1 {
                text-align: center;
                z-index: 8;
            }
    
    
            [type=radio]:checked~label .tab {
                width: 0;
            }
    
            .content1 {
                position: absolute;
                background: #021919;
                top: 1vh;
                left: 0;
                width: 260px;
                height: 140px;
                overflow: hidden;
                display: flex;
                align-items: center;
            }
    
            .content1 img {
                height: 140px;
                width: 260px;
            }
    
            .Dashboard_header header {
                z-index: 999;
            }
    
            .btn_wait {
                text-align: center;
            }
    
            .modal1 {
                display: none;
                /* Initially hidden */
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.5);
                /* Dimmed background */
                z-index: 9999;
                transition: 0.5s;
            }
    
            .modal-content1 {
                background-color: white;
                margin: 15% auto;
                padding: 20px;
                border: 1px solid #888;
                width: 30%;
                border-radius: 10px;
                /* Adjust width as needed */
            }
    
            .close1 {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }
    
            .close1:hover,
            .close1:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
    
            .hidden {
                display: none;
                /* Hidden class to hide elements */
            }
            .modalsContent{
                display: none; /* Hidden by default */
        position: fixed;
        z-index: 9999; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
            }
            .modal-contents{
                margin: auto;
        display: block;
            width: 80%;
        max-width: 700px;
        height: 85vh;
            object-fit: contain;
            }
            #caption {
        text-align: center;
        color: white;
        /*padding: 10px 20px;*/
        /*height: 150px;*/
    }
    /* Close button */
    .closes {
        /*position: absolute;*/
        /*top: 15px;*/
        /*right: 35px;*/
        color: white;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }
    
    .closes:hover,
    .closes:focus {
        color: #f44336;
        text-decoration: none;
        cursor: pointer;
    }
    .modal-body img{
                    max-width: 100%; /* Image won't exceed the modal's width */
        max-height: 60vh; /* Ensures the image doesn't exceed 90% of viewport height */
        object-fit: contain;
            }
        </style>
        <header>
            <div class="d-flex justify-content-between header_box">
                <h3>Vendor Detail</h3>
                <div class="header_left_side">
                    <span class="first"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                            viewBox="0 0 36 36">
                            <path class="clr-i-outline clr-i-outline-path-1" fill="currentColor"
                                d="M32.51 27.83A14.4 14.4 0 0 1 30 24.9a12.63 12.63 0 0 1-1.35-4.81v-4.94A10.81 10.81 0 0 0 19.21 4.4V3.11a1.33 1.33 0 1 0-2.67 0v1.31a10.81 10.81 0 0 0-9.33 10.73v4.94a12.63 12.63 0 0 1-1.35 4.81a14.4 14.4 0 0 1-2.47 2.93a1 1 0 0 0-.34.75v1.36a1 1 0 0 0 1 1h27.8a1 1 0 0 0 1-1v-1.36a1 1 0 0 0-.34-.75M5.13 28.94a16.17 16.17 0 0 0 2.44-3a14.24 14.24 0 0 0 1.65-5.85v-4.94a8.74 8.74 0 1 1 17.47 0v4.94a14.24 14.24 0 0 0 1.65 5.85a16.17 16.17 0 0 0 2.44 3Z" />
                            <path class="clr-i-outline clr-i-outline-path-2" fill="currentColor"
                                d="M18 34.28A2.67 2.67 0 0 0 20.58 32h-5.26A2.67 2.67 0 0 0 18 34.28" />
                            <path fill="none" d="M0 0h36v36H0z" />
                        </svg>
                    </span>
                    <span class="second" ><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                            viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1" />
                        </svg> Download</span>
                </div>
            </div>
        </header>
    
        <div class="user_container">
            <div class="Vendor-Detail-section">
                <h3> <a href="<?php echo e(route('Vendor_Approval_Request')); ?>"><svg style="margin-right:7px;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1.921 7.5L7.713 13.292L7 14L0 7L7 0L7.713 0.708L1.921 6.5H14V7.5H1.921Z" fill="#333333"/>
    </svg></a>Vendor Approval Requests</h3>
                <div class="Shop-add-1">
    
    
                    <table id="dynamic-table">
                        <thead id="t-head">
                            <tr>
                                <th>Full Name</th>
                                <th>Phone Number</th>
                                <th>Email</th>
                                <!-- <th>Address</th> -->
                                <!-- <th>Password</th> -->
                            </tr>
                        </thead>
                        <tbody>
    
                            <tr>
                                <!-- <td><?php echo e($singleVendorDetails->user_id); ?></td> -->
                                <td><?php echo e($singleVendorDetails->name); ?></td>
                                <td><?php echo e($singleVendorDetails->phone_number); ?></td>
                                <td><?php echo e($singleVendorDetails->email); ?></td>
                                <!-- <td><?php echo e($singleVendorDetails->complete_address); ?></td> -->
                            </tr>
                        </tbody>
                    </table>
    
                    <div class="Shop_detail">
    
    
    
                        <div class="basic_iinfo">
    
                            <h6>Shop Details</h6>
    
    
                            <div class="row">
                                <div class="col-lg-8 col-md-8 col-sm-12">
                                    <p style="color: #6B6B6B;font-size: 16px;font-weight: 400;line-height: 16px;">Basic Information</p>
                                    <style>
                                        .storeselfie1 {
                                            display: none;
                                            /* Class to hide elements */
                                        }
                                    </style>
                                    <div class="d-flex">
                                        <?php $__currentLoopData = $storeSelfies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
         
             
                <img id="imagePNG" src="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" width="150px" alt='PNG Image' class="storeselfie1">
                               <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        <script>
                                            function isImageAvailable(imageSrc, callback) {
                                                const img = new Image();
                                                img.onload = () => callback(true);
                                                img.onerror = () => callback(false);
                                                img.src = imageSrc;
                                            }
    
                                            isImageAvailable(document.getElementById("imagePNG").src, (available) => {
                                                if (available) {
                                                    document.getElementById("imagePNG").classList.remove("storeselfie1"); // Show PNG if available
                                                } else {
                                                    document.getElementById("imageJPG").classList.remove("storeselfie1"); // Otherwise, show JPG
                                                }
                                            });
                                        </script>
                                        <!-- <ul>
                                                <li>Name of the Store</li>
                                                <li>Address</li>
                                                <li>GSTIN</li>
                                            </ul> -->
                                        <table class="table" id="tableOFStore">
                                            <thead id="storeTable">
                                                <tr class="tableContent">
                                                    <th>Name of the Store</th>
                                                    <th id="addressHeader">Address</th>
                                                    <th>GSTIN</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="tableContent">
                                                    <!-- <td><?php echo e($singleVendorDetails->user_id); ?></td> -->
                                                    <td style=""><?php echo e($singleVendorDetails->store_name); ?></td>
                                                    <td class="address_data"><?php echo e($singleVendorDetails->complete_address); ?></td>
                                                    <td><?php echo e($singleVendorDetails->gstin); ?></td>
                                                    <!-- <td><?php echo e($singleVendorDetails->complete_address); ?></td> -->
                                                </tr>
                                            </tbody>
                                        </table>
                                        
                                        <script>
                                            document.addEventListener('DOMContentLoaded', function() {
                                               var addressCell = document.querySelector('.address_data');
                                                var addressHeader = document.getElementById('addressHeader');
                                                var addressLines = addressCell.innerHTML.split('<br>').length;
                                                var lineHeight = 16; // Default line height
                                        
                                                // Adjust line height based on the number of lines in the address
                                                addressHeader.style.lineHeight = lineHeight * addressLines + 'px';
                                                                                });
                                        </script>
    
                                    </div>
                                        
                                </div>
    
                                <div class="col-lg-4 col-md-4 col-sm-12">
    
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
    
                                            <h6 class="mb-3 mt-0" style="">Uploaded Store Pictures</h6>
                                            <div class="container1">
                                                <div class="full-view"></div>
                                                <div class="preview-list">
                                                   <ul class="imageContainer">
    <li>
        <input type="radio" id="tab-1" name="gallery-group" checked>
        <label for="tab-1">
            <div class="tab image-set">
                <!-- Display thumbnail images in tab -->
                <?php $__currentLoopData = $storePictures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <img class="image-option" src="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" alt="Store Picture <?php echo e($index + 1); ?>">
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </label>
        
        <!-- Full-size images display -->
        <?php $__currentLoopData = $storePictures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="content1 image-set">
                <img class="image-option" src="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" alt="Full-size Store Picture <?php echo e($index + 1); ?>">
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </li>
</ul>

                                                        
                                                         <!-- Modal Structure -->
        <div id="myModal" class="modalsContent">
            <div style="    display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80%;
        max-width: 700px;
        margin: auto;">
            <div id="caption"></div>
            <span class="closes">&times;</span>
            </div>
            <img class="modal-contents" id="modalImg">
        </div>
                                                        <script>
                                                        // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the images and bind the click event
    var images = document.querySelectorAll(".content1 img");
    var modalImg = document.getElementById("modalImg");
    var captionText = document.getElementById("caption");
    
    images.forEach(function(img) {
        img.addEventListener("click", function() {
            modal.style.display = "block";
            modalImg.src = img.src;
            captionText.innerText = img.alt;
        });
    });
    
    // Get the <span> element that closes the modal
    var span = document.querySelector(".closes");
    
    span.onclick = function() {
        modal.style.display = "none";
    };
    
                                                            // Function to check if an image is available
                                                            function checkImageAvailability(imgUrl, callback) {
                                                                const img = new Image();
                                                                img.onload = () => callback(true); // If image loads, it's available
                                                                img.onerror = () => callback(false); // If image fails, it's not available
                                                                img.src = imgUrl;
                                                            }
    
                                                            // Hide unnecessary images
                                                            function filterImages() {
                                                                const imageSets = document.querySelectorAll(".image-set");
    
                                                                imageSets.forEach(set => {
                                                                    const images = set.querySelectorAll(".image-option"); // All image options in the set
                                                                    let validImageFound = false;
    
                                                                    images.forEach(image => {
                                                                        checkImageAvailability(image.src, isAvailable => {
                                                                            if (!isAvailable) {
                                                                                image.classList.add("hidden"); // Hide image if not available
                                                                            } else if (!validImageFound) {
                                                                                image.classList.remove("hidden"); // Show the first valid image
                                                                                validImageFound = true;
                                                                            } else {
                                                                                image.classList.add("hidden"); // Hide additional images
                                                                            }
                                                                        });
                                                                    });
                                                                });
                                                            }
    
                                                            // Call the function to hide unnecessary images
                                                            filterImages();
                                                        </script>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="modal fade" id="imageFull" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="imageLabel">Image Preview</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body" id="imageFullBody">
                                                            <!-- Yaha pe dynamic content aayega -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                        <script>
                                                            var but = document.querySelector('.image-set');
                                                            console.log(but);
                                                            but.addEventListener('click', function() {
                                                                const imageUrl = this.dataset.imageUrl; // URL ko fetch karna
                                                                console.log(imageUrl);
                                                                const modalBody = document.getElementById('imageFullBody');
                        
                                                                // Modal mein image ko load karna
                                                                modalBody.innerHTML = `<img src="${imageUrl}" alt="Preview Image" style="width: 100%;">`;
                        
                                                                
                                                                // Modal ko display karna
                                                                const modal = new bootstrap.Modal(document.getElementById('imageFull'));
                                                                modal.show();
                                                            });
                                                        });
                                                    </script>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
    
                            <div class="vendor_services">
    
                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
                                <h6>Services</h6>
    
                               
                               <div class="Services_button">
    <?php
        $services = [];
        // Check if services exist and decode the JSON string
        if (isset($singleVendorDetails->services)) {
            $servicesArray = json_decode($singleVendorDetails->services, true); // Decode JSON to an associative array
            
            // Flatten the array to get all service names
            $services = array_values($servicesArray); // Get the values (service names) only
        }

        // Define a mapping of Font Awesome icons for each service type
        $serviceIcons = [
            'Wash' => 'fa-water',
            'Wash & Iron' => 'fa-tshirt',
            'Dry Clean' => 'fa-leaf', // Ensure this matches the JSON key
             // New icon for Laundry
            'Wash & Steam' => 'fa-hot-tub',
            'Steam Iron' => 'fa-wind',
            'Shoe & Bag Care' => 'fa-shoe-prints',
        ];
    ?>

    <!-- Generate buttons dynamically -->
    <?php if(!empty($services)): ?>
        <div class="flex flex-wrap">
            <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <button class="btn-service flex items-center space-x-2 p-2 m-1 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-300">
                    <i class="fas <?php echo e($serviceIcons[$service] ?? 'fa-circle'); ?>"></i>
                    <span class="font-semibold"><?php echo e($service); ?></span>
                </button>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    <?php else: ?>
        <p class="text-red-500">No services available.</p>
    <?php endif; ?>
</div>

    
                                <h6 class="my-3">Uploaded Store Document</h6>
                                
                            
                            <div class="vendor_table">
                                <table class="table-auto w-full border-collapse border border-gray-300 text-left">
                                    <thead>
                                        <tr>
                                            <th class="border border-gray-300 p-2 bg-gray-200">Document Type</th>
                                            <th class="border border-gray-300 p-2 bg-gray-200">Image Name</th>
                                            <th class="border border-gray-300 p-2 bg-gray-200">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        

                                        <?php $__currentLoopData = $storeAdhar; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <tr>
                                            <td class="border border-gray-300 p-2">Adhar Images</td>
                                            <td class="border border-gray-300 p-2"> Adhar Image - <?php echo e($index + 1); ?></td> <!-- Display count here -->
                                            <td class="border border-gray-300 p-2 text-center">
                                                <button class="view-image bg-blue-500 text-white py-1 px-3 rounded" data-image-url="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" data-modal-title="Adhar Image <?php echo e($index + 1); ?>">
                                                    View
                                                </button>
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    <?php $__currentLoopData = $storeDocuments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr>
                                        <td class="border border-gray-300 p-2">Store Documents Images</td>
                                        <td class="border border-gray-300 p-2"> Documents Image - <?php echo e($index + 1); ?></td> <!-- Display count here -->
                                        <td class="border border-gray-300 p-2 text-center">
                                            <button class="view-image bg-blue-500 text-white py-1 px-3 rounded" data-image-url="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" data-modal-title="Adhar Image <?php echo e($index + 1); ?>">
                                                View
                                            </button>
                                        </td>
                                    </tr>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    <?php $__currentLoopData = $storePancard; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <tr>
        <td class="border border-gray-300 p-2">Pancard</td>
        <td class="border border-gray-300 p-2">Pancard  - </td> <!-- Display count here -->
        <td class="border border-gray-300 p-2 text-center">
            <button class="view-image bg-blue-500 text-white py-1 px-3 rounded" data-image-url="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" data-modal-title="Adhar Image <?php echo e($index + 1); ?>">
                View
            </button>
        </td>
    </tr>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

<?php $__currentLoopData = $storePictures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<tr>
    <td class="border border-gray-300 p-2">Store Pictures</td>
    <td class="border border-gray-300 p-2">Store Pictures  - <?php echo e($index + 1); ?></td> <!-- Display count here -->
    <td class="border border-gray-300 p-2 text-center">
        <button class="view-image bg-blue-500 text-white py-1 px-3 rounded" data-image-url="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" data-modal-title="Adhar Image <?php echo e($index + 1); ?>">
            View
        </button>
    </td>
</tr>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    <?php $__currentLoopData = $storeSelfies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <tr>
        <td class="border border-gray-300 p-2">Store Selfies</td>
        <td class="border border-gray-300 p-2">Store Selfies  - <?php echo e($index + 1); ?></td> <!-- Display count here -->
        <td class="border border-gray-300 p-2 text-center">
            <button class="view-image bg-blue-500 text-white py-1 px-3 rounded" data-image-url="<?php echo e(asset('storage/app/public/' . $imagePath)); ?>" data-modal-title="Adhar Image <?php echo e($index + 1); ?>">
                View
            </button>
        </td>
    </tr><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        
                                    </tbody>
                                </table>
                            </div>
                            

                                <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="modalLabel">Image Preview</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body" id="imageModalBody">
                                                <!-- Yaha pe dynamic content aayega -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
    
                                <script>
                                    document.querySelectorAll('.view-image').forEach(button => {
                                        button.addEventListener('click', function() {
                                            const imageUrl = this.dataset.imageUrl; // URL ko fetch karna
                                            const modalTitle = this.dataset.modalTitle; // Fetch the modal title
                                            const modalBody = document.getElementById('imageModalBody');
    
                                            // Modal mein image ko load karna
                                            modalBody.innerHTML = `<img src="${imageUrl}" alt="Preview Image" style="width: 100%;">`;
    
                                            // Set the modal title
                                            const modalLabel = document.getElementById('modalLabel');
                                            modalLabel.textContent = modalTitle; // Set the title dynamically
    
                                            // Modal ko display karna
                                            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
                                            modal.show();
                                        });
                                    });
                                </script>
    
                            </div>
                        </div>
    
                    </div>
    
                </div>
                <div class="btn_wait">
    
                    <!--<button class="btn1">Wait</button>-->
                    <button class="btn2">Decline</button>
                    <button class="btn3" id="approveBtn">Approve</button>
    
                </div>
<?php if(session('success')): ?>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        var vendorId = "<?php echo e($singleVendorDetails->user_id ?? ''); ?>"; // Use a fallback if user_id is not set

        Swal.fire({
            title: 'Success!',
            text: '<?php echo e(session('success')); ?>',
            icon: 'success',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.isConfirmed && vendorId) {
                // Redirect to vendor preview using user_id as the parameter
                window.location.href = "<?php echo e(route('vendor_preview', ['user_id' => $singleVendorDetails->user_id])); ?>;
            }
        });
    </script>
<?php endif; ?>



                <!-- Custom Modal Structure -->
                <div class="modal1" id="uploadModal">
                    <div class="modal-content1">
                        <span class="close1" id="closeModal">&times;</span> <!-- Close button -->
                        <h2>Upload Excel File</h2>
                       <form action="<?php echo e(route('import.pricing')); ?>" method="POST" enctype="multipart/form-data">
    <?php echo csrf_field(); ?>

    <!-- Hidden field for Vendor ID -->
    <input type="hidden" name="vendor_id" value="<?php echo e($singleVendorDetails->user_id); ?>">

    <div class="mb-4">
        <label for="commission" class="block text-sm font-medium text-gray-700">Commission (%):</label>
        <input type="number" name="commission" id="commission" required min="0" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
    </div>

    <div class="mb-4">
        <label for="file" class="block text-sm font-medium text-gray-700">Choose an Excel or CSV file:</label>
        <input type="file" name="file" id="file" required accept=".csv, .xlsx" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
    </div>

    <div>
        <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 focus:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 transition ease-in-out duration-150">
            Import
        </button>
    </div>
</form>

                    </div>
                </div>
            </div>
            <script>
                document.getElementById("approveBtn").onclick = function() {
                    document.getElementById("uploadModal").style.display = "block"; // Show modal
                };
    
                document.getElementById("closeModal").onclick = function() {
                    document.getElementById("uploadModal").style.display = "none"; // Close modal
                };
    
                window.onclick = function(event) {
                    var modal = document.getElementById("uploadModal");
                    if (event.target === modal) {
                        modal.style.display = "none"; // Close modal when clicking outside the modal content
                    }
                };
   
    
    
    
            </script>
        </div>
    
        </div>
    
        </div>
    
        </div>
    
        </div>
    
    
    
    
     <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/vendor_approve_button.blade.php ENDPATH**/ ?>