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

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

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

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

        .cat_assbtn {

            padding: 5px 8px;
        }

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

        #add_attr {

            display: none;
        }

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

        .att_move:hover {
            color: white;
        }

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

        form#myform {
            display: none;
        }

        .icon-delete:before {
            font-size: 16px
        }
        #submit{
            padding:2px 5px;
            font-size:14px;
            margin-left:5px;
        }
    </style>

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

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

                                        <ul tabindex="0" class="CategoryList c-scrollbar mainCategory w-100"
                                            name="category" id="tabindex0">
                                            @foreach ($approvedList as $cate)
                                                <li data-id="{{ $cate->id }}"
                                                    class="{{ $cate->sector_status == '0' ? 'disableSec' : '' }} attrhover"
                                                    style="position: relative; cursor: pointer; border-radius: 7px;">
                                                    @if (!empty($cate->iconImg))
                                                        <span id="{{ $cate->id }}" class="cateProdpic">
                                                            <img class="img-fluid" src="{{ $cate->iconImg->source }}">
                                                        </span>
                                                        <span id="{{ $cate->id }}"
                                                            class="prodCateName">{{ $cate->name }}</span>
                                                    @else
                                                        <span class="cateProdpic">
                                                            <img class="img-fluid" src="{{ url($cate->icon) }}">
                                                        </span>
                                                        <span id="{{ $cate->id }}" class="prodCateName"
                                                            style="display: flex; justify-content: space-between; padding-left: 0px;">
                                                            {{ $cate->name }}
                                                        </span>
                                                    @endif
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <span class="error_class_category text-danger errortextstyle"
                                        style="margin-top: 1px;display:none;" id="errorcategory"></span>
                                </div>
                                <div class="offset-subcate c-scrollbar " style="padding-bottom:0px;">
                                    <div class="subCateCol NormalSelectorWrapper">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="productListData" class="loader_seller justify-content-center align-items-center"
     style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(255, 255, 255, 0.6); z-index: 9999; display: none;">
    
    <div id="loader" style="text-align: center;">
        <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
    </div>
</div>

                <div class="row category_breadcrum categoryStyle my-3 mx-0" style="display: none;align-items:center;">
                    <div class="col-sm-12 col-md-3 col-lg-2 px-0">
                        <p class="m-0 attributeListHeading">Selected Category:</p>
                    </div>
                    <div class="col-sm-12 col-md-9 col-lg-10 pl-0">
                        <div style="background: #edebeb;border-radius:6px;width:100%" class="p-2">
                            <div id="breadcrumps" style="align-items: center">
                                <div id="breadcrumps_tree" class="breadcrumbsStyle c-scrollbar" style="width: 92%"></div>
                             
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-md-3">
    <form method="POST" enctype="multipart/form-data" id="export_form" class="d-flex flex-wrap align-items-center gap-2 w-100">
        @csrf
        
        <!-- Export Type -->
        <select name="export_type" id="export_type" class="form-select form-select-sm flex-grow-1" required>
            <option value="" disabled selected hidden>Export Type</option>
            <option value="products">Products</option>
            <option value="attributes">Attributes</option>
            <option value="brands">Brand</option>
            <option value="categories">Category</option>
        </select>

        <!-- File Type -->
        <select name="file_type" id="file_type" class="form-select form-select-sm flex-grow-1" required>
            <option value="csv">CSV</option>
            <option value="xlsx">XLSX</option>
            <option value="xlsx">XLS</option>
          
          
        </select>

        <!-- Hidden Category -->
        <select name="category" id="category_ids" class="d-none">
            <option value=""></option>
        </select>

        <!-- Submit Button -->
        <button type="button" id="submit" class="btn btn-sm btn-danger">
            Export<i class='fas fa-file-export' style='font-size:24px;font-size:12px;margin-left:5px'></i>
        </button>

        <!-- Error Message -->
        @error('type')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </form>
</div>





@endsection

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

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

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

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

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

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

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

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

                            breadcrumbUl.append(li);

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

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

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

                var dataIdString = dataIds.join(',');
              
                $('#category_ids option').val(dataIdString);

                

            }

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

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

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

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

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

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

                if (length > maxLength) {
                    $('#category_message').text('Category name must be of 100 characters').addClass(
                        'text-danger').show();
                    if (e.type === 'keydown' && e.key === 'Enter') {
                        e.preventDefault();
                    }
                } else {
                    $('#category_message').text('').removeClass('text-danger').hide();
                }
            });

  $(document).on('click', '#submit', function(e) {
    e.preventDefault();

    let export_type = $('#export_type').val();

    if ($('.CategoryList li.attrActive').length === 0) {
        AIZ.plugins.notify('danger', 'Select Category');
        return;
    }

    if (!export_type) {
        AIZ.plugins.notify('danger', 'Select Export Type');
        return;
    }

    let url = "{{ url('admin/export/data') }}";
    let formData = new FormData($('#export_form')[0]);

    $.ajax({ 
        url: url,
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        xhrFields: {
            responseType: 'blob'
        },
        beforeSend: function() {
            // Show loader with flex
            $('#productListData').addClass('d-flex').show();
        },
        complete: function() {
            // Hide loader and remove flex
            $('#productListData').removeClass('d-flex').hide();
        },
        success: function(response, status, xhr) {
            const blob = new Blob([response]);
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            
            // Get filename from response headers
            const disposition = xhr.getResponseHeader('Content-Disposition');
            let filename = 'export.xlsx';
            if (disposition) {
                const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(disposition);
                if (matches != null && matches[1]) {
                    filename = matches[1].replace(/['"]/g, '');
                }
            }
            
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            
            AIZ.plugins.notify('success', 'Data Exported successful!');
        },
        error: function(xhr) {
            AIZ.plugins.notify('danger', 'Something went wrong!');
            console.error(xhr.responseText);
        }
    });
});



        });
  
    </script>
@endsection