{{--  <a href="#" class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete"
    data-href="{{ route('categories.destroy', $category->id) }}" title="{{ translate('Delete') }}">
    <i class="las la-trash"></i>
</a>  --}}
<style>
    .input-wrapper {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        padding: 10px 14px 10px 14px;
    }

    .disableBTN {
        pointer-events: none;
    }

    .fa-cloud-arrow-up:before,
    .fa-cloud-upload-alt:before,
    .fa-cloud-upload:before {
        content: "\f0ee";
        font-size: 53px;
        color: #d7282f;
    }

    .input-wrapper input {
        border: none;
        outline: none;
        flex-grow: 1;
        height: 100%;
        width: 20%;
    }

    .selected-item {
        display: inline-flex;
        align-items: center;
        background-color: #e5e5e5;
        color: #000;
        padding: 4px 13px;
        border-radius: 2px;
        /* margin: 0 0 0 13px; */
        font-size: 14px;
    }

    .selected-item .remove {
        margin-left: 5px;
        cursor: pointer;
    }

    .suggestions {
        border: 1px solid #ddd;
        max-height: 200px;
        overflow-y: auto;
        position: absolute;
        background-color: white;
        z-index: 1000;
        width: 100%;
        top: 100%;
        /* Position below the input field */
        transition: opacity 0.3s ease, visibility 0.3s ease;
        opacity: 0;
        visibility: hidden;
    }

    .suggestions.show {
        opacity: 1;
        visibility: visible;
    }

    .suggestions li {
        padding: 10px;
        cursor: pointer;
    }

    .suggestions li:hover,
    .suggestions li.active {
        background-color: #f1f1f1;
    }

    .suggestions li.active {
        background-color: #007bff;
        color: white;
    }

    .image-container {
        border: 2px solid #ddd;
        position: relative;
        border-radius: 4px;
        height: 100px;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
        /* width: 100% !important; */
        height: auto !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .select2-container--default .select2-selection--multiple {
        background-color: white;
        border: 1px solid #aaa;
        border-radius: 4px;
        cursor: text;
        padding: 10px;
    }

    .select2-container .select2-search--inline .select2-search__field {
        margin-top: 0px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-bottom: 5px;
    }
</style>
@if ($errors->any())
    <div class="alert alert-danger d-flex align-items-center" role="alert">
        @foreach ($errors->all() as $error)
            <i class="icons icon-error-outline"></i> {{ $error }}
        @endforeach
    </div>
@endif

<form class="UpdateCategoryform" action="{{ route('categories.update', $category->id) }}" id="form-id"
    data-id="{{ $category->id }}" method="POST" enctype="multipart/form-data">
    <input name="_method" type="hidden" value="PATCH">
    <input type="hidden" name="lang" value="en">
    <input name="parent_id" type="hidden" value="{{ $category->parent_id ?? '' }}">
    @csrf
    <div class="hidden-keywords">


        <div class="form-group cat_status">
            <div class="FieldheadingBox mt-3">
                <p class="m-0 FieldsHeadings">Content Bar</p>
            </div>
            <div class="mb-2 error-text">
                <div class="d-flex align-items-center" style="justify-content: space-between">
                    <label class="col-form-label labelstyle">{{ translate('Name') }} <span class="text-danger">*</span>
                        <span style="font-weight: bold;margin:0 0 0 20px">
                            Product Count : {{ $category->product_count }}
                        </span>
                    </label>
                    <div style="display: @if (empty($category->parent_id)) none @else flex; @endif;"
                        class="cat_toggle categorytoggle">
                        <span class="publishTxt">{{ $category->sector_status }}</span>
                        <label class="aiz-switch aiz-switch-success mb-0 m-0" data-toggle="tooltip" data-placement="top"
                            title="">
                            <input type="checkbox" class="category_status" data-id="{{ $category->id }}"
                                data-name="{{ $category->name }}" value="{{ $category->sector_status }}"
                                @if ($category->sector_status == '1') checked @endif>
                            <span></span>
                        </label>
                    </div>
                </div>
                {{-- <p style="font-weight: bold;">Product Count : {{ $category->product_count }} </p> --}}
                <input type="text" name="name" value="{{ $category->name }}"
                    class="form-control disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                    id="name" placeholder="{{ translate('Name') }}"
                    {{ $category->sector_status == '0' ? 'disabled' : '' }} required />

                {{-- <input type="text" name="name" value="{{ $category->name }}" class="form-control" id="name" placeholder="{{ translate('Name') }}" required /> --}}
                <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;"
                    id="errorName"></span>
            </div>
            {{-- <div class="mb-2">
            <label class="col-form-label labelstyle">{{ translate('Approval Status') }}</label>
            <select class="form-control" name="approval_status" id="approval_status">
                <option @if ($category->approval_status == '0') selected @endif value="0">Pending</option>
                <option @if ($category->approval_status == '1') selected @endif value="1">
                    @if ($category->approval_status == '1')
                        Approved
                    @else
                        Approve
                    @endif
                </option>
                <option @if ($category->approval_status == '2') selected @endif value="2">
                    @if ($category->approval_status == '2')
                        Rejected
                    @else
                        Reject
                    @endif
                </option>
            </select>
        </div>
        <div class="mb-2" id="commentsSection" @if ($category->approval_status != '2') style="display:none; background: #ff00000f; padding: 14px;" @endif>
            <label class="col-form-label labelstyle">{{ translate('Reason for Rejection') }} </label>
            <textarea name="comments" rows="5" class="form-control" placeholder="Enter Rejection Reason">@php echo ($category->comments); @endphp</textarea>
        </div> --}}

            <div class="mb-2 error-text">
                <label class="col-form-label labelstyle">{{ translate('Description') }} <span
                        class="text-danger">*</span></label>
                <textarea name="description" rows="5" value="{{ $category->description }}"
                    placeholder="{{ translate('Description') }}" class="form-control richTextBox aiz-text-editor"required>@php echo ($category->description); @endphp</textarea>
                <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;"
                    id="errorDesc">
                </span>
            </div>
            <div class="mb-2">
                <label class="col-form-label labelstyle">{{ translate('Popular Brands') }}</label>

                <div>
                    <form class="form-inline"
                        style="display: flex; justify-content: center; align-items: center; height: 100vh;">
                        <div class="form-group position-relative w-100 mb-0">
                            <div class="input-wrapper popular_brands {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                                {{ $category->sector_status == '0' ? 'disabled' : '' }} style="gap:10px">
                                <input class="form-control {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                                    type="text" placeholder="Enter Brands" aria-label="Search" id="search-input"
                                    autocomplete="off" {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                                <input name="brands" value="" type="hidden">
                            </div>
                            <ul class="suggestions list-group" id="suggestions-list"></ul>
                        </div>
                    </form>
                </div>
            </div>


        </div>


        <div class="col-12 px-0 mb-2 " id="key_import">


            <form action="{{ route('categories.importKeywords') }}" method="POST" enctype="multipart/form-data"
                style="display:none">
                @csrf
                <div class="mb-2">
                    <label class="col-form-label labelstyle">{{ translate('Import File') }}</label>
                    <input type="file" name="file" accept=".xlsx,.xls" id="fileInput"
                        style="border:1px solid #d2d2d2;background-color:#fff;border-radius:4px;padding-right:6px" />
                    <input type="hidden" name="category_id" value="{{ $category->id }}" />
                    <button type="submit"
                        style="border:1px solid #d7282f;color:#fff;background-color:#fff;padding:4px 8px;border-radius:4px;background-color:#d7282f;">
                        <i class="fa-solid fa-file-import"></i>
                        Import
                    </button>
                    <span>
                        @error('file')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </span>
                    <div class="text-muted" style="margin-top: 8px;">
                        (In this import, only .xlsx, .xls files are allowed)
                    </div>
                    @if (session('success'))
                        <div class="alert alert-success" role="alert" id="flash-message">
                            {{ session('success') }}
                        </div>
                        <script>
                            window.onload = function() {
                                var flashMessage = document.getElementById('flash-message');
                                if (flashMessage) {
                                    setTimeout(function() {
                                        flashMessage.style.transition = 'opacity 1s ease-out';
                                        flashMessage.style.opacity = '0';
                                        flashMessage.style.visibility = 'hidden';
                                        setTimeout(function() {
                                            flashMessage.style.display = 'none';
                                        }, 1000);
                                    }, 1000);
                                }
                            }
                        </script>
                    @endif
                </div>
            </form>
            <div class="row mx-0">
                <div class="col-12 px-0">
                    <div style="position:relative;width:100%;">
                        <label class="col-form-label" style="font-size:14px;font-weight:600;">
                            {{ translate('Related Keywords with Ratings') }}
                        </label>
                        <div id="keywords-container">
                            @if (count($keywordsRatings) > 0)
                                @foreach ($keywordsRatings as $index => $keywordRating)
                                    <div class="input-group mb-2 keyword-rating-pair">
                                        <input type="text" class="form-control" name="keywords[]"
                                            value="{{ $keywordRating->keyword }}" placeholder="Enter Keyword" />
                                        <input type="text" class="form-control ml-2 rating-input" name="ratings[]"
                                            value="{{ $keywordRating->rating }}" placeholder="Enter Rating (1 to 5)"
                                            min="1" max="5" style="width:80px;" />
                                        <input type="hidden" name="master_id[]"
                                            value="{{ $keywordRating->master_id }}">
                                        <div class="input-group-append btnspacing">
                                            <button class="btn RemoveBTN remove-keyword-rating"
                                                type="button">Remove</button>
                                        </div>
                                    </div>
                                @endforeach
                                {{-- Add one extra blank input with Add More button --}}
                                <div class="input-group mb-2 keyword-rating-pair">
                                    <input type="text" class="form-control" name="keywords[]"
                                        placeholder="Enter Keyword" />
                                    <input type="text" class="form-control ml-2 rating-input" name="ratings[]"
                                        placeholder="Enter Rating (1 to 5)" min="1" max="5"
                                        style="width:80px;" />
                                    <div class="input-group-append btnspacing">
                                        <button class="btn AddMore add-keyword-rating" type="button">Add
                                            More</button>
                                    </div>
                                </div>
                            @else
                                <div class="input-group mb-2 keyword-rating-pair">
                                    <input type="text" class="form-control" name="keywords[]"
                                        placeholder="Enter Keyword" />
                                    {{-- <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;"
                    id="errorkeywords"></span> --}}
                                    <input type="text" class="form-control ml-2 rating-input" name="ratings[]"
                                        placeholder="Enter Rating (1 to 5)" min="1" max="5"
                                        style="width:80px;" />
                                    <div class="input-group-append btnspacing">
                                        <button class="btn AddMore add-keyword-rating" type="button">Add
                                            More</button>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <input type="hidden" id="removed_keyword_ids" name="removed_keyword_ids" value="">
                        <span class="error_class_category text-danger errortextstyle"
                            style="margin-top: 1px; display: none;" id="errorKeywords">
                        </span>
                        <span class="error_class_category text-danger errortextstyle"
                            style="margin-top: 1px; display: none;" id="errorRatings">
                        </span>
                    </div>
                </div>
            </div>
        </div>





        <div class="hidden-keywords_list">
            <div class="mb-2">
                <div class="select2-container" style="position:relative;width:100%;">
                    <p for="category" class="" style="font-size:14px;font-weight:600;margin:0 0 6px 0px;">
                        Product
                        Applications </p>
                    <select
                        class="form-control select2 select2me select2Tags disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                        multiple="multiple" data-placeholder="Select or type product applicationsdsd"
                        style="width: 100%;height:40px;max-height:40px;" name="product_application[]"
                        id="product_application" {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                        @foreach ($useCases as $case)
                            <option value="{{ $case->id }}" @if (in_array($case->id, $selectedApplicationIds)) selected @endif>
                                {{ $case->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="mb-2">
                <div class="select2-container" style="position:relative;width:100%;">
                    <p for="category" class="" style="font-size:14px;font-weight:600;margin:0 0 6px 0px;">
                        Product
                        Use Cases</p>
                    <select
                        class="form-control select2 select2me select2Tags disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                        multiple="multiple" data-placeholder="Select or type product use cases"
                        style="width: 100%;;height:40px;max-height:40px;" name="product_use_cases[]"
                        id="product_use_cases" {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                        @foreach ($rcase as $case)
                            <option value="{{ $case->id }}" @if (in_array($case->id, $selectedUseCaseIds)) selected @endif>
                                {{ $case->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>
            <div class="FieldheadingBox">
                <p class="m-0 FieldsHeadings"> Attachments</p>
            </div>
            <div style="margin: 16px 0px">
                <div class="row ">
                    <div class="col-sm-12 col-md-12 col-lg-5 editChange  position-relative align-items-stretch">
                        <div class="RightBorderAbsolute"></div>
                        <div class="row">
                            <div class="col-12 ">
                                <div>
                                    <div class="mb-4">
                                        <label class="col-form-label labelstyle"
                                            for="signinSrEmail">{{ translate('Icon') }}
                                            <small class="labelstylesub">({{ translate('120x80') }})<span
                                                    class="text-danger ml-1">*</span>
                                            </small>
                                        </label>
                                        <div class="error-text d-flex align-items-center MediaBlock" style="gap:6px"
                                            data-toggle="" data-imgtype="1" data-type="icon">
                                            <div class="brand-image @if (!$category->icon) d-none @endif">
                                                <div class="image-container" style="width:190px">
                                                    <img id="previewImageIcon"
                                                        style="width: 100%; object-fit:contain; height:100%;"
                                                        loading="lazy"
                                                        @if ($category->icon) @if (Str::startsWith($category->icon, ['http://', 'https://']))
                                                            src="{{ $category->icon }}"
                                                        @else
                                                            src="{{ asset('storage/' . $category->icon) }}" @endif
                                                    @else src="{{ asset('default-category-icon.jpg') }}"
                                                        @endif
                                                    alt="" class="img-responsive">
                                                </div>
                                            </div>
                                            <div class="file-preview file-preview_1 box sm"></div>
                                            <label class="col-form-label d-block" for="icon_image">
                                                <div class="input-group-prepend"
                                                    onclick="triggerFileInput('#icon_image')">
                                                    <div class="input-group-text bg-soft-secondary font-weight-medium"
                                                        style="background-color:#fff !important;border:1px dashed #ababab;cursor: pointer;">
                                                        Browse
                                                    </div>
                                                    <div class="form-control file-amount file_1" id="customFile"
                                                        style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;border:0;width:160px;padding:.6rem 8px;">
                                                        @if ($category->icon)
                                                            {{ basename($category->icon) }}
                                                        @else
                                                            {{ translate('Choose File') }}
                                                        @endif
                                                    </div>
                                                    <input type="file" name="icon"
                                                        class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                                                        id="icon_image" style="display:none"
                                                        {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                                                    <input type="hidden" name="logo"
                                                        value="{{ $category->icon }}" class="selected-files">
                                                </div>

                                                <span class="error_class_category text-danger errortextstyle"
                                                    style="margin-top: 1px; display:none;" id="errorfile1"></span>
                                            </label>
                                        </div>
                                        <p style="font-size: 11px;font-weight:500;color:#1b1b28;margin: 6px 0 0 0">
                                            The file may not be greater than 500 KB.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 ">
                                <div class="mb-2">
                                    <p class="labelstyle" style="margin: 0 0 .5rem 0">Image
                                        <span style="font-size: 11px;font-weight:500;color:#1b1b28">
                                            (282x590)
                                        </span>
                                    </p>
                                    <div class="error-text d-flex align-items-center MediaBlock" style="gap:6px"
                                        data-toggle="" data-imgtype="1" data-type="image">
                                        <div class="brand-image @if (!$category->image) d-none @endif">
                                            <div class="image-container" style="width:190px">
                                                <img id="previewImageImage"
                                                    style="width: 100%; height:100%;object-fit:contain;"
                                                    loading="lazy"
                                                    @if ($category->image) @if (Str::startsWith($category->image, ['http://', 'https://']))
                                                        src="{{ $category->image }}"
                                                    @else
                                                        src="{{ asset('storage/' . $category->image) }}" @endif
                                                @else src="{{ asset('prod-detail.png') }}" @endif
                                                alt="" class="img-responsive">
                                            </div>
                                        </div>
                                        <div class="file-preview file-preview_1 box sm"></div>
                                        <label class="col-form-label d-block labelstyle" for="imageLogo">
                                            <div class="input-group-prepend" onclick="triggerFileInput('#imageLogo')">
                                                <div class="input-group-text bg-soft-secondary font-weight-medium"
                                                    style="background-color:#fff !important;border:1px dashed #ababab;cursor: pointer;">
                                                    {{ translate('Browse') }}
                                                </div>
                                                <div class="form-control file-amount file_1" id="customFile"
                                                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;border:0;width:160px;padding:.6rem 8px;">
                                                    @if ($category->image)
                                                        {{ basename($category->image) }}
                                                    @else
                                                        {{ translate('Choose File') }}
                                                    @endif
                                                </div>
                                                <input type="file" name="image"
                                                    class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                                                    id="imageLogo" style="display:none"
                                                    {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                                            </div>

                                            <span class="error_class_category text-danger errortextstyle"
                                                style="margin-top: 1px; display:none;" id="errorfile2"></span>
                                        </label>
                                    </div>
                                    <p style="font-size: 11px;font-weight:500;color:#1b1b28;margin: 6px 0 0 0">
                                        The file may not be greater than 500 KB.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-7 editChange2 align-items-stretch">
                        <div>
                            <label class="col-form-label labelstyle" for="signinSrEmail">{{ translate('Banner') }}
                                <small class="labelstylesub">({{ translate('1920x300') }})
                                </small>
                            </label>
                            {{-- <div class="mb-2">
                    <div class="error-text" data-toggle="" data-imgtype="1" data-type="banner">
                        <label class="col-form-label d-block labelstyle" for="bannerOpen">
                            <div class="input-group-prepend" onclick="triggerFileInput('#bannerOpen')">
                                <div class="input-group-text bg-soft-secondary font-weight-medium"
                                    style="border-top-right-radius: 0px !important; border-bottom-right-radius:0px !important">
                                    {{ translate('Browse') }}
                                </div>
                                <div class="form-control file-amount file_1" id="customFile"
                                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                    @if ($category->banner)
                                        {{ basename($category->banner) }}
                                    @else
                                        {{ translate('Choose File') }}
                                    @endif
                                </div>
                                <input type="file" id="bannerOpen" name="banner"
                                    class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                                    style="display:none" {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                            </div>

                            <span class="error_class_category text-danger errortextstyle"
                                style="margin-top: 1px; display:none;" id="errorfile3"></span>
                        </label>
                        <div class="row">
                            <div class="lala col-2">
                                <div class="brand-image @if (!$category->banner) d-none @endif">
                                    <div class="image-container">
                                        <img id="previewImageBanner"
                                            style="width: 100%; height:100%;object-fit:contain;" loading="lazy"
                                            @if ($category->banner) @if (Str::startsWith($category->banner, ['http://', 'https://']))
                                                    src="{{ $category->banner }}"
                                                @else
                                                    src="{{ asset('storage/' . $category->banner) }}" @endif
                                        @else src="{{ asset('prod-detail.png') }}" @endif
                                        alt="" class="img-responsive">
                                    </div>
                                </div>
                                <div class="file-preview file-preview_1 box sm"></div>
                            </div>
                        </div>
                    </div>
                </div> --}}
                            <div class="d-flex" style="gap:12px;width: 100%;align-items: stretch;height: 100%;">
                                <div>
                                    <div class="imageUpLoadBox"
                                        style="width:200px;padding: 0px; border-radius: 6px;height:80%">
                                        <label class="col-form-label d-block labelstyle" for="bannerOpen">
                                            <div class="input-group-prepend d-flex justify-content-center"
                                                onclick="triggerFileInput('#bannerOpen')">
                                                <div class="text-center">
                                                    <div class="hovernone"><i class="fa fa-cloud-upload"
                                                            aria-hidden="true"></i>

                                                    </div>
                                                    <p class="Bannerlabel m-0"
                                                        style="white-space: nowrap;cursor: pointer;color:#231f20;display:flex;justify-content:center;flex-direction:column;align-items:center;">
                                                        {{ translate('Upload Banner') }}</p>
                                                </div>
                                                <input type="file" id="bannerOpen" name="banner"
                                                    class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                                                    style="display:none"
                                                    {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                                            </div>

                                            <span class="error_class_category text-danger errortextstyle text-center"
                                            style="margin-top: 1px; display:none;" id="errorfile3"></span>
                                        </label>
                                    </div>
                                    {{-- <div class="error_class_category text-danger errortextstyle"
                                        style="margin-top: 1px; display:none;" id="errorfile3"></div> --}}
                                    <p style="font-size: 11px;font-weight:500;color:#1b1b28;margin: 6px 0 0 0">
                                        The file may not be greater than 500 KB.
                                    </p>
                                </div>
                                <div class="row " style="width: 100%;">
                                    <div class=" col-12">
                                        <div class="brand-image @if (!$category->banner) d-none @endif">
                                            <div class="image-container" style="height:170px;">
                                                <img id="previewImageBanner"
                                                    style="width: 100%; height:100%;object-fit:cover;" loading="lazy"
                                                    @if ($category->banner) @if (Str::startsWith($category->banner, ['http://', 'https://']))
                                            src="{{ $category->banner }}"
                                        @else
                                            src="{{ asset('storage/' . $category->banner) }}" @endif
                                                @else src="{{ asset('prod-detail.png') }}" @endif
                                                alt="" class="img-responsive">
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-center">
                                            <div class="form-control file-amount file_1 text-center" id="customFile"
                                                style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;border:0;width:230px;padding:.6rem 4px;">
                                                @if ($category->banner)
                                                    {{ basename($category->banner) }}
                                                @else
                                                    {{ translate('Choose File') }}
                                                @endif
                                            </div>
                                        </div>
                                        <div class="file-preview file-preview_1 box sm"></div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="d-flex justify-content-center">
                                <div class="form-control file-amount file_1 text-center" id="customFile"
                                    style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;border:0;width:230px;padding:.6rem 4px;">
                                    @if ($category->banner)
                                        {{ basename($category->banner) }}
                                    @else
                                        {{ translate('Choose File') }}
                                    @endif
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="mb-2">
        <label class="col-form-label labelstyle" for="signinSrEmail">{{ translate('Icon') }}
            <small class="labelstylesub">({{ translate('120x80') }})<span class="text-danger ml-1">*</span>
            </small>
        </label>
        <div class="error-text" data-toggle="" data-imgtype="1" data-type="icon">
            <label class="col-form-label d-block" for="icon_image">
                <div class="input-group-prepend" onclick="triggerFileInput('#icon_image')">
                    <div class="input-group-text bg-soft-secondary font-weight-medium"
                        style="border-top-right-radius: 0px !important; border-bottom-right-radius:0px !important">
                        Browse
                    </div>
                    <div class="form-control file-amount file_1" id="customFile"
                        style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        @if ($category->icon)
                            {{ basename($category->icon) }}
                        @else
                            {{ translate('Choose File') }}
                        @endif
                    </div>
                    <input type="file" name="icon"
                        class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                        id="icon_image" style="display:none"
                        {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                    <input type="hidden" name="logo" value="{{ $category->icon }}" class="selected-files">
                </div>

                <span class="error_class_category text-danger errortextstyle"
                    style="margin-top: 1px; display:none;" id="errorfile1"></span>
            </label>
            <div class="row">
                <div class="col-2 lala">
                    <div class="brand-image @if (!$category->icon) d-none @endif">
                        <div class="image-container">
                            <img id="previewImageIcon" style="width: 100%; object-fit:contain; height:100%;"
                                loading="lazy"
                                @if ($category->icon) @if (Str::startsWith($category->icon, ['http://', 'https://']))
                                        src="{{ $category->icon }}"
                                    @else
                                        src="{{ asset('storage/' . $category->icon) }}" @endif
                            @else src="{{ asset('default-category-icon.jpg') }}" @endif
                            alt="" class="img-responsive">
                        </div>
                    </div>
                    <div class="file-preview file-preview_1 box sm"></div>
                </div>
            </div>
        </div>
    </div> --}}
            {{-- <div class="mb-2">
        <p class="labelstyle" style="margin: 0 0 .5rem 0">Image</p>
        <div class="error-text" data-toggle="" data-imgtype="1" data-type="image">
            <label class="col-form-label d-block labelstyle" for="imageLogo">
                <div class="input-group-prepend" onclick="triggerFileInput('#imageLogo')">
                    <div class="input-group-text bg-soft-secondary font-weight-medium"
                        style="border-top-right-radius: 0px !important; border-bottom-right-radius:0px !important">
                        {{ translate('Browse') }}
                    </div>
                    <div class="form-control file-amount file_1" id="customFile"
                        style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        @if ($category->image)
                            {{ basename($category->image) }}
                        @else
                            {{ translate('Choose File') }}
                        @endif
                    </div>
                    <input type="file" name="image"
                        class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                        id="imageLogo" style="display:none"
                        {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                </div>

                <span class="error_class_category text-danger errortextstyle"
                    style="margin-top: 1px; display:none;" id="errorfile2"></span>
            </label>
            <div class="row">
                <div class=" lala col-2">
                    <div class="brand-image @if (!$category->image) d-none @endif">
                        <div class="image-container">
                            <img id="previewImageImage" style="width: 100%; height:100%;object-fit:contain;"
                                loading="lazy"
                                @if ($category->image) @if (Str::startsWith($category->image, ['http://', 'https://']))
                                        src="{{ $category->image }}"
                                    @else
                                        src="{{ asset('storage/' . $category->image) }}" @endif
                            @else src="{{ asset('prod-detail.png') }}" @endif
                            alt="" class="img-responsive">
                        </div>
                    </div>
                    <div class="file-preview file-preview_1 box sm"></div>
                </div>
            </div>
        </div>
    </div> --}}
            {{-- <div class="mb-2">
        <p class="labelstyle" style="margin: 0 0 .5rem 0">{{ translate('Banner') }}</p>
        <div class="error-text" data-toggle="" data-imgtype="1" data-type="banner">
            <label class="col-form-label d-block labelstyle" for="bannerOpen">
                <div class="input-group-prepend" onclick="triggerFileInput('#bannerOpen')">
                    <div class="input-group-text bg-soft-secondary font-weight-medium"
                        style="border-top-right-radius: 0px !important; border-bottom-right-radius:0px !important">
                        {{ translate('Browse') }}
                    </div>
                    <div class="form-control file-amount file_1" id="customFile"
                        style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        @if ($category->banner)
                            {{ basename($category->banner) }}
                        @else
                            {{ translate('Choose File') }}
                        @endif
                    </div>
                    <input type="file" id="bannerOpen" name="banner"
                        class="form-control image disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                        style="display:none" {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                </div>

                <span class="error_class_category text-danger errortextstyle"
                    style="margin-top: 1px; display:none;" id="errorfile3"></span>
            </label>
            <div class="row">
                <div class="lala col-2">
                    <div class="brand-image @if (!$category->banner) d-none @endif">
                        <div class="image-container">
                            <img id="previewImageBanner" style="width: 100%; height:100%;object-fit:contain;"
                                loading="lazy"
                                @if ($category->banner) @if (Str::startsWith($category->banner, ['http://', 'https://']))
                                        src="{{ $category->banner }}"
                                    @else
                                        src="{{ asset('storage/' . $category->banner) }}" @endif
                            @else src="{{ asset('prod-detail.png') }}" @endif
                            alt="" class="img-responsive">
                        </div>
                    </div>
                    <div class="file-preview file-preview_1 box sm"></div>
                </div>
            </div>
        </div>
    </div> --}}
            <script>
                function triggerFileInput(selector) {
                    $(selector).trigger('click');
                }
            </script>
            <hr>
            <div class="FieldheadingBox">
                <p class="m-0 FieldsHeadings"> Search Engine Optimization</p>
            </div>
            {{-- <div class="mb-2">
        <label class="col-form-label labelstyle">{{ translate('URL Key') }} </label>
        <input type="text" class="form-control disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
            name="url_key" value="{{ $category->url_key }}" placeholder="{{ translate('Url Key') }}"
            {{ $category->sector_status == '0' ? 'disabled' : '' }} />
    </div> --}}


            <div class="mb-2">
                <label class="col-form-label labelstyle">{{ translate('URL Key') }} </label>
                <input type="text" id="url_key"
                    class="form-control disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                    name="url_key" value="{{ $category->url_key }}" placeholder="{{ translate('Url Key') }}"
                    {{ $category->sector_status == '0' ? 'disabled' : '' }} />
                <div id="url_suggestions" class="mt-2"></div>
            </div>


            <div class="mb-2">
                <label class="col-form-label labelstyle">{{ translate('Meta Title') }} </label>
                <input type="text"
                    class="form-control disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                    name="meta_title" value="{{ $category->meta_title }}"
                    placeholder="{{ translate('Meta Title') }}"
                    {{ $category->sector_status == '0' ? 'disabled' : '' }} />
            </div>
            <div class="mb-2">
                <label class="col-form-label labelstyle">{{ translate('Meta Keywords') }}</label>
                <input type="text"
                    class="form-control aiz-tag-input disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                    name="tags" placeholder="Enter Keywords" value="{{ $category->tags }}"
                    {{ $category->sector_status == '0' ? 'disabled' : '' }} />
            </div>
            <div class="mb-2">
                <label class="col-form-label labelstyle">{{ translate('Meta Description') }} </label>
                <textarea name="meta_description" rows="5"
                    class="form-control disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                    {{ $category->sector_status == '0' ? 'disabled' : '' }}>@php echo ($category->meta_description); @endphp</textarea>
            </div>


            <div class="mb-2">
                <label class="col-form-label labelstyle">{{ translate('Hide/Show    ') }} </label>
                <select id="" name="status" class="form-control disabledInput">
                    <option value="">Select</option>
                    <option value="1" @if ($category->status == '1') selected @endif>Show</option>
                    <option value="0" @if ($category->status == '0') selected @endif>Hide</option>
                </select>

            </div>


        </div>



        <div class="d-none">
            <label class="col-form-label d-block" for="signinSrEmail">{{ translate('Hover Icon') }}
                <small>({{ translate('32x32') }})</small>
            </label>
            <div class="upload-file-btn">
                <label for="hover_icon" class="btn"><i class="icons icon-upload-img"></i> Upload a file
                    <input type="file" name="hover_icon" id="hover_icon" hidden />
                </label>
                <p id="hover_icon_text"></p>
            </div>
            @if (isset($category->hover_icon) and !empty($category->hover_icon))
                <div class="d-block">
                    <a target="_blank" href="{{ $category->hover_icon }}">View</a>
                </div>
            @endif
        </div>
        <input type="hidden" placeholder="{{ translate('Slug') }}" id="slug" name="slug"
            value="{{ $category->slug }}" class="form-control">
        <div class="modal-footer delCat">

            <button type="button" id="delbtn"
                class="btn btn-primary confirm-delete disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                data-href="{{ route('categories.destroy', $category->id) }}"
                style="display: @if (empty($category->parent_id)) none @endif;"
                {{ $category->sector_status == '0' ? 'disabled' : '' }}>Delete</button>

            <button type="button" id="closebtn"
                class="btn btn-outline-secondary disabledInput {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                {{ $category->sector_status == '0' ? 'disabled' : '' }}>Cancel</button>

            <button id="UpdateFromCategoryform" type="submit"
                class="btn btn-primary disableBTN {{ $category->sector_status == '0' ? 'disableBTN' : '' }}"
                {{ $category->sector_status == '0' ? 'disabled' : '' }}>
                <span id="saveData">{{ translate('Update') }}</span>
                <div class="spinner" style="display: none;"></div>
            </button>
        </div>
    </div>


</form>
<script>
    $(document).ready(function() {
        function runTags() {
            const searchInput = document.getElementById('search-input');
            const suggestionsList = document.getElementById('suggestions-list');
            const inputWrapper = document.querySelector('.input-wrapper');
            let activeSuggestionIndex = -1;
            let selectedItems = [];
            searchInput.addEventListener('input', function() {
                const query = this.value.toLowerCase();
                suggestionsList.innerHTML = '';

                $.ajax({
                    type: 'post',
                    dataType: "json",
                    data: {
                        's': query,
                    },
                    url: "{{ url('admin/categories/fetchbrands') }}",
                    success: function(response) {
                        var data = response.s;
                        check(data);
                    }
                });

                activeSuggestionIndex = -1;

                function check(suggestions) {
                    if (query) {
                        const filteredSuggestions = suggestions.filter(item => item.toLowerCase()
                            .includes(query));

                        if (filteredSuggestions.length > 0) {
                            filteredSuggestions.forEach(item => {
                                const li = document.createElement('li');
                                li.textContent = item;
                                li.classList.add('list-group-item');
                                li.addEventListener('click', function() {
                                    addSelectedItem(item);
                                    searchInput.value = '';
                                    suggestionsList.innerHTML = '';
                                    suggestionsList.classList.remove('show');
                                });
                                suggestionsList.appendChild(li);
                            });
                            suggestionsList.classList.add('show');
                        } else {
                            suggestionsList.classList.remove('show');
                        }
                    } else {
                        suggestionsList.classList.remove('show');
                    }
                };

            });


            searchInput.addEventListener('keydown', function(e) {
                const items = suggestionsList.getElementsByTagName('li');
                if (items.length === 0) return;

                if (e.key === 'ArrowDown') {
                    if (activeSuggestionIndex < items.length - 1) {
                        activeSuggestionIndex++;
                        highlightSuggestion(items, activeSuggestionIndex);
                        ensureVisible(items[activeSuggestionIndex]);
                    }
                    e.preventDefault();
                } else if (e.key === 'ArrowUp') {
                    if (activeSuggestionIndex > 0) {
                        activeSuggestionIndex--;
                        highlightSuggestion(items, activeSuggestionIndex);
                        ensureVisible(items[activeSuggestionIndex]);
                    }
                    e.preventDefault();
                } else if (e.key === 'Enter') {
                    if (activeSuggestionIndex > -1) {
                        addSelectedItem(items[activeSuggestionIndex].textContent);
                        searchInput.value = '';
                        suggestionsList.innerHTML = '';
                        suggestionsList.classList.remove('show');
                    }
                    e.preventDefault();
                }
            });

            function highlightSuggestion(items, index) {
                for (let i = 0; i < items.length; i++) {
                    items[i].classList.remove('active');
                }
                if (index > -1) {
                    items[index].classList.add('active');
                }
            }

            function addSelectedItem(item) {
                if (!selectedItems.includes(item)) {
                    selectedItems.push(item);
                    renderSelectedItems();
                }
            }

            @php

                $cateBrands = $category->brands;
                $cateBrands = explode(',', $cateBrands);
                $cateBrands = array_filter($cateBrands);

            @endphp

            @foreach ($cateBrands as $l)
                selectedItems.push('{{ $l }}');
            @endforeach

            renderSelectedItems();

            function removeSelectedItem(item) {
                selectedItems = selectedItems.filter(i => i !== item);
                renderSelectedItems();
            }

            function ensureVisible(element) {
                const parent = element.parentElement;
                const parentRect = parent.getBoundingClientRect();
                const elementRect = element.getBoundingClientRect();

                if (elementRect.bottom > parentRect.bottom) {
                    parent.scrollTop += elementRect.bottom - parentRect.bottom;
                } else if (elementRect.top < parentRect.top) {
                    parent.scrollTop -= parentRect.top - elementRect.top;
                }
            }

            function renderSelectedItems() {
                const existingItems = inputWrapper.querySelectorAll('.selected-item');
                $(document).find('input[name="brands"]').val(selectedItems.join(','));
                existingItems.forEach(el => el.remove());

                selectedItems.forEach(item => {
                    const div = document.createElement('div');
                    div.classList.add('selected-item');
                    div.textContent = item;
                    const span = document.createElement('span');
                    span.classList.add('remove');
                    span.textContent = 'x';
                    span.addEventListener('click', function() {
                        removeSelectedItem(item);
                    });
                    div.appendChild(span);
                    inputWrapper.insertBefore(div, searchInput);
                });
            }


            function removeDuplicateOptions(select) {
                let seen = new Set();
                $(select).find('option').each(function() {
                    let val = $(this).val();
                    if (seen.has(val)) {
                        $(this).remove();
                    } else {
                        seen.add(val);
                    }
                });
            }

            function initializeSelect2(selector) {
                $(selector).select2({
                    tags: true,
                    insertTag: function(data, tag) {
                        let isDuplicate = data.some(item => item.text.toLowerCase() === tag.text
                            .toLowerCase());
                        if (!isDuplicate) {
                            data.push(tag);
                        }
                    }
                }).on('select2:open select2:select', function() {
                    removeDuplicateOptions(this);
                });
            }
            initializeSelect2('#product_application,#product_use_cases');
            // initializeSelect2('#keywords,#product_application,#product_use_cases'); 
            $('.select2').on('change', function() {
                var $errorElement = $(this).closest('.select2-container').find('.error_class_category');
                var selectedItems = $(this).val();

                if (selectedItems && selectedItems.length > 0) {
                    $errorElement.hide();
                }
            });

        }

        runTags();

        $('.rating-input').on('input', function() {
            this.value = this.value.replace(/[^1-5]/g, '').replace(/e/g, '');
            if (this.value.length > 1) {
                this.value = this.value.slice(0, 1);
            }
        });

        // // Initialize Select2 with Ajax
        // $('#keywords').select2({
        //     tags: true,
        //     ajax: {
        //         url: "{{ url('/admin/category/getKeywords') }}", 
        //         dataType: 'json',
        //         delay: 250,
        //         data: function (params) {
        //             return {
        //                 q: params.term,  
        //                 related_to: 'category'
        //             };
        //         },
        //         processResults: function (data) {
        //             return {
        //                 results: data.map(function(item) {
        //                     return {
        //                         id: item.id, 
        //                         text: item.name
        //                     };
        //                 })
        //             };
        //         },
        //         cache: true
        //     }
        // });

        // // Event listener for creating new tags
        // $('#keywords').on('select2:select', function (e) {
        //     var data = e.params.data;

        //     if (data.id === data.text && data.text.trim() !== "") {
        //         e.preventDefault(); 

        //         $.ajax({
        //             url: "{{ url('/admin/category/getKeywords') }}",  
        //             method: 'POST',
        //             data: {
        //                 name: data.text,
        //                 related_to: 'category',
        //                 _token: '{{ csrf_token() }}'
        //             },
        //             success: function(newItem) {
        //                 if (newItem && newItem.id && newItem.name) {
        //                     var newOption = new Option(newItem.name, newItem.id, false, true);
        //                     $('#keywords').append(newOption).trigger('change');

        //                     var selectedTags = $('#keywords').val() || [];

        //                     if (!selectedTags.includes(newItem.id)) {
        //                         selectedTags.push(newItem.id);
        //                     }

        //                     $('#keywords').val(selectedTags).trigger('change');
        //                 }
        //             },
        //             error: function(xhr, status, error) {
        //                 console.error('Error creating new item:', error);
        //             }
        //         });
        //     }
        // });

        // // Prevent duplicate tags from being added
        // $('#keywords').on('select2:selecting', function (e) {
        //     var data = e.params.args.data;
        //     var selectedTags = $('#keywords').val() || [];

        //     if (selectedTags.includes(data.id)) {
        //         e.preventDefault();  
        //     }
        // });

        // // Event listener for removing empty tags
        // $('#keywords').on('change', function () {
        //     $('#keywords option').each(function() {
        //         if (!$(this).val()) {
        //             $(this).remove(); 
        //         }
        //     });
        // });

        ////PRODUCT APPLICATIONS
        // var catId = $('.UpdateCategoryform').data('id');   
        $('#product_application').select2({
            ajax: {
                url: "{{ url('/admin/category/getApplication') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        type: 'category',
                        // related_categories: catId   
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name
                            };
                        })
                    };
                },
                cache: true
            }
        });

        $('#product_application').on('select2:select', function(e) {
            var data = e.params.data;
            // var catId = $('.UpdateCategoryform').data('id');   

            if (data.id === data.text && data.text.trim() !== "") {
                e.preventDefault();

                $.ajax({
                    url: "{{ url('/admin/category/getApplication') }}",
                    method: 'POST',
                    data: {
                        name: data.text,
                        type: 'category',
                        // related_categories: catId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(newItem) {
                        if (newItem && newItem.name) {
                            var newOption = new Option(newItem.name, newItem.name, false,
                                true);
                            $('#product_application').append(newOption).trigger('change');

                            var selectedTags = $('#product_application').val() || [];

                            if (newItem.name.trim() !== "" && !selectedTags.includes(newItem
                                    .name)) {
                                selectedTags.push(newItem.name);
                            }

                            selectedTags = selectedTags.filter(function(tag) {
                                return tag && typeof tag === 'string' && tag
                                    .trim() !== "";
                            });

                            $('#product_application').val(selectedTags).trigger('change');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error creating new item:', error);
                    }
                });
            }
        });

        $('#product_application').on('select2:selecting', function(e) {
            var data = e.params.args.data;
            var selectedTags = $('#product_application').val() || [];
            if (selectedTags.includes(data.text)) {
                e.preventDefault();
            }
        });

        $('#product_application').on('change', function() {
            $('#product_application option').each(function() {
                if (!$(this).val()) {
                    $(this).remove();
                }
            });
        });

        ////PRODUCT USE CASES
        // var catId = $('.UpdateCategoryform').data('id');  
        $('#product_use_cases').select2({
            ajax: {
                url: "{{ url('/admin/category/getUseCase') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                        type: 'category',
                        // related_categories: catId
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.map(function(item) {
                            return {
                                id: item.id,
                                text: item.name,
                            };
                        })
                    };
                },
                cache: true
            }
        });

        $('#product_use_cases').on('select2:select', function(e) {
            var data = e.params.data;
            // var catId = $('.UpdateCategoryform').data('id');   
            if (data.id === data.text && data.text.trim() !== "") {
                e.preventDefault();

                $.ajax({
                    url: "{{ url('/admin/category/getUseCase') }}",
                    method: 'POST',
                    data: {
                        name: data.text,
                        type: 'category',
                        // related_categories: catId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(newItem) {
                        if (newItem && newItem.name) {
                            var newOption = new Option(newItem.name, newItem.id, false,
                                true);
                            $('#product_use_cases').append(newOption).trigger('change');

                            var selectedTags = $('#product_use_cases').val() || [];

                            if (newItem.id.trim() !== "" && !selectedTags.includes(newItem
                                    .id)) {
                                selectedTags.push(newItem.id);
                            }

                            selectedTags = selectedTags.filter(function(tag) {
                                return tag && typeof tag === 'string' && tag
                                    .trim() !== "";
                            });

                            $('#product_use_cases').val(selectedTags).trigger('change');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error creating new item:', error);
                    }
                });
            }
        });

        $('#product_use_cases').on('select2:selecting', function(e) {
            var data = e.params.args.data;
            var selectedTags = $('#product_use_cases').val() || [];
            if (selectedTags.includes(data.text)) {
                e.preventDefault();
            }
        });

        $('#product_use_cases').on('change', function() {
            $('#product_use_cases option').each(function() {
                if (!$(this).val()) {
                    $(this).remove();
                }
            });
        });

        var baseUrl = "{{ config('app.front_url') }}category/";

        function URLKeySuggestion() {
            var urlKey = $('#url_key').val().replace(/\s+/g, '-');
            if (urlKey !== '') {
                var suggestion = baseUrl + urlKey;
                $('#url_suggestions').html('<p>URL: <a href="' + suggestion + '" target="_blank">' +
                    suggestion + '</a></p>');
            } else {
                $('#url_suggestions').empty();
            }
        }

        $('#url_key').on('input', function() {
            URLKeySuggestion();
        });

        $('#url_key').on('mouseover', function() {
            URLKeySuggestion();
        });

        $('#url_key').on('mouseout', function() {
            $('#url_suggestions').empty();
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.UpdateCategoryform input, .UpdateCategoryform textarea').on('input', function() {
            $('#UpdateFromCategoryform').removeClass('disableBTN');
        });
    });

    document.getElementById('submit').addEventListener('click', function(e) {
        e.preventDefault(); // Prevent default button action

        // Ensure the file input is not empty before submitting
        var fileInput = document.getElementById('fileInput');
        if (fileInput.files.length === 0) {
            alert('Please select a file to import!');
            return;
        }

        // Manually submit the form
        this.closest('form').submit();
    });
</script>