@extends('layouts.app_rest')
@section('content')
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        .mt-100 {
            margin-top: 100px
        }

        .multibody {
            background: #ffffff;
            background: -webkit-linear-gradient(to right, #ffffff, #ffffff);
            background: linear-gradient(to right, #ffffff, #ffffff);
            color: #514B64;
        }

        #upload-box {
            width: 150px;
            height: 150px;
            text-align: center;
            border-radius: 5px;

            border: 2px dashed #dbe0e6;
            background-color: #f8f9fa;
            transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }

        /* Hover and focus styles */
        #upload-box:hover {
            border-color: #a6b3c0;
            background-color: #e9ecef;
        }

        /* Additional images preview styling */
        #additional-images-preview img {
            width: 75px;
            height: 75px;
            object-fit: cover;
            border-radius: 5px;
            border: 1px solid #dbe0e6;
        }

        /* Ensure additional images are displayed inline */
        #additional-images-preview {
            display: flex;
            flex-direction: row;
            gap: 10px;
            align-items: center;
        }
    </style>
    <div class="animate__animated p-6" :class="[$store.app.animation]">
        <div>
            <ul class="flex space-x-2 rtl:space-x-reverse">
                <li>
                    <a href="{{ action('Auth\LoginController@dashboard') }}"
                        class="text-primary hover:underline">Dashboard</a>
                </li>
                <li>
                    <a href="{{ action('Rest\ProductController@create') }}"
                        class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">Product</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <span>Create Product</span>
                </li>
            </ul>
            <div class="grid grid-cols-1 gap-4 pt-5">
                <div class="panel border-[#e0e6ed] px-0 dark:border-[#1b2e4b]">
                    <div class="px-5" x-data="{ openCategoryModal: false, openSubCategoryModal: false, openBrandModal: false, openUnitModal: false, openMetailModal: false, openStoneModal: false, openStampModal: false, openWarrantyModal: false }">

                        <div x-data="{ tab: 'basic' }" class="product">
                            <!-- Tabs Navigation -->

                            <div x-data="{
                                productType: 'Single',
                                checkPurchase: false,
                                checkSale: false,
                                checkRetail: true,
                                tab: 'basic',
                                isManagingStockAlertChecked: true,
                                specificLocationChecked: false,
                                selectedSpecificLocations: [],
                                names: [],
                                addName() {
                                    if (this.newName.trim() !== '') {
                                        this.names.push(this.newName.trim());
                                        this.newName = '';
                                    }
                                },
                                removeName(index) {
                                    this.names.splice(index, 1);
                                },
                                init() {
                                    this.isManagingStockAlertChecked = document.querySelector('#activity_handling_stock_alert')?.checked || true;
                                    this.multiPriceItemChecked = document.querySelector('#activity_multi_price_item')?.checked || true;
                                },
                                multiPriceItemChecked: true,
                                hasLanguages: {{ collect($activities)->where('setup_status', 1)->where('name', 'Multi Languages')->count() > 0 ? 'true' : 'false' }},
                                hasPromotion: {{ collect($activities)->where('setup_status', 1)->where('name', 'Has Promotion Item')->count() > 0 ? 'true' : 'false' }},
                                hasOnline: {{ collect($activities)->where('setup_status', 1)->whereIn('name', ['Has an online website Digital Menu', 'Has an Online Store'])->count() > 0? 'true': 'false' }},
                                hasLocation: {{ collect($activities)->where('setup_status', 1)->whereIn('name', ['Location', 'Centralized Location'])->count() > 0? 'true': 'false' }},
                                hasPrice: {{ collect($activities)->where('setup_status', 1)->whereIn('name', ['Price (Location wise)'])->count() > 0? 'true': 'false' }}
                            }">
                                <!-- Tab Buttons -->
                                <div class="flex flex-wrap mb-4 border-b border-gray-200">
                                    <button @click="tab = 'basic'"
                                        :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'basic', 'text-gray-500 border-transparent': tab !== 'basic' }"
                                        class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 focus:outline-none transition duration-300 ease-in-out w-full sm:w-auto">
                                        Basic Information
                                    </button>

                                    <template x-if="hasLocation && isManagingStockAlertChecked">
                                        <button @click="tab = 'location'"
                                            :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'location', 'text-gray-500 border-transparent': tab !== 'location' }"
                                            class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 focus:outline-none w-full sm:w-auto">
                                            Stock
                                        </button>
                                    </template>

                                    <template x-if="hasPrice && multiPriceItemChecked">
                                        <button @click="tab = 'price'"
                                            :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'price', 'text-gray-500 border-transparent': tab !== 'price' }"
                                            class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 focus:outline-none w-full sm:w-auto">
                                            Price
                                        </button>
                                    </template>

                                    <template x-if="hasLanguages && checkRetail">
                                        <button @click="tab = 'languages'"
                                            :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'languages', 'text-gray-500 border-transparent': tab !== 'languages' }"
                                            class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 focus:outline-none w-full sm:w-auto">
                                            Languages
                                        </button>
                                    </template>

                                    {{-- <template x-if="checkRetail && hasOnline">
                                        <button @click="tab = 'online'"
                                            :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'online', 'text-gray-500 border-transparent': tab !== 'online' }"
                                            class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 focus:outline-none w-full sm:w-auto">
                                            Online
                                        </button>
                                    </template> --}}

                                    {{-- <button @click="tab = 'attributes'"
                                        :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'attributes', 'text-gray-500 border-transparent': tab !== 'attributes' }"
                                        class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 focus:outline-none transition duration-300 ease-in-out hover:text-gray-600 hover:border-gray-300 w-full sm:w-auto">
                                        Product Variation
                                    </button> --}}

                                    <template x-if="hasPromotion">
                                        <button @click="tab = 'promotion'"
                                            :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'promotion', 'text-gray-500 border-transparent': tab !== 'promotion' }"
                                            class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 focus:outline-none w-full sm:w-auto">
                                            Promotion
                                        </button>
                                    </template>

                                    {{-- <button @click="tab = 'Setting'"
                                        :class="{ 'bg-blue-500 text-blue-100 border-blue-500': tab === 'Setting', 'text-gray-500 border-transparent': tab !== 'Setting' }"
                                        class="py-2 px-4 text-xs sm:text-sm font-medium border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 focus:outline-none w-full sm:w-auto">
                                        Product Setting
                                    </button> --}}
                                </div>


                                <div x-data="{
                                    selectedBranch: '',
                                    isCentralizedSelected: false,
                                    warehouses: {{ json_encode($warehouseLocations) }},
                                    departments: {{ json_encode($departmentLocations) }},
                                    filteredWarehouses() {
                                        return this.warehouses.filter(w => w.parent_id == this.selectedBranch);
                                    },
                                    filteredDepartments() {
                                        return this.departments.filter(d => d.parent_id == this.selectedBranch);
                                    }
                                }">
                                    <form enctype="multipart/form-data" id="product_add_form" class="needs-validation"
                                        novalidate="" method="POST" action="{{ route('product.store') }}">
                                        @csrf
                                        <div class="product">
                                            <div class="row flex flex-wrap" x-show="tab === 'basic'">

                                                <!-- Branch Dropdown -->
                                                {{-- <div class="col w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 p-2">
                                                    <div class="mt-5" x-show="!isCentralizedSelected">
                                                        <h2 class="font-bold text-sm">Branch</h2>
                                                        <select class="form-select text-white-dark" name="branch_id"
                                                            id="branch_id"
                                                            @change="selectedBranch = $event.target.value; isCentralizedSelected = false">
                                                            <option value="" disabled selected>Select Branch</option>
                                                            @foreach ($branchLocations as $branch)
                                                                <option value="{{ $branch->id }}"
                                                                    {{ $branch->id == old('branch_id') ? 'selected' : '' }}>
                                                                    {{ $branch->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <span class="text-danger">
                                                            @error('branch_id')
                                                                {{ $message }}
                                                            @enderror
                                                        </span>
                                                    </div>

                                                    <!-- Warehouse Dropdown (filtered by selected branch) -->
                                                    <div class="mt-5" x-show="!isCentralizedSelected">
                                                        <h2 class="font-bold text-sm">Warehouse</h2>
                                                        <select class="form-select text-white-dark" name="warehouse_id"
                                                            id="warehouse_id">
                                                            <option value="" disabled selected>Select Warehouse
                                                            </option>
                                                            <template x-for="warehouse in filteredWarehouses()"
                                                                :key="warehouse.id">
                                                                <option :value="warehouse.id" x-text="warehouse.name">
                                                                </option>
                                                            </template>
                                                        </select>
                                                        <span class="text-danger">
                                                            @error('warehouse_id')
                                                                {{ $message }}
                                                            @enderror
                                                        </span>
                                                    </div>

                                                    <!-- Department Dropdown (filtered by selected branch) -->
                                                    <div class="mt-5" x-show="!isCentralizedSelected">
                                                        <h2 class="font-bold text-sm">Department</h2>
                                                        <select class="form-select text-white-dark" name="department_id"
                                                            id="department_id">
                                                            <option value="" disabled selected>Select Department
                                                            </option>
                                                            <template x-for="department in filteredDepartments()"
                                                                :key="department.id">
                                                                <option :value="department.id" x-text="department.name">
                                                                </option>
                                                            </template>
                                                        </select>
                                                        <span class="text-danger">
                                                            @error('department_id')
                                                                {{ $message }}
                                                            @enderror
                                                        </span>
                                                    </div>

                                                    <!-- Centralized Location Dropdown -->
                                                    <div class="mt-5">
                                                        <h2 class="font-bold text-sm">Centralized Location</h2>
                                                        <select class="form-select text-white-dark"
                                                            name="centralized_location_id" id="centralized_location_id"
                                                            @change="isCentralizedSelected = $event.target.value !== ''">
                                                            <option value="" selected>Select Centralized Location
                                                            </option>
                                                            @foreach ($locations as $location)
                                                                <option value="{{ $location->id }}"
                                                                    {{ $location->id == old('centralized_location_id') ? 'selected' : '' }}>
                                                                    {{ $location->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        <span class="text-danger">
                                                            @error('centralized_location_id')
                                                                {{ $message }}
                                                            @enderror
                                                        </span>
                                                    </div>
                                                </div> --}}

                                                <div x-data="{
                                                    productType: 'Single',
                                                    showRetailOptions: true,
                                                    showSaleFields: true,
                                                    showServiceFields: false,
                                                    showAllFields: false,
                                                    checkedRetailOptions: ['Sale'],
                                                    checkedPurchaseOptions: [],
                                                    showOnlineFields: false,
                                                    showDealerFields: false,
                                                    showDistributionFields: false,
                                                    showCatalogFields: false,
                                                    showIsServiceFields: false,
                                                    showPurchaseFields: false,

                                                    checkRetailOptions(value) {
                                                        this.checkRetail = (value === 'Retail');
                                                    },

                                                    checkPurchaseOptions(value) {
                                                        this.checkPurchase = (value === 'Purchase');

                                                        if (this.checkPurchase) {
                                                            this.showAllFields = true;
                                                            this.showPurchaseFields = true;
                                                        } else {
                                                            this.showAllFields = false;
                                                            this.showPurchaseFields = false;
                                                        }
                                                    },

                                                    toggleRetailOption(option) {
                                                        if (this.checkedRetailOptions.includes(option)) {
                                                            if (this.checkedRetailOptions.length > 1) {
                                                                this.checkedRetailOptions = this.checkedRetailOptions.filter(o => o !== option);
                                                            }
                                                        } else {
                                                            this.checkedRetailOptions.push(option);
                                                        }

                                                        // Update the visibility of fields based on checked options
                                                        this.showSaleFields = this.checkedRetailOptions.includes('Sale');
                                                        this.showServiceFields = this.checkedRetailOptions.includes('Is Service');
                                                        this.showOnlineFields = this.checkedRetailOptions.includes('Online');
                                                        this.showDealerFields = this.checkedRetailOptions.includes('Dealer');
                                                        this.showDistributionFields = this.checkedRetailOptions.includes('Distribution');
                                                        this.showCatalogFields = this.checkedRetailOptions.includes('Catalog');
                                                        this.showIsServiceFields = this.checkedRetailOptions.includes('Is Service');
                                                    }
                                                }">


                                                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

                                                        <!-- Image field -->
                                                        <div
                                                            x-show="showAllFields || showSaleFields || showOnlineFields || showDealerFields || showDistributionFields || showCatalogFields">
                                                            <div class="flex flex-col items-left">
                                                                <div class="flex items-center justify-center w-full">
                                                                    <label for="file-upload" id="upload-box"
                                                                        class="flex flex-col items-center justify-center w-full h-12 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                                                                        <div
                                                                            class="flex flex-col items-center justify-center pt-2 pb-2">
                                                                            <svg class="w-4 h-4 text-gray-500 dark:text-white"
                                                                                aria-hidden="true"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                width="24" height="24" fill="none"
                                                                                viewBox="0 0 24 24">
                                                                                <path stroke="currentColor"
                                                                                    stroke-linecap="round"
                                                                                    stroke-linejoin="round" stroke-width="2"
                                                                                    d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                                                            </svg>
                                                                            <p
                                                                                class="mt-1 text-xs text-gray-500 dark:text-white">
                                                                                Add Image</p>
                                                                        </div>
                                                                    </label>
                                                                    <input class="hidden" id="file-upload" type="file"
                                                                        name="images[]" accept="image/*" multiple required
                                                                        onchange="handleFileSelect(event)" />
                                                                </div>
                                                                <div id="additional-images-preview"
                                                                    class="flex flex-wrap gap-2 mt-2">
                                                                    <!-- Display the selected images here as small thumbnails -->
                                                                    <template x-for="image in selectedImages"
                                                                        :key="image.name">
                                                                        <img :src="image.src"
                                                                            class="w-5 h-5 object-cover rounded-md"
                                                                            alt="Image Preview" />
                                                                    </template>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Specific Location Section -->
                                                        <div x-data="locationSelect()" x-init="init()">
                                                            <div class="flex items-center space-x-2">
                                                                <input type="checkbox" id="checkbox_specific_location"
                                                                    x-model="specificLocationChecked"
                                                                    @change="updateSelectedLocations()"
                                                                    class="form-checkbox h-5 w-5 text-green-600">
                                                                <label for="checkbox_specific_location">Select Specific
                                                                    Location</label>
                                                            </div>

                                                            <div class="col w-full grid grid-cols-1 p-2"
                                                                x-show="specificLocationChecked" x-cloak>
                                                                <div>
                                                                    <div class="relative">
                                                                        <div class="flex cursor-pointer items-center justify-between gap-2 border rounded-md bg-gray-50 px-6 py-3"
                                                                            @click="dropdownOpen = true"
                                                                            style="min-width: 200px;">
                                                                            <input type="text"
                                                                                placeholder="Search and select locations"
                                                                                x-model="searchQuery"
                                                                                @input="dropdownOpen = true"
                                                                                class="w-full border-0 bg-transparent focus:ring-0 text-gray-800">
                                                                            <svg class="h-5 w-5 text-gray-500"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                viewBox="0 0 20 20" fill="currentColor">
                                                                                <path fill-rule="evenodd"
                                                                                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 111.414 1.414l-4 4a1 1 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                                                                    clip-rule="evenodd" />
                                                                            </svg>
                                                                        </div>

                                                                        <div class="absolute z-10 w-full bg-white shadow-md rounded-md mt-1 max-h-40 overflow-auto"
                                                                            x-show="dropdownOpen"
                                                                            @click.outside="dropdownOpen = false"
                                                                            style="min-width: 200px;">
                                                                            <ul>
                                                                                <template
                                                                                    x-for="(location, locationIndex) in filteredLocations"
                                                                                    :key="locationIndex">
                                                                                    <li class="px-3 py-2 hover:bg-gray-200 cursor-pointer"
                                                                                        @click="addLocation(location)">
                                                                                        <span
                                                                                            x-text="location.name"></span>
                                                                                    </li>
                                                                                </template>
                                                                            </ul>
                                                                        </div>
                                                                    </div>

                                                                    <template
                                                                        x-for="(location, locationIndex) in selectedLocations"
                                                                        :key="locationIndex">
                                                                        <input type="hidden"
                                                                            name="selected_location_ids[]"
                                                                            :value="location.id">
                                                                    </template>

                                                                    <div
                                                                        class="mt-3 flex flex-wrap gap-2 max-h-10 overflow-y-auto w-full">
                                                                        <template
                                                                            x-for="(location, locationIndex) in selectedLocations"
                                                                            :key="locationIndex">
                                                                            <div
                                                                                class="flex items-center bg-gray-200 rounded-md w-full">
                                                                                <span class="truncate w-full"
                                                                                    x-text="location.name"></span>
                                                                                <button
                                                                                    @click.prevent="removeLocation(locationIndex)"
                                                                                    class="ml-2 text-red-500 hover:text-red-700">&times;</button>
                                                                            </div>
                                                                        </template>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <div class="grid grid-cols-1 md:col-span-2 gap-4">
                                                            <div class="flex items-center space-x-4 pt-2">
                                                                <h2 class="font-bold text-sm">Type:</h2>
                                                                <div class="flex space-x-4">
                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="type[]"
                                                                            value="Retail"
                                                                            @click="checkRetailOptions('Retail')"
                                                                            x-model="checkRetail" class="form-checkbox"
                                                                            checked>
                                                                        <span class="ml-2">Retail</span>
                                                                    </label>

                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="type[]"
                                                                            value="Purchase"
                                                                            @click="checkPurchaseOptions('Purchase')"
                                                                            x-model="checkPurchase" class="form-checkbox">
                                                                        <span class="ml-2">Purchase</span>
                                                                    </label>
                                                                </div>
                                                            </div>


                                                            <div x-show="showRetailOptions" class="mt-4">
                                                                <h2 class="font-bold text-sm">Retail Options:</h2>
                                                                <div class="grid grid-cols-3 gap-4 mt-2">
                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="retail_options[]"
                                                                            value="Sale" class="form-checkbox"
                                                                            :checked="checkedRetailOptions.includes('Sale')">
                                                                        <span class="ml-2">Sale</span>
                                                                    </label>

                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="retail_options[]"
                                                                            value="Online"
                                                                            @change="toggleRetailOption('Online')"
                                                                            class="form-checkbox"
                                                                            :checked="checkedRetailOptions.includes('Online')">
                                                                        <span class="ml-2">Online</span>
                                                                    </label>

                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="retail_options[]"
                                                                            value="Dealer"
                                                                            @change="toggleRetailOption('Dealer')"
                                                                            class="form-checkbox"
                                                                            :checked="checkedRetailOptions.includes('Dealer')">
                                                                        <span class="ml-2">Dealer</span>
                                                                    </label>

                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="retail_options[]"
                                                                            value="Distribution"
                                                                            @change="toggleRetailOption('Distribution')"
                                                                            class="form-checkbox"
                                                                            :checked="checkedRetailOptions.includes(
                                                                                'Distribution')">
                                                                        <span class="ml-2">Distribution</span>
                                                                    </label>

                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="retail_options[]"
                                                                            value="Catalog"
                                                                            @change="toggleRetailOption('Catalog')"
                                                                            class="form-checkbox"
                                                                            :checked="checkedRetailOptions.includes('Catalog')">
                                                                        <span class="ml-2">Catalog</span>
                                                                    </label>

                                                                    <label class="inline-flex items-center">
                                                                        <input type="checkbox" name="retail_options[]"
                                                                            value="Is Service"
                                                                            @change="toggleRetailOption('Is Service')"
                                                                            class="form-checkbox"
                                                                            :checked="checkedRetailOptions.includes('Is Service')">
                                                                        <span class="ml-2">Is Service</span>
                                                                    </label>
                                                                </div>
                                                            </div>

                                                        </div>


                                                    </div>



                                                    <div x-show="showAllFields || showSaleFields || showServiceFields ||showOnlineFields ||showDealerFields ||showDistributionFields || showCatalogFields"
                                                        class="col w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 p-2">
                                                        <div class="mt-5">
                                                            <h2 class="font-bold text-sm">Product Name: *</h2>
                                                            <input class="form-input w-full lg:w-80" required
                                                                placeholder="Product Name" name="name" type="text"
                                                                id="name">
                                                            @error('name')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>

                                                        <div x-data="productForm()" class="mt-5">
                                                            <h2 class="font-bold text-sm">SKU Code: *</h2>
                                                            <div class="flex items-center">
                                                                <input type="text" placeholder="SKU Code" required
                                                                    class="form-input w-full lg:w-80 rounded-l-md"
                                                                    name="sku_code" x-model="skuCode">
                                                                <button type="button" @click="generateSkuCode()"
                                                                    class="btn btn-primary rounded-r-md flex items-center justify-center w-8">
                                                                    +
                                                                </button>
                                                            </div>
                                                            @error('sku_code')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>


                                                        <div class="mt-5">
                                                            <div class="flex justify-between items-center">
                                                                <h2 class="font-bold text-sm">Product Category *</h2>
                                                                <a href="javascript:void(0);"
                                                                    @click="openCategoryModal = true"
                                                                    class="flex items-center text-blue-500 hover:text-blue-700">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                        height="14" viewBox="0 0 24 24" fill="none"
                                                                        stroke="currentColor" stroke-width="2"
                                                                        stroke-linecap="round" stroke-linejoin="round"
                                                                        class="feather feather-plus-circle plus-down-add mr-1">
                                                                        <circle cx="12" cy="12" r="10">
                                                                        </circle>
                                                                        <line x1="12" y1="8"
                                                                            x2="12" y2="16"></line>
                                                                        <line x1="8" y1="12"
                                                                            x2="16" y2="12"></line>
                                                                    </svg>
                                                                    <span>Add New</span>
                                                                </a>
                                                            </div>

                                                            {{-- <h2 class="font-bold text-sm">Product Category</h2> --}}

                                                            <select class="form-select text-white-dark" name="category"
                                                                id="new_category_id" required>
                                                                <option value="" disabled selected>Select Category
                                                                </option>
                                                                @foreach ($productCategory as $pc)
                                                                    <option class="pro-type" value="{{ $pc->id }}"
                                                                        {{ $pc->id == old('category_id') ? 'selected' : '' }}>
                                                                        {{ $pc->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <span class="text-danger">
                                                                @error('category')
                                                                    {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>


                                                        <div class="mt-5">
                                                            <div class="flex justify-between items-center">
                                                                <h2 class="font-bold text-sm">Sub Category</h2>
                                                                <a href="javascript:void(0);"
                                                                    @click="openSubCategoryModal = true"
                                                                    class="flex items-center text-blue-500 hover:text-blue-700">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                        height="14" viewBox="0 0 24 24" fill="none"
                                                                        stroke="currentColor" stroke-width="2"
                                                                        stroke-linecap="round" stroke-linejoin="round"
                                                                        class="feather feather-plus-circle plus-down-add mr-1">
                                                                        <circle cx="12" cy="12" r="10">
                                                                        </circle>
                                                                        <line x1="12" y1="8"
                                                                            x2="12" y2="16"></line>
                                                                        <line x1="8" y1="12"
                                                                            x2="16" y2="12"></line>
                                                                    </svg>
                                                                    <span>Add New</span>
                                                                </a>
                                                            </div>
                                                            <select class="form-select text-white-dark"
                                                                name="sub_category" id="new_sub_category_id">
                                                                <option value="" disabled selected>Select Sub
                                                                    Category</option>
                                                            </select>
                                                            <span class="text-danger">
                                                                @error('sub_category_id')
                                                                    {{ $message }}
                                                                @enderror
                                                            </span>
                                                        </div>

                                                        <div class="mt-5" x-show="!showIsServiceFields">
                                                            <div class="flex justify-between items-center">
                                                                <h2 class="font-bold text-sm">Brand </h2>
                                                                <a href="javascript:void(0);"
                                                                    @click="openBrandModal = true"
                                                                    class="flex items-center text-blue-500 hover:text-blue-700">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14"
                                                                        height="14" viewBox="0 0 24 24" fill="none"
                                                                        stroke="currentColor" stroke-width="2"
                                                                        stroke-linecap="round" stroke-linejoin="round"
                                                                        class="feather feather-plus-circle plus-down-add mr-1">
                                                                        <circle cx="12" cy="12" r="10">
                                                                        </circle>
                                                                        <line x1="12" y1="8"
                                                                            x2="12" y2="16"></line>
                                                                        <line x1="8" y1="12"
                                                                            x2="16" y2="12"></line>
                                                                    </svg>
                                                                    <span>Add New</span>
                                                                </a>
                                                            </div>
                                                            {{-- <h2 class="font-bold text-sm">Brand</h2> --}}
                                                            <select class="form-select text-white-dark" name="brand_id"
                                                                id="new_brand_id">
                                                                <option value="" disabled selected>Select Brand
                                                                </option>
                                                                @foreach ($brand as $b)
                                                                    <option value="{{ $b->id }}"
                                                                        {{ $b->id == old('brand_id') ? 'selected' : '' }}>
                                                                        {{ $b->name }}
                                                                    </option>
                                                                @endforeach
                                                                <span class="text-danger">
                                                                    @error('brand_id')
                                                                        {{ $message }}
                                                                    @enderror
                                                                </span>
                                                            </select>
                                                        </div>


                                                        <div class="mt-5">
                                                            <h2 class="font-bold text-sm">Description</h2>
                                                            <textarea class="form-input w-full lg:w-80" name="description" placeholder="Description..."></textarea>
                                                        </div>
                                                        <div class="flex items-center gap-4 mt-4">
                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked value="1">
                                                                    <span class="text-white-dark">Status</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr class="w-full border-t border-gray-300 dark:border-gray-600">
                                                    @if (!empty($activities))
                                                        <h5
                                                            class="flex items-center space-x-2 text-gray-700 dark:text-white p-5">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="20"
                                                                height="20" viewBox="0 0 24 24" fill="none"
                                                                stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="feather feather-info">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="16" x2="12"
                                                                    y2="12">
                                                                </line>
                                                                <line x1="12" y1="8" x2="12"
                                                                    y2="8">
                                                                </line>
                                                            </svg>
                                                            <span>Aditional Details</span>
                                                        </h5>
                                                    @endif

                                                    <div class="col right w-full px-2 py-2" x-data="{ variations: [''] }">
                                                        <div class="flex items-center space-x-4">
                                                            <label class="block text-gray-700 dark:text-white mr-4">Product
                                                                Type</label>
                                                            <div class="flex space-x-4">
                                                                <label class="inline-flex items-center">
                                                                    <input type="radio" name="product_type"
                                                                        value="Single" x-model="productType"
                                                                        class="form-radio h-4 w-4 text-green-600">
                                                                    <span class="ml-2">Single</span>
                                                                </label>
                                                                <label class="inline-flex items-center">
                                                                    <input type="radio" name="product_type"
                                                                        value="Variation" x-model="productType"
                                                                        class="form-radio h-4 w-4 text-green-600">
                                                                    <span class="ml-2">Variation</span>
                                                                </label>
                                                            </div>
                                                        </div>


                                                        <div class="variations" x-show="productType === 'Variation'"
                                                            style="position: relative">
                                                            <div x-data="{
                                                                product_variant: [],
                                                                selectedType: '',
                                                                newName: '',
                                                                selectedTypes: [],
                                                                checkboxStates: [],
                                                                lockStates: [],
                                                                addName() {
                                                                    if (this.selectedType && this.newName.trim()) {
                                                                        this.names.push(this.newName.trim());
                                                                        this.selectedTypes.push(this.selectedType);
                                                                        this.checkboxStates.push({
                                                                            'Sale Price with Tax': false,
                                                                            'Dealer Price with Tax': false,
                                                                            'Distribution Price with Tax': false
                                                                        });
                                                                        this.lockStates.push({
                                                                            'Sale Price with Tax': false,
                                                                            'Dealer Price with Tax': false,
                                                                            'Distribution Price with Tax': false
                                                                        });
                                                                        this.newName = ''; // Clear the input after adding
                                                                    }
                                                                },
                                                                removeName(index) {
                                                                    this.names.splice(index, 1);
                                                                    this.selectedTypes.splice(index, 1);
                                                                    this.checkboxStates.splice(index, 1);
                                                                    this.lockStates.splice(index, 1);
                                                                }
                                                            }">
                                                                <div class="flex">
                                                                    <div class="w-1/2">
                                                                        <label for="variation-type">Type</label>
                                                                        <select class="form-select text-white-dark"
                                                                            x-model="selectedType"
                                                                            name="variation_product[variation_type][]">
                                                                            <option value="" disabled selected>Select
                                                                                Type
                                                                            </option>
                                                                            @foreach ($productVariation as $variation)
                                                                                <option value="{{ $variation->id }}"
                                                                                    data-value="{{ $variation->decimal_value }}"
                                                                                    data-has-color="{{ $variation->has_color }}"
                                                                                    data-has-image="{{ $variation->has_image }}">
                                                                                    {{ $variation->name }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>

                                                                    <div x-show="selectedType" class="w-1/2">
                                                                        <label
                                                                            class="block text-gray-700 dark:text-white">Names</label>
                                                                        <input type="text" x-model="newName"
                                                                            @keyup.enter.prevent="addName()"
                                                                            placeholder="Type name and press Enter"
                                                                            class="form-input mb-2" />

                                                                        <div class="p-2 flex flex-wrap">
                                                                            <template x-for="(name, index) in names"
                                                                                :key="index">
                                                                                <div
                                                                                    class="flex items-center bg-gray-200 px-2 py-1 rounded-md mr-2 mb-2">
                                                                                    <span x-text="name"></span>
                                                                                    <button
                                                                                        @click.prevent="removeName(index); $event.stopPropagation()"
                                                                                        class="ml-2 text-red-500 hover:text-red-700">&times;</button>
                                                                                </div>
                                                                            </template>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                                <div class="w-full">

                                                                    <div x-show="names.length > 0" x-cloak>
                                                                        <ul>
                                                                            <template x-for="(name, index) in names"
                                                                                :key="index">
                                                                                <li class="mb-4">
                                                                                    <span x-text="name"
                                                                                        class="font-semibold"></span>
                                                                                    <div class="flex flex-wrap gap-2">
                                                                                        <input type="hidden"
                                                                                            :name="`variation_product[${index}][name]`"
                                                                                            :value="name" />
                                                                                        <input type="hidden"
                                                                                            :name="`variation_product[${index}][variation_type]`"
                                                                                            :value="selectedTypes[index]" />

                                                                                        <!-- Fixed-size fields -->
                                                                                        <div class="flex flex-col">
                                                                                            <input type="text"
                                                                                                :name="`variation_product[${index}][sku_code]`"
                                                                                                placeholder="SKU Code"
                                                                                                class="form-input w-32 mb-1" />
                                                                                        </div>
                                                                                        <div class="flex flex-col">
                                                                                            <input type="color"
                                                                                                :name="`variation_product[${index}][color]`"
                                                                                                placeholder="Color"
                                                                                                class="form-input w-32 mb-1 h-10" />
                                                                                        </div>


                                                                                        <div class="flex flex-col">
                                                                                            <input type="text"
                                                                                                :name="`variation_product[${index}][margin]`"
                                                                                                placeholder="Enter Margin"
                                                                                                class="form-input w-32 mb-1" />
                                                                                        </div>
                                                                                        <!-- New Unit Field -->
                                                                                        <div class="flex flex-col">
                                                                                            <select
                                                                                                :name="`variation_product[${index}][unit]`"
                                                                                                class="form-select w-32 mb-1 text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                <option value="">
                                                                                                    Select Unit</option>
                                                                                                @foreach ($units as $unit)
                                                                                                    <option
                                                                                                        value="{{ $unit->id }}">
                                                                                                        {{ $unit->name }}
                                                                                                    </option>
                                                                                                @endforeach
                                                                                            </select>
                                                                                        </div>
                                                                                        <div class="flex flex-col">
                                                                                            <input type="text"
                                                                                                :name="`variation_product[${index}][quantity]`"
                                                                                                placeholder="Quantity"
                                                                                                class="form-input w-32 mb-1" />
                                                                                        </div>
                                                                                        <div class="flex flex-col"
                                                                                            x-show="checkPurchase">
                                                                                            <input type="text"
                                                                                                :name="`variation_product[${index}][purchase_price]`"
                                                                                                placeholder="Purchase Price"
                                                                                                class="form-input w-32 mb-1" />
                                                                                        </div>
                                                                                        <div class="flex flex-col"
                                                                                            x-show="showOnlineFields">
                                                                                            <input type="text"
                                                                                                :name="`variation_product[${index}][online_price]`"
                                                                                                placeholder="Online Price"
                                                                                                class="form-input w-32 mb-1" />
                                                                                        </div>
                                                                                        <div class="flex flex-col">
                                                                                            <input type="text"
                                                                                                :name="`variation_product[${index}][mrp]`"
                                                                                                placeholder="MRP"
                                                                                                class="form-input w-32 mb-1" />
                                                                                        </div>


                                                                                        <!-- Checkbox and locking logic -->
                                                                                        <template
                                                                                            x-for="(label, name) in { 'Sale Price with Tax': 'Sale Price with Tax', 'Dealer Price with Tax': 'Dealer Price with Tax', 'Distribution Price with Tax': 'Distribution Price with Tax' }"
                                                                                            :key="name">
                                                                                            <div class="flex flex-col pt-0 mt-0"
                                                                                                x-show="(showSaleFields && ['Packing Unit', 'Sale Price with Tax', 'Margin', 'MRP'].includes(label)) ||
                                                                                            (showOnlineFields && ['Packing Unit', 'Online Differed Price', 'Margin', 'MRP'].includes(label)) ||
                                                                                            (showDealerFields && ['Packing Unit', 'Dealer Price with Tax', 'Margin', 'MRP'].includes(label)) ||
                                                                                            (showDistributionFields && ['Packing Unit', 'Distribution Price with Tax', 'Margin', 'MRP'].includes(label)) ||
                                                                                            (showCatalogFields && ['Sale Price with Tax'].includes(label)) ||
                                                                                            (showIsServiceFields && ['Sale Price with Tax'].includes(label)) ||
                                                                                            (checkPurchase && ['Sale Price with Tax', 'Purchase Unit'].includes(label))">

                                                                                                <div class="relative">
                                                                                                    <input type="text"
                                                                                                        :name="`variation_product[${index}][price_with_tax][${label}]`"
                                                                                                        class="form-input w-full text-white-dark pr-10 pl-10"
                                                                                                        :disabled="lockStates[
                                                                                                            index][
                                                                                                            label
                                                                                                        ]" />
                                                                                                    <span
                                                                                                        class="absolute inset-y-0 right-2 flex items-center pl-3 cursor-pointer"
                                                                                                        @click="lockStates[index][label] = !lockStates[index][label]">
                                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                            class="h-5 w-5"
                                                                                                            :class="lockStates[
                                                                                                                    index
                                                                                                                ][
                                                                                                                    label
                                                                                                                ] ?
                                                                                                                'text-red-500' :
                                                                                                                'text-gray-400'"
                                                                                                            viewBox="0 0 24 24"
                                                                                                            fill="currentColor">
                                                                                                            <path
                                                                                                                fill-rule="evenodd"
                                                                                                                d="M12 2a6 6 0 00-6 6v3a3 3 0 00-3 3v6a3 3 0 003 3h12a3 3 0 003-3v-6a3 3 0 00-3-3V8a6 6 0 00-6-6zm-4 9V8a4 4 0 118 0v3H8zm2 5a1 1 0 112 0v3a1 1 0 11-2 0v-3z"
                                                                                                                clip-rule="evenodd" />
                                                                                                        </svg>
                                                                                                    </span>
                                                                                                </div>
                                                                                                <div
                                                                                                    class="flex items-center justify-between">
                                                                                                    <label
                                                                                                        :for="`checkbox_${index}_${name}`"
                                                                                                        x-text="label"
                                                                                                        class="text-gray-700 dark:text-white"></label>
                                                                                                    <input type="checkbox"
                                                                                                        :id="`checkbox_${index}_${name}`"
                                                                                                        class="form-checkbox h-5 w-5 text-green-600"
                                                                                                        x-model="checkboxStates[index][label]" />

                                                                                                </div>
                                                                                            </div>
                                                                                        </template>
                                                                                        <div class="flex flex-col">
                                                                                            <input type="file"
                                                                                                :name="`variation_product[${index}][file]`"
                                                                                                class="form-input w-48 mb-1" />
                                                                                        </div>

                                                                                    </div>
                                                                                </li>
                                                                            </template>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>


                                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
                                                        x-data="{
                                                            lockStates: {
                                                                'Sale Price with Tax': false,
                                                                'Dealer Price with Tax': false,
                                                                'Distribution Price with Tax': false
                                                            },
                                                            checkboxStates: {
                                                                'Sale Price with Tax': false,
                                                                'Dealer Price with Tax': false,
                                                                'Distribution Price with Tax': false
                                                            }
                                                        }">
                                                        @foreach ($activities as $activity)
                                                            @if ($activity['setup_status'] == 1)
                                                                @if (in_array($activity['name'], [
                                                                        'Sale Price with Tax',
                                                                        'Dealer Price with Tax',
                                                                        'Distribution Price with Tax',
                                                                        'MRP',
                                                                        'Packing Unit',
                                                                        'Purchase Unit',
                                                                        'Margin',
                                                                        'Online Differed Price',
                                                                    ]))
                                                                    <div
                                                                        x-show="!((
                                                                        productType === 'Single' && [''].includes('{{ $activity['name'] }}')
                                                                    ) || (
                                                                        productType === 'Variation' && [
                                                                            'Sale Price with Tax',
                                                                            'Dealer Price with Tax',
                                                                            'Distribution Price with Tax',
                                                                            'MRP',
                                                                            'Packing Unit',
                                                                            'Purchase Unit',
                                                                            'Margin',
                                                                            'Online Differed Price'
                                                                        ].includes('{{ $activity['name'] }}') && !checkboxStates['{{ $activity['name'] }}']
                                                                    )) && (
                                                                        showSaleFields && ['Packing Unit', 'Sale Price with Tax', 'Margin', 'MRP'].includes('{{ $activity['name'] }}')
                                                                        || showOnlineFields && ['Packing Unit', 'Online Differed Price', 'Margin', 'MRP'].includes('{{ $activity['name'] }}')
                                                                        || showDealerFields && ['Packing Unit', 'Dealer Price with Tax', 'Margin', 'MRP'].includes('{{ $activity['name'] }}')
                                                                        || showDistributionFields && ['Packing Unit', 'Distribution Price with Tax', 'Margin', 'MRP'].includes('{{ $activity['name'] }}')
                                                                        || showCatalogFields && ['Sale Price with Tax'].includes('{{ $activity['name'] }}')
                                                                        || showIsServiceFields && ['Sale Price with Tax'].includes('{{ $activity['name'] }}')
                                                                        || checkPurchase && ['Packing Unit', 'Purchase Unit', 'MRP'].includes('{{ $activity['name'] }}')
                                                                    ) || (productType === 'Variation' && checkboxStates['{{ $activity['name'] }}'])">



                                                                        @if ($activity['type'] == 'dropdown')
                                                                            @if (in_array($activity['name'], ['Purchase Unit', 'Packing Unit']))
                                                                                <div
                                                                                    class="flex justify-between items-center mb-2">
                                                                                    <label
                                                                                        for="activity_{{ $activity['setup_id'] }}"
                                                                                        class="font-bold text-sm">
                                                                                        {{ $activity['name'] }}
                                                                                    </label>
                                                                                    <a href="javascript:void(0);"
                                                                                        @click="openUnitModal = true"
                                                                                        class="flex items-center text-blue-500 hover:text-blue-700">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            width="14" height="14"
                                                                                            viewBox="0 0 24 24"
                                                                                            fill="none"
                                                                                            stroke="currentColor"
                                                                                            stroke-width="2"
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round"
                                                                                            class="feather feather-plus-circle plus-down-add mr-1">
                                                                                            <circle cx="12"
                                                                                                cy="12" r="10">
                                                                                            </circle>
                                                                                            <line x1="12"
                                                                                                y1="8"
                                                                                                x2="12"
                                                                                                y2="16"></line>
                                                                                            <line x1="8"
                                                                                                y1="12"
                                                                                                x2="16"
                                                                                                y2="12"></line>
                                                                                        </svg>
                                                                                        <span>Add New</span>
                                                                                    </a>
                                                                                </div>
                                                                            @endif

                                                                            <select
                                                                                id="activity_{{ $activity['setup_id'] }}"
                                                                                name="activity_{{ $activity['setup_id'] }}"
                                                                                class="form-select w-full text-white-dark">
                                                                                <option value="" disabled selected>
                                                                                    Select
                                                                                    {{ $activity['name'] }}</option>
                                                                                @if (in_array($activity['name'], ['Purchase Unit', 'Packing Unit']))
                                                                                    @foreach ($units as $unit)
                                                                                        <option
                                                                                            value="{{ $unit->id }}">
                                                                                            {{ $unit->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                @else
                                                                                    <option value="option1">Option 1
                                                                                    </option>
                                                                                    <option value="option2">Option 2
                                                                                    </option>
                                                                                    <option value="option3">Option 3
                                                                                    </option>
                                                                                @endif
                                                                            </select>
                                                                        @elseif ($activity['type'] == 'text box')
                                                                            @if (in_array($activity['name'], ['Sale Price with Tax', 'Dealer Price with Tax', 'Distribution Price with Tax']))
                                                                                <div class="flex items-center space-x-2">
                                                                                    <input type="checkbox"
                                                                                        id="checkbox_{{ $activity['setup_id'] }}"
                                                                                        class="form-checkbox h-5 w-5 text-green-600"
                                                                                        x-model="checkboxStates['{{ $activity['name'] }}']">
                                                                                    <label
                                                                                        for="checkbox_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                                </div>

                                                                                <div class="mt-1 relative">
                                                                                    <input type="text"
                                                                                        id="activity_{{ $activity['setup_id'] }}"
                                                                                        name="activity_{{ $activity['setup_id'] }}"
                                                                                        class="form-input w-full text-white-dark pr-10"
                                                                                        :disabled="lockStates[
                                                                                            '{{ $activity['name'] }}'
                                                                                        ]">

                                                                                    <!-- Lock icon -->
                                                                                    <span
                                                                                        class="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer"
                                                                                        @click="lockStates['{{ $activity['name'] }}'] = !lockStates['{{ $activity['name'] }}']">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            class="h-5 w-5"
                                                                                            :class="lockStates[
                                                                                                    '{{ $activity['name'] }}'
                                                                                                ] ?
                                                                                                'text-red-500' :
                                                                                                'text-gray-400'"
                                                                                            viewBox="0 0 24 24"
                                                                                            fill="currentColor">
                                                                                            <path fill-rule="evenodd"
                                                                                                d="M12 2a6 6 0 00-6 6v3a3 3 0 00-3 3v6a3 3 0 003 3h12a3 3 0 003-3v-6a3 3 0 00-3-3V8a6 6 0 00-6-6zm-4 9V8a4 4 0 118 0v3H8zm2 5a1 1 0 112 0v3a1 1 0 11-2 0v-3z"
                                                                                                clip-rule="evenodd" />
                                                                                        </svg>
                                                                                    </span>
                                                                                </div>
                                                                            @else
                                                                                <label
                                                                                    for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                                <input type="text"
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-input w-full text-white-dark">
                                                                            @endif
                                                                        @endif
                                                                    </div>
                                                                @endif
                                                            @endif
                                                        @endforeach
                                                        <div x-show="checkPurchase && productType !== 'Variation'"
                                                            class="mt-0">
                                                            <label for="purchase_price" class="font-bold text-sm">Purchase
                                                                Price</label>
                                                            <input type="text" id="purchase_price"
                                                                name="purchase_price"
                                                                class="form-input w-full text-white-dark">
                                                        </div>
                                                    </div>

                                                    <hr
                                                        class="w-full border-t border-gray-300 dark:border-gray-600 mb-4 mt-4">

                                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
                                                        x-data="{ multiKOTChecked: false, multiBOTChecked: false }">
                                                        @foreach ($activities as $activity)
                                                            @if ($activity['setup_status'] == 1)
                                                                <!-- Exclude fields that belong to Location and Languages tabs -->
                                                                @if (
                                                                    !in_array($activity['name'], [
                                                                        'Location',
                                                                        'Price (Location wise)',
                                                                        'Department wise item',
                                                                        'Price (Department wise)',
                                                                        'Product (Location wise)',
                                                                        'Multi Languages',
                                                                        'Has Promotion Item',
                                                                        'Online Differed Price',
                                                                        'Has an online website Digital Menu',
                                                                        'Has an Online Store',
                                                                        'Centralized Location',
                                                                        'Has Table Digital Menu',
                                                                        'Sale Price with Tax',
                                                                        'Sale Price without Tax',
                                                                        'Dealer Price with Tax',
                                                                        'Distribution Price with Tax',
                                                                        'MRP',
                                                                        'Packing Unit',
                                                                        'Purchase Unit',
                                                                        'Margin',
                                                                    ]))
                                                                    <div
                                                                        x-show="!((productType === 'Single' && ['Has a handle Serial / IMEI', 'Has Deposit Item', 'Has Empty / Return Item', 'Weighted', 'BOT', 'Multi KOT', 'Vendors', 'Has Digital Menu', 'Available to time period', 'HO Control Price', 'Manufacturing', 'Purchase Unit', 'Has Stone', 'Has Stamp', 'Has Metail','Has a Warranty Period'].includes('{{ $activity['name'] }}')) ||
                                                                    (productType === 'Variation' && ['Taq Number', 'Batch Number', 'Manage Expired', 'Has a handle Serial / IMEI', 'Has Deposit Item', 'Has Empty / Return Item', 'Weighted', 'BOT', 'Multi KOT', 'Vendors', 'Has Digital Menu', 'Has a Warranty Period', 'Available to time period', 'Has Stone', 'Has Stamp', 'Has Metail', 'HO Control Price', 'Manufacturing', 'Packing Unit'].includes('{{ $activity['name'] }}')))
                                                                     && (
                                                                        showSaleFields && [ 'Manage Expired','Taq Number', 'Batch Number','Tracking Serial / IMEI','Has a handle Serial / IMEI','Multi Price item','Has Deposit Item','Has Empty / Return Item','Weighted','Handling to Managing stock Alert','Available to time period'].includes('{{ $activity['name'] }}')
                                                                        ||showOnlineFields && [ 'Manage Expired','Taq Number', 'Batch Number','Tracking Serial / IMEI','Has a handle Serial / IMEI','Multi Price item','Has Deposit Item','Has Empty / Return Item','Weighted','Handling to Managing stock Alert','Available to time period'].includes('{{ $activity['name'] }}')
                                                                        ||showDealerFields && [ 'Manage Expired','Taq Number', 'Batch Number','Tracking Serial / IMEI','Has a handle Serial / IMEI','Multi Price item','Has Deposit Item','Has Empty / Return Item','Weighted','Handling to Managing stock Alert','Available to time period'].includes('{{ $activity['name'] }}')
                                                                        ||showCatalogFields && ['Has Digital Menu','Handling to Managing stock Alert'].includes('{{ $activity['name'] }}')
                                                                        ||showIsServiceFields && ['Handling to Managing stock Alert'].includes('{{ $activity['name'] }}')
                                                                        ||showDistributionFields && [ 'Manage Expired','Taq Number', 'Batch Number','Tracking Serial / IMEI','Has a handle Serial / IMEI','Multi Price item','Has Deposit Item','Has Empty / Return Item','Weighted','Handling to Managing stock Alert','Available to time period'].includes('{{ $activity['name'] }}')
                                                                        ||checkPurchase && [ 'Manage Expired','Taq Number', 'Batch Number','Has Deposit Item','Has a Warranty Period','Vendors','Handling to Managing stock Alert'].includes('{{ $activity['name'] }}')

                                                                    )">



                                                                        @if ($activity['type'] == 'checkbox')
                                                                            <div class="flex items-center space-x-2"
                                                                                :class="{
                                                                                    'invisible pointer-events-none':

                                                                                        ((checkRetail ||
                                                                                                showSaleFields ||
                                                                                                showOnlineFields ||
                                                                                                showDealerFields ||
                                                                                                showCatalogFields ||
                                                                                                showIsServiceFields ||
                                                                                                showDistributionFields
                                                                                            ) &&
                                                                                            ('{{ $activity['name'] }}'
                                                                                                === 'Handling to Managing stock Alert'
                                                                                            ))
                                                                                }">
                                                                                <input type="checkbox"
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    value="1"
                                                                                    {{ $activity['setup_status'] == 1 ? 'checked' : '' }}
                                                                                    class="form-checkbox h-5 w-5 text-green-600"
                                                                                    @if ($activity['name'] == 'Handling to Managing stock Alert') x-model="isManagingStockAlertChecked"
                                                                                id="activity_handling_stock_alert"
                                                                            @elseif ($activity['name'] == 'Multi KOT')
                                                                                x-model="multiKOTChecked"
                                                                            @elseif ($activity['name'] == 'BOT')
                                                                                x-model="multiBOTChecked"
                                                                            @elseif ($activity['name'] == 'Multi Price item')
                                                                                x-model="multiPriceItemChecked" @endif>
                                                                                <label
                                                                                    for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                            </div>

                                                                            <!-- Conditionally render location dropdown for Multi KOT or Multi BOT -->
                                                                            @if ($activity['name'] == 'Multi KOT')
                                                                                <div x-show="multiKOTChecked"
                                                                                    class="mt-2">
                                                                                    <label for="multi_kot_location">Select
                                                                                        Location for Multi KOT</label>
                                                                                    <select id="multi_kot_location"
                                                                                        name="multi_kot_location"
                                                                                        class="form-select w-full text-white-dark">
                                                                                        <option value="" disabled
                                                                                            selected>Select Location
                                                                                        </option>
                                                                                        @foreach ($locations as $location)
                                                                                            <option
                                                                                                value="{{ $location->id }}">
                                                                                                {{ $location->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            @elseif ($activity['name'] == 'BOT')
                                                                                <div x-show="multiBOTChecked"
                                                                                    class="mt-2">
                                                                                    <label for="multi_bot_location">Select
                                                                                        Location for BOT</label>
                                                                                    <select id="multi_bot_location"
                                                                                        name="multi_bot_location"
                                                                                        class="form-select w-full text-white-dark">
                                                                                        <option value="" disabled
                                                                                            selected>Select Location
                                                                                        </option>
                                                                                        @foreach ($locations as $location)
                                                                                            <option
                                                                                                value="{{ $location->id }}">
                                                                                                {{ $location->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                                </div>
                                                                            @endif
                                                                        @elseif ($activity['type'] == 'text box')
                                                                            <!-- Render text box -->
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                            <input type="text"
                                                                                id="activity_{{ $activity['setup_id'] }}"
                                                                                name="activity_{{ $activity['setup_id'] }}"
                                                                                class="form-input w-full text-white-dark">
                                                                        @elseif ($activity['type'] == 'text area')
                                                                            <!-- Render text area -->
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                            <textarea id="activity_{{ $activity['setup_id'] }}" name="activity_{{ $activity['setup_id'] }}"
                                                                                class="form-textarea w-full text-white-dark"></textarea>
                                                                        @elseif ($activity['type'] == 'datetime')
                                                                            <!-- Render datetime input -->
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                            <input type="datetime-local"
                                                                                id="activity_{{ $activity['setup_id'] }}"
                                                                                name="activity_{{ $activity['setup_id'] }}"
                                                                                class="form-input w-full text-white-dark">
                                                                        @elseif ($activity['type'] == 'dropdown' && $activity['name'] == 'Vendors')
                                                                            <!-- Render searchable vendors dropdown -->
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                            <div x-data="{ open: false, search: '', selectedVendor: null, vendors: {{ $vendors->toJson() }} }"
                                                                                class="relative">
                                                                                <button @click.prevent="open = !open"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <span
                                                                                        x-text="selectedVendor ? selectedVendor.name : 'Select Vendor'"></span>
                                                                                </button>
                                                                                <div x-show="open"
                                                                                    @click.outside="open = false"
                                                                                    class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg">
                                                                                    <!-- Search input at the top of the dropdown -->
                                                                                    <div
                                                                                        class="p-2 border-b border-gray-300">
                                                                                        <input type="text"
                                                                                            x-model="search"
                                                                                            placeholder="Search vendors..."
                                                                                            class="w-full p-2 outline-none" />
                                                                                    </div>
                                                                                    <ul class="max-h-60 overflow-y-auto">
                                                                                        <template
                                                                                            x-for="vendor in vendors.filter(v => v.name.toLowerCase().includes(search.toLowerCase()))"
                                                                                            :key="vendor.id">
                                                                                            <li @click="selectedVendor = vendor; open = false; $dispatch('vendor-selected', vendor.id)"
                                                                                                class="cursor-pointer hover:bg-gray-100 p-2">
                                                                                                <span
                                                                                                    x-text="vendor.name"></span>
                                                                                            </li>
                                                                                        </template>
                                                                                        <template
                                                                                            x-if="vendors.filter(v => v.name.toLowerCase().includes(search.toLowerCase())).length === 0">
                                                                                            <li class="p-2 text-gray-500">
                                                                                                No
                                                                                                vendors found</li>
                                                                                        </template>
                                                                                    </ul>
                                                                                </div>
                                                                                <!-- Hidden input to store the selected vendor's ID -->
                                                                                <input type="hidden" name="vendor_id"
                                                                                    x-bind:value="selectedVendor ? selectedVendor
                                                                                        .id :
                                                                                        ''">
                                                                            </div>
                                                                        @elseif ($activity['type'] == 'dropdown')
                                                                            @if (in_array($activity['name'], ['Has a Warranty Period']))
                                                                                <div
                                                                                    class="flex justify-between items-center mb-2">
                                                                                    <label
                                                                                        for="activity_{{ $activity['setup_id'] }}"
                                                                                        class="font-bold text-sm">
                                                                                        {{ $activity['name'] }}
                                                                                    </label>
                                                                                    <a href="javascript:void(0);"
                                                                                        @click="openWarrantyModal = true"
                                                                                        class="flex items-center text-blue-500 hover:text-blue-700">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            width="14" height="14"
                                                                                            viewBox="0 0 24 24"
                                                                                            fill="none"
                                                                                            stroke="currentColor"
                                                                                            stroke-width="2"
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round"
                                                                                            class="feather feather-plus-circle plus-down-add mr-1">
                                                                                            <circle cx="12"
                                                                                                cy="12" r="10">
                                                                                            </circle>
                                                                                            <line x1="12"
                                                                                                y1="8"
                                                                                                x2="12"
                                                                                                y2="16">
                                                                                            </line>
                                                                                            <line x1="8"
                                                                                                y1="12"
                                                                                                x2="16"
                                                                                                y2="12">
                                                                                            </line>
                                                                                        </svg>
                                                                                        <span>Add New</span>
                                                                                    </a>
                                                                                </div>
                                                                                <select
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <option value="" disabled
                                                                                        selected>
                                                                                        Select
                                                                                        {{ $activity['name'] }}
                                                                                    </option>
                                                                                    @if (in_array($activity['name'], ['Has a Warranty Period']))
                                                                                        @foreach ($warranties as $warranty)
                                                                                            <option
                                                                                                value="{{ $warranty->id }}">
                                                                                                {{ $warranty->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    @else
                                                                                        <option value="option1">Option
                                                                                            1
                                                                                        </option>
                                                                                        <option value="option2">Option
                                                                                            2
                                                                                        </option>
                                                                                        <option value="option3">Option
                                                                                            3
                                                                                        </option>
                                                                                    @endif

                                                                                </select>
                                                                            @elseif (in_array($activity['name'], ['Has Digital Menu']))
                                                                                <label
                                                                                    for="activity_{{ $activity['setup_id'] }}"
                                                                                    class="font-bold text-sm">
                                                                                    {{ $activity['name'] }}
                                                                                </label>
                                                                                <select
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <option value="" disabled
                                                                                        selected>
                                                                                        Select
                                                                                        {{ $activity['name'] }}
                                                                                    </option>
                                                                                    @if (in_array($activity['name'], ['Has Digital Menu']))
                                                                                        @foreach ($digitalMenus as $digitalMenu)
                                                                                            <option
                                                                                                value="{{ $digitalMenu->id }}">
                                                                                                {{ $digitalMenu->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    @else
                                                                                        <option value="option1">Option
                                                                                            1
                                                                                        </option>
                                                                                        <option value="option2">Option
                                                                                            2
                                                                                        </option>
                                                                                        <option value="option3">Option
                                                                                            3
                                                                                        </option>
                                                                                    @endif

                                                                                </select>
                                                                            @elseif (in_array($activity['name'], ['Has Metail']))
                                                                                <div
                                                                                    class="flex justify-between items-center mb-2">
                                                                                    <label
                                                                                        for="activity_{{ $activity['setup_id'] }}"
                                                                                        class="font-bold text-sm">
                                                                                        {{ $activity['name'] }}
                                                                                    </label>
                                                                                    <a href="javascript:void(0);"
                                                                                        @click="openMetailModal = true"
                                                                                        class="flex items-center text-blue-500 hover:text-blue-700">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            width="14" height="14"
                                                                                            viewBox="0 0 24 24"
                                                                                            fill="none"
                                                                                            stroke="currentColor"
                                                                                            stroke-width="2"
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round"
                                                                                            class="feather feather-plus-circle plus-down-add mr-1">
                                                                                            <circle cx="12"
                                                                                                cy="12" r="10">
                                                                                            </circle>
                                                                                            <line x1="12"
                                                                                                y1="8"
                                                                                                x2="12"
                                                                                                y2="16">
                                                                                            </line>
                                                                                            <line x1="8"
                                                                                                y1="12"
                                                                                                x2="16"
                                                                                                y2="12">
                                                                                            </line>
                                                                                        </svg>
                                                                                        <span>Add New</span>
                                                                                    </a>
                                                                                </div>
                                                                                <select
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <option value="" disabled
                                                                                        selected>
                                                                                        Select
                                                                                        {{ $activity['name'] }}
                                                                                    </option>
                                                                                    @if (in_array($activity['name'], ['Has Metail']))
                                                                                        @foreach ($metails as $metail)
                                                                                            <option
                                                                                                value="{{ $metail->id }}">
                                                                                                {{ $metail->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    @else
                                                                                        <option value="option1">Option
                                                                                            1
                                                                                        </option>
                                                                                        <option value="option2">Option
                                                                                            2
                                                                                        </option>
                                                                                        <option value="option3">Option
                                                                                            3
                                                                                        </option>
                                                                                    @endif

                                                                                </select>
                                                                            @elseif(in_array($activity['name'], ['Has Stamp']))
                                                                                <div
                                                                                    class="flex justify-between items-center mb-2">
                                                                                    <label
                                                                                        for="activity_{{ $activity['setup_id'] }}"
                                                                                        class="font-bold text-sm">
                                                                                        {{ $activity['name'] }}
                                                                                    </label>
                                                                                    <a href="javascript:void(0);"
                                                                                        @click="openStampModal = true"
                                                                                        class="flex items-center text-blue-500 hover:text-blue-700">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            width="14" height="14"
                                                                                            viewBox="0 0 24 24"
                                                                                            fill="none"
                                                                                            stroke="currentColor"
                                                                                            stroke-width="2"
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round"
                                                                                            class="feather feather-plus-circle plus-down-add mr-1">
                                                                                            <circle cx="12"
                                                                                                cy="12" r="10">
                                                                                            </circle>
                                                                                            <line x1="12"
                                                                                                y1="8"
                                                                                                x2="12"
                                                                                                y2="16">
                                                                                            </line>
                                                                                            <line x1="8"
                                                                                                y1="12"
                                                                                                x2="16"
                                                                                                y2="12">
                                                                                            </line>
                                                                                        </svg>
                                                                                        <span>Add New</span>
                                                                                    </a>
                                                                                </div>
                                                                                <select
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <option value="" disabled
                                                                                        selected>
                                                                                        Select
                                                                                        {{ $activity['name'] }}
                                                                                    </option>
                                                                                    @if (in_array($activity['name'], ['Has Stamp']))
                                                                                        @foreach ($stamps as $stamp)
                                                                                            <option
                                                                                                value="{{ $stamp->id }}">
                                                                                                {{ $stamp->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    @else
                                                                                        <option value="option1">Option
                                                                                            1
                                                                                        </option>
                                                                                        <option value="option2">Option
                                                                                            2
                                                                                        </option>
                                                                                        <option value="option3">Option
                                                                                            3
                                                                                        </option>
                                                                                    @endif

                                                                                </select>
                                                                            @elseif(in_array($activity['name'], ['Has Stone']))
                                                                                <div
                                                                                    class="flex justify-between items-center mb-2">
                                                                                    <label
                                                                                        for="activity_{{ $activity['setup_id'] }}"
                                                                                        class="font-bold text-sm">
                                                                                        {{ $activity['name'] }}
                                                                                    </label>
                                                                                    <a href="javascript:void(0);"
                                                                                        @click="openStoneModal = true"
                                                                                        class="flex items-center text-blue-500 hover:text-blue-700">
                                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                                            width="14" height="14"
                                                                                            viewBox="0 0 24 24"
                                                                                            fill="none"
                                                                                            stroke="currentColor"
                                                                                            stroke-width="2"
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round"
                                                                                            class="feather feather-plus-circle plus-down-add mr-1">
                                                                                            <circle cx="12"
                                                                                                cy="12" r="10">
                                                                                            </circle>
                                                                                            <line x1="12"
                                                                                                y1="8"
                                                                                                x2="12"
                                                                                                y2="16">
                                                                                            </line>
                                                                                            <line x1="8"
                                                                                                y1="12"
                                                                                                x2="16"
                                                                                                y2="12">
                                                                                            </line>
                                                                                        </svg>
                                                                                        <span>Add New</span>
                                                                                    </a>
                                                                                </div>

                                                                                <select
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <option value="" disabled
                                                                                        selected>
                                                                                        Select
                                                                                        {{ $activity['name'] }}
                                                                                    </option>
                                                                                    @if (in_array($activity['name'], ['Has Stone']))
                                                                                        @foreach ($stones as $stone)
                                                                                            <option
                                                                                                value="{{ $stone->id }}">
                                                                                                {{ $stone->name }}
                                                                                            </option>
                                                                                        @endforeach
                                                                                    @else
                                                                                        <option value="option1">Option
                                                                                            1
                                                                                        </option>
                                                                                        <option value="option2">Option
                                                                                            2
                                                                                        </option>
                                                                                        <option value="option3">Option
                                                                                            3
                                                                                        </option>
                                                                                    @endif

                                                                                </select>
                                                                            @else
                                                                                <label
                                                                                    for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                                <select
                                                                                    id="activity_{{ $activity['setup_id'] }}"
                                                                                    name="activity_{{ $activity['setup_id'] }}"
                                                                                    class="form-select w-full text-white-dark">
                                                                                    <option value="" disabled
                                                                                        selected>
                                                                                        Select
                                                                                        Option</option>
                                                                                    <option value="option1">Option 1
                                                                                    </option>
                                                                                    <option value="option2">Option 2
                                                                                    </option>
                                                                                </select>
                                                                            @endif
                                                                        @endif
                                                                    </div>
                                                                @endif
                                                            @endif
                                                        @endforeach
                                                    </div>




                                                    <div class="flex justify-end mt-4">
                                                        <button type="submit" class="btn btn-primary btn-lg"
                                                            id="product-submit-btn">Create</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>


                                        <!-- Location Tab Fields -->

                                        <div x-show="tab === 'location' && hasLocation"
                                            class="right-top-panel border border-gray-300 p-5 mt-4 rounded relative">
                                            <h2
                                                class="absolute top-0 left-0 bg-gray-100 px-2 py-1 rounded transform -translate-y-1/2 translate-x-4 font-bold text-sm">
                                                Stock
                                            </h2>

                                            <div>
                                                <div class="gap-4 grid grid-cols-1">
                                                    @foreach ($activities as $activity)
                                                        @if ($activity['setup_status'] == 1)
                                                            @if ($activity['name'] == 'Centralized Location' || $activity['name'] == 'Location')
                                                                <div x-data="{
                                                                    selectedLocations: [],
                                                                    dropdownOpen: false,
                                                                    showTrackOptions: {},
                                                                    locations: {
                                                                        @foreach ($locations as $location)
                                        {{ $location->id }}: '{{ $location->name }}', @endforeach
                                                                    }
                                                                }">

                                                                    @if ($activity['name'] == 'Centralized Location')
                                                                        <div class="gap-4"
                                                                            x-show="!specificLocationChecked" x-cloak
                                                                            style="border: .5px solid lightgray; padding: 20px; margin: 10px 0; border-radius: 5px;"
                                                                            x-data="{
                                                                                centralizedChecked: true,
                                                                                locationDetail: { selectedName: '', selectedNames: [], unit: '', quantity: '', openStock: '', alertStock: '' },
                                                                                addSelectedName() {
                                                                                    if (this.locationDetail.selectedName && !this.locationDetail.selectedNames.includes(this.locationDetail.selectedName)) {
                                                                                        this.locationDetail.selectedNames.push(this.locationDetail.selectedName);
                                                                                        this.locationDetail.selectedName = ''; // Clear the selection after adding
                                                                                    }
                                                                                }
                                                                            }">
                                                                            <div class="flex flex-col gap-4">
                                                                                <!-- First Row -->
                                                                                <div class="flex items-center gap-4">
                                                                                    <div class="flex-1">
                                                                                        <label
                                                                                            x-text="specificLocationChecked ? 'Specific Location' : 'Centralized Location'"></label>
                                                                                        <select
                                                                                            class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                            name="centralizedstock[location]">
                                                                                            <option value="">Select
                                                                                                Location</option>
                                                                                            @foreach ($locations as $location)
                                                                                                <option
                                                                                                    value="{{ $location->id }}">
                                                                                                    {{ $location->name }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </div>

                                                                                    <div class="flex-1">
                                                                                        <!-- Label -->
                                                                                        <label for="selected-name"
                                                                                            class="block mb-1 font-medium text-gray-700">Variation
                                                                                            Name</label>

                                                                                        <!-- Dropdown -->
                                                                                        <select id="selected-name"
                                                                                            x-model="locationDetail.selectedName"
                                                                                            @change="addSelectedName"
                                                                                            class="form-select w-full border border-gray-300 text-gray-800 py-2 px-3 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition ease-in-out duration-150">
                                                                                            <option value="" disabled
                                                                                                selected>Select Name
                                                                                            </option>
                                                                                            <template
                                                                                                x-for="(name, nameIndex) in names"
                                                                                                :key="nameIndex">
                                                                                                <option
                                                                                                    :value="name"
                                                                                                    x-text="name">
                                                                                                </option>
                                                                                            </template>
                                                                                        </select>

                                                                                        <!-- Hidden input to send selected names as JSON -->
                                                                                        <input type="hidden"
                                                                                            name="centralizedstock[selected_names]"
                                                                                            :value="JSON.stringify(
                                                                                                locationDetail
                                                                                                .selectedNames)">

                                                                                        <!-- Selected names display -->
                                                                                        <div class="mt-2 ml-1 flex flex-wrap gap-2"
                                                                                            x-show="locationDetail.selectedNames.length > 0">
                                                                                            <template
                                                                                                x-for="(name, index) in locationDetail.selectedNames"
                                                                                                :key="index">
                                                                                                <span
                                                                                                    class="bg-gray-200 text-blue-800 text-sm font-medium px-3 py-1 rounded-full flex items-center shadow-sm">
                                                                                                    <span
                                                                                                        x-text="name"></span>
                                                                                                </span>
                                                                                            </template>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                <!-- Second Row -->
                                                                                <div class="flex items-center gap-4">
                                                                                    <div class="flex-1">
                                                                                        <label>Unit</label>
                                                                                        <select
                                                                                            x-model="locationDetail.unit"
                                                                                            name="centralizedstock[unit]"
                                                                                            class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                            @foreach ($units as $unit)
                                                                                                <option
                                                                                                    value="{{ $unit->id }}">
                                                                                                    {{ $unit->name }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </div>
                                                                                    {{-- <div class="flex-1">
                                                                                        <label>Price</label>
                                                                                        <input type="text"
                                                                                            x-model="locationDetail.price"
                                                                                            name="centralizedstock[price]"
                                                                                            class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                            placeholder="Enter price">
                                                                                    </div> --}}

                                                                                    <div class="flex-1">
                                                                                        <label>Quantity</label>
                                                                                        <input type="text"
                                                                                            x-model="locationDetail.quantity"
                                                                                            name="centralizedstock[quantity]"
                                                                                            class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                            placeholder="Enter quantity">
                                                                                    </div>

                                                                                    <div class="flex-1">
                                                                                        <label>Open Stock</label>
                                                                                        <input type="text"
                                                                                            x-model="locationDetail.openStock"
                                                                                            name="centralizedstock[open_stock]"
                                                                                            class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                            placeholder="Enter open stock">
                                                                                    </div>

                                                                                    <div class="flex-1">
                                                                                        <label>Alert Stock</label>
                                                                                        <input type="text"
                                                                                            x-model="locationDetail.alertStock"
                                                                                            name="centralizedstock[alert_stock]"
                                                                                            class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                            placeholder="Enter alert stock">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="flex items-center gap-4">
                                                                                    <!-- Track Dropdown -->
                                                                                    <div class="flex-1">
                                                                                        <label>Track</label>
                                                                                        <select
                                                                                            x-model="locationDetail.track"
                                                                                            name="centralizedstock[track]"
                                                                                            class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                            <option value="" disabled
                                                                                                selected>Select Track
                                                                                            </option>
                                                                                            {{-- @foreach ($tracks as $track)
                                                                                                <option
                                                                                                    value="{{ $track->track }}">
                                                                                                    {{ $track->track }}
                                                                                                </option>
                                                                                            @endforeach --}}
                                                                                        </select>
                                                                                    </div>

                                                                                    <!-- Position Dropdown -->
                                                                                    <div class="flex-1">
                                                                                        <label>Position</label>
                                                                                        <select
                                                                                            x-model="locationDetail.position"
                                                                                            name="centralizedstock[position]"
                                                                                            class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                            <option value="" disabled
                                                                                                selected>Select Position
                                                                                            </option>
                                                                                            {{-- @foreach ($tracks as $track)
                                                                                                <option
                                                                                                    value="{{ $track->position }}">
                                                                                                    {{ $track->position }}
                                                                                                </option>
                                                                                            @endforeach --}}
                                                                                        </select>
                                                                                    </div>

                                                                                    <!-- Row Dropdown -->
                                                                                    <div class="flex-1">
                                                                                        <label>Row</label>
                                                                                        <select
                                                                                            x-model="locationDetail.row"
                                                                                            name="centralizedstock[row]"
                                                                                            class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                            <option value="" disabled
                                                                                                selected>Select Row</option>
                                                                                            {{-- @foreach ($tracks as $track)
                                                                                                <option
                                                                                                    value="{{ $track->row }}">
                                                                                                    {{ $track->row }}
                                                                                                </option>
                                                                                            @endforeach --}}
                                                                                        </select>
                                                                                    </div>

                                                                                    <!-- Column Dropdown -->
                                                                                    <div class="flex-1">
                                                                                        <label>Column</label>
                                                                                        <select
                                                                                            x-model="locationDetail.column"
                                                                                            name="centralizedstock[column]"
                                                                                            class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                            <option value="" disabled
                                                                                                selected>Select Column
                                                                                            </option>
                                                                                            {{-- @foreach ($tracks as $track)
                                                                                                <option
                                                                                                    value="{{ $track->column }}">
                                                                                                    {{ $track->column }}
                                                                                                </option>
                                                                                            @endforeach --}}
                                                                                        </select>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    @endif


                                                                    @if ($activity['name'] == 'Location')
                                                                        <div class="gap-4"
                                                                            x-show="specificLocationChecked" x-cloak
                                                                            style="border: .5px solid lightgray; padding: 20px; margin: 10px 0; border-radius: 5px;">

                                                                            <div x-data="locationHandler()">
                                                                                <button
                                                                                    style="margin-bottom: 20px; font-size: 16px; font-weight: bold; background-color: #fafafaeb; padding: 2px 10px; border-radius: 5px;"
                                                                                    type="button"
                                                                                    @click="addLocationField()">
                                                                                    Location wise
                                                                                    <span
                                                                                        style="border: 1px solid lightgray; border-radius: 5px; padding: 3px 10px; cursor: pointer;">+</span>
                                                                                </button>

                                                                                <template
                                                                                    x-for="(locationDetail, index) in locationDetails"
                                                                                    :key="index">
                                                                                    <div class="mt-2 p-2">
                                                                                        <div
                                                                                            class="flex flex-wrap items-center gap-4">

                                                                                            <!-- Dropdown for selecting a location -->
                                                                                            <div class="flex-1">
                                                                                                <label
                                                                                                    :for="'location_' + index">Select
                                                                                                    Location</label>
                                                                                                <select
                                                                                                    :id="'location_' + index"
                                                                                                    x-model="locationDetail.selectedLocation"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index +
                                                                                                        '][selectedLocation]'"
                                                                                                    class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                    <option value="">
                                                                                                        -- Select Location
                                                                                                        --</option>
                                                                                                    @foreach ($locations as $location)
                                                                                                        <option
                                                                                                            value="{{ $location->id }}">
                                                                                                            {{ $location->name }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                            </div>

                                                                                            <!-- Variation Name Selection -->
                                                                                            <div x-data="{
                                                                                                selectedName: '',
                                                                                                selectedNames: [],
                                                                                                addSelectedName() {
                                                                                                    if (this.selectedName && !this.selectedNames.includes(this.selectedName)) {
                                                                                                        this.selectedNames.push(this.selectedName);
                                                                                                        this.selectedName = ''; // Clear selection
                                                                                                    }
                                                                                                }
                                                                                            }"
                                                                                                class="flex-1">

                                                                                                <label for="selected-name"
                                                                                                    class="block mb-1 font-medium text-gray-700">Variation
                                                                                                    Name</label>
                                                                                                <select id="selected-name"
                                                                                                    x-model="selectedName"
                                                                                                    @change="addSelectedName"
                                                                                                    class="form-select w-full border border-gray-300 text-gray-800 py-2 px-3 rounded-md">
                                                                                                    <option value=""
                                                                                                        disabled selected>
                                                                                                        Select Name</option>
                                                                                                    <template
                                                                                                        x-for="(name, nameIndex) in names"
                                                                                                        :key="nameIndex">
                                                                                                        <option
                                                                                                            :value="name"
                                                                                                            x-text="name">
                                                                                                        </option>
                                                                                                    </template>
                                                                                                </select>

                                                                                                <div class="mt-2 ml-1 flex flex-wrap gap-2"
                                                                                                    x-show="selectedNames.length > 0">
                                                                                                    <template
                                                                                                        x-for="(name, index) in selectedNames"
                                                                                                        :key="index">
                                                                                                        <span
                                                                                                            class="bg-gray-200 text-blue-800 text-sm font-medium px-3 py-1 rounded-full flex items-center shadow-sm">
                                                                                                            <span
                                                                                                                x-text="name"></span>
                                                                                                        </span>
                                                                                                    </template>
                                                                                                </div>

                                                                                                <input type="hidden"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index +
                                                                                                        '][selected_names]'"
                                                                                                    :value="JSON.stringify(
                                                                                                        selectedNames
                                                                                                    )">
                                                                                            </div>
                                                                                        </div>

                                                                                        <!-- Additional fields for unit, quantity, stock, alert stock, and tracking -->
                                                                                        <div
                                                                                            class="flex flex-wrap items-center gap-4 mt-4 mb-2">
                                                                                            <div class="flex-1">
                                                                                                <label>Unit</label>
                                                                                                <select
                                                                                                    x-model="locationDetail.unit"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index + '][unit]'"
                                                                                                    class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                    @foreach ($units as $unit)
                                                                                                        <option
                                                                                                            value="{{ $unit->id }}">
                                                                                                            {{ $unit->name }}
                                                                                                        </option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                            </div>
                                                                                            {{-- <div class="flex-1">
                                                                                                <label>Price</label>
                                                                                                <input type="text"
                                                                                                    x-model="locationDetail.price"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index + '][price]'"
                                                                                                    class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                                    placeholder="Enter price">
                                                                                            </div> --}}

                                                                                            <div class="flex-1">
                                                                                                <label>Quantity</label>
                                                                                                <input type="text"
                                                                                                    x-model="locationDetail.quantity"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index +
                                                                                                        '][quantity]'"
                                                                                                    class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                                    placeholder="Enter quantity">
                                                                                            </div>

                                                                                            <div class="flex-1">
                                                                                                <label>Open Stock</label>
                                                                                                <input type="text"
                                                                                                    x-model="locationDetail.stock"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index + '][stock]'"
                                                                                                    class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                                    placeholder="Enter stock">
                                                                                            </div>

                                                                                            <div class="flex-1">
                                                                                                <label>Alert Stock</label>
                                                                                                <input type="text"
                                                                                                    x-model="locationDetail.alertStock"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index +
                                                                                                        '][alertStock]'"
                                                                                                    class="form-input w-full text-gray-700 border border-gray-300 p-2 rounded"
                                                                                                    placeholder="Enter alert stock">
                                                                                            </div>


                                                                                        </div>
                                                                                        <div
                                                                                            class="flex flex-wrap items-center gap-4 mt-4 mb-2">
                                                                                            <!-- Track Dropdown -->
                                                                                            <div class="flex-1">
                                                                                                <label>Track</label>
                                                                                                <select
                                                                                                    x-model="locationDetail.track"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index + '][track]'"
                                                                                                    class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                    <option value=""
                                                                                                        disabled selected>
                                                                                                        Select Track
                                                                                                    </option>
                                                                                                    {{-- @foreach ($tracks as $track)
                                                                                                        <option
                                                                                                            value="{{ $track->track }}">
                                                                                                            {{ $track->track }}
                                                                                                        </option>
                                                                                                    @endforeach --}}
                                                                                                </select>
                                                                                            </div>

                                                                                            <!-- Position Dropdown -->
                                                                                            <div class="flex-1">
                                                                                                <label>Position</label>
                                                                                                <select
                                                                                                    x-model="locationDetail.position"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index +
                                                                                                        '][position]'"
                                                                                                    class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                    <option value=""
                                                                                                        disabled selected>
                                                                                                        Select Position
                                                                                                    </option>
                                                                                                    {{-- @foreach ($tracks as $track)
                                                                                                        <option
                                                                                                            value="{{ $track->position }}">
                                                                                                            {{ $track->position }}
                                                                                                        </option>
                                                                                                    @endforeach --}}
                                                                                                </select>
                                                                                            </div>

                                                                                            <!-- Row Dropdown -->
                                                                                            <div class="flex-1">
                                                                                                <label>Row</label>
                                                                                                <select
                                                                                                    x-model="locationDetail.row"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index + '][row]'"
                                                                                                    class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                    <option value=""
                                                                                                        disabled selected>
                                                                                                        Select Row</option>
                                                                                                    {{-- @foreach ($tracks as $track)
                                                                                                        <option
                                                                                                            value="{{ $track->row }}">
                                                                                                            {{ $track->row }}
                                                                                                        </option>
                                                                                                    @endforeach --}}
                                                                                                </select>
                                                                                            </div>

                                                                                            <!-- Column Dropdown -->
                                                                                            <div class="flex-1">
                                                                                                <label>Column</label>
                                                                                                <select
                                                                                                    x-model="locationDetail.column"
                                                                                                    :name="'locationwisestock[' +
                                                                                                    index + '][column]'"
                                                                                                    class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                    <option value=""
                                                                                                        disabled selected>
                                                                                                        Select Column
                                                                                                    </option>
                                                                                                    {{-- @foreach ($tracks as $track)
                                                                                                        <option
                                                                                                            value="{{ $track->column }}">
                                                                                                            {{ $track->column }}
                                                                                                        </option>
                                                                                                    @endforeach --}}
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>

                                                                                    </div>
                                                                                </template>
                                                                            </div>
                                                                        </div>
                                                                    @endif



                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Price Tab Content -->

                                        <div x-show="tab === 'price' && hasPrice"
                                            class="right-top-panel border border-gray-300 p-5 mt-4 rounded relative">
                                            <h2
                                                class="absolute top-0 left-0 bg-gray-100 px-2 py-1 rounded transform -translate-y-1/2 translate-x-4 font-bold text-sm">
                                                Price
                                            </h2>

                                            <div>
                                                <div class="grid grid-cols-1 gap-4"
                                                    style="border: .5px solid lightgray; padding: 20px; margin: 10px 0; border-radius: 5px;">
                                                    @foreach ($activities as $activity)
                                                        @if ($activity['setup_status'] == 1)
                                                            @if ($activity['name'] == 'Price (Location wise)' || $activity['name'] == 'Price (Department wise)')
                                                                <div x-data="{
                                                                    locationPriceDetails: [{
                                                                        selectedLocation: '',
                                                                        unit: '',
                                                                        price: ''
                                                                    }],
                                                                    locationPrice: {
                                                                        @foreach ($locations as $location)
                                                                {{ $location->id }}: '{{ $location->name }}', @endforeach
                                                                    },
                                                                    addLocationPriceField() {
                                                                        this.locationPriceDetails.push({
                                                                            selectedLocation: '',
                                                                            unit: '',
                                                                            price: ''
                                                                        });
                                                                    }
                                                                }">
                                                                    @if ($activity['name'] == 'Price (Location wise)')
                                                                        <div class="gap-4">
                                                                            <button type="button"
                                                                                style="margin-bottom: 20px; font-size: 16px; font-weight: bold; background-color: #fafafaeb; padding: 2px 10px; border-radius: 5px;"
                                                                                @click="addLocationPriceField()">
                                                                                Price Location Wise <span
                                                                                    style="border: 1px solid lightgray; border-radius: 5px; padding: 3px 10px; cursor: pointer;">+</span>
                                                                            </button>

                                                                            <template
                                                                                x-for="(locationDetail, index) in locationPriceDetails"
                                                                                :key="index">
                                                                                <div class="mt-2 p-2">
                                                                                    <div class="grid grid-cols-3 gap-4">
                                                                                        <!-- Location dropdown -->
                                                                                        <div>
                                                                                            <label>Location</label>
                                                                                            <select
                                                                                                :name="'locationPrice[' +
                                                                                                index
                                                                                                    +
                                                                                                    '][location]'"
                                                                                                x-model="locationDetail.selectedLocation"
                                                                                                class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                <option value="">
                                                                                                    --
                                                                                                    Select
                                                                                                    Location --</option>
                                                                                                @foreach ($locations as $location)
                                                                                                    <option
                                                                                                        value="{{ $location->id }}">
                                                                                                        {{ $location->name }}
                                                                                                    </option>
                                                                                                @endforeach
                                                                                            </select>
                                                                                        </div>

                                                                                        <!-- Unit dropdown -->
                                                                                        <div>
                                                                                            <label>Unit</label>
                                                                                            <select
                                                                                                :name="'locationPrice[' +
                                                                                                index
                                                                                                    +
                                                                                                    '][unit]'"
                                                                                                x-model="locationDetail.unit"
                                                                                                class="form-select w-full text-gray-700 border border-gray-300 p-2 rounded">
                                                                                                <option value="">
                                                                                                    Select Unit
                                                                                                </option>
                                                                                                <option value="kg">
                                                                                                    Kg
                                                                                                </option>
                                                                                                <option value="lb">
                                                                                                    Lb
                                                                                                </option>
                                                                                                <option value="pieces">
                                                                                                    Pieces
                                                                                                </option>
                                                                                            </select>
                                                                                        </div>

                                                                                        <!-- Price input -->
                                                                                        <div>
                                                                                            <label>Price</label>
                                                                                            <input type="text"
                                                                                                :name="'locationPrice[' +
                                                                                                index
                                                                                                    +
                                                                                                    '][price]'"
                                                                                                x-model="locationDetail.price"
                                                                                                class="form-input w-full text-white-dark border border-gray-300 p-2 rounded"
                                                                                                placeholder="Enter price">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </template>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>


                                        <!-- Language Tab Content -->

                                        <div x-show="tab === 'languages' && hasLanguages"
                                            class="right-top-panel border border-gray-300 p-5 mt-4 rounded relative">
                                            <h2
                                                class="absolute top-0 left-0 bg-gray-100 px-2 py-1 rounded transform -translate-y-1/2 translate-x-4 font-bold text-sm">
                                                Languages
                                            </h2>
                                            <div>
                                                <div class="grid grid-cols-2 gap-4"
                                                    style="border: .5px solid lightgray; padding: 20px; margin: 10px 0; border-radius: 5px;">
                                                    @foreach ($activities as $activity)
                                                        @if ($activity['setup_status'] == 1 && $activity['name'] == 'Multi Languages')
                                                            @foreach ($languages as $code => $name)
                                                                @if ($code !== 'en')
                                                                    <div>
                                                                        <label
                                                                            for="languages[{{ $code }}]">{{ "Product Name ($name)" }}</label>
                                                                        <input type="text"
                                                                            id="languages_{{ $code }}"
                                                                            name="languages[{{ $code }}]"
                                                                            class="form-input w-full text-white-dark"
                                                                            placeholder="{{ "Enter Product Name in $name" }}">
                                                                    </div>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>


                                        <!-- Promotion Tab Content -->
                                        <div x-show="tab === 'promotion' && hasPromotion"
                                            class="right-top-panel border border-gray-300 p-5 mt-4 rounded relative">
                                            <h2
                                                class="absolute top-0 left-0 bg-gray-100 px-2 py-1 rounded transform -translate-y-1/2 translate-x-4 font-bold text-sm">
                                                Promotion</h2>
                                            <div>
                                                <div class="grid grid-cols-2 gap-4"
                                                    style="border: .5px solid lightgray; padding: 20px; margin: 10px 0; border-radius: 5px;">
                                                    @foreach ($activities as $activity)
                                                        @if ($activity['setup_status'] == 1 && $activity['name'] == 'Has Promotion Item')
                                                            <div>
                                                                @if ($activity['type'] == 'text box')
                                                                    <!-- Render text box -->
                                                                    <div class="flex flex-col">
                                                                        <label
                                                                            for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                        <input type="text"
                                                                            id="activity_{{ $activity['setup_id'] }}"
                                                                            name="activity_{{ $activity['setup_id'] }}"
                                                                            class="form-input w-full text-white-dark">
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

                                        <!-- online Tab Content -->
                                        {{-- <div x-show="tab === 'online' && hasOnline"
                                            class="right-top-panel border border-gray-300 p-5 mt-4 rounded relative">
                                            <h2
                                                class="absolute top-0 left-0 bg-gray-100 px-2 py-1 rounded transform -translate-y-1/2 translate-x-4 font-bold text-sm">
                                                Online</h2>
                                            <div>
                                                <div class="grid grid-cols-2 gap-4"
                                                    style="border: .5px solid lightgray; padding: 20px; margin: 10px 0; border-radius: 5px;">
                                                    @foreach ($activities as $activity)
                                                        @if ($activity['setup_status'] == 1)
                                                            @if ($activity['name'] == 'Has an online website Digital Menu' || $activity['name'] == 'Has an Online Store' || $activity['name'] == 'Has Table Digital Menu')
                                                                <div
                                                                    x-show="!(['Has an online website Digital Menu'].includes('{{ $activity['name'] }}') && showSaleFields && checkedRetailOptions.includes('Sale'))">

                                                                    @if ($activity['type'] == 'text box')
                                                                        <!-- Render text box -->
                                                                        <div class="flex flex-col">
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                            <input type="text"
                                                                                id="activity_{{ $activity['setup_id'] }}"
                                                                                name="activity_{{ $activity['setup_id'] }}"
                                                                                class="form-input w-full text-white-dark">
                                                                        </div>
                                                                    @elseif ($activity['type'] == 'dropdown')
                                                                        <!-- Render dropdown only if 'options' key exists -->
                                                                        <div class="flex flex-col">
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}">
                                                                                {{ $activity['name'] }}
                                                                            </label>
                                                                            <select
                                                                                id="activity_{{ $activity['setup_id'] }}"
                                                                                name="activity_{{ $activity['setup_id'] }}"
                                                                                class="form-select w-full text-white-dark">
                                                                                <option value="" disabled selected>
                                                                                    Select
                                                                                    Option</option>
                                                                                <option value="option1">Yes
                                                                                </option>
                                                                                <option value="option2">No
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    @elseif ($activity['type'] == 'text area')
                                                                        <!-- Render text area -->
                                                                        <label
                                                                            for="activity_{{ $activity['setup_id'] }}">{{ $activity['name'] }}</label>
                                                                        <textarea id="activity_{{ $activity['setup_id'] }}" name="activity_{{ $activity['setup_id'] }}"
                                                                            class="form-textarea w-full text-white-dark"></textarea>
                                                                    @elseif ($activity['type'] == 'checkbox')
                                                                        <!-- Render checkbox -->
                                                                        <div class="flex items-center">
                                                                            <input type="checkbox"
                                                                                id="activity_{{ $activity['setup_id'] }}"
                                                                                name="activity_{{ $activity['setup_id'] }}"
                                                                                value="1"
                                                                                {{ $activity['setup_status'] == 1 ? 'checked' : '' }}
                                                                                class="mr-2 form-checkbox h-5 w-5 text-green-600">
                                                                            <label
                                                                                for="activity_{{ $activity['setup_id'] }}"
                                                                                class="ml-2">{{ $activity['name'] }}</label>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div> --}}

                                        {{-- <div class="variations">
                                                <div x-show="tab === 'attributes'"
                                                    style="margin-top: 30px; border: .5px solid lightgray; padding: 20px; border-radius: 5px; position: relative">
                                                    <div x-data="{
                                                        product_variant: [],
                                                        variations: [],

                                                        variantChange(index) {
                                                            const selectElement = document.getElementById(`variant-select-dd-${index}`);
                                                            const selectedOption = selectElement.options[selectElement.selectedIndex];

                                                            const decimalValue = selectedOption.getAttribute('data-value');
                                                            const hasColor = selectedOption.getAttribute('data-has-color');
                                                            const hasImage = selectedOption.getAttribute('data-has-image');

                                                            this.product_variant[index] = {
                                                                type_id: selectedOption.value,
                                                                decimal_value: decimalValue,
                                                                has_color: hasColor,
                                                                has_image: hasImage,
                                                            };

                                                            // Initialize the first value based on selected type properties
                                                            this.variations[index] = { values: [] };
                                                            this.addValue(index); // Automatically add the first set of fields
                                                        },

                                                        addValue(index) {
                                                            const variant = this.product_variant[index] || {};
                                                            this.variations[index].values.push({
                                                                value: '',
                                                                skuCode: '',
                                                                name: '',
                                                                amount: variant.decimal_value == 1 ? '' : null,
                                                                color: variant.has_color == 1 ? '' : null,
                                                                image: variant.has_image == 1 ? '' : null
                                                            });
                                                        }
                                                    }">
                                                        <button
                                                            style="margin-bottom: 20px; font-size: 16px; font-weight: bold; position: absolute; top: -12px; left: 5px; background-color: #fafafaeb; padding: 2px 10px; border-radius: 5px;"
                                                            type="button"
                                                            @click="variations.push({ values: [] }); addValue(variations.length - 1);">
                                                            Products Variations <span
                                                                style="border: 1px solid lightgray; border-radius: 5px; padding: 3px 10px; cursor: pointer;">+</span>
                                                        </button>

                                                        <div x-show="variations.length > 0">
                                                            <table>
                                                                <tbody>
                                                                    <template x-for="(variation, index) in variations"
                                                                        :key="index">
                                                                        <tr>
                                                                            <td
                                                                                style="display: flex; gap: 10px; align-items: center; padding-right: 0; padding-left: 0; width: 200px;">
                                                                                <label for="variation-type">Type</label>
                                                                                <select class="form-select text-white-dark"
                                                                                    x-bind:name="`product_variant[${index}][type_id]`"
                                                                                    x-bind:id="`variant-select-dd-${index}`"
                                                                                    @change="variantChange(index)">
                                                                                    <option value=" " disabled
                                                                                        selected>
                                                                                        Select Type</option>
                                                                                    @foreach ($productVariation as $variation)
                                                                                        <option
                                                                                            value="{{ $variation->id }}"
                                                                                            data-value="{{ $variation->decimal_value }}"
                                                                                            data-has-color="{{ $variation->has_color }}"
                                                                                            data-has-image="{{ $variation->has_image }}">
                                                                                            {{ $variation->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>

                                                                            <td>
                                                                                <template
                                                                                    x-for="(valueObj, valueIndex) in variation.values"
                                                                                    :key="valueIndex">
                                                                                    <div
                                                                                        style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
                                                                                        <button type="button"
                                                                                            @click="addValue(index)">
                                                                                            <span
                                                                                                style="border: 1px solid lightgray; border-radius: 5px; padding: 5px 10px; cursor: pointer;">+</span>
                                                                                        </button>

                                                                                        <input type="text"
                                                                                            class="form-input"
                                                                                            x-bind:name="`product_variant[${index}][variations][${valueIndex}][sku]`"
                                                                                            x-model="valueObj.skuCode"
                                                                                            placeholder="SKU Code">

                                                                                        <input type="text"
                                                                                            class="form-input"
                                                                                            x-bind:name="`product_variant[${index}][variations][${valueIndex}][name]`"
                                                                                            x-model="valueObj.name"
                                                                                            placeholder="Name">

                                                                                        <input type="number"
                                                                                            class="form-input"
                                                                                            x-bind:name="`product_variant[${index}][variations][${valueIndex}][amount]`"
                                                                                            x-model="valueObj.amount"
                                                                                            placeholder="Value"
                                                                                            x-show="valueObj.amount !== null">

                                                                                        <input type="text"
                                                                                            class="form-input"
                                                                                            x-bind:name="`product_variant[${index}][variations][${valueIndex}][color]`"
                                                                                            x-model="valueObj.color"
                                                                                            placeholder="Color"
                                                                                            x-show="valueObj.color !== null">

                                                                                        <input type="file"
                                                                                            class="form-input"
                                                                                            x-bind:name="`product_variant[${index}][variations][${valueIndex}][image]`"
                                                                                            x-show="valueObj.image !== null">

                                                                                        <button type="button"
                                                                                            @click="variation.values.splice(valueIndex, 1)">
                                                                                            <span
                                                                                                style="border: 1px solid lightgray; border-radius: 5px; padding: 5px 12px; cursor: pointer;">-</span>
                                                                                        </button>
                                                                                    </div>
                                                                                </template>
                                                                            </td>
                                                                        </tr>
                                                                    </template>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> --}}


                                    </form>
                                </div>

                                {{-- <div x-data="productActivitySettings">
                                    <div x-show="tab === 'Setting'" style="margin-top: 20px;">
                                        <div
                                            style="border: .5px solid lightgray; padding: 20px; border-radius: 5px; position: relative">
                                            <h2 class="text-xl font-bold mb-4">Product Activity Settings</h2>
                                            <form action="{{ route('update.activities') }}" method="POST">
                                                @csrf
                                                <table class="min-w-full table-auto border-collapse">
                                                    <thead>
                                                        <tr>
                                                            <th class="px-4 py-2 border">Activity Name</th>
                                                            <th class="px-4 py-2 border">Type</th>
                                                            <th class="px-4 py-2 border">Status</th>
                                                            <th class="px-4 py-2 border">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($activities as $activity)
                                                            <tr>
                                                                <td class="px-4 py-2 border">{{ $activity['name'] }}
                                                                </td>
                                                                <td class="px-4 py-2 border">{{ $activity['type'] }}
                                                                </td>
                                                                <td class="px-4 py-2 border flex items-center">
                                                                    <i class="{{ $activity['setup_status'] == 1 ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500' }}"
                                                                        style="color: {{ $activity['setup_status'] == 1 ? 'green' : 'red' }}; background: none; border: none;"
                                                                        aria-hidden="true"></i>
                                                                    <span
                                                                        class="ml-2">{{ $activity['setup_status'] == 1 ? 'Active' : 'Inactive' }}</span>
                                                                </td>
                                                                <td class="px-4 py-2 border">
                                                                    <button
                                                                        @click.prevent="toggleStatus({{ $activity['setup_id'] }})"
                                                                        class="p-2 rounded-lg transition duration-300 hover:opacity-80 flex items-center">
                                                                        <span class="p-1">
                                                                            <i id="icon-{{ $activity['setup_id'] }}"
                                                                                class="{{ $activity['setup_status'] == 1 ? 'fas fa-toggle-on fa-2x' : 'fas fa-toggle-off fa-2x' }}"
                                                                                style="color: {{ $activity['setup_status'] == 1 ? 'green' : 'red' }}; background: none; border: none;"
                                                                                aria-hidden="true"></i>
                                                                        </span>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                                <div class="flex justify-end mt-4">
                                                    <button @click.prevent="updateActivities()"
                                                        class="btn btn-primary btn-lg">
                                                        Update
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div> --}}



                                <!-- Modal Section -->

                                <!-- Category Modal Section -->
                                <div x-data="{ iconFile: null }" x-show="openCategoryModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                        :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                            @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                style="border-radius:.5rem;border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Category</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="signupForm"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('categeory.store') }}">
                                                        @csrf
                                                        <div style="display: flex; flex-direction: column; gap: 10px;">
                                                            <div>
                                                                <label for="code">Code</label>
                                                                <input id="code" type="text" placeholder="Code"
                                                                    name="code" class="form-input" required />
                                                            </div>
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="Name" type="text"
                                                                    placeholder="Category Name" name="name"
                                                                    class="form-input" required />
                                                            </div>
                                                            <!-- Category Selection -->
                                                            <div>
                                                                <label for="mainCategory">Main
                                                                    Category</label>
                                                                <select class="form-select text-white-dark" name="parent"
                                                                    id="parent">
                                                                    <option value="" selected>Select Parent
                                                                    </option>
                                                                    @foreach ($categeory_list as $pc)
                                                                        <option name="SelectParent" class="pro-type"
                                                                            value="{{ $pc->id }}">
                                                                            {{ $pc->name }}
                                                                        </option>
                                                                    @endforeach
                                                                    <span class="text-danger">
                                                                        @error('SelectParent')
                                                                            {{ $message }}
                                                                        @enderror
                                                                    </span>
                                                                </select>
                                                            </div>
                                                            <!-- Image Preview and Update -->
                                                            <div
                                                                style="display: flex; align-items: center; gap: 10px; object-fit: cover;">
                                                                <img style="width: 50px; height: 50px; margin: 0; border-radius: 5px;"
                                                                    alt="Current Icon" class="w-24 h-24 mb-2">
                                                                <input class="form-input" id="Image" type="file"
                                                                    name="image" accept="image/*"
                                                                    @change="handleIconChange" />
                                                            </div>
                                                            <!-- Error message container -->
                                                            <div id="iconError" class="text-red-500 hidden"
                                                                style="color: red;">
                                                                Please select a valid image for
                                                                the
                                                                icon (image format only).
                                                            </div>
                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked />
                                                                    <span class=" text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openCategoryModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Sub Category Modal Section -->
                                <div x-data="{ iconFile: null }" x-show="openSubCategoryModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                        :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                            @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                style="border-radius:.5rem;border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Sub Category</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="signupForm"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('categeory.store') }}">
                                                        @csrf
                                                        <div style="display: flex; flex-direction: column; gap: 10px;">
                                                            <div>
                                                                <label for="code">Code</label>
                                                                <input id="code" type="text"
                                                                    placeholder="Code" name="code"
                                                                    class="form-input" required />
                                                            </div>
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="Name" type="text"
                                                                    placeholder="Category Name" name="name"
                                                                    class="form-input" required />
                                                            </div>
                                                            <!-- Category Selection -->
                                                            <div>
                                                                <label for="mainCategory">Main
                                                                    Category</label>
                                                                <select class="form-select text-white-dark"
                                                                    name="parent" id="parent" required>
                                                                    <option value="" selected>Select Parent
                                                                    </option>
                                                                    @foreach ($categeory_list as $pc)
                                                                        <option name="SelectParent" class="pro-type"
                                                                            value="{{ $pc->id }}">
                                                                            {{ $pc->name }}
                                                                        </option>
                                                                    @endforeach
                                                                    <span class="text-danger">
                                                                        @error('SelectParent')
                                                                            {{ $message }}
                                                                        @enderror
                                                                    </span>
                                                                </select>
                                                            </div>
                                                            <!-- Image Preview and Update -->
                                                            <div
                                                                style="display: flex; align-items: center; gap: 10px; object-fit: cover;">
                                                                <img style="width: 50px; height: 50px; margin: 0; border-radius: 5px;"
                                                                    alt="Current Icon" class="w-24 h-24 mb-2">
                                                                <input class="form-input" id="Image"
                                                                    type="file" name="image" accept="image/*"
                                                                    @change="handleIconChange" />
                                                            </div>
                                                            <!-- Error message container -->
                                                            <div id="iconError" class="text-red-500 hidden"
                                                                style="color: red;">
                                                                Please select a valid image for
                                                                the
                                                                icon (image format only).
                                                            </div>
                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked />
                                                                    <span class=" text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openSubCategoryModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Brand modal -->
                                <div x-data="{ iconFile: null }" x-show="openBrandModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                        :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                            @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                style="border-radius:.5rem;border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Brand</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="signupForm"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('brand.store') }}">
                                                        @csrf
                                                        <div class="grid grid-cols-1 gap-4 pt-5">
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="name" type="text"
                                                                    placeholder="Brand Name" name="name"
                                                                    class="form-input" required />
                                                            </div>


                                                            <!-- Image Preview and Update -->
                                                            <div
                                                                style="display: flex; align-items: center; gap: 10px; object-fit: cover;">
                                                                <img style="width: 50px; height: 50px; margin: 0; border-radius: 5px;"
                                                                    :src="itemToEdit.icon" alt="Current Icon"
                                                                    class="w-24 h-24 mb-2">
                                                                <input class="form-input" id="Image"
                                                                    type="file" name="image" accept="image/*"
                                                                    @change="handleIconChange" />
                                                            </div>

                                                            <!-- Error message container -->
                                                            <div id="iconError" class="text-red-500 hidden"
                                                                style="color: red;">
                                                                Please select a valid image for the icon (image format
                                                                only).
                                                            </div>
                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked />
                                                                    <span class=" text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class=" flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openBrandModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Unit modal -->
                                <div x-data="unitList">
                                    <div x-show="openUnitModal" class="mb-5">
                                        <!-- modal -->
                                        <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                            :class="open && '!block'">
                                            <div class="flex items-start justify-center min-h-screen px-4"
                                                @click.self="open = false">
                                                <div x-transition x-transition.duration.300
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                    style="border-radius:.5rem;border-width: 0;">
                                                    <div class="heading">
                                                        <h2 class="m-0">Add Unit</h2>
                                                    </div>
                                                    <div class="p-5"
                                                        style="max-height: 70vh; height: auto; overflow: auto;">
                                                        <form enctype="multipart/form-data" id="unit_add_form"
                                                            class="needs-validation" novalidate="" method="POST"
                                                            action="{{ route('unit.store') }}">
                                                            @csrf
                                                            <div
                                                                style="display: flex; flex-direction: column; gap: 10px;">
                                                                <div>
                                                                    <label for="unitcode">Short Code</label>
                                                                    <input id="unitcode" type="text"
                                                                        class="form-input" name="short_code" required />
                                                                </div>
                                                                <div>
                                                                    <label for="unitname">Name</label>
                                                                    <input id="unitname" type="text"
                                                                        class="form-input" name="unitname" required />
                                                                </div>

                                                                <div>
                                                                    <label>
                                                                        <input type="checkbox" name="allow_decimal"
                                                                            x-on:click="showAdditionalFields = !showAdditionalFields">
                                                                        Allow Decimal
                                                                    </label>
                                                                </div>

                                                                <!-- Additional fields -->
                                                                <div x-show="showAdditionalFields">
                                                                    <div class="mt-2">
                                                                        <label for="unitvalue">Value</label>
                                                                        <input id="unitvalue" type="text"
                                                                            class="form-input" name="unitvalue" />
                                                                    </div>

                                                                </div>

                                                                <div style="margin-top: 10px">
                                                                    <label>
                                                                        <input type="checkbox"
                                                                            x-on:click="showAdditionalFieldsUnit = !showAdditionalFieldsUnit">
                                                                        Show Parent Short Unit
                                                                    </label>
                                                                </div>
                                                                <div x-show="showAdditionalFieldsUnit">
                                                                    <label for="parentUnit">Parent Unit </label>
                                                                    <select class="form-select text-white-dark"
                                                                        name="unit_parent_id" id="parentUnit" required>
                                                                        <option value="" selected>Select Parent Unit
                                                                        </option>
                                                                        @foreach ($Parent as $ct)
                                                                            <option name="SelectParent" class="pro-type"
                                                                                value="{{ $ct->id }}">
                                                                                {{ $ct->name }}</option>
                                                                        @endforeach
                                                                        <span class="text-danger">
                                                                            @error('SelectParent')
                                                                                {{ $message }}
                                                                            @enderror
                                                                        </span>
                                                                    </select>
                                                                </div>

                                                                <div x-show="showAdditionalFieldsUnit">
                                                                    <label for="otherUnitShortCode">Add as 1 Short Code of
                                                                        other
                                                                        Unit</label>
                                                                    <input id="otherUnitShortCode" type="text"
                                                                        class="form-input"
                                                                        name="add_shortcode_for_otherunit" />
                                                                </div>

                                                                <div style="margin-bottom: 20px">
                                                                    <label for="status">Status</label>
                                                                    <input id="statusCheckbox" type="checkbox"
                                                                        class="form-checkbox" name="Status"
                                                                        x-model="statusChecked">
                                                                    <span>Active</span>
                                                                </div>

                                                            </div>
                                                            <!-- End of additional fields -->
                                                        </form>
                                                    </div>
                                                    <!-- Fixed Footer -->
                                                    <div class="sticky bottom-0 bg-white py-4"
                                                        style="margin-right: 20px;">
                                                        <div class="flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openUnitModal = false">Discard</button>
                                                            <button type="button"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4"
                                                                @click="addUnit">Create</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                                {{-- <div x-data="{ iconFile: null }" x-show="openMetailModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                        :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                            @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                style="border-radius:.5rem;border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Metail</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="signupForm"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('metail.store') }}">
                                                        @csrf
                                                        <div class="grid grid-cols-1 gap-4 pt-5">
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="name" type="text"
                                                                    placeholder="Metail Name" name="name"
                                                                    class="form-input" required />
                                                            </div>

                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked />
                                                                    <span class=" text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class=" flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openMetailModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div x-data="{ iconFile: null }" x-show="openStampModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                        :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                            @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                style="border-radius:.5rem;border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Stamp</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="signupForm"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('stamp.store') }}">
                                                        @csrf
                                                        <div class="grid grid-cols-1 gap-4 pt-5">
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="name" type="text"
                                                                    placeholder="Stamp Name" name="name"
                                                                    class="form-input" required />
                                                            </div>
                                                            <div>
                                                                <label for="value">Value</label>
                                                                <input id="value" type="text"
                                                                    placeholder="Enter Value" name="value"
                                                                    class="form-input" required />
                                                            </div>

                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked />
                                                                    <span class=" text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class=" flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openStampModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div x-data="{ iconFile: null }" x-show="openStoneModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                        :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                            @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                style="border-radius:.5rem;border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Stone</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="signupForm"
                                                        class="needs-validation" method="POST"
                                                        action="{{ route('stone.store') }}">
                                                        @csrf
                                                        <div class="grid grid-cols-1 gap-4 pt-5">
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="name" type="text"
                                                                    placeholder="Stone Name" name="name"
                                                                    class="form-input" required />
                                                            </div>

                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox"
                                                                        name="status" checked />
                                                                    <span class=" text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class=" flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                @click="openStoneModal = false">Discard</button>
                                                            <button type="submit"
                                                                class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div x-data="{ iconFile: null }" x-show="openWarrantyModal" class="mb-5">
                                    <!-- modal -->
                                    <div class="fixed inset-0 bg-[black]/60 z-[999] hidden overflow-y-auto"
                                         :class="open && '!block'">
                                        <div class="flex items-start justify-center min-h-screen px-4"
                                             @click.self="open = false">
                                            <div x-transition x-transition.duration.300
                                                 class="panel border-0 p-0 rounded-lg overflow-hidden my-8 w-full max-w-lg"
                                                 style="border-radius:.5rem; border-width: 0;">
                                                <div class="heading">
                                                    <h2 class="m-0">Add Warranty</h2>
                                                </div>
                                                <div class="p-5">
                                                    <form enctype="multipart/form-data" id="warrantyForm"
                                                          class="needs-validation" method="POST"
                                                          action="{{ route('warranty.store') }}">
                                                        @csrf
                                                        <div class="grid grid-cols-1 gap-4 pt-5">
                                                            <!-- Name Field -->
                                                            <div>
                                                                <label for="name">Name</label>
                                                                <input id="name" type="text" placeholder="Enter Warranty Name"
                                                                       name="name" class="form-input" required />
                                                            </div>

                                                            <!-- Type Field (Dropdown) -->
                                                            <div>
                                                                <label for="type">Type</label>
                                                                <select id="type" name="type" class="form-input" required>
                                                                    <option value="year">Year</option>
                                                                    <option value="month">Month</option>
                                                                    <option value="day">Day</option>
                                                                </select>
                                                            </div>

                                                            <!-- Value Field -->
                                                            <div>
                                                                <label for="value">Value</label>
                                                                <input id="value" type="text" placeholder="Enter Value"
                                                                       name="value" class="form-input" required />
                                                            </div>

                                                            <!-- Status Checkbox -->
                                                            <div>
                                                                <label class="flex items-center cursor-pointer">
                                                                    <input type="checkbox" class="form-checkbox" name="status" checked />
                                                                    <span class="text-white-dark">Active</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="flex justify-end items-center mt-3">
                                                            <button type="button" class="btn btn-outline-danger"
                                                                    @click="openWarrantyModal = false">Discard</button>
                                                            <button type="submit"
                                                                    class="btn btn-primary ltr:ml-4 rtl:mr-4">Create</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}






                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
    <script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></script>
    </div>
@endsection


@section('javascript')
    {{-- <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.10.0/dist/cdn.min.js" defer></script> --}}
    {{-- <script src="{{ asset('asset/js/product.js') }}"></script> --}}
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('form', () => ({

                selectedOption: '0',
                check: false,
                openStock: false,
                showIsEnable: false,
                showIsOpenStock: false,
                showIsForSales: false,
                showIsPurchased: false,
                showIsForCategory: false,
                errorMessage: '',

                enableChange() {
                    this.showIsEnable = this.check;
                    console.log('enableChange called');
                },

                openChange() {
                    this.showIsOpenStock = this.openStock;
                    console.log('openChange called');
                },

                moveToNextTab() {
                    console.log('moveToNextTab called');
                    const productName = document.getElementById('name').value;
                    const alertQuantity = document.getElementById('alert_quantity').value;

                    if (productName.trim() !== '' && (this.selectedOption === '0' || alertQuantity
                            .trim() !== '')) {
                        this.tab = 'attributes';
                    } else {
                        this.errorMessage = '';
                        this.tab = 'attributes';
                    }

                }

            }));

        });

        // document.addEventListener('DOMContentLoaded', () => {
        //     const fileUpload = document.getElementById('file-upload');
        //     const filePreview = document.getElementById('file-preview');
        //     const additionalImagesPreview = document.getElementById('additional-images-preview');

        //     fileUpload.addEventListener('change', (event) => {
        //         const files = event.target.files;

        //         if (files.length > 4) {
        //             alert("You can only select up to 5 images.");
        //             fileUpload.value = '';
        //             return;
        //         }

        //         additionalImagesPreview.innerHTML = '';
        //         const mainImageFile = files[0];

        //         if (mainImageFile) {
        //             const reader = new FileReader();
        //             reader.onload = (e) => {
        //                 filePreview.src = e.target.result;
        //             };
        //             reader.readAsDataURL(mainImageFile);
        //         }

        //         Array.from(files).slice(1, 4).forEach(file => {
        //             const reader = new FileReader();
        //             reader.onload = (e) => {
        //                 const img = document.createElement('img');
        //                 img.src = e.target.result;
        //                 img.classList.add('w-24', 'h-24', 'object-cover', 'rounded', 'border',
        //                     'border-gray-300');
        //                 additionalImagesPreview.appendChild(img);
        //             };
        //             reader.readAsDataURL(file);
        //         });
        //     });
        // });



        document.addEventListener('alpine:init', () => {
            Alpine.data('productActivitySettings', () => ({
                activities: @json($activities),
                updatedActivities: [],

                toggleStatus(setupId) {
                    const activity = this.activities.find(activity => activity.setup_id === setupId);

                    if (activity) {
                        activity.setup_status = activity.setup_status === 1 ? 0 : 1;

                        if (!this.updatedActivities.includes(setupId)) {
                            this.updatedActivities.push(setupId);
                        }

                        const icon = document.querySelector(`#icon-${setupId}`);
                        if (icon) {
                            icon.className = activity.setup_status === 1 ?
                                'fas fa-toggle-on fa-2x text-green-500' :
                                'fas fa-toggle-off fa-2x text-red-500';

                            icon.setAttribute('style', activity.setup_status === 1 ?
                                'color: green; background: none; border: none;' :
                                'color: red; background: none; border: none;'
                            );
                        }
                    } else {
                        console.error('Activity not found for ID:', setupId);
                    }
                },

                async updateActivities() {
                    const data = this.updatedActivities.map(id => {
                        const activity = this.activities.find(a => a.setup_id === id);
                        return {
                            id: activity.setup_id,
                            is_enable: activity.setup_status
                        };
                    });

                    console.log('Data to be sent to the server:', data);

                    try {
                        const response = await fetch("{{ route('update.activities') }}", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector(
                                    'meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify(data)
                        });

                        const result = await response.json();

                        if (response.ok) {
                            console.log(result.message);
                            this
                                .updatedActivities = [];
                            location.reload();
                        } else {
                            console.error('Failed to update activities:', result
                                .error);
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    }
                }
            }));
        });


        function handleFileSelect(event) {
            const files = Array.from(event.target.files);
            const additionalImagesPreview = document.getElementById('additional-images-preview');

            additionalImagesPreview.innerHTML = '';

            const uniqueFiles = new Set(files);

            uniqueFiles.forEach((file) => {
                const additionalImageReader = new FileReader();
                additionalImageReader.onload = function(e) {
                    const imgElement = document.createElement('img');
                    imgElement.src = e.target.result;
                    imgElement.className =
                        "w-12 h-12 object-cover border border-gray-300 rounded";
                    additionalImagesPreview.appendChild(imgElement);
                };
                additionalImageReader.readAsDataURL(file);
            });

            // event.target.value = '';
        }

        function locationHandler() {
            return {
                locationDetails: [{
                    selectedLocation: '',
                    stock: '',
                    alertStock: '',
                    unit: '',
                    quantity: '',
                    track: ''
                }],

                addLocationField() {
                    this.locationDetails.push({
                        selectedLocation: '',
                        stock: '',
                        alertStock: '',
                        unit: '',
                        quantity: '',
                        track: ''
                    });
                }
            };
        }

        function locationPriceHandler() {
            return {
                locationPriceDetails: [{
                    selectedLocation: '',
                    unit: '',
                    price: '',
                }, ],
                addLocationPriceField() {
                    this.locationPriceDetails.push({
                        selectedLocation: '',
                        unit: '',
                        price: '',
                    });
                },
            };
        }


        function variantChange(index) {
            const selectElement = document.getElementById(`variant-select-dd-${index}`);
            const selectedOption = selectElement.options[selectElement.selectedIndex];

            const hasColor = selectedOption.getAttribute('data-has-color');
            const hasImage = selectedOption.getAttribute('data-has-image');

            // Now you can update your input fields or logic based on has_color and has_image values
            if (hasColor === "1") {
                // Add logic for color input field
            }

            if (hasImage === "1") {
                // Add logic for image upload input field
            }

            // You can also assign the selected data to your Alpine.js data structure
            product_variant[index] = {
                type_id: selectedOption.value,
                has_color: hasColor,
                has_image: hasImage
            };
        }




        document.addEventListener('alpine:init', () => {
            Alpine.data('unitList', () => ({
                selectedRows: [],
                items: ,
                searchText: '',
                openModal: false,
                editModal: false,
                viewModal: false,
                viewItem: {},
                itemToEdit: {},

                statusChecked: false,
                showAdditionalFields: false,
                showAdditionalFieldsUnit: false,
                addUnit() {
                    if (document.getElementById("unitcode").value === "") {
                        this.generateCode();
                    }

                    const code = document.getElementById('unitcode').value;
                    const name = document.getElementById('unitname').value;
                    const otherUnitShortCode = document.getElementById('otherUnitShortCode').value;
                    const value = document.getElementById('unitvalue').value;
                    const parentUnit = document.getElementById('parentUnit');
                    // const parentUnitElement = parentUnitElement.options[parentUnitElement.selectedIndex].text;
                    const status = this.statusChecked ? 'Active' : 'Not-Active';

                    // console.log(code, name, otherUnitShortCode, value, parentUnit);

                    if (!code || !name) {
                        console.error('Please fill in all required fields.');
                        return;
                    }

                    const newCategory = {
                        id: this.items.length + 1,
                        code: code,
                        name: name,
                        parentUnit: parentUnit,
                        status: status,
                        action: 1,
                    };

                    console.log(newCategory);
                    if (otherUnitShortCode) {
                        newCategory.otherUnitShortCode = otherUnitShortCode;
                    }

                    if (value) {
                        newCategory.value = value;
                    }
                    // this.items.push(newCategory);
                    $('form#unit_add_form').submit();
                    location.reload();

                    // Close the modal after adding the category
                    this.openModal = false;

                    // Reset the form inputs
                    document.getElementById('unitcode').value = '';
                    document.getElementById('unitname').value = '';
                    document.getElementById('otherUnitShortCode').value = '';
                    document.getElementById('unitvalue').value = '';
                    // parentUnitElement.selectedIndex = 0; // Reset the parent unit selection
                    this.statusChecked = false; // Reset the checkbox value
                },

                generateCode() {
                    const length = 4;
                    const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWYXZ';
                    let code = '';

                    for (let i = 0; i < length; i++) {
                        const randomIndex = Math.floor(Math.random() * characters.length);
                        code += characters.charAt(randomIndex);
                    }

                    // return code;

                    document.getElementById('unitcode').value = code;
                },


                checkAllCheckbox() {
                    if (this.items.length && this.selectedRows.length === this.items.length) {
                        return true;
                    } else {
                        return false;
                    }
                },

                checkAll(isChecked) {
                    if (isChecked) {
                        this.selectedRows = this.items.map((d) => {
                            return d.id;
                        });
                    } else {
                        this.selectedRows = [];
                    }
                },


            }));
        })


        function locationSelect() {
            return {
                searchQuery: '',
                selectedLocations: [],
                dropdownOpen: false,
                allLocations: @json($locations),

                init() {
                    this.filteredLocations = this.allLocations;
                    this.updateSelectedLocations();
                },

                addLocation(location) {
                    if (!this.selectedLocations.some(selected => selected.id === location.id)) {
                        this.selectedLocations.push(location);
                    }
                    this.dropdownOpen = false;
                    this.searchQuery = '';
                },

                removeLocation(locationIndex) {
                    this.selectedLocations.splice(locationIndex, 1);
                },

                get filteredLocations() {
                    if (this.searchQuery === '') {
                        return this.allLocations;
                    }
                    return this.allLocations.filter(location =>
                        location.name.toLowerCase().includes(this.searchQuery.toLowerCase())
                    );
                },

                updateSelectedLocations() {
                    if (!this.specificLocationChecked) {
                        this.selectedLocations = [...this.allLocations];
                    } else {
                        this.selectedLocations = [];
                    }
                }
            };
        }

        function productForm() {
            return {
                skuCode: '',
                generateSkuCode() {
                    const randomCode = '' + Math.random().toString(36).substr(2, 8).toUpperCase();
                    this.skuCode = randomCode;
                },
            };
        }

        document.getElementById('new_category_id').addEventListener('change', function() {
            const selectedCategoryId = this.value;
            const subCategorySelect = document.getElementById('new_sub_category_id');

            subCategorySelect.innerHTML = '<option value="" disabled selected>Select Sub Category</option>';


            fetch(`/rest/product/subcategories/${selectedCategoryId}`)
                .then(response => response.json())
                .then(data => {
                    // console.log("Subcategories fetched:", data);
                    data.forEach(subCategory => {
                        const option = document.createElement('option');
                        option.value = subCategory.id;
                        option.textContent = subCategory.name;
                        subCategorySelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error fetching subcategories:', error));
        });
    </script>
@endsection