<?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([]); ?>
    <style>
        h3 {
            font-weight: 600;
            font-size: 16px;
            line-height: 16px;
            color: #000000;
        }

        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;
        }

        #t-head {
            background: #F1F3F9;
        }

        #th-2 {
            width: 245px;
            height: 40px;
        }

        #th-3 {
            width: 191px;
            height: 40px;
        }

        #th-4 {
            width: 253px;
            height: 40px;
        }

        #th-5 {
            width: 290px;
            height: 40px;
        }

        #th-6 {
            width: 180px;
            height: 40px;
        }

        .nav-pills .nav-link {
            width: 207px;
            height: 51px;
            border: 1px solid #000000;
            font-size: 24px;
            font-weight: 400;
            line-height: 16px;
            color: #000000;
            border-radius: 2px;
        }

        .nav-pills .nav-link.active {
            background: none;
            border: 1px solid #000000;
            color: #000000;
        }

        #pills-profile-tab {
            margin-left: 50px;
        }

        #pills-contact-tab {
            margin-left: 50px;
        }

        @media (max-width:840px) {
            .nav-pills .nav-link {
                margin-bottom: 10px;
            }

            #pills-contact-tab {
                margin-left: 10px;
            }

            #pills-profile-tab {
                margin-left: 10px;
            }

            .nav {
                margin-top: 20px;
            }

            .under_text button {
                margin-bottom: 10px;
            }
        }

        /* @media (max-width:750px) {
      #pills-contact-tab {
      margin-left: 0px;
      }
      } */
        /------------------------------------------------------------------/ .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: 53px;
        }

        .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;
        }

        #grub_1 {
            margin-top: 34px;
        }

        .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;
            }

            /* .opening_button_1 button {
      font-size: 12px !important;
      } */
            /*#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;
        }

        .under_text {
            border: 1px solid #3199ff;
            height: 314px;
            border-radius: 4px;
            background-color: #e8e8e8;
            padding: 15px 15px;
            display: flex;
            gap: 15px;
        }

        .under_text button {
            background-color: #2148C0;
            border: none;
            height: 35px;
            border-radius: 2.96px;
            color: #ffffff;
            padding: 0px 20px;
            /* width: 100px; */
            opacity: 78%;
            font-size: 9px;
            font-weight: 500;
            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;
        }

        .Services_button {
            border: 1px solid #3199ff;
            width: 65%;
            /* 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; */
        }

        .vendor_table table {
            border: 1px solid #3199ff !important;
            width: 55% !important;
        }

        .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;
            padding: 10px 25px;
            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;
        }

        .basic_iinfo {
            margin-top: 30px;
        }

        .basic_iinfo h6 {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
        }

        .basic_iinfo p {
            font-size: 16px;
            font-weight: 400;
            color: #6b6b6b;
        }

        .vendor_services {
            margin-top: 30px;
        }

        .vendor_services h6 {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
        }

        .carousel-inner {
            /* width:100%; */
        }

        .carousel-inner .carousel-item img {
            height: 170px;
        }

        .Services_button {
            border: 1px solid #3199ff;
            width: 65%;
            /* 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; */
        }

        .vendor_table table {
            border: 1px solid #3199ff !important;
            width: 55% !important;
        }

        .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;
            padding: 10px 25px;
            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;
        }

        .Dashboard_header header {
            border-bottom: none;
        }

        .Dashboard_header header .header_box {
            border-bottom: 1px solid #ccc;
            width: 99.5%;
        }

        .nav-pills .nav-link.active,
        .show .nav-link {
            border: 1px solid #1B59F8;
            color: #1B59F8;
        }
    </style>
    <header>
        <div class="d-flex justify-content-between header_box">
            <h3>Vendor Detail</h3>
        </div>
    </header>
    <div class="user_container">
        <div class="Vendor-Detail-section" style="margin-left:2px;">
            <h3 style="margin-top:-25px">
                <a href="<?php echo e(route('vendor_preview', ['user_id' => $singleVendorDetails->user_id])); ?>">
                    <svg width="33" height="33" viewBox="0 0 43 43" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.40625 20.1562H36.2812C36.6376 20.1562 36.9794 20.2978 37.2314 20.5498C37.4834 20.8018 37.625 21.1436 37.625 21.5C37.625 21.8564 37.4834 22.1982 37.2314 22.4502C36.9794 22.7022 36.6376 22.8438 36.2812 22.8438H9.40625C9.04987 22.8438 8.70808 22.7022 8.45608 22.4502C8.20407 22.1982 8.0625 21.8564 8.0625 21.5C8.0625 21.1436 8.20407 20.8018 8.45608 20.5498C8.70808 20.2978 9.04987 20.1562 9.40625 20.1562Z"
                            fill="#333333" />
                        <path
                            d="M9.96301 21.4997L21.1081 32.6421C21.3604 32.8944 21.5021 33.2367 21.5021 33.5935C21.5021 33.9503 21.3604 34.2925 21.1081 34.5449C20.8558 34.7972 20.5135 34.9389 20.1567 34.9389C19.7999 34.9389 19.4576 34.7972 19.2053 34.5449L7.11157 22.4511C6.98644 22.3263 6.88715 22.178 6.81941 22.0148C6.75167 21.8515 6.7168 21.6765 6.7168 21.4997C6.7168 21.323 6.75167 21.148 6.81941 20.9847C6.88715 20.8215 6.98644 20.6732 7.11157 20.5484L19.2053 8.45462C19.4576 8.2023 19.7999 8.06055 20.1567 8.06055C20.5135 8.06055 20.8558 8.2023 21.1081 8.45462C21.3604 8.70694 21.5021 9.04916 21.5021 9.40599C21.5021 9.76283 21.3604 10.105 21.1081 10.3574L9.96301 21.4997Z"
                            fill="#333333" />
                    </svg>
                </a>
                Vendor Details
            </h3>
            <table id="dynamic-table">
                <thead id="t-head">
                    <tr>
                        <th id="th-2">Full Name</th>
                        <th id="th-3">Phone Number</th>
                        <th id="th-4">Email</th>
                        <th id="th-5">Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <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>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <h6>Shop Details</h6>
            <style>
                .storepicture {
                    display: none;
                    /* Class to hide elements */
                }
            </style>
            <div class="">
                <div class="row">
                    <div class="col-lg-5 col-md-5 col-sm-12">
                        <div class="mt-3 d-flex ">


                            <div class="list_ul">
                                <ul>
                                    <li>Name of the Store</li>
                                    <li>Address</li>
                                    <li>GSTIN</li>
                                </ul>
                            </div>
                        </div>
                        <div class="vender_detail">
                            <h4>Vendor Details</h4>
                            <ul style=" margin-top: 24px;">
                                <li>User ID</li>

                                <li>Email</li>
                                <li>Mobile No.</li>
                            </ul>
                        </div>
                        
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12">
                        <div class="row" id="wash_grub">
                            <div class="col-lg-5 col-md-12" id="grub_1">
                                <p><?php echo e($singleVendorDetails->store_name); ?></p>
                                <h6><?php echo e($singleVendorDetails->complete_address); ?></h6>
                                <h6><?php echo e($singleVendorDetails->gstin); ?></h6>
                                <ul>
                                    <li><?php echo e($singleVendorDetails->user_id); ?></li>

                                    <li><?php echo e($singleVendorDetails->email); ?></li>
                                    <li><?php echo e($singleVendorDetails->phone_number); ?></li>
                                </ul>
                            </div>
                            <div class="col-lg-7 col-md-12" style="margin-top: 32px;">
                                <p>Service Area</p>
                                <h6><?php echo e($singleVendorDetails->complete_address); ?></h6>
                                <!--<img src="IMAGES\users\map 1.svg">-->
                                <div class="col-lg-5 col-md-12 col-sm-12">
                                    <iframe frameborder="0" style="border:0;flex: 0 0 auto;width: 100%;height: 100%;"
                                        src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyAlcZM-RHySJIQmUwOaJmJCVPZcuMKS70Y&origin=<?php echo e($singleVendorDetails->latitude); ?>,<?php echo e($singleVendorDetails->longitude); ?>&destination=<?php echo e($singleVendorDetails->latitude); ?>,<?php echo e($singleVendorDetails->longitude); ?>&zoom=12"
                                        style="border:0;flex: 0 0 auto;width: 100%;height: 100%;">
                                    </iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="">
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button style="background: #fff;" class="nav-link active" id="pills-home-tab"
                                    data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab"
                                    aria-controls="pills-home" aria-selected="true">Opening Hours</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button style="background: #fff;" class="nav-link" id="pills-profile-tab"
                                    data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab"
                                    aria-controls="pills-profile" aria-selected="false">Services</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button style="background: #fff;" class="nav-link" id="pills-contact-tab"
                                    data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"
                                    aria-controls="pills-contact" aria-selected="false">Order History</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                aria-labelledby="pills-home-tab" tabindex="0">
                                <link rel="stylesheet"
                                    href="https://cdn.jsdelivr.net/npm/tailwindcss@3.2.0/dist/tailwind.min.css">
                                <link rel="stylesheet"
                                    href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
                                <style>
                                    .flatpickr-input {
                                        border: 1px solid #e5e7eb;
                                        border-radius: 0.375rem;
                                        padding: 0.5rem;
                                        width: 100%;
                                    }

                                    .flatpickr-time {
                                        border: 1px solid #e5e7eb;
                                        border-radius: 0.375rem;
                                    }

                                    .flatpickr-time input {
                                        border: none;
                                    }
                                </style>



                                <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>


                                <div class="container mt-5">

                                    <form id="openingHoursForm"
                                        action="<?php echo e(route('updateOpeningHours', ['vendorId' => $singleVendorDetails->user_id])); ?>"
                                        method="POST">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('PUT'); ?>
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Day</th>
                                                    <th>Opening Time</th>
                                                    <th>Closing Time</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php
                                                    $openingHours = json_decode(
                                                        $singleVendorDetails->opening_hours,
                                                        true,
                                                    );
                                                ?>
                                                <?php $__currentLoopData = $openingHours; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $day => $hours): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <tr>
                                                        <td><?php echo e(ucfirst($day)); ?></td>
                                                        <td>
                                                            <?php
                                                                // Initialize opening and closing times based on the hours state
                                                                if ($hours === 'Closed') {
                                                                    $openingTime = '';
                                                                    $closingTime = '';
                                                                } elseif ($hours === '24 Hours') {
                                                                    $openingTime = '00:00';
                                                                    $closingTime = '00:00';
                                                                } else {
                                                                    [$openingTime, $closingTime] = explode('-', $hours);
                                                                }
                                                            ?>
                                                            <input type="time"
                                                                name="opening_time[<?php echo e($day); ?>]"
                                                                value="<?php echo e($openingTime); ?>"
                                                                <?php echo e($hours === 'Closed' ? 'disabled' : 'required'); ?>

                                                                class="form-control">
                                                        </td>
                                                        <td>
                                                            <input type="time"
                                                                name="closing_time[<?php echo e($day); ?>]"
                                                                value="<?php echo e($closingTime); ?>"
                                                                <?php echo e($hours === 'Closed' ? 'disabled' : 'required'); ?>

                                                                class="form-control">
                                                        </td>
                                                        <td>
                                                            <select name="action[<?php echo e($day); ?>]"
                                                                id="action-<?php echo e($day); ?>"
                                                                onchange="toggleInputs('<?php echo e($day); ?>')"
                                                                class="form-control">
                                                                <option value="open"
                                                                    <?php echo e($hours !== 'Closed' && $hours !== '24 Hours' ? 'selected' : ''); ?>>
                                                                    Open</option>
                                                                <option value="closed"
                                                                    <?php echo e($hours === 'Closed' ? 'selected' : ''); ?>>Closed
                                                                </option>
                                                                <option value="24_hours"
                                                                    <?php echo e($hours === '24 Hours' ? 'selected' : ''); ?>>24
                                                                    Hours</option>
                                                            </select>
                                                        </td>
                                                    </tr>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </tbody>
                                        </table>
                                        <button type="submit" class="btn btn-primary">Save Changes</button>
                                    </form>
                                </div>

                                <script>
                                    function toggleInputs(day) {
                                        const actionSelect = document.getElementById(`action-${day}`);
                                        const openingInput = document.querySelector(`input[name="opening_time[${day}]"]`);
                                        const closingInput = document.querySelector(`input[name="closing_time[${day}]"]`);

                                        if (actionSelect.value === 'closed') {
                                            openingInput.disabled = true;
                                            closingInput.disabled = true;
                                            openingInput.value = '';
                                            closingInput.value = '';
                                        } else {
                                            openingInput.disabled = false;
                                            closingInput.disabled = false;
                                        }
                                    }

                                    $('#openingHoursForm').on('submit', function(event) {
                                        event.preventDefault(); // Prevent the default form submission

                                        const openingHours = {};
                                        const formData = new FormData(this);

                                        // Collect opening and closing times into the desired object format
                                        const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                                        days.forEach(day => {
                                            const opening = formData.get(`opening_time[${day}]`);
                                            const closing = formData.get(`closing_time[${day}]`);
                                            const action = formData.get(`action[${day}]`);
                                            let hoursValue;

                                            if (action === 'closed') {
                                                hoursValue = 'Closed';
                                            } else if (action === '24_hours') {
                                                hoursValue = '24 Hours';
                                            } else {
                                                hoursValue = `${opening}-${closing}`;
                                            }

                                            openingHours[day] = hoursValue;
                                        });

                                        // Convert to JSON string
                                        const openingHoursJson = JSON.stringify(openingHours);

                                        // Get the CSRF token from the meta tag
                                        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                                        // Send the data using fetch API
                                        fetch(this.action, {
                                                method: 'PUT',
                                                headers: {
                                                    'Content-Type': 'application/json',
                                                    'X-CSRF-TOKEN': csrfToken, // Use the CSRF token from the meta tag
                                                },
                                                body: JSON.stringify({
                                                    opening_hours: openingHoursJson
                                                }),
                                            })
                                            .then(response => {
                                                if (!response.ok) {
                                                    throw new Error('Network response was not ok');
                                                }
                                                return response.json();
                                            })
                                            .then(data => {
                                                // Show success notification using SweetAlert
                                                Swal.fire({
                                                    icon: 'success',
                                                    title: 'Success!',
                                                    text: 'Opening hours updated successfully.',
                                                    confirmButtonText: 'Okay'
                                                });
                                            })
                                            .catch(error => {
                                                console.error('Error:', error);
                                                // Show error notification using SweetAlert
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Oops...',
                                                    text: 'There was an error updating the opening hours. Please try again.',
                                                    confirmButtonText: 'Okay'
                                                });
                                            });
                                    });
                                </script>


                            </div>
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                aria-labelledby="pills-profile-tab" tabindex="0">
  

    <!-- Display Services -->
    <div class="mb-6">
        <h2 class="text-lg font-semibold mb-4">Current Services</h2>
        <?php
            $services = $singleVendorDetails->services ? json_decode($singleVendorDetails->services, true) : [];
        ?>

        <div class="flex flex-wrap gap-2">
            <?php if(!empty($services)): ?>
                <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <span class="px-3 py-1 bg-blue-100 text-blue-600 rounded shadow text-sm">
                        <?php echo e($service); ?>

                    </span>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php else: ?>
                <p class="text-gray-500">No services available.</p>
            <?php endif; ?>
        </div>
    </div>

    <!-- Button to Open Update Services Modal -->
    <button 
        class="px-6 py-2 mb-6 text-white bg-blue-600 rounded shadow hover:bg-blue-700" 
        onclick="openModal('vendorServicesModal')">
        Update Services
    </button>

    <!-- Modal for Vendor Services -->
    <div 
        id="vendorServicesModal" 
        class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-3xl">
            <h2 class="text-xl font-bold mb-4">Update Vendor Services</h2>
            <form id="vendorServicesForm" action="<?php echo e(route('vendors.updateServices', ['vendorId' => $singleVendorDetails->user_id])); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>

                <div class="grid grid-cols-2 gap-4">
                    <?php $__currentLoopData = $availableServices; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <label class="flex items-center space-x-4 p-4 bg-gray-100 rounded shadow hover:bg-gray-200">
                            <input 
                                type="checkbox" 
                                name="services[]" 
                                value="<?php echo e($service->name); ?>" 
                                class="form-checkbox h-5 w-5 text-blue-600"
                                <?php echo e(in_array($service->name, $services) ? 'checked' : ''); ?>>
                            <div class="flex items-center">
                                <img src="<?php echo e($service->icon); ?>" alt="<?php echo e($service->name); ?>" class="w-10 h-10 rounded">
                                <span class="ml-4 text-lg"><?php echo e($service->name); ?></span>
                            </div>
                        </label>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

                <div class="mt-6 flex justify-end space-x-4">
                    <button 
                        type="button" 
                        class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400" 
                        onclick="closeModal('vendorServicesModal')">
                        Cancel
                    </button>
                    <button 
                        type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal for Import Pricing -->
    <div 
        id="importPricingModal" 
        class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-3xl">
            <h2 class="text-xl font-bold mb-4">Import Pricing</h2>
            <form action="<?php echo e(route('import.pricing')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <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 class="mt-6 flex justify-end">
                    <button 
                        type="button" 
                        class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400" 
                        onclick="closeModal('importPricingModal')">
                        Cancel
                    </button>
                    <button 
                        type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                        Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Modal control functions
    function openModal(modalId) {
        document.getElementById(modalId).classList.remove('hidden');
    }

    function closeModal(modalId) {
        document.getElementById(modalId).classList.add('hidden');
    }

    // Handle AJAX submission for Vendor Services
    document.getElementById('vendorServicesForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission

        const formData = new FormData(this);
        const selectedServices = formData.getAll('services[]');

        fetch(this.action, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>',
            },
            body: JSON.stringify({ services: selectedServices }),
        })
        .then(response => {
            if (!response.ok) throw new Error('Failed to update vendor services.');
            return response.json();
        })
        .then(() => {
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: 'Vendor services updated successfully.',
                confirmButtonText: 'Next',
            }).then(() => {
                closeModal('vendorServicesModal');
                openModal('importPricingModal');
            });
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: error.message || 'An error occurred.',
                confirmButtonText: 'Try Again',
            });
        });
    });
</script>


                                    <div class="container mt-5 pt-5">
                                        <!-- Non-KG Laundry Pricing Table -->
<h2 class="text-xl font-semibold mt-8">Laundry Pricing Data</h2>

<table class="min-w-full border-collapse border border-gray-300 mt-4">
    <thead>
        <tr>
            <th class="border px-4 py-2">Service Name</th>
            <th class="border px-4 py-2">Item Name</th>
            <th class="border px-4 py-2">Customer Price</th>
            <th class="border px-4 py-2">Vendor Price</th>
            <th class="border px-4 py-2">Action</th>
        </tr>
    </thead>
    <tbody id="nonKgPricingData">
        <?php $__currentLoopData = $pricingData; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php if($service !== 'Laundry by KG'): ?>
                <?php $__currentLoopData = $data['items']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td class="border px-4 py-2"><?php echo e($service); ?></td>
                        <td class="border px-4 py-2"><?php echo e($item['item_name'] ?? 'N/A'); ?></td>
                        <td class="border px-4 py-2">
                            <input type="number" value="<?php echo e($item['customer_price'] ?? 0); ?>" 
                                   class="customer-price w-full px-2 py-1"
                                   data-service="<?php echo e($service); ?>" 
                                   data-item="<?php echo e($item['item_name'] ?? 'N/A'); ?>" />
                        </td>
                        <td class="border px-4 py-2">
                            <input type="number" value="<?php echo e($item['vendor_price'] ?? 0); ?>" 
                                   class="vendor-price w-full px-2 py-1"
                                   data-service="<?php echo e($service); ?>" 
                                   data-item="<?php echo e($item['item_name'] ?? 'N/A'); ?>" />
                        </td>
                        <td class="border px-4 py-2">
                            <button class="update-pricing bg-gray-500 text-white px-3 py-1 rounded cursor-not-allowed"
                                    data-service="<?php echo e($service); ?>"
                                    data-item="<?php echo e($item['item_name'] ?? 'N/A'); ?>"
                                    disabled>
                                Update
                            </button>
                        </td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </tbody>
</table>

<!-- Laundry by KG Pricing Table -->
<h2 class="text-xl font-semibold mt-8">Laundry by KG Pricing Data</h2>
<table class="min-w-full border-collapse border border-gray-300 mt-4">
    <thead>
        <tr>
            <th class="border px-4 py-2">Service Name</th>
            <th class="border px-4 py-2">Count of Clothes per KG</th>
            <th class="border px-4 py-2">Customer Price</th>
            <th class="border px-4 py-2">Vendor Price</th>
            <th class="border px-4 py-2">Action</th>
        </tr>
    </thead>
    <tbody id="kgPricingData">
        <?php $__currentLoopData = $pricingData; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php if($service === 'Laundry by KG'): ?>
                <?php $__currentLoopData = $data['items']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                        <td class="border px-4 py-2"><?php echo e($service); ?></td>
                        <td class="border px-4 py-2">
                            <input type="number" value="<?php echo e($item['per_kg_count'] ?? 'N/A'); ?>" 
                                   class="per-kg-count w-full px-2 py-1" 
                                   data-service="<?php echo e($service); ?>" 
                                   data-per-kg-count="<?php echo e($item['per_kg_count'] ?? 'N/A'); ?>" />
                        </td>
                        <td class="border px-4 py-2">
                            <input type="number" value="<?php echo e($item['customer_price'] ?? 0); ?>" 
                                   class="customer-price w-full px-2 py-1" 
                                   data-service="<?php echo e($service); ?>" 
                                   data-per-kg-count="<?php echo e($item['per_kg_count'] ?? 'N/A'); ?>" />
                        </td>
                        <td class="border px-4 py-2">
                            <input type="number" value="<?php echo e($item['vendor_price'] ?? 0); ?>" 
                                   class="vendor-price w-full px-2 py-1" 
                                   data-service="<?php echo e($service); ?>" 
                                   data-per-kg-count="<?php echo e($item['per_kg_count'] ?? 'N/A'); ?>" />
                        </td>
                        <td class="border px-4 py-2">
                            <button class="update-pricing bg-gray-500 text-white px-3 py-1 rounded cursor-not-allowed"
                                    data-service="<?php echo e($service); ?>"
                                    data-per-kg-count="<?php echo e($item['per_kg_count'] ?? 'N/A'); ?>"
                                    disabled>
                                Update
                            </button>
                        </td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </tbody>
</table>

<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    document.querySelectorAll('.customer-price, .vendor-price, .per-kg-count').forEach(input => {
        input.addEventListener('input', function () {
            const row = input.closest('tr');
            const updateButton = row.querySelector('.update-pricing');

            const customerPrice = row.querySelector('.customer-price').value;
            const vendorPrice = row.querySelector('.vendor-price').value;
            const perKgCount = row.querySelector('.per-kg-count') ? row.querySelector('.per-kg-count').value : null;

            // Check if any value has changed
            if (
                customerPrice !== input.dataset.oldValue ||
                vendorPrice !== input.dataset.oldValue ||
                (perKgCount && perKgCount !== input.dataset.oldValue)
            ) {
                updateButton.disabled = false;
                updateButton.classList.remove('bg-gray-500', 'cursor-not-allowed');
                updateButton.classList.add('bg-green-500', 'cursor-pointer');
            } else {
                updateButton.disabled = true;
                updateButton.classList.remove('bg-green-500', 'cursor-pointer');
                updateButton.classList.add('bg-gray-500', 'cursor-not-allowed');
            }
        });
    });

    document.querySelectorAll('.update-pricing').forEach(button => {
        button.addEventListener('click', async (event) => {
            const buttonElement = event.target;
            const service = buttonElement.dataset.service;
            const vendorId = "<?php echo e($singleVendorDetails->user_id); ?>";
            const itemName = buttonElement.dataset.item || null;
            const perKgCount = buttonElement.dataset.perKgCount || null;

            const row = buttonElement.closest('tr');
            const customerPriceInput = row.querySelector('.customer-price');
            const vendorPriceInput = row.querySelector('.vendor-price');
            const perKgCountInput = row.querySelector('.per-kg-count');

            const updateData = {
                vendor_id: vendorId,
                service_name: service,
                item_name: itemName,
                per_kg_count: perKgCountInput ? perKgCountInput.value : null,
                customer_price: customerPriceInput ? customerPriceInput.value : null,
                vendor_price: vendorPriceInput ? vendorPriceInput.value : null,
            };

            try {
                const response = await fetch('<?php echo e(route('pricing.update')); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify(updateData)
                });

                const result = await response.json();

                Swal.fire({
                    title: 'Success',
                    text: result.message || 'Pricing updated successfully.',
                    icon: 'success',
                    confirmButtonText: 'OK'
                });
            } catch (error) {
                Swal.fire({
                    title: 'Error',
                    text: 'Failed to update pricing.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    });
</script>

                                    </div>



                                </div>
                                
                            </div>
                        </div>
                    </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_add.blade.php ENDPATH**/ ?>