@extends('backend.layouts.app')

@section('content')
@section('page-css')
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet" />
@endsection

@php
    use App\Upload;
    $getAllProfileImage = [];
@endphp

{{-- New Design --}}

<div class="admin-list-table pt-0 border-0">
    <div class="d-flex align-items-center py-3 tableTab-freeze">
        <div class="common-tbl-head m-0 ml-1">
            <div class="common-tbl-heading">{{ translate('All Brands') }}</div>
            <div class="selected-prod" style="display:none">Selected Brands (<span id="sProduct">0</span>)</div>
            <div class="delete-select" id="deletedData" style="display:none"><a href="javascript:void(0);"
                    id="delete_records">Delete Selected <i class="icons icon-delete"></i></a></div>

            <div class="table-search ml-auto">
                <i class="icons icon-search-s" id="memberSearch"></i>
                <input type="text" class="form-control form-control-sm searching" id="search" name="search"
                    @isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="Search">
            </div>
        </div>
        <a href="javascript:void(0);" class="add-items-btn ml-auto clearForm" data-toggle="modal"
            data-target="#newAttributes-modal">
            <span><i class="icons icon-plus"></i></span> Add New Brand
        </a>
    </div>

    <div class="admin-table table-freezed" id="brandsData">
        <div class="loader_main"
            style="  position: relative;top: 50%;left: 40%;transform:translate(50%, 50%);width: 100px;height:50vh;text-align: center;">
            <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
    </div>
</div>
@endsection

@section('modal')
@include('modals.delete_modal')

<style>
    .spinner {
        border: 2px solid #fff;
        border-top: 2px solid #000;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 2s linear infinite;
    }
    a.block-link.blockStatus.brandunapproved.disabled-link {
    pointer-events: none;
}
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
<!--Specification section End-->
<div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding: 16px ">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class=""
                    style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Add
                    New Brand</h4>
            </div>
            <div class="modal-body pt-1" style="padding: 16px ">
                @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 method="POST" id="myform" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Name') }}<span
                                class="text-danger ml-1">*</span>
                        </label>
                        <input type="text" placeholder="{{ translate('Name') }}" name="name" id="name"
                            class="form-control" required>
                        <span class="error_class_category text-danger errortextstyle"
                            style="margin-top: 1px;display:none;" id="errorname"></span>
                    </div>
                    <div class="mb-3">
                        <label for="name" class="labelstyle">{{ translate('Categories') }}</label>
                        {{-- <input type="text" class="form-control aiz-tag-input" id="categories" name="categories" placeholder="{{ translate('Categories') }}" > --}}
                        <select class="form-control select2 select2me" multiple="multiple"
                            data-placeholder="Select or type keywords" style="width: 100%;" name="categories[]"
                            id="categories">
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Logo') }}
                            <small>({{ translate('120x80') }})</small><span class="text-danger ml-1">*</span>
                        </label>
                        <label for="brand_image" style="display: block">
                            <div class="error-text" data-toggle="" data-imgtype="1" id="" data-type="image">
                                <div class="input-group-prepend"
                                    onclick="$('#brand_image').trigger('click'); return true;">
                                    <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" id="customFile"
                                        onclick="$('#brand_image').trigger('click'); return true;"
                                        style="border-top-right-radius:4px;border-bottom-right-radius:4px;border-top-left-radius: 0px !important;border-bottom-left-radius:0px !important;border-left:none;overflow: hidden;text-overflow: ellipsis;width: 100%;
                                        white-space: nowrap;">
                                        {{ translate('Choose File') }}
                                    </div>
                                    <input type="file" name="logo" class="form-control image" id="brand_image"
                                        style="display:none" multiple>
                                </div>
                                <span class="error_class_category text-danger errortextstyle"
                                    style="margin-top: 1px;display:none;" id="errorfile"></span>
                            </div>
                        </label>
                        @if ($errors->has('logo'))
                            <span class="error_class_category text-danger"
                                style="margin-top: 1px">{{ $errors->first('image') }}</span>
                        @endif
                    </div>
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Alt Text') }}<span
                                class="text-danger ml-1">*</span>
                        </label>
                        <input type="text" placeholder="{{ translate('Alt Text') }}" name="alt_text"
                            id="alt_text" class="form-control" required>
                        <span class="error_class_category text-danger errortextstyle"
                            style="margin-top: 1px;display:none;" id="erroralt_text"></span>
                    </div>
                    <div class="mb-2 ">
                        <label for="name" class="labelstyle">{{ translate('Linked Companies') }}</label>
                        <input type="text" class="form-control aiz-tag-input" id="linked_companies"
                            name="linked_companies" placeholder="{{ translate('Linked Companies') }}">
                    </div>
                    {{-- <div class="mb-2">
                        <label for="name" class="labelstyle">{{ translate('Products') }}</label>
                        <input type="text" class="form-control aiz-tag-input" id="products" name="products" placeholder="{{ translate('Products') }}" >
                    </div> --}}
                    {{-- <div class="mb-2">
                        <label for="name" class="labelstyle">{{ translate('Related Categories') }}</label>
                        <input type="text" class="form-control aiz-tag-input" id="related_categories" name="related_categories" placeholder="{{ translate(' ') }}" >
                    </div> --}}

                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Description') }}</label>
                        <textarea name="description" id="description" rows="5" class="form-control"></textarea>
                        <span id="description" class=""></span>
                    </div>

                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Meta Title') }}</label>
                        <input type="text" class="form-control" id="meta_title" name="meta_title"
                            placeholder="{{ translate('Meta Title') }}">
                    </div>

                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Meta Keywords') }}</label>
                        <input type="text" class="form-control aiz-tag-input" id="meta_keywords"
                            name="meta_keywords" placeholder="">
                    </div>

                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Meta Description') }}</label>
                        <textarea name="meta_description" id="meta_description" rows="5" class="form-control"></textarea>
                        <span id="meta_description_message" class=""></span>
                    </div>

                    <div class="col-12 p-0">
                        <div style="position:relative;width:100%;">
                            <label class="col-form-label"
                                style="font-size:14px;font-weight:600;margin:0 0 6px 0px;">{{ translate('Related Keywords with Ratings') }}</label>
                            <div id="keywords-container">
                                <div class="input-group mb-2 keyword-rating-pair">
                                    <input type="text" class="form-control" name="keywords[]"
                                        placeholder="Name" />
                                    <input type="text" class="form-control ml-2 rating-input" name="ratings[]"
                                        placeholder="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>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3 text-right">
                        <button type="button" data-dismiss="modal" id="resetFilter"
                            class="btn btn-outline-secondary"
                            style="display: inline;margin:0px .28rem;">Cancel</button></a>
                        <button type="submit" id="btnSendData" class="btn btn-primary" tabindex="6"
                            style="min-width:74.59px;width:74.59px;min-height:42.19px;text-align:-webkit-center;">
                            <span id="saveData">{{ translate('Save') }}</span>
                            <div class="spinner" style="display:none;text-align:center;"></div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Update Modal --}}

<div class="modal right fade  newAttributes-modal1" data-refresh="true" id="newAttributes-modal1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding: 16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class=""
                    style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">
                    Edit Brand</h4>
            </div>
            <div class="modal-body pt-1" id ="editData" style="padding:16px;">
            </div>
        </div>
    </div>
</div>
<div class="modal fade " id="confirm-ban">
        <div class=" modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h6">{{ translate('Block Confirmation') }}</h5>
                    <button type="button" class="close" data-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <p id="confirm-ban-message" class="m-0">{{ translate('Do you really want to block this brand?') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary mt-2" data-dismiss="modal">{{translate('Cancel')}}</button>
                    <button id="confirmation" class="btn btn-primary mt-2">{{translate('Proceed!')}}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script type="text/javascript">
function update_approval_status(el) {
    var status = el.checked ? 1 : 0;
    var $row = $(el).closest('tr'); // Find the closest row to the clicked checkbox

    $.post('{{ route('brands.approved') }}', {
        _token: '{{ csrf_token() }}',
        id: el.value,
        status: status
    }, function(data) {
        if (data == 1) {
            var $statusText = $row.find('#app_status'); // Find the status text 
            if (status === 1) {
                $statusText.text('Approved').removeClass('badge-pending').addClass('badge-publish');
                AIZ.plugins.notify('success', '{{ translate('Brand Status Approved successfully') }}');
                dataList();
            } else {
                $statusText.text('Pending').removeClass('badge-publish').addClass('badge-pending');
                AIZ.plugins.notify('success', '{{ translate('Brand Status UnApproved successfully') }}');
            }
        } else {
            AIZ.plugins.notify('danger', '{{ translate('Something went wrong') }}');
        }
    });
}
$(document).ready(function () {
    localStorage.removeItem('paginationURL');
});
    $(document).ready(function() {
        @if (empty(request()->notify))
            dataList();
        @endif

        // Ajax function Data

                    function dataList(data, url) {
                    if (url) {
                        localStorage.setItem('paginationURL', url);
                    }

                    var ajaxUrl = localStorage.getItem('paginationURL') || "{{ url('/admin/brands/ajax_data_brands') }}";

                    $.ajax({
                        url: ajaxUrl,
                        data: data,
                        type: 'GET',
                        success: function(response) {
                            $("#brandsData").html(response);
                        }
                    });
                }


        function sort_brands(el) {
            $('#sort_brands').submit();
        }

        $(document).on('click', '.clearForm', function() {
            document.getElementById("myform").reset();
            $('#customFile').text('Choose File');
            $('#meta_description_message').hide();
            $('#errorname').hide();
            $('#errorfile').hide();
            $('#keywords-container').children(':not(:first)').remove();
            removedKeywordIds = [];
            $('#removed_keyword_ids').val('');
        });

        @if (request()->notify)
            var user = '{{ request()->notify }}';
            if (user) {
                var url = "{{ url('/admin/brands/ajax_data_brands') }}";
                var data = {
                    'search': user
                };
                dataList(data, url);

            }
        @endif

        $(document).on("keypress", "input[name='search']", function(event) {
            if (event.keyCode == 13) {
                var searchTerm = $("input[name='search']").val();
                memberSearchAjax(searchTerm);
            }
        });

        $(document).on("click", "#memberSearch", function(event) {
            var searchTerm = $("input[name='search']").val();
            memberSearchAjax(searchTerm);
        });

        var typingTimer;
        var doneTypingInterval = 1000;

        function memberSearchAjax(searchTerm) {
            var url = "{{ url('admin/brands/ajax_data_brands') }}";
            if (searchTerm) {
                var data = {
                    'search': searchTerm
                };
                dataList(data, url);
            } else {
                var data = {
                    'search': ''
                };
                dataList(data, url);
            }
        }

        $('#name,#meta_title ,#meta_description').keyup(function() {
            var inputValue = $(this).val();
            if (inputValue.startsWith(' ')) {
                $(this).val('');
                return false;
            }
            inputValue = inputValue.replace(/(\s)\s+/g, '$1');
            $(this).val(inputValue);
        });

        $(document).on('change', '#brand_image', function() {
            var fileName = $(this).val().split('\\').pop();
            $(this).siblings('.file-amount').html(fileName);
        });

        $(document).on('click', '#resetFilter', function() {
            $("#newAttributes-modal").modal('hide');
            // $('#myform')[0].reset();
            // $('#customFile').text('{{ translate('Choose File') }}');
            // $('#meta_description_message').hide();
            // $('#errorfile').hide();
        });

        $(document).on('click', '#btnSendData', function(event) {
            event.preventDefault();
            var form = $('#myform')[0];
            var formData = new FormData(form);

            $("#errorname").css("display", "none").text('');
            $("#errorfile").css("display", "none").text('');

            $(".spinner").show();
            $("#saveData").hide();

            $.ajax({
                url: "{{ route('brands.store') }}",
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {
                    if (data.error) {
                        $("#errorname").css("display", "block").text(data.error.name);

                        $("#errorfile").css("display", "block").text(data.error.logo);
                    } else {
                        $("#newAttributes-modal").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success',
                            '{{ translate('Brand created successfully') }}');
                        $('#myform').reset();

                    }
                },
                error: function(error) {
                    console.log(error.name);
                },
                complete: function() {
                    // Hide the spinner
                    $(".spinner").hide();
                    $("#saveData").show();
                }
            });
        });

        $(document).on('input', '.form-control', function() {
            $(this).closest('.error-text').find('.error_class_category').hide();
        });


        $(document).on('click', '#editUnit', function(e) {
            var url = $(this).data('url');
            $.ajax({
                url: url,
                type: 'get',
                success: function(e) {
                    $("#editData").html(e);
                    $('.select2').select2();
                    initializeSelect2();
                    AIZ.plugins.tagify();

                }
            });
        });

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

            event.preventDefault();
            var url = $('#myform1').attr('action');
            var form = $('#myform1')[0];
            var formData = new FormData(form);

            $("#errorname1").css("display", "none").text('');
            $("#errorfile1").css("display", "none").text('');
            //$("#errorfile1").css("display", "none").text('');

            $(".spinner").show();
            $("#UpdateData").hide();

            $.ajax({
                url: url,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {
                    if (data.error) {
                        $("#errorname1").css("display", "block").text(data.error.name);
                        $("#erroralt_text").css("display", "block").text(data.error.alt_text);
                        $("#errorfile1").css("display", "block").text(data.error.logo);
                    } else {
                        $("#newAttributes-modal1").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success',
                            '{{ translate('Brand updated successfully') }}');
                        dataList();
                    }
                },
                error: function(error) {
                    console.log(error.name);
                },
                complete: function() {
                    // Hide the spinner
                    $(".spinner").hide();
                    $("#UpdateData").show();
                }
            });
        });


        $(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(data) {
                    $("#brandsData").html(data);
                }
            });

            $('#sProduct').text('0');
            $('#deletedData').hide();
            $('#restoreData').hide();
        });



        // Data Delete
        $(document).on('click', '#deletebtn', function() {

            var url = $(this).data('href');
            var checkThis = $(this);
             checkThis.closest('tr').addClass('active');


            $('#delete-modal').modal({
                backdrop: 'static',
                keyboard: false
            }).off('click', '#delete-link').on('click', '#delete-link', function(e) {
                e.preventDefault();
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(response) {
                        $('#delete-modal').modal('hide');
                        AIZ.plugins.notify('success',
                            '{{ translate('Brand deleted successfully') }}');
                        $("#sProduct").text("0");
                        $("#deletedData").hide();
                        $("#search").val("");
                        checkThis.closest('tr').hide();


                        dataList();
                    },
                    error: function(error) {
                        if (error.responseJSON && error.responseJSON.message) {
                            AIZ.plugins.notify('danger', error.responseJSON
                                .message); // Show the custom error message
                        } else {
                            AIZ.plugins.notify('danger',
                                '{{ translate('Failed to delete the brand') }}'
                            ); // Default message if no custom message
                        }
                    }
                });
            });

            $('#close,.close').one('click', function (e) {
        checkThis.closest('tr').removeClass('active');
     });
        });


        // 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, .selected-prod").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, .selected-prod").css("display", "none");
            } else {
                $("#deletedData, .selected-prod").css("display", "block");
            }
        });

        $(document).on('click', '#delete_records', function() {
            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').one('click', function(e) {
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ url('/admin/brands/brand_multi_delete') }}",
                        cache: false,
                        data: 'emp_id=' + selected_values,

                        success: function(response) {
                            AIZ.plugins.notify('success',
                                '{{ translate('Brands Deleted successfully') }}'
                            );
                            $("#sProduct").text("0");
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                            $("#search").val("");
                            dataList();
                            // $(document).find('#memberSearch') .trigger('click');

                            //dataList();
                        },
                        error: function(error) {

                            if (error.responseJSON && error.responseJSON.message) {
                                AIZ.plugins.notify('danger', error.responseJSON
                                    .message);
                            } else {
                                AIZ.plugins.notify('danger',
                                    '{{ translate('Failed to delete the brand') }}'
                                );
                            }
                        }
                    });
                });
            }
        });

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

        function checkErrors() {
            var metaDescriptionError = $('#meta_description_message').hasClass('text-danger') || $(
                '#meta_description_message_update').hasClass('text-danger');
            var imageError = $("#errorfile").is(":visible") || $("#errorfile1").is(":visible");

            if (metaDescriptionError || imageError) {
                $('#btnSendData').attr('disabled', true).addClass('disableBTN');
                $('#updateBrand').attr('disabled', true).addClass('disableBTN');
            } else {
                $('#btnSendData').attr('disabled', false).removeClass('disableBTN');
                $('#updateBrand').attr('disabled', false).removeClass('disableBTN');
            }
        }

        $(document).on('input', '#meta_description, #meta_description_update', function() {
            if ($(this).val().trim() !== '') {
                $('#meta_description_message').show();
            } else {
                $('#meta_description_message').hide();
            }
            var maxLength = 150;
            var length = $(this).val().length;
            var remainingCharacters = maxLength - length;

            if (remainingCharacters >= 0) {
                $('#meta_description_message, #meta_description_message_update').text(
                    'Remaining characters: ' + remainingCharacters);

                $('#meta_description_message,#meta_description_message_update').removeClass(
                    'text-danger');
            } else {
                $('#meta_description_message,#meta_description_message_update').text(
                    'Max Characters Limit Reached!');
                $('#meta_description_message,#meta_description_message_update').addClass('text-danger');
            }

            if (remainingCharacters === 0) {
                $('#meta_description_message,#meta_description_message_update').text('');
            }
            checkErrors();
        });

        /////// Change Image When Upload in ADD

        $(document).on('change', '#brand_image', function() {
            var file = this.files[0];

            if (file) {
                var allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
                if (allowedTypes.indexOf(file.type) === -1) {
                    $("#errorfile").css("display", "block").text(
                        "The logo must be a file of type: jpeg, png, gif, jpeg, svg.");
                    checkErrors();
                    return;
                }
                var maxSize = 1000 * 1024;
                if (file.size > maxSize) {
                    $("#errorfile").css("display", "block").text(
                        "The logo may not be greater than 500 KB.");
                    checkErrors();
                    return false;
                }
                //$("#errorfile").css("display", "none").text("");
                $(document).find('#btnSendData').attr('disabled', false);
                var fileName = $(this).val().split('\\').pop();
                $(this).siblings('.file-amount').html(fileName);
                readURL(this);
            }
            checkErrors();
        });

        ////// Change Image When Upload in EDIT

        $(document).on('change', '#myfield', function() {
            var file = this.files[0];

            if (file) {
                var allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'];
                if (allowedTypes.indexOf(file.type) === -1) {
                    $("#errorfile1").css("display", "block").text(
                        "The logo must be a file of type: jpeg, png, gif, jpeg, svg.");
                    checkErrors();
                    return false;
                }
                var maxSize = 1000 * 1024;
                if (file.size > maxSize) {
                    $("#errorfile1").css("display", "block").text(
                        "The logo may not be greater than 500 KB.");
                    checkErrors();
                    return false;
                }
                $("#errorfile1").css("display", "none").text("");
                $(document).find('#updateBrand').attr('disabled', false);

                var fileName = $(this).val().split('\\').pop();
                $(this).siblings('.file-amount').html(fileName);
                $('.brand-image').removeClass('d-none');

                readURL(this);
            }
            checkErrors();
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#previewImage').attr('src', e.target.result).show();
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        $('#categories').select2({
            tags: false,
            ajax: {
                url: "{{ url('/admin/related-category') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term,
                    };
                },
                processResults: function(data) {
                    return {
                        results: data,
                    };
                },
                cache: true
            }
        });


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

        function initializeSelect2() {
            $('#categoriesbrand').select2({
                tags: false,
                ajax: {
                    url: "{{ url('/admin/related-category') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data,
                        };
                    },
                    cache: true
                }
            });

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

        $('.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);
            }
        });

         ////// Keywords with rating
 let removedKeywordIds = []; 
        $(document).on('click', '.remove-keyword-rating', function() {
            let masterId = $(this).closest('.keyword-rating-pair').find('input[name="master_id[]"]')
                .val();

            if (masterId) {
                removedKeywordIds.push(masterId);
            }

            $(this).closest('.keyword-rating-pair').remove();
            $('#removed_keyword_ids').val(removedKeywordIds.join(','));

            updateButtons(); //temp
        });


        //ADD BUTTON
        /*
        $(document).on('click', '.add-keyword-rating', function() {
           
            let newPair = $('.keyword-rating-pair:first').clone(true); 
            var a =  $('.keyword-rating-pair:first').length;
            newPair.find('input').val(''); 
            newPair.find('.remove-keyword-rating').remove();
            newPair.find('.add-keyword-rating').remove(); 
            newPair.find('.input-group-append').append('<button class="btn btn-danger remove-keyword-rating" type="button">Remove</button>');
 
            $('#keywords-container').append(newPair);
        }); 
        */

       // Add keyword-rating pair
        $(document).on('click', '.add-keyword-rating', function() {
            let newPair = $('.keyword-rating-pair:first').clone(true);
            newPair.find('input').val('');
            newPair.find('.input-group-append').empty();
            newPair.find('.input-group-append').append(`
                <button class="btn btn-danger remove-keyword-rating" type="button">Remove</button>
            `);
            $('#keywords-container').append(newPair);
             
            updateButtons(); //temp
        }); 

        // Function to update the buttons: add "Add" only to the last pair
        function updateButtons() {
            let pairs = $('.keyword-rating-pair');
    
            pairs.each(function(index) {
                $(this).find('.input-group-append').empty(); // Clear buttons first

                if (pairs.length === 1) {
                    // If only one pair is left, only show the "Add" button
                    $(this).find('.input-group-append').append(`
                        <button class="btn AddMore add-keyword-rating" type="button">Add More</button>
                    `);
                } else if (index === pairs.length - 1) {
                    // If it's the last pair, show both "Add" and "Remove" buttons
                    $(this).find('.input-group-append').append(`
                        <button class="btn RemoveBTN remove-keyword-rating" type="button">Remove</button>
                        <button class="btn AddMore add-keyword-rating" type="button">Add More</button>
                    `);
                } else {
                    // All other pairs should only have "Remove"
                    $(this).find('.input-group-append').append(`
                        <button class="btn RemoveBTN remove-keyword-rating" type="button">Remove</button>
                    `);
                }
            });
        }
        
        $(document).on('click', '.brandunapproved', function () {
    var url = $(this).data('url');
    var brandId = $(this).data('id'); // brand ID from data attribute
    var currentApprovalStatus = $(this).data('status'); // expected values: 1 = approved, 2 = rejected
    var checkThis = $(this);
    
    
    var isUnblock = checkThis.find('i').hasClass('unblock');
    if (isUnblock) {
        $('#confirm-ban-message').text('Do you really want to un-block this member?');
    }

    $('#confirm-ban').modal({
        backdrop: 'static',
        keyboard: false
    }).one('click', '#confirmation', function (e) {
        $.ajax({
            url: '{{ url('admin/update-brand-approval') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                brand_id: brandId,
                approval_status: 2
            },
            success: function (response) {
                if (response.success) {
                   
                    checkThis.addClass('unblock ');
                    $('#confirm-ban').modal('hide');
                        $('.modal-backdrop').hide();

                        $statusText.text('Approved').removeClass('badge-pending').addClass('badge-publish');
             
                    checkApprovalStatus();
              

                    AIZ.plugins.notify('success', 'Brand approval status Rejected ');
                } else {
                    alert('Error updating approval status.');
                }
            },
            error: function () {
                alert('Error processing the request.');
            },
            complete: function () {
                button.data('processing', false);
            }
        });
    });
});


        updateButtons(); //temp
    });
</script>
@endsection