@extends('backend.layouts.app')
@section('content')

    <style>
        #breadcrumps_tree {
            width: auto;
            white-space: nowrap;
            /* Prevent line breaks */
            overflow-x: auto;
            /* Enable horizontal scrolling */
            padding: 10px 0;
            /* Optional padding */
        }
        .error_class_category {
    text-transform: capitalize;
}
        .breadcrumbsStyle {
            display: inline-block;
            font-family: Arial, sans-serif;
            /* Optional: change font style */
            font-size: 14px;
            /* Optional: change font size */
        }

        ul.category-list {
            display: flex;
            padding-left: 0px !important;
            gap: 5px;
            margin: 5px 0px;
            align-items: center;
        }

        .box {
            margin-bottom: 20px;
            min-height: 74.19px;
            max-height: 220px;
            overflow: auto;
            box-shadow: 0px 2px 2px 2px #9FA2BF52;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 10px;
        }

        .cat_assbtn {

            padding: 5px 8px;
        }

        #set_head {
            margin: 0px;
            font-size: 16px;
            padding-top: 5px;
            text-transform: capitalize;
            font-weight: 600;
            color: #231f20;
        }

        #add_attr {

            display: none;
        }

        .att_move {
            background: #e43139;
            color: white;
            padding: 8px 12px;
            border-radius: 5px;
        }

        .att_move:hover {
            color: white;
        }

        .draggable {
            /* margin-bottom: 20px; */
            padding: 15px;
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            cursor: move;
            border-radius: 6px;
        }

        .delete-btn {
            color: #ff0000;
            cursor: pointer;
        }

        .pagination_count {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pagination_count ul {
            margin: 0;
            padding: 0
        }

        .even {
            /* background-color: #dcdcdc; */
            /* Grey background for even rows */
        }

        .form-check-input {
            display: none;
        }

        .form-check {
            padding-left: 0px !important
        }

        .form-check-label {
            position: relative;
            padding-left: 20px;
            cursor: pointer;
        }

        .form-check-label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 13px;
            height: 13px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background-color: white;
            transition: border-color 0.3s;
        }

        .form-check-input:checked+.form-check-label::after {
            content: '';
            position: absolute;
            left: 2px;
            top: 50%;
            transform: translate(0.4px, -4.0px);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #d7282f;
        }

        .form-check-input:checked+.form-check-label::before {
            border-color: #d7282f;
        }

        .form-check-input:checked+.form-check-label {
            color: #000;
        }


        #breadcrumps {
            justify-content: space-between;
            color: #e43139;
            font-weight: 500;
            line-height: 8px;
            word-spacing: 3px;
            align-item: center;
            background: #eeee;
            padding: 2px 5px;
        }

        #breadcrumps button {
            display: none;
            margin: 0 8px 0 0;
            background: #0abb75;
            color: #fff;
        }


        div#breadcrumps ul {
            list-style: none;
        }

        div#breadcrumps ul li {
            display: inline;
            padding: 3px 12px;
            border-radius: 20px;
            background: #fff;
            color: #e43139;
        }

        div#breadcrumps ul {
            padding: 16px 4px;
        }

        form#myform {
            display: none;
        }

        .icon-delete:before {
            font-size: 16px
        }
    </style>

    <div class="aiz-titlebar text-left mt-2 mb-3 ">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('Select Category') }}</h1>
            </div>
        </div>
    </div>
    <div class="page-content bg-white" id="NewTabs">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="list-group-item ProductCategorySelector border-0 p-0">
                    <div class="list-group-item-inn">
                        <div class="CategoryListBox mt-3">
                            <div class="position-relative" style="min-height: 300px;">
                                <div class="parent-absolute error-text">
                                    <div class="parentCategory">
                                        <div class="addCate-input sector_input">
                                            <input data-parent="0" id="sector_name" type="text" class="cate-input"
                                                placeholder="Search or Create Sectors">

                                            <div data-parent="0" class="addCateIcon submitnewcat" style="display:none">
                                                <i class="icons icon-plus"></i>
                                            </div>
                                        </div>
                                        <span id="sector_message" class="" style="font-size:80%;"></span>

                                        <ul tabindex="0" class="CategoryList c-scrollbar mainCategory w-100"
                                            name="category" id="tabindex0">
                                            @foreach ($approvedList as $cate)
                                                <li data-id="{{ $cate->id }}"
                                                    class="{{ $cate->sector_status == '0' ? 'disableSec' : '' }} attrhover"
                                                    style="position: relative; cursor: pointer; border-radius: 7px;">
                                                    @if (!empty($cate->iconImg))
                                                        <span id="{{ $cate->id }}" class="cateProdpic">
                                                            <img class="img-fluid" src="{{ $cate->iconImg->source }}">
                                                        </span>
                                                        <span id="{{ $cate->id }}"
                                                            class="prodCateName">{{ $cate->name }}</span>
                                                    @else
                                                        <span class="cateProdpic">
                                                            <img class="img-fluid" src="{{ url($cate->icon) }}">
                                                        </span>
                                                        <span id="{{ $cate->id }}" class="prodCateName"
                                                            style="display: flex; justify-content: space-between; padding-left: 0px;">
                                                            {{ $cate->name }}
                                                        </span>
                                                    @endif
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <span class="error_class_category text-danger errortextstyle"
                                        style="margin-top: 1px;display:none;" id="errorcategory"></span>
                                </div>
                                <div class="offset-subcate c-scrollbar " style="padding-bottom:0px;">
                                    <div class="subCateCol NormalSelectorWrapper">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row category_breadcrum categoryStyle my-3 mx-0" style="display: none;align-items:center;">
                    <div class="col-sm-12 col-md-3 col-lg-2 px-0">
                        <p class="m-0 attributeListHeading">Selected Category:</p>
                    </div>
                    <div class="col-sm-12 col-md-9 col-lg-10 pl-0">
                        <div style="background: #edebeb;border-radius:6px;width:100%" class="p-2">
                            <div id="breadcrumps" style="align-items: center">
                                <div id="breadcrumps_tree" class="breadcrumbsStyle c-scrollbar" style="width: 92%"></div>
                                <a href="javascript:; " style="display:none " class="att_move"
                                    id="{{ request('set_id') }}"> Add</a>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="align-items-center mr-2 my-3 category_breadcrum categoryStyle" style="display: none;">
                    <div class="" style="width: 12%">
                        <p class="m-0 attributeListHeading" style="white-space: nowrap">Selected Category:</p>
                    </div>
                    <div style="background: #edebeb;border-radius:6px;width:100%" class="p-2 ml-2">
                        <div id="breadcrumps">
                            <div id="breadcrumps_tree" class="breadcrumbsStyle">dfdfdfdf</div>
                            <a href="javascript:; " style="display:none " class="att_move" id="{{ request('set_id') }}"> Add</a>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
    <div id="edit_createattr">
        {{-- EDIT ATTRIBUTE --}}
        <div class="row mb-5">
            @if (!empty($attribute->id))
                <div class="col-sm-12 col-md-7" id="edit-attribute-section">
                    <div class="attributeList align-items-stretch h-100 d-flex flex-column">
                        <div class="attributeListBox">
                            <p class="attributeListHeading">
                                Edit Attribute
                            </p>


                        </div>

                        <form id="updateform" class="{{ $attribute->id }}" enctype="multipart/form-data">
                            <div class="contentBox justify-content-start p-5 w-100">
                                <div class="w-100">
                                    <div class="row align-items-center">
                                        <div class="col-sm-12 col-md-3">
                                            <p class="attributeFormHeading">Type of Attribute</p>

                                        </div>
                                        <div class="col-sm-12 col-md-8 error-text">
                                            <div class="form-group mb-0">
                                                <select class="form-control form-control-sm type_fields" name="type"
                                                    id="exampleFormControlSelect1">
                                                    <option value="">Type</option>
                                                    <option id="text" value="Text Field"
                                                        {{ isset($attribute) && $attribute->type === 'Text Field' ? 'selected' : '' }}>
                                                        Text Field</option>
                                                    <option id="dropdown"value="dropdown"
                                                        {{ isset($attribute) && $attribute->type === 'dropdown' ? 'selected' : '' }}>
                                                        Dropdown</option>
                                                    <option id="manufactureDate" value="Date and Time"
                                                        {{ isset($attribute) && $attribute->type === 'Date and Time' ? 'selected' : '' }}>
                                                        Date and Time</option>
                                                    <option id="yes-no-fields"value="Yes/No"
                                                        {{ isset($attribute) && $attribute->type === 'Yes/No' ? 'selected' : '' }}>
                                                        Yes/No</option>
                                                    <option id="multiselection" value="Multi-selection"
                                                        {{ isset($attribute) && $attribute->type === 'Multi-selection' ? 'selected' : '' }}>
                                                        Multi-selection</option>
                                                    <option id="radio_field" value="Radio Button"
                                                        {{ isset($attribute) && $attribute->type === 'Radio Button' ? 'selected' : '' }}>
                                                        Radio Button</option>
                                                </select>

                                                <span class="error_class_category text-danger errortextstyle"
                                                    style="margin-top: 1px;display:none;" id="errortype_edit"></span>
                                            </div>
                                        </div>

                                         {{-- if Textfield selected --}}
                                         <div class="col-12 validation_field" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Validation</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="form-group mb-0">
                                                        <select class="form-control form-control-sm" name="validations"
                                                            id="validations">
                                                            <option value="Alphabet"
                                                                {{ isset($attribute) && $attribute->validations === 'Alphabet' ? 'selected' : '' }}>
                                                                Alphabet</option>
                                                            <option value="Integer"
                                                                {{ isset($attribute) && $attribute->validations === 'Integer' ? 'selected' : '' }}>
                                                                Integer</option>
                                                            <option value="String"
                                                                {{ isset($attribute) && $attribute->validations === 'String' ? 'selected' : '' }}>
                                                                String</option>
                                                            <option value="Decimal"
                                                                {{ isset($attribute) && $attribute->validations === 'Decimal' ? 'selected' : '' }}>
                                                                Decimal</option>
                                                            <option value="Numeric"
                                                                {{ isset($attribute) && $attribute->validations === 'Range' ? 'selected' : '' }}>
                                                                Range</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- YES/ NO Case !--->
                                        <div class="col-12 yes-no-fields" style="display: none;">
                                            <div class="row">
                                                @if (!empty($attribute->options) && is_array($attribute->options))
                                                    @foreach (array_slice($attribute->options, 0, 2) as $index => $option)
                                                        <div class="col-sm-12 col-md-3 mt-3">
                                                            <p class="attributeFormHeading">Option {{ $index + 1 }}</p>
                                                        </div>
                                                        <div class="col-sm-12 col-md-8 mt-3">
                                                            <input type="text" class="form-control form-control-sm"
                                                                name="date_options[]" placeholder="Options"
                                                                value="{{ $option }}">
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <p>No options available</p>
                                                @endif
                                            </div>

                                        </div>

                                        {{-- Date selected --}}
                                        <div class="col-12 manufactureDate" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Date Validations</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="form-group mb-0">
                                                        <select class="form-control form-control-sm"
                                                            name="date_validation" id="date_validation">
                                                            <option value="No Validation "
                                                                {{ isset($attribute) && $attribute->date_validation === 'No Validation ' ? 'selected' : '' }}>
                                                                No Validation </option>
                                                            <option value="Past Date"
                                                                {{ isset($attribute) && $attribute->date_validation === 'Past Date' ? 'selected' : '' }}>
                                                                Past Date</option>
                                                            <option value="Future Date"
                                                                {{ isset($attribute) && $attribute->date_validation === 'Future Date' ? 'selected' : '' }}>
                                                                Future Date</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Multiselection selected --}}
                                        <div class="col-12 multiselection" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-11 mt-3">
                                                    <div>
                                                        <div class="box" id="sortable-box">
                                                            @if (!empty($attribute->options) && is_array($attribute->options))
                                                                @foreach ($attribute->options as $index => $option)
                                                                    <div
                                                                        class="row draggable align-items-center mx-0 option-row ui-sortable-handle">
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <label for="input{{ $index + 1 }}"
                                                                                style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                                Option 
                                                                            </label>
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-8">
                                                                            <input type="text" class="form-control"
                                                                                id="multi_option_{{ $index + 1 }}"
                                                                                placeholder="Enter text here"
                                                                                name="multi_option[]"
                                                                                value="{{ $option }}">
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-1 text-right">
                                                                            <span class="delete-btn"
                                                                                style="cursor: pointer;"> <i
                                                                                    class="icons icon-delete"></i></span>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                      <div class="row draggable align-items-center mx-0 option-row ui-sortable-handle">
                                                                    <div class="col-sm-12 col-md-3">
                                                                        <label for="input1"
                                                                            style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                            Option 
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-8">
                                                                        <input type="text" class="form-control"
                                                                            id="multi_option_1"
                                                                            placeholder="Enter text here"
                                                                            name="multi_option[]">
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-1 text-right">
                                                                        <span class="delete-btn" style="cursor: pointer;">
                                                                            <i class="icons icon-delete"></i></span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="row draggable align-items-center mx-0 option-row ui-sortable-handle">
                                                                    <div class="col-sm-12 col-md-3">
                                                                        <label for="input1"
                                                                            style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                            Option 
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-8">
                                                                        <input type="text" class="form-control"
                                                                            id="multi_option_1"
                                                                            placeholder="Enter text here"
                                                                            name="multi_option[]">
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-1 text-right">
                                                                        <span class="delete-btn" style="cursor: pointer;">
                                                                            <i class="icons icon-delete"></i></span>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <div style="margin:-13px 0px 8px;"><span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;" id="errormulti_edit"></span></div>

                                                        <button type="button" id="multi-field1"
                                                            class="btn btn-primary">Add TextField</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Dropdown selected --}}
                                        <div class="col-12 dropdown" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-11 mt-3">
                                                    <div>
                                                        <div class="box" id="sortable-dropdownbox" style=>
                                                            @if (!empty($attribute->options) && is_array($attribute->options))
                                                                @foreach ($attribute->options as $index => $option)
                                                                    <div
                                                                        class="row draggable align-items-center mx-0 dropdownoption-row">
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <label for="input{{ $index + 1 }}"
                                                                                style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                                Option 
                                                                            </label>
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-8">
                                                                            <input type="text" class="form-control"
                                                                                id="dropdown{{ $index + 1 }}"
                                                                                placeholder="Enter text here"
                                                                                name="dropdown[]"
                                                                                value="{{ $option }}">
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-1 text-right">
                                                                            <span class="delete-btn"
                                                                                style="cursor: pointer;"> <i
                                                                                    class="icons icon-delete"></i></span>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <div
                                                                    class="row draggable align-items-center mx-0 dropdownoption-row">
                                                                    <div class="col-sm-12 col-md-3">
                                                                        <label for="input1"
                                                                            style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                            Option
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-8">
                                                                        <input type="text" class="form-control"
                                                                            id="dropdown_1" placeholder="Enter text here"
                                                                            name="dropdown[]">
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-1 text-right">
                                                                        <span class="delete-btn" style="cursor: pointer;">
                                                                            <i class="icons icon-delete"></i></span>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <div style="margin:-13px 0px 8px;"><span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;" id="errordropdown_edit"></span></div>
                                                        <button type="button" id="dropdown-field1"
                                                            class="btn btn-primary">Add TextField</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Radio button selected --}}
                                        <div class="col-12 radio_field" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-11 mt-3">
                                                    <div>
                                                        <div class="box" id="sortable-box">
                                                            @if (!empty($attribute->options) && is_array($attribute->options))
                                                                @foreach ($attribute->options as $index => $option)
                                                                    <div
                                                                        class="row draggable align-items-center mx-0 radioOption-row">
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <label for="input{{ $index + 1 }}"
                                                                                style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                                Option 
                                                                            </label>
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-8">
                                                                            <input type="text" class="form-control"
                                                                                id="radio_field{{ $index + 1 }}"
                                                                                placeholder="Enter text here"
                                                                                name="radio_option[]"
                                                                                value="{{ $option }}">
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-1 text-right">
                                                                            <span class="delete-btn"
                                                                                style="cursor: pointer;"> <i
                                                                                    class="icons icon-delete"></i></span>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <div
                                                                    class="row draggable align-items-center mx-0 radioOption-row">
                                                                    <div class="col-sm-12 col-md-3">
                                                                        <label for="input1"
                                                                            style="font-size: 14px; font-weight: 600; margin: 0px">
                                                                            Option
                                                                        </label>
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-8">
                                                                        <input type="text" class="form-control"
                                                                            id="radio_field_1"
                                                                            placeholder="Enter text here"
                                                                            name="radio_option[]">
                                                                    </div>
                                                                    <div class="col-sm-12 col-md-1 text-right">
                                                                        <span class="delete-btn" style="cursor: pointer;">
                                                                            <i class="icons icon-delete"></i></span>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        <div style="margin:-13px 0px 8px;"><span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;" id="errorradio_edit"></span></div>

                                                        <button type="button" id="radio-field1"
                                                            class="btn btn-primary">Add TextField</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12 col-md-3 mt-3">
                                            <p class="attributeFormHeading">Tittle *</p>
                                        </div>
                                        <div class="col-sm-12 col-md-8 mt-3 error-text">
                                            <input type="text" class="form-control form-control-sm" name="title"
                                                placeholder="Name" value= "{{ $attribute->title }}">
                                            <span class="error_class_category text-danger errortextstyle"
                                                style="margin-top: 1px;display:none;" id="errortitle_edit"></span>
                                        </div>
                                        <input type="hidden" id="category_ids" name="category_ids"
                                            class="form-control form-control-sm" value="{{ $attribute->category_id }}">

                                        <div class="col-sm-12 col-md-3 mt-3">
                                            <p class="attributeFormHeading">Add Default Unit <span
                                                    class="atrspantext">(Optional)</span></p>
                                        </div>
                                        <div class="col-sm-12 col-md-8 mt-3">
                                            <div class="form-group mb-0">
                                                <select class="form-control form-control-sm" id="unitSelect"
                                                    name="unit_id">
                                                    <option value="">Select Unit</option>
                                                    @foreach ($unitList as $unit)
                                                        <option value="{{ $unit->id }}"
                                                            {{ isset($attribute) && $attribute->unit_id === $unit->id ? 'selected' : '' }}>
                                                            {{ $unit->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                       

                                        <div class="col-12 toggle-fields">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Mandatory Field</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check">

                                                            <input class="form-check-input" type="radio"
                                                                name="mandatory_field" id="exampleRadios1" value="yes"
                                                                @if ($attribute->mandatory_field === 'yes') checked @endif>
                                                            <label class="form-check-label" for="exampleRadios1">
                                                                Yes
                                                            </label>
                                                        </div>

                                                        <div class="form-check ml-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="mandatory_field" id="exampleRadios2" value="no"
                                                                @if ($attribute->mandatory_field === 'no') checked @endif>
                                                            <label class="form-check-label" for="exampleRadios2">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Use In Search</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_search" id="exampleRadios3" value="yes"
                                                                checked @if ($attribute->use_in_search === 'yes') checked @endif>
                                                            <label class="form-check-label" for="exampleRadios3">
                                                                Yes
                                                            </label>
                                                        </div>
                                                        <div class="form-check ml-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_search" id="exampleRadios4" value="no"
                                                                @if ($attribute->use_in_search === 'no') checked @endif>
                                                            <label class="form-check-label" for="exampleRadios4">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Use In Filter</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_filter" id="exampleRadios5" value="yes"
                                                                @if ($attribute->use_in_filter === 'yes') checked @endif>
                                                            <label class="form-check-label" for="exampleRadios5">
                                                                Yes
                                                            </label>
                                                        </div>
                                                        <div class="form-check ml-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_filter" id="exampleRadios6" value="no"
                                                                @if ($attribute->use_in_filter === 'no') checked @endif>
                                                            <label class="form-check-label" for="exampleRadios6">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-8 mt-3 offset-3">
                                            <div>
                                                <button type="reset" style="padding: .4rem 1.2rem;"
                                                    class="btn btn-outline-secondary"id="cancel_edit"> Cancel </button>
                                                <button type="submit" id="updateAttribute" class="saveattribute"> Update
                                                    Attribute </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            @else
                <div class="col-sm-12 col-md-7" id="add-attribute-section">
                    <div class="attributeList align-items-stretch h-100 d-flex flex-column">
                        <div class="attributeListBox">
                            <p class="attributeListHeading">
                                Add New Attribute
                            </p>
                        </div>
                        <form method="POST" id="myform" enctype="multipart/form-data">
                            <input type="hidden" name="id" id="hidden_inp" value="">
                            <div class="contentBox justify-content-start p-5 w-100">
                                <div class="w-100">
                                    <div class="row align-items-center">
                                        <div class="col-sm-12 col-md-3">
                                            <p class="attributeFormHeading">Type of Attribute</p>
                                        </div>
                                        <div class="col-sm-12 col-md-8 error-text">
                                            <div class="form-group mb-0">
                                                <select class="form-control form-control-sm type_fields" name="type"
                                                    id="exampleFormControlSelect1">
                                                    <option value="">Type</option>
                                                    <option value="Text Field">Text Field</option>
                                                    <option value="dropdown">Dropdown</option>
                                                    <option value="Date and Time">Date and Time</option>
                                                    <option value="Yes/No">Yes/No</option>
                                                    <option value="Multi-selection">Multi-selection</option>
                                                    <option value="Radio Button">Radio Button</option>
                                                </select>
                                                <span class="error_class_category text-danger errortextstyle"
                                                    style="margin-top: 1px;display:none;" id="errortype"></span>
                                            </div>
                                        </div>

                                        {{-- if Textfield selected --}}
                                        <div class="col-12 validation_field" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Validation</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="form-group mb-0">
                                                        <select class="form-control form-control-sm" name="validations"
                                                            id="validations">
                                                            <option>Alphabet</option>
                                                            <option>Integer</option>
                                                            <option>String</option>
                                                            <option>Decimal</option>
                                                            <option>Range</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- YES/ NO Case !--->
                                        <div class="col-12 yes-no-fields" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Option </p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="date_options[]" placeholder="Options">
                                                </div>

                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Option </p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="date_options[]" placeholder="Options">
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Date selected --}}
                                        <div class="col-12 manufactureDate" style="display: none;">
                                            <div class="row">
                                                {{-- <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Manufacturing Date </p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <input type="text" class="form-control form-control-sm" name="manufacturing_date" placeholder="Manufacturing Date">
                                                </div>  --}}

                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Date Validations</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="form-group mb-0">
                                                        <select class="form-control form-control-sm"
                                                            name="date_validation" id="date_validation">

                                                            <option>No Validation </option>
                                                            <option>Past Date</option>
                                                            <option>Future Date</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Multiselection selected --}}
                                        <div class="col-12 multiselection" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-11 mt-3">
                                                    <div>
                                                        <div class="box" id="sortable-box">
                                                            <div class="row draggable align-items-center mx-0">
                                                                <div class="col-sm-12 col-md-3">
                                                                    <label for="input1"
                                                                        style="font-size: 14px;font-weight:600;margin:0px">
                                                                        Option
                                                                    </label>
                                                                </div>
                                                                <div class="col-sm-12 col-md-8">
                                                                    <input type="text" class="form-control"
                                                                        id="multi_option" placeholder="Enter text here"
                                                                        name="multi_option[]">
                                                                </div>
                                                                <div class="col-sm-12 col-md-1 text-right">
                                                                    <span class="delete-btn"> <i
                                                                            class="icons icon-delete"></i></span>
                                                                </div>
                                                            </div>
                                                            <div class="row draggable align-items-center mx-0">
                                                                <div class="col-sm-12 col-md-3">
                                                                    <label for="input1"
                                                                        style="font-size: 14px;font-weight:600;margin:0px">
                                                                        Option
                                                                    </label>
                                                                </div>
                                                                <div class="col-sm-12 col-md-8">
                                                                    <input type="text" class="form-control"
                                                                        id="multi_option" placeholder="Enter text here"
                                                                        name="multi_option[]">
                                                                </div>
                                                                <div class="col-sm-12 col-md-1 text-right">
                                                                    <span class="delete-btn"> <i
                                                                            class="icons icon-delete"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div><span class="error_class_category text-danger errortextstyle"
                                                        style="margin-top: 1px;display:none;" id="errormultiple"></span></div>
                                                        <button type="button" id="add-field" class="btn btn-primary">Add
                                                            TextField</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Dropdown selected --}}
                                        <div class="col-12 dropdown" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-11 mt-3">
                                                    <div>
                                                        <div class="box" id="sortable-dropdownbox">
                                                            <div class="row draggable align-items-center mx-0">
                                                                <div class="col-sm-12 col-md-3">
                                                                    <label for="input1"
                                                                        style="font-size: 14px;font-weight:600;margin:0px">
                                                                        Option
                                                                    </label>
                                                                </div>
                                                                <div class="col-sm-12 col-md-8">
                                                                    <input type="text" class="form-control"
                                                                        id="dropdown" placeholder="Enter text here"
                                                                        name="dropdown[]">
                                                                </div>
                                                                <div class="col-sm-12 col-md-1 text-right">
                                                                    <span class="delete-btn"> <i
                                                                            class="icons icon-delete"></i></span>
                                                                </div>
                                                            </div>
                                                            <div class="row draggable align-items-center mx-0">
                                                                <div class="col-sm-12 col-md-3">
                                                                    <label for="input1"
                                                                        style="font-size: 14px;font-weight:600;margin:0px">
                                                                        Option
                                                                    </label>
                                                                </div>
                                                                <div class="col-sm-12 col-md-8">
                                                                    <input type="text" class="form-control"
                                                                        id="dropdown" placeholder="Enter text here"
                                                                        name="dropdown[]">
                                                                </div>
                                                                <div class="col-sm-12 col-md-1 text-right">
                                                                    <span class="delete-btn"> <i
                                                                            class="icons icon-delete"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="div"> <span class="error_class_category text-danger errortextstyle"style="margin-top: 1px;display:none;" id="errordropdown"></span>
                                                        </div>
                                                        <button type="button" id="dropdown-field"
                                                            class="btn btn-primary">Add TextField</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Radio button selected --}}
                                        <div class="col-12 radio_field" style="display: none;">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-11 mt-3">
                                                    <div>
                                                        <div class="box" id="sortable-Radiobox">
                                                            <div class="row draggable align-items-center mx-0">
                                                                <div class="col-sm-12 col-md-3">
                                                                    <label for="input1"
                                                                        style="font-size: 14px;font-weight:600;margin:0px">
                                                                        Option
                                                                    </label>
                                                                </div>
                                                                <div class="col-sm-12 col-md-8">
                                                                    <input type="text" class="form-control"
                                                                        id="radio_field" placeholder="Enter text here"
                                                                        name="radio_option[]">
                                                                </div>
                                                                <div class="col-sm-12 col-md-1 text-right">
                                                                    <span class="delete-btn"> <i
                                                                            class="icons icon-delete"></i></span>
                                                                </div>
                                                            </div>
                                                            <div class="row draggable align-items-center mx-0">
                                                                <div class="col-sm-12 col-md-3">
                                                                    <label for="input1"
                                                                        style="font-size: 14px;font-weight:600;margin:0px">
                                                                        Option
                                                                    </label>
                                                                </div>
                                                                <div class="col-sm-12 col-md-8">
                                                                    <input type="text" class="form-control"
                                                                        id="radio_field" placeholder="Enter text here"
                                                                        name="radio_option[]">
                                                                </div>
                                                                <div class="col-sm-12 col-md-1 text-right">
                                                                    <span class="delete-btn"> <i
                                                                            class="icons icon-delete"></i></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div style="margin:-13px 0px 8px;"><span class="error_class_category text-danger errortextstyle"
                                                        style="margin-top: 1px;display:none;" id="errorradio"></span></div> 
                                                        <button type="button" id="radio-field"
                                                            class="btn btn-primary">Add TextField</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12 col-md-3 mt-3">
                                            <p class="attributeFormHeading">Tittle *</p>
                                        </div>
                                        <div class="col-sm-12 col-md-8 mt-3 error-text">
                                            <input type="text" class="form-control form-control-sm" name="title"
                                                placeholder="Name">
                                            <span class="error_class_category text-danger errortextstyle"
                                                style="margin-top: 1px;display:none;" id="errortitle"></span>
                                        </div>
                                        <input type="hidden" id="category_ids" name="category_ids"
                                            class="form-control form-control-sm" value="">

                                        <div class="col-sm-12 col-md-3 mt-3">
                                            <p class="attributeFormHeading">Add Default Unit <span
                                                    class="atrspantext">(Optional)</span></p>
                                        </div>
                                        <div class="col-sm-12 col-md-8 mt-3">
                                            <div class="form-group mb-0">
                                                <select class="form-control form-control-sm" id="unitSelect"
                                                    name="unit_id">
                                                    <option value="">Select Unit</option>
                                                    @foreach ($unitList as $unit)
                                                        <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>


                                        <div class="col-12 toggle-fields">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Mandatory Field</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="mandatory_field" id="exampleRadios1" value="yes"
                                                                checked>
                                                            <label class="form-check-label" for="exampleRadios1">
                                                                Yes
                                                            </label>
                                                        </div>
                                                        <div class="form-check ml-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="mandatory_field" id="exampleRadios2"
                                                                value="no">
                                                            <label class="form-check-label" for="exampleRadios2">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Use In Search</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_search" id="exampleRadios3" value="yes"
                                                                checked>
                                                            <label class="form-check-label" for="exampleRadios3">
                                                                Yes
                                                            </label>
                                                        </div>
                                                        <div class="form-check ml-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_search" id="exampleRadios4" value="no">
                                                            <label class="form-check-label" for="exampleRadios4">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-3 mt-3">
                                                    <p class="attributeFormHeading">Use In Filter</p>
                                                </div>
                                                <div class="col-sm-12 col-md-8 mt-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_filter" id="exampleRadios5" value="yes"
                                                                checked>
                                                            <label class="form-check-label" for="exampleRadios5">
                                                                Yes
                                                            </label>
                                                        </div>
                                                        <div class="form-check ml-1">
                                                            <input class="form-check-input" type="radio"
                                                                name="use_in_filter" id="exampleRadios6" value="no">
                                                            <label class="form-check-label" for="exampleRadios6">
                                                                No
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 col-md-8 mt-3 offset-3">
                                            <div>
                                                <button type="submit" id="saveAttribute" class="saveattribute"> Save
                                                    Attribute
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="attributeList_nodata contentBox justify-content-center mt-4 flex-column nodata-col"
                            style="padding-top:100px">
                            <i class="icons icon-no-items"></i>
                            <h1> No data added yet</h1>
                        </div>
                    </div>
                </div>
            @endif
            <div class="col-sm-12 col-md-5">
                <div class="attributeList hide_on_edit align-items-stretch h-100 d-flex flex-column position-relative">
                    <div class="attributeListBox position-relative">
                        <p class="attributeListHeading list_head">
                            Attribute List
                        </p>

                        <div class="" style="width:;justify-content:flex-end " id='setname_box'>
                            <p id="set_head" style="margin:0;padding:0;font-size:16px;text-transfrom:capitalize;"></p>
                            <span style="    position: absolute;  right: 16px; top: 6px;font-size: 20px;cursor: pointer;"
                                id="add_attr">
                                <button style="" class="attrsetEditBtn attrEditBtn" data-toggle="tooltip"
                                    data-placement="top" title="Edit">
                                    <i class="icons icon-edit"></i>
                                </button>
                            </span>
                        </div>



                        <form id="attrset" style="display:none">
                            <div style="display: flex;align-items:center;gap:12px">
                                <input type="text" id="set-name" placeholder="Enter Title" name="title"
                                    style="padding:4px 1rem;border:1px solid #e2e5ec;font-size:.875rem;border-radius:.25rem">
                                <div><input type="submit" value="Save" class="attrSaveBtn  saveattrset"
                                        style="">
                                </div>
                                <div><input type="button" class="attrCancelBtn attrSaveBtn " value="Cancel"></div>
                            </div>
                        </form>
                    </div>
                    <div class="d-flex align-items-center p-3 position-absolute" style="gap:10px;top:42px">

                        <p class="m-0 selected-prod" style="display:block">Selected Attribute (<span
                                id="sProduct">0</span>)</p>
                        <p class="m-0" id="deletedData" style="display:none">
                            <a href="javascript:void(0);" id="delete_records">Delete Selected <i
                                    class="icons icon-delete"></i>
                            </a>
                        </p>

                        <p style="display:none " id="set_id"></p>


                    </div>
                    <div class="contentBox flex-column align-items-start w-100 mt-5">
                        <div class="table-responsive" style="overflow:auto">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="text-center tbl-shadow" style="width:16px">
                                            <div class="custom-checkbox m-auto">
                                                <input class="custom-control-input" type="checkbox" id="checkAll"
                                                    value="0">
                                                <label class="custom-control-label" for="checkAll"></label>
                                            </div>
                                        </th>
                                        <th style="white-space: nowrap">Sr. No.</th>
                                        <th class="text-center">Name</th>
                                        <th class="text-center">Type</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="searchPage">

                                    <tr class="no-data">
                                        <td colspan="5">
                                            <div class="nodata-col default_nodata ">
                                                <i class="icons icon-no-items"></i>
                                                <h1>No data added yet</h1>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




@endsection

@section('modal')
    <!-- Delete Modal -->
    @include('modals.delete_modal')
@endsection

@section('script')
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>   -->
    <script type="text/javascript">
        $(document).ready(function() {

            function loadEditForm(id) {
                // $.ajax({
                //     url: '{{ url('/admin/categories/edit/') }}/' + id,
                //     dataType: 'html',
                //     type: 'get',
                //     success: function(data) {
                //         $(document).find('.MainCatAddForm').html(data);
                //         AIZ.plugins.tagify();
                //         AIZ.plugins.textEditor();
                //     }
                // });
            }

            function calcualte_width() {
                var TotalWidth = $(document).find('.CategoryListBox ').width();
                var LessWidth = $(document).find('.parent-absolute').width();
                var checktota = TotalWidth - LessWidth;
                checktota = checktota - 20;

                $(document).find('.offset-subcate').css('width', checktota);
            }

            function addOne(number) {
                var number = +number;
                return number + 1;
            }

            function updateBreadcrumbAndSuggestion() {
                var breadcrumb = '';
                var suggestion = '';
                var dataIds = [];
                var lastActiveDataId = '';
                $('#breadcrumps_tree').empty();
                var breadcrumbUl = $('<ul>').attr('id', 'category_tree');
                $('ul.mainCategory').each(function(index) {
                    var activeItem = $(this).find('li.attrActive');
                    if (activeItem.length > 0) {
                        var text = activeItem.text().trim();
                        var dataId = activeItem.data('id');

                        if (text) {
                            var li = $('<li>').text(text).attr('data-id', dataId);
                            if (index > 0) {
                                breadcrumbUl.append($('<span>').text(' > '));
                            }

                            breadcrumbUl.append(li);

                            if (breadcrumb) {
                                breadcrumb += ' > ' + text;
                                suggestion += ' > ' + text;
                            } else {
                                breadcrumb = text;
                                suggestion = text;
                            }

                            dataIds.push(dataId);
                            lastActiveDataId = dataId;
                        }
                    }
                });
                $('#breadcrumps_tree').append(breadcrumbUl);

                if (suggestion) {
                    $('#suggestion').val(suggestion);
                }

                var dataIdString = dataIds.join(',');
                $('input[type="hidden"]').val(dataIdString);

                $('input[id="current_category"]').on('change', function() {
                    if ($(this).is(':checked')) {
                        $('input[id="apply_type"]').val(lastActiveDataId);
                        $('input[name="category_type"]').val('category');
                    }
                });

                $('input[id="all_category"]').on('change', function() {
                    if ($(this).is(':checked')) {
                        $('input[id="apply_type"]').val(dataIdString);
                        $('input[name="category_type"]').val('all');
                    }
                });

                if ($('input[id="current_category"]').is(':checked')) {
                    $('input[id="apply_type"]').val(lastActiveDataId);
                    $('input[name="category_type"]').val('category');
                } else if ($('input[id="all_category"]').is(':checked')) {
                    $('input[id="apply_type"]').val(dataIdString);
                    $('input[name="category_type"]').val('all');
                }
            }

            $(document).on('click', 'ul.mainCategory li', function(e) {
                $('.category_breadcrum').show();
                $('#breadcrumps').css('display', 'flex');
                $('.category_breadcrum').css('display', 'flex');
                e.preventDefault();
                $(this).closest('ul').find('li').removeClass('attrActive');
                $(this).addClass('attrActive');
                var ID = $(this).data('id');
                if (!ID) {
                    return false;
                }
                var TabIndex = $(this).closest('ul').attr('tabindex');
                $('.prodCateDescribe').hide();
                if (TabIndex === "0") {
                    $(document).find('.NormalSelectorWrapper').empty();
                }
                var getID = $(this).closest('.subCategory').attr('data-row');
                $(".subCateCol").find('#tabMain' + getID).nextAll().remove();
                loadEditForm(ID);
                $(document).find('.MainCatAddForm').show();
                calcualte_width();
                TabIndex = addOne(TabIndex);
                $('#tabMain' + TabIndex + '++').remove();
                $('#category_id').val(ID);
                $(document).find('input[name="parent_id"]').val(ID);
                updateBreadcrumbAndSuggestion();
                getChildCategory(ID, $('.NormalSelectorWrapper'), "Sub Category 1", TabIndex);
                var SERVER = $(document).find('#tabMain' + TabIndex + ' .addCate-input');
                SERVER.find('input').attr('data-parent', ID);
                SERVER.find('.submitnewcat').attr('data-parent', ID);
            });

            function getChildCategory(parentId, childElement, emptyText, selectedId) {
                $('.fancy-spinner').show();
                $.ajax({
                    url: '{{ route('admin.getChildCategory', '') }}/' + parentId,
                    dataType: 'json',
                    success: function(data) {
                        $('.fancy-spinner').hide();
                        var synced = '';
                        checkExisting = $(document).find(
                            '.NormalSelectorWrapper #tabindex' + selectedId).length;
                        if (checkExisting == "0") {
                            synced += ('<div data-row="' + selectedId + '" id="tabMain' +
                                selectedId +
                                '" class="subCategory"><div class="addCate-input category_input" > <input data-parent="' +
                                parentId +
                                '" type="text" class="cate-input position-relative" placeholder="Search or Create"> <div data-parent="' +
                                parentId +
                                '" class="addCateIcon submitnewcat"  style="display:none;"> <i class="icons icon-plus"></i> </div> </div><span id="category_message" class="" style="font-size:80%;width:100%;display:block;position:absolute;top:42px;"></span><ul tabindex="' +
                                selectedId +
                                '" class="CategoryList c-scrollbar mainCategory" id="tabindex' +
                                selectedId + '">');
                        }

                        $.each(data, function(k, data) {
                            var liClass = data.sector_status == 0 ? 'disableSec' :
                                '';
                            synced += '<li data-id="' + data.id + '" class="' +
                                liClass +
                                '" style="display: flex; justify-content: space-between;">' +
                                '<span>' + data.name + '</span>' +
                                '</li>';
                        });

                        if (checkExisting == "0") {
                            synced += ('</ul> </div>');
                        }
                        if (checkExisting == "0") {
                            childElement.append(synced);
                        } else {
                            childElement.find('#tabindex' + selectedId).html('').append(
                                synced);
                        }
                    }
                });
            }
            $(document).on('keypress', 'input.cate-input', function(event) {
                if (event.keyCode === 13) {
                    $(this).closest('.addCate-input').find('div.addCateIcon').click();
                    $(this).keyup();
                    $(this).val('');
                }
            });
            $(document).on('keyup', ".parentCategory .addCate-input input[type='text']", function() {
                var value = $(this).val().toLowerCase();
                if (value.length > 0) {
                    $(this).closest('.parentCategory').find('.submitnewcat').show();
                } else {
                    $(this).closest('.parentCategory').find('.submitnewcat').hide();
                }
                $(this).closest('.parentCategory').find('ul.mainCategory li').each(function() {
                    if ($(this).text().toLowerCase().search(value) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
            $(document).on('keyup', ".subCateCol .addCate-input input[type='text']", function() {
                var value = $(this).val().toLowerCase();
                if (value.length > 0) {
                    $(this).closest('.subCategory').find('.submitnewcat').show();
                } else {
                    $(this).closest('.subCategory').find('.submitnewcat').hide();
                }

                $(this).closest('.subCategory').find('ul.mainCategory li').each(function() {
                    if ($(this).text().toLowerCase().search(value) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
            /////Sector Input Name Validation
            var maxLength = 100;
            $(document).on('input keydown', '.sector_input input', function(e) {
                var length = $(this).val().length;

                if (length > maxLength) {
                    $('#sector_message').text('Sector name must be of 100 characters').addClass(
                        'text-danger').show();
                    if (e.type === 'keydown' && e.key === 'Enter') {
                        e.preventDefault();
                    }
                } else {
                    $('#sector_message').text('').removeClass('text-danger').hide();
                }
            });
            ///Category Input Name Validation
            var maxLength = 100;
            $(document).on('input keydown', '.category_input input', function(e) {
                var length = $(this).val().length;

                if (length > maxLength) {
                    $('#category_message').text('Category name must be of 100 characters').addClass(
                        'text-danger').show();
                    if (e.type === 'keydown' && e.key === 'Enter') {
                        e.preventDefault();
                    }
                } else {
                    $('#category_message').text('').removeClass('text-danger').hide();
                }
            });
            $(document).on('click', '.addCateIcon.submitnewcat', function(e) {
                e.preventDefault();
                var THI = $(this);
                var localDIV = $(this).closest('.addCate-input');
                var insert = localDIV.find('input').val();
                var parentID = $(this).attr('data-parent');

                if (insert === "" || parentID === "" || insert.length > maxLength) {
                    return false;
                }
                $.ajax({
                    url: '{{ route('admin.category.createfromTabs') }}',
                    dataType: 'json',
                    data: {
                        'parent_id': parentID,
                        'name': insert,
                        '_token': '{{ csrf_token() }}'
                    },
                    type: 'post',
                    success: function(dataResponse) {
                        if (dataResponse.id) {
                            var list = parentID == "0" ? '.parentCategory ul.CategoryList' : THI
                                .closest('div.subCategory').find('ul.CategoryList');
                            if (parentID == "0") {
                                var newListItem = `
                                        <li data-id="${dataResponse.id}" class="${dataResponse.sector_status == '0' ? 'disableSec' : ''}" style="position: relative;">
                                            <span id="${dataResponse.id}" class="cateProdpic">
                                                <img class="img-fluid" src="${dataResponse.iconImg ? dataResponse.iconImg.source : '{{ url('/public/assets/img/prod-detail.png') }}'}">
                                            </span>
                                            <span id="${dataResponse.id}" class="prodCateName" style="display: flex; justify-content: space-between; padding-left: 0px;">
                                                ${dataResponse.value}
                                                <div class="tbl-action-link"></div>
                                            </span>                                            
                                        </li>`;
                                $(list).prepend(newListItem);
                            } else {
                                $(list).prepend('<li data-id="' + dataResponse.id + '">' +
                                    dataResponse.value + '</li>');
                            }

                            loadEditForm(dataResponse.id);
                            $(document).find('.MainCatAddForm').show();
                            localDIV.find('input').val('');
                        } else {
                            AIZ.plugins.notify('danger', dataResponse.error.name);
                        }
                        if (dataResponse.sector_status == '0') {
                            $(document).find('.NormalSelectorWrapper ul.mainCategory li')
                                .addClass('disableSec');
                        } else {
                            $(document).find('.NormalSelectorWrapper ul.mainCategory li')
                                .removeClass('disableSec');
                        }
                    }
                });
            });

            $('.toggle-fields').hide();
            $(document).on('change', '.type_fields', function(change_type) {
                var selectedOption = $(this).val();
                if (selectedOption !== 'Type') {
                    $(document).find('.toggle-fields').show();
                } else {
                    $(document).find('.toggle-fields').hide();
                }
                if (selectedOption === 'Text Field' || selectedOption === 'Multi-selection') {
                    $(document).find('.validation_field').show();
                } else {
                    $(document).find('.validation_field').hide();
                }
                if (selectedOption === 'Yes/No') {
                    $(document).find('.yes-no-fields').show();
                } else {
                    $(document).find('.yes-no-fields').hide();
                }
                if (selectedOption === 'Date and Time') {
                    $(document).find('.manufactureDate').show();
                } else {
                    $(document).find('.manufactureDate').hide();
                }
                if (selectedOption === 'Multi-selection') {
                    $(document).find('.multiselection').show();
                } else {
                    $(document).find('.multiselection').hide();
                }
                if (selectedOption === 'dropdown') {
                    $(document).find('.dropdown').show();
                } else {
                    $(document).find('.dropdown').hide();
                }
                if (selectedOption === 'Radio Button') {
                    $(document).find('.radio_field').show();
                } else {
                    $(document).find('.radio_field').hide();
                }
            });

            ////////// Edit Case 
            function toggleFieldsBasedOnSelection() {
                var selectedOption = $('.type_fields').val();
                if (selectedOption !== 'Type') {
                    $(document).find('.toggle-fields').show();
                } else {
                    $(document).find('.toggle-fields').hide();
                }
                if (selectedOption === 'Text Field' || selectedOption === 'Multi-selection') {
                    $(document).find('.validation_field').show();
                } else {
                    $(document).find('.validation_field').hide();
                }
                if (selectedOption === 'Yes/No') {
                    $(document).find('.yes-no-fields').show();
                } else {
                    $(document).find('.yes-no-fields').hide();
                }
                if (selectedOption === 'Date and Time') {
                    $(document).find('.manufactureDate').show();
                } else {
                    $(document).find('.manufactureDate').hide();
                }
                if (selectedOption === 'Multi-selection') {
                    $(document).find('.multiselection').show();
                } else {
                    $(document).find('.multiselection').hide();
                }
                if (selectedOption === 'dropdown') {
                    $(document).find('.dropdown').show();
                } else {
                    $(document).find('.dropdown').hide();
                }
                if (selectedOption === 'Radio Button') {
                    $(document).find('.radio_field').show();
                } else {
                    $(document).find('.radio_field').hide();
                }
            }
            toggleFieldsBasedOnSelection();

            $(document).on('change', '.type_fields', function(e) {
                toggleFieldsBasedOnSelection();
            });
            /////////////// SAVE ATTRIBUTE
            $(document).on('click', '#saveAttribute', function(event) {
                event.preventDefault();

                var form = $('#myform')[0];
                var formData = new FormData(form);
                var ids = $('#category_ids').attr('value');
                var idsArray = ids.split(',');
                var lastId = idsArray[idsArray.length - 1];
                $("#errortitle").css("display", "none").text('');
                $("#errortype").css("display", "none").text('');
                $("#errorcategory").css("display", "none").text('');
                $("#errordropdown").css("display", "none").text('');
                $("#errormultiple").css("display", "none").text('');
                $("#errorradio").css("display", "none").text('');

                var selectedCategory = $(document).find('#tabindex0 li.attrActive').data('id');
                formData.append('category', selectedCategory || '');

                $.ajax({
                    url: "{{ route('attributes.store') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) {
                        if (data.error) {
                            
                                           
                                const cleanMessage = (rawMessage, field) => rawMessage.replace(new RegExp(`${field}\\.\\d+`), field.replace(/_/g, " ")).replace(/_/g, " ");

                                const handleError = (field, elementId) => {
                                    const errorKey = Object.keys(data.error).find(key => key.startsWith(`${field}.`));
                                    if (errorKey) {
                                        $(elementId).show().text(cleanMessage(data.error[errorKey][0], field));
                                    } else {
                                        $(elementId).hide();
                                    }
                                };

                                handleError("radio_option", "#errorradio");
                                handleError("multi_option", "#errormultiple");
                                handleError("dropdown", "#errordropdown");
                            if (data.error.title) {
                                $("#errortitle").css("display", "block").text(data.error.title);
                            }
                            if (data.error.type) {
                                $("#errortype").css("display", "block").text(data.error.type);
                            }
                            if (data.error.category && !selectedCategory) {
                                $("#errorcategory").css("display", "block").text(data.error
                                    .category);
                            }
                        } else {
                            $('.CategoryList li[data-id="' + lastId + '"]').click();

                            $('#searchPage').html(data);
                            AIZ.plugins.notify('success', 'Attribute created successfully');
                            $('#myform')[0].reset();
                            // No page reload here
                            // Optional: You can add some other dynamic updates or UI changes if needed.
                        }
                    },
                    error: function(error) {
                        console.log(error.name);
                    },
                });
            });
            let lastDataId = null; // Variable to store the last dataId

            $(document).on('click', '.CategoryList li', function() {

                const dataId = $(this).attr('data-id');
                $('.list_head').hide();
                $('#add_attr').show();
                $('#attrset').hide();
                // $('#set_head').empty();
                // if (!$('#set_head').text().trim()) {
                //     $('.list_head').show('');
                // };
                $('#myform').show();

                // First AJAX call to fetch attribute list
                fetchAttributes(dataId);

                if (lastDataId !== dataId) {
                    lastDataId = dataId;
                    fetchAttributeSet(dataId);
                } else {
                    // $('.list_head').show();
                    console.log('dataId has not changed, no action taken.');
                }
            });

            function fetchAttributes(dataId) {
                const url = `{{ url('/admin/list/attribute/') }}/${dataId}`;
                $('.attributeList_nodata').hide();
                $('.default_nodata').remove();

                $.ajax({
                    url: url,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        $('#searchPage').html(data);
                    },
                    error: function(error) {
                        console.log(error.name);
                    },
                });
            }

            function fetchAttributeSet(dataId) {
                const urlSet = `{{ url('/admin/current_attributesset/') }}/${dataId}`;

                $.ajax({
                    url: urlSet,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        $('#set_head').empty().append(data);
                        // const setHeadHasContent = $('#set_head').text().trim().length > 0; 

                        // $('#set_head').css('display', setHeadHasContent ? 'flex' : 'none'); 
                        $('.list_head').hide();
                    },
                    error: function(error) {
                        console.log(error.name);
                    },
                });
            }



            $(document).on('click', '.edit-button', function(event) {
                var dataId = $(this).attr('id');
                $('#hidden_inp').val(dataId);
                var url = "{{ url('admin/create/attributes/') }}?id=" + dataId;

                $.ajax({
                    url: url,
                    success: function(data) {
                        var tempDiv = $('<div>').html(data);
                        var contentToAppend = tempDiv.find('#edit-attribute-section').html();
                        $('#add-attribute-section').data('original-content', $(
                            '#add-attribute-section').html());
                        $('#add-attribute-section').html(contentToAppend);

                        const defaultSelectedOptionId = $('.type_fields option:selected').attr(
                            'id');
                        $('.' + defaultSelectedOptionId).show();
                    },
                    error: function(error) {
                        console.log(error);
                    },
                });
            });


            $(document).on('click', '#cancel_edit', function() {
                var url = new URL(window.location.href);

                if (url.search) {
                    url.search = '';

                    window.history.pushState({}, '', url.toString());
                    location.href = "{{ url('admin/attributes') }}";

                } else {

                    var originalContent = $('#add-attribute-section').data('original-content');
                    if (originalContent) {
                        $('#add-attribute-section').html(originalContent);
                    }
                }
            });





            $(document).on('click', 'a.page-link', function(event) {
                event.preventDefault();
                var url = $(this).attr('href');
                localStorage.setItem('paginationURL', url);
                $.ajax({
                    url: url,
                    cache: false,
                    success: function(html) {
                        $("#searchPage").html(html);
                    }
                });
                $('#sProduct').text('0');
                $('#deletedData').hide();
                $('#restoreData').hide();
            });
            /////////////// UPDATE ATTRIBUTE
            $(document).on('click', '#updateAttribute', function(event) {
                event.preventDefault();
                var form = $('#updateform')[0];
                var formData = new FormData(form);
                var Id = $('#updateform').attr('class');
                let action = $('#updateform').attr('action');
                var ids = $('#category_ids').attr('value');
                var idsArray = ids.split(',');
                var lastId = idsArray[idsArray.length - 1];
                $("#errortitle_edit").css("display", "none").text('');
                $("#errortype_edit").css("display", "none").text('');
                $("#errorcategory").css("display", "none").text('');
                $("#errorradio_edit").css("display", "none").text('');
                $("#errormulti_edit").css("display", "none").text('');
                $("#errordropdown_edit").css("display", "none").text('');

                var selectedCategory = $(document).find('#tabindex0 li.attrActive').data('id');
                formData.append('category', selectedCategory || '');

                $.ajax({
                    url: "{{ url('admin/attributes/update') }}/" +
                        Id, // Concatenating URL correctly
                    type: 'POST', // Specify the type correctly
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        $('#specificField1').val('');
                        $('#specificField2').val('');
                        if (data.error) {


                            const cleanMessage = (rawMessage, field) => rawMessage.replace(new RegExp(`${field}\\.\\d+`), field.replace(/_/g, " ")).replace(/_/g, " ");

                                const handleError = (field, elementId) => {
                                    const errorKey = Object.keys(data.error).find(key => key.startsWith(`${field}.`));
                                    if (errorKey) {
                                        $(elementId).show().text(cleanMessage(data.error[errorKey][0], field));
                                    } else {
                                        $(elementId).hide();
                                    }
                                };

                                handleError("radio_option", "#errorradio_edit");
                                handleError("multi_option", "#errormulti_edit");
                                handleError("dropdown", "#errordropdown_edit");
                            if (data.error.title) {
                                $("#errortitle_edit").css("display", "block").text(data.error
                                    .title);
                            }
                            if (data.error.type) {
                                $("#errortype_edit").css("display", "block").text(data.error
                                    .type);
                            }
                            if (data.error.category && !selectedCategory) {
                                $("#errorcategory").css("display", "block").text(data.error
                                    .category);
                            }
                        } else {
                            $('.CategoryList li[data-id="' + lastId + '"]').click();
                            AIZ.plugins.notify('success', 'Attribute updated successfully');



                            var url = new URL(window.location.href);

                            if (url.search) {
                                url.search = '';

                                window.history.pushState({}, '', url.toString());
                                location.href = "{{ url('admin/attributes') }}";

                            } else {

                                var originalContent = $('#add-attribute-section').data(
                                    'original-content');
                                if (originalContent) {
                                    $('#add-attribute-section').html(originalContent);
                                }
                            }
                        }
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            });
            $(document).on('click', '.CategoryList li', function() {
                $('#checkAll').prop('checked', false);
                $("#sProduct").text("0");
                $("#deletedData").hide();
                $(document).find("#errorcategory").hide();
            });

            $(document).on('input', '.form-control', function() {
                $(this).closest('.error-text').find('.error_class_category').hide();
            });
            /////////// DELETE ATTRIBUTE
            $(document).on('click', '.confirm-delete', function() {

                let hiddenInputValue = $("#hidden_inp").val();
                let values = hiddenInputValue.split(",");
                let lastValue = values[values.length - 1].trim();

                var url = $(this).data('href');
                var checkThis = $(this);
                var deleteModal = $('#delete-modal');

                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').off('click').on('click', function(e) {
                  
                    e.preventDefault();

                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {

                            if (response.success) {
                                $('#checkAll').prop('checked', false);
                                $(".CategoryList li[data-id='" + lastValue + "']")
                                    .click();
                                deleteModal.modal('hide');
                                AIZ.plugins.notify('success', response.message);
                                checkThis.closest('tr').remove();
                                setTimeout(function() {

                                }, 1000);
                            } else {
                                AIZ.plugins.notify('danger', response.message);
                            }
                        },
                        error: function(xhr) {
                            AIZ.plugins.notify('danger',
                                'An error occurred while deleting the attribute.');
                        }
                    });
                });
            });

            $('#delete-modal').on('hidden.bs.modal', function() {
                $(this).find('#delete-link').off('click');
            });

            // Delete Multiple Data
            $(document).on('change', "#checkAll", function() {
                $(document).find(".checkedoptions input:checkbox").prop('checked', $(this).prop("checked"));
            });

            $(document).on('click', '#checkAll', function() {
                $("#sProduct").text("0");
                if ($(this).is(":checked")) {
                    $("#deletedData, .selected-prod").css("display", "block");
                    $(this).closest('table').find('#searchPage tr').addClass('active');
                } else {
                    $("#deletedData").css("display", "none");
                    $(this).closest('table').find('#searchPage tr').removeClass('active');
                }
                $(".product_checkbox").prop("checked", this.checked);
                $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
            });

            $(document).on('click', '.product_checkbox,#checkAll', function() {
                if ($(this).is(':checked')) {
                    $(this).closest('tr').addClass('active');
                } else {
                    $(this).closest('tr').removeClass('active');
                }

                const selectedCount = $('.product_checkbox:checked').length;
                $("#sProduct").text(selectedCount);

                if (selectedCount == $('.product_checkbox').length) {
                    $('#checkAll').prop('checked', true);
                } else {
                    $('#checkAll').prop('checked', false);
                }

                if (selectedCount == 0) {
                    $("#deletedData").css("display", "none");
                } else {
                    $("#deletedData, .selected-prod").css("display", "block");
                }
            });
            $(document).on('click', '.confirm-delete', function() {
                var id = $(this).attr('id');
                var url = "{{ url('/attributes/destroy/') }}/" + id;
                $('#delete-link').one('click', function(e) {
                    e.preventDefault(); // Prevent default action
                    $.ajax({
                        url: url,

                        cache: false,
                        data: {
                            emp_id: selected_values
                        }, // Use an object for data
                        success: function(response) {
                            AIZ.plugins.notify('success',
                                '{{ translate('Attributes Deleted successfully') }}'
                            );
                            $("#sProduct").text("0");
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                            $("#searchPage").html(html);
                            // Reload the page after a short delay
                            setTimeout(function() {
                                location.reload(true);
                            }, 1000);
                        },
                        error: function(xhr, status, error) {
                            // Handle error
                            AIZ.plugins.notify('error',
                                '{{ translate('An error occurred while deleting attributes') }}'
                            );
                        }
                    });
                });
            });

            $(document).on('click', '#delete_records', function() {

                let hiddenInputValue = $("#hidden_inp").val();
                let values = hiddenInputValue.split(",");
                let lastValue = values[values.length - 1].trim();

                var row = $(this).closest('tr');
                var products = [];
                var deleteModal = $('#delete-modal');

                $(".product_checkbox:checked").each(function() {
                    products.push($(this).val());
                });

                if (products.length === 0) {
                    alert("Please select records.");
                } else {
                    var selected_values = products.join(",");

                    deleteModal.modal({
                        backdrop: 'static',
                        keyboard: false
                    });

                    $('#delete-link').off('click').on('click', function(e) {
                        e.preventDefault();

                        $.ajax({
                            type: "POST",
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: "{{ url('/admin/attributes/multi_delete') }}",
                            cache: false,
                            data: {
                                emp_id: selected_values
                            },
                            success: function(response) {
                                $('#checkAll').prop('checked', false);
                                $(".CategoryList li[data-id='" + lastValue + "']")
                                    .click();
                                AIZ.plugins.notify('success',
                                    'Attributes Deleted successfully');
                                $("#sProduct").text("0");
                                $('#delete-modal').modal('hide');
                                $(".product_checkbox:checked").closest('tr').fadeOut(
                                    500,
                                    function() {
                                        $(this).remove();
                                    });
                                $("#deletedData").hide();
                                if (response.html) {
                                    $("#searchPage").html(response.html);
                                }
                                setTimeout(function() {


                                }, 1000);
                            },
                            error: function(xhr, status, error) {
                                console.error(xhr.responseText);
                            }
                        });
                    });
                }
            });

            $("#sortable-box, #sortable-dropdownbox,#sortable-Radiobox").sortable({
                placeholder: "ui-state-highlight"
            });
            let fieldCount = 2;
            /////////// Multi Options
            $(document).on('click', '#add-field', function(e) {
                fieldCount++;
                const newField = `
                <div class="row draggable align-items-center mx-0">
                    <div class="col-sm-12 col-md-3">
                    <label for="input${fieldCount}" style="font-size: 14px;font-weight:600">Option ${fieldCount}</label>
                    </div>
                    <div class="col-sm-12 col-md-8">
                    <input type="text" class="form-control" id="input${fieldCount}" placeholder="Enter text here" name="multi_option[]">
                    </div>
                    <div class="col-sm-12 col-md-1 text-right">
                    <span class="delete-btn"> <i class="icons icon-delete"></i></span>
                    </div>
                </div>
                `;
                $('#sortable-box').append(newField);
                $("#sortable-box").sortable("refresh");
                updateRowBackgrounds();
            });
            /////////// Dropdown Options
            // $("#dropdown-field").click(function() {
            //     alert("Welcome!");
            // });
            let dropdowncount = 2;
            $(document).on('click', '#dropdown-field', function(e) {
                dropdowncount++;
                const dropdownField = `
                <div class="row draggable align-items-center mx-0">
                    <div class="col-sm-12 col-md-3">
                    <label for="input${dropdowncount}" style="font-size: 14px;font-weight:600">Option</label>
                    </div>
                    <div class="col-sm-12 col-md-8">
                    <input type="text" class="form-control" id="input${dropdowncount}" placeholder="Enter text here" name="dropdown[]">
                    </div>
                    <div class="col-sm-12 col-md-1 text-right">
                    <span class="delete-btn"> <i class="icons icon-delete"></i></span>
                    </div>
                </div>
                `;
                $('#sortable-dropdownbox').append(dropdownField);
                $("#sortable-dropdownbox").sortable("refresh");
                updateRowBackgrounds();
            });
            /////////// Radio Options
            // Delete functionality
            $(document).on('click', '.delete-btn', function() {
                
                $(this).closest('.row').remove();
                $("#sortable-box, #sortable-dropdownbox, #sortable-Radiobox").sortable("refresh");
                updateRowBackgrounds();
            });

            function updateRowBackgrounds() {
                $('#sortable-box, #sortable-dropdownbox, #sortable-Radiobox .row').each(function(index) {
                    if ((index + 1) % 2 !== 0) {
                        $(this).addClass('even');
                    } else {
                        $(this).removeClass('even');
                    }
                });
            }
            updateRowBackgrounds();
            //// Edit Multi selection option remove
            $(document).on('click', '#multi-field', function() {
                const index = $('.option-row').length + 1;
                const newField = `
                    <div class="row draggable align-items-center mx-0 option-row ui-sortable-handle">
                        <div class="col-sm-12 col-md-3">
                            <label for="input${index}" style="font-size: 14px; font-weight: 600; margin: 0px">
                                Option 
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-8">
                            <input type="text" class="form-control" id="multi_option_${index}"
                                placeholder="Enter text here" name="multi_option[]">
                        </div>
                        <div class="col-sm-12 col-md-1 text-right">
                            <span class="delete-btn" style="cursor: pointer;"> <i class="icons icon-delete"></i></span>
                        </div>
                    </div>
                `;
                $('#sortable-box').append(newField);
            });
            $(document).on('click', '.delete-btn', function() {
                $(this).closest('.option-row').remove();
            });
            //// Edit Dropdown button selection option remove
            //// Edit Radio button selection option remove
            $(document).on('click', '.delete-btn', function() {
                $(this).closest('.radioOption-row').remove();
            });

        });
        let dropdowncount = 2;
        $(document).on('click', '#dropdown-field', function(e) {
            dropdowncount++;
            const dropdownField = `
                <div class="row draggable align-items-center mx-0">
                    <div class="col-sm-12 col-md-3">
                    <label for="input${dropdowncount}" style="font-size: 14px;font-weight:600"> Option</label>
                    </div>
                    <div class="col-sm-12 col-md-8">
                    <input type="text" class="form-control" id="input${dropdowncount}" placeholder="Enter text here" name="dropdown[]">
                    </div>
                    <div class="col-sm-12 col-md-1 text-right">
                    <span class="delete-btn"> <i class="icons icon-delete"></i></span>
                    </div>
                </div>
                `;
            $('#sortable-dropdownbox').append(dropdownField);
            $("#sortable-dropdownbox").sortable("refresh");
            updateRowBackgrounds();
        });
       
        let fieldCount = 2;

        /////////// Multi Options
        $(document).on('click', '#add-field', function(e) {
            fieldCount++;

            const newField = `
    <div class="row draggable align-items-center mx-0">
        <div class="col-sm-12 col-md-3">
        <label for="input${fieldCount}" style="font-size: 14px;font-weight:600">Option </label>
        </div>
        <div class="col-sm-12 col-md-8">
        <input type="text" class="form-control" id="input${fieldCount}" placeholder="Enter text here" name="multi_option[]">
        </div>
        <div class="col-sm-12 col-md-1 text-right">
        <span class="delete-btn"> <i class="icons icon-delete"></i></span>
        </div>
    </div>
    `;
            $('#sortable-box').append(newField);
            $("#sortable-box").sortable("refresh");
            updateRowBackgrounds();
        });
        /////////////////radio button  
        let radiocount = 2;
        $(document).on('click', '#radio-field', function(e) { 
            radiocount++;
            const dropdownField = `
                <div class="row draggable align-items-center mx-0">
                    <div class="col-sm-12 col-md-3">
                    <label for="input${radiocount}" style="font-size: 14px;font-weight:600">Option</label>
                    </div>
                    <div class="col-sm-12 col-md-8">
                    <input type="text" class="form-control" id="input${radiocount}" placeholder="Enter text here" name="radio_option[]">
                    </div>
                    <div class="col-sm-12 col-md-1 text-right">
                    <span class="delete-btn"> <i class="icons icon-delete"></i></span>
                    </div>
                </div>
                `;
            $('#sortable-Radiobox').append(dropdownField);
            $("#sortable-Radiobox").sortable("refresh");
            updateRowBackgrounds();
        });

        $(document).on('click', '#dropdown-field1', function() {
            const index = $('.dropdownoption-row').length + 1;
            const newField = `
                    <div class="row draggable align-items-center mx-0 dropdownoption-row">
                        <div class="col-sm-12 col-md-3">
                            <label for="input${index}" style="font-size: 14px; font-weight: 600; margin: 0px">
                                Option 
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-8">
                            <input type="text" class="form-control" id="dropdown_${index}"
                                placeholder="Enter text here" name="dropdown[]">
                        </div>
                        <div class="col-sm-12 col-md-1 text-right">
                            <span class="delete-btn" style="cursor: pointer;"> <i class="icons icon-delete"></i></span>
                        </div>
                    </div>
                `;
            $('#sortable-dropdownbox').append(newField);
        });
        // $(document).on('click', '.delete-btn', function() {
        //     $(this).closest('.dropdownoption-row').remove();
        // });
        $(document).on('click', '#multi-field1', function() {
            const index = $('.option-row').length + 1;
            const newField = `
                    <div class="row draggable align-items-center mx-0 option-row ui-sortable-handle" >
                        <div class="col-sm-12 col-md-3">
                            <label for="input${index}" style="font-size: 14px; font-weight: 600; margin: 0px">
                                Option
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-8">
                            <input type="text" class="form-control" id="multi_option_${index}"
                                placeholder="Enter text here" name="multi_option[]">
                        </div>
                        <div class="col-sm-12 col-md-1 text-right">
                            <span class="delete-btn" style="cursor: pointer;"> <i class="icons icon-delete"></i></span>
                        </div>
                    </div>
                `;
            $('#sortable-box1').append(newField);
        });


        $(document).on('click', '#radio-field1', function() {
            
            const index = $('.radioOption-row').length + 1;
            const newField = `
                    <div class="row draggable align-items-center mx-0 radioOption-row">
                        <div class="col-sm-12 col-md-3">
                            <label for="input${index}" style="font-size: 14px; font-weight: 600; margin: 0px">
                                Option
                            </label>
                        </div>
                        <div class="col-sm-12 col-md-8">
                            <input type="text" class="form-control" id="radio_field_${index}"
                                placeholder="Enter text here" name="radio_option[]">
                        </div>
                        <div class="col-sm-12 col-md-1 text-right">
                            <span class="delete-btn" style="cursor: pointer;"> <i class="icons icon-delete"></i></span>
                        </div>
                    </div>
                `;
            $('#sortable-box2').append(newField);
        });
        $(document).on('click', '.attrsetEditBtn', function() {

            var val = $('#set_head').text();
            $('#set-name').val(val);



            $('#attrset').show('');
            $('#add_attr').hide('');
            $('.list_head').hide('');
            $('#set_head').hide('');
        });
        var lastDataId;

        $(document).on('click', '.attrCancelBtn', function(event) {
            $('#add_attr').show('');
            $('#attrset').hide();
            $('#set_head').show('');

            if (!$('#set_head').text().trim()) {
                $('.list_head').show('');
            };
            // $('.attributeListHeading').show();
        });

        $(document).on('click', '.saveattrset', function(event) {
            event.preventDefault();
            var inputValue = $('#set-name').val();
            $('#set_head').text(inputValue);
            $('#add_attr').show('');
            var ids = $('#category_ids').val();
            var idsArray = ids.split(',');
            var lastId = idsArray[idsArray.length - 1];
            var form = $('#attrset')[0];
            var formData = new FormData(form);

            var url = "{{ url('admin/add/attributesset') }}/" + lastId;
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#set_head').show();
                    $('#attrset').hide();
                    // $('.list_head').show();
                    AIZ.plugins.notify('success', 'Attribute set created successfully');
                    form.reset();

                    console.log('Success:', response);

                    // Assuming dataId is available in response
                    var dataId = response.dataId;
                    if (lastDataId !== dataId) {
                        lastDataId = dataId;

                        var urlSet = "{{ url('/admin/current_attributesset/') }}/" + dataId;

                        $.ajax({
                            url: urlSet,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(data) {
                                // Show data in an alert to verify its content
                                alert("Data received: " + data);

                                // Append data to .setname after verifying
                                if (data) {
                                    $('#set_head').append(data);
                                    console.log('Data appended to #set_head');
                                } else {
                                    console.log('No data received for appending.');
                                }
                            },
                            error: function(error) {
                                console.error('Error in second AJAX call:', error);
                            },
                        });
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#attrset').show();
                    AIZ.plugins.notify('danger', 'Attribute set title required');
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        });


        $(document).on('click', '#all_category', function(event) {


            var ids = $('#category_ids').val();
            console.log('Category IDs:', ids);

            if (!ids) {
                console.error('No category IDs found.');
                return;
            }

            var idsArray = ids.split(',');
            var lastId = idsArray[idsArray.length - 1].trim(); // Trim to 
            var url = "{{ url('admin/list/attributes/all_sub_cat') }}/" + lastId;
            console.log('Constructed URL:', url);

            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    console.log('AJAX Success:', response);
                    AIZ.plugins.notify('success', 'Assigned To All Subcategory ');
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                    AIZ.plugins.notify('danger', 'Not Assigned To All Subcategory');
                }
            });
        });

        $(document).on('click', '#current_category', function(event) {




            var ids = $('#category_ids').val();
            console.log('Category IDs:', ids);

            if (!ids) {
                console.error('No category IDs found.');
                return;
            }

            var idsArray = ids.split(',');
            var lastId = idsArray[idsArray.length - 1].trim();
            var url = "{{ url('admin/list/attributesset/single') }}/" + lastId;


            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    console.log('AJAX Success:', response);
                    AIZ.plugins.notify('success', 'Assigned To Current Category ');
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', status, error);
                    AIZ.plugins.notify('danger', 'Not Assigned To Current Category');
                }
            });
        });



        @if (request('category') && request('id'))

        $('.hide_on_edit').css({
    'pointer-events': 'none',
    'cursor': 'default'
});
            $(document).ready(function() {
                const categoryIds = "{{ request('category') }}".split(',');
                const categoryIndexMap = Object.fromEntries(categoryIds.map((id, i) => [id, i]));
                const clickedIds = new Set();

                function clickMatchingItems($categoryList) {
                    $categoryList.find('li').each(function() {
                        const $li = $(this);
                        const liId = $li.data('id').toString();

                        if (categoryIndexMap[liId] !== undefined && !clickedIds.has(liId) && !$li.data(
                                'clicked')) {
                            $li.data('clicked', true); // Mark as clicked
                            $li.click();
                        }
                    });
                }
                $('.hide_on_edit').css({
    'pointer-events': 'none',
    'cursor': 'default'
});
                $(document).on('click', '.CategoryList li', function() {
                    const $li = $(this);
                    const liId = $li.data('id').toString();

                    clickedIds.add(liId);
                    $li.data('clicked', true);
                });


                $('.CategoryList').each(function() {
                    clickMatchingItems($(this));
                });


                const observer = new MutationObserver(mutations => {
                    mutations.forEach(mutation => {
                        $(mutation.addedNodes).find('.CategoryList').each(function() {
                            clickMatchingItems($(this));

                        });
                    });
                });

                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        @endif


        @if (request('setcategory') && request('set_id'))
            $('#edit_createattr').hide();

            $(document).ready(function() {
                const categoryIds = "{{ request('setcategory') }}".split(',');

                const categoryIndexMap = Object.fromEntries(categoryIds.map((id, i) => [id, i]));
                const clickedIds = new Set();

                function clickMatchingItems($categoryList) {
                    $categoryList.find('li').each(function() {
                        const $li = $(this);
                        const liId = $li.data('id').toString();

                        if (categoryIndexMap[liId] !== undefined && !clickedIds.has(liId) && !$li.data(
                                'clicked')) {
                            $li.data('clicked', true); // Mark as clicked
                            $li.click();
                        }
                    });
                }

                $(document).on('click', '.CategoryList li', function() {
                    const $li = $(this);
                    const liId = $li.data('id').toString();

                    clickedIds.add(liId);
                    $li.data('clicked', true);
                });


                $('.CategoryList').each(function() {
                    clickMatchingItems($(this));
                });


                const observer = new MutationObserver(mutations => {
                    mutations.forEach(mutation => {
                        $(mutation.addedNodes).find('.CategoryList').each(function() {
                            clickMatchingItems($(this));
                            $('#add-attribute-section,.table-responsive').css({
                                'pointer-events': 'none',
                                'cursor': 'default'
                            });

                            $('.att_move').show();

                        });
                    });
                });

                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        @endif

        @if (request('setcategory') && request('set_edit'))
            // $('#edit_createattr').hide();

            $(document).ready(function() {
                const categoryIds = "{{ request('setcategory') }}".split(',');

                const categoryIndexMap = Object.fromEntries(categoryIds.map((id, i) => [id, i]));
                const clickedIds = new Set();

                function clickMatchingItems($categoryList) {
                    $categoryList.find('li').each(function() {
                        const $li = $(this);
                        const liId = $li.data('id').toString();

                        if (categoryIndexMap[liId] !== undefined && !clickedIds.has(liId) && !$li.data(
                                'clicked')) {
                            $li.data('clicked', true); // Mark as clicked
                            $li.click();
                        }
                    });
                }

                $(document).on('click', '.CategoryList li', function() {
                    const $li = $(this);
                    const liId = $li.data('id').toString();

                    clickedIds.add(liId);
                    $li.data('clicked', true);
                });


                $('.CategoryList').each(function() {
                    clickMatchingItems($(this));
                });


                const observer = new MutationObserver(mutations => {
                    mutations.forEach(mutation => {
                        $(mutation.addedNodes).find('.CategoryList').each(function() {
                            clickMatchingItems($(this));
                            //                   $('#add-attribute-section,.table-responsive').css({
                            //     'pointer-events': 'none',   
                            //     'cursor': 'default'        
                            // });

                            $('.att_move').show();

                        });
                    });
                });

                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        @endif



        $(document).on('click', '.att_move', function() {
            var ids = $('#category_ids').val();
            var idsArray = ids.split(',');

            var lastId = idsArray[idsArray.length - 1];

            var mid = $(this).attr('id');
            var p_set = '{{ request('set_id') }}';

            var url = "{{ url('admin/moveAttribute') }}/" + mid + "/" + lastId;


            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    category: idsArray,
                    parent_set: p_set,
                },

                success: function(response) {

                    AIZ.plugins.notify('success', 'Attribute moved successfully');
                    window.location.href = "{{ url('admin/attributes') }}";
                    $('#pills-profile-tab').click();

                },
                error: function(xhr, status, error) {
                    AIZ.plugins.notify('error', 'An error occurred: ' + error);
                }
            });
        });
      
$(document).on('click', '.delete-btn', function() {
    var $box = $(this).closest('.box'); // Find the closest box
    var rowCount = $box.find('.row').length; // Count number of .row elements inside the box

    if (rowCount > 2) { // Allow deletion only if more than 2 rows exist
        $(this).closest('.row').remove();
        $("#sortable-box, #sortable-dropdownbox, #sortable-Radiobox").sortable("refresh");
        updateRowBackgrounds();
    } else {
        AIZ.plugins.notify('danger', 'At least two rows must remain!');
        
    }
});
$(document).ready(function () {
    function toggleCancelButton() {
        if ($('.linked_categories .category-list').length < 2) {
            $('.cancel_btn').prop('disabled', true);
        } else {
            $('.cancel_btn').prop('disabled', false);
        }
    }

    // Run on page load
    toggleCancelButton();

    // Optionally, if categories can be dynamically added/removed
    $(document).on('DOMNodeInserted DOMNodeRemoved', '.linked_categories', function () {
        toggleCancelButton();
    });
})

    </script>
@endsection