@extends('layouts.main')
@section('title', 'Business Category Management')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/select2/dist/css/select2.min.css') }}">
        @livewireStyles()
    @endpush

    <div id="loaderEl">
        <x-loader/>
    </div>
    <div class="container-fluid">
        <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName"/>
        @include('include.message')

        <livewire:wire-manage-business-categories/>
    </div>
    <!-- push external js -->
    @push('script')
    <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('plugins/DataTables/Cell-edit/dataTables.cellEdit.js') }}"></script>
    <!--server side permission table script-->
    <script src="{{ asset("js/custom.js") }}"></script>
    <script src="{{ asset('js/permission.js') }}"></script>

    <script>
        function initializeBusinessCategoryServiceDatatable () {
            const columns = [
                {
                    data: "id",
                    name: "id",
                    searchable: true,
                    orderable: true,
                },
                {
                    data: 'name',
                    name: 'name',
                    searchable: true,
                    orderable: true
                },
                {
                    data: 'services',
                    name: 'Assigned Services',
                    searchable: false,
                    orderable: false,
                },
                // {
                //     data: 'actions',
                //     name: 'actions',
                //     searchable: false,
                //     orderable: false,
                // }
            ];
            $("#business_category_service").DataTable({
                ...dataTableConfig(true),
                order: [
                    [0, 'asc']
                ],
                ajax: {
                    url: "{{ route("business-category-management.getDatatable") }}",
                    type: "get",
                },
                columns,
                ...generateSerialNumber
            });

        }
        document.addEventListener('DOMContentLoaded', function () {
            document.body.classList.add("sidebar-mini");
            $("#loaderEl").addClass("d-none");

            initializeBusinessCategoryServiceDatatable();


            const businessCategorySelect = $('.businessCategorySelectField');
            const serviceSelect = $('.serviceSelectField');

            serviceSelect.attr('disabled', true);
            businessCategorySelect.select2({
                allowClear: true,
                placeholder: "Select a Business Category",
                ajax: {
                    url: "{{route('business-category-management.search')}}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        var query = {
                            search: params.term,
                            type: 'business-category',
                            page: params.current_page ? params.current_page + 1: 1
                        }
                        return query;
                    },
                    processResults: function (data, params) {
                        params.current_page = data.meta.current_page;
                        console.log((data.meta.current_page * data.meta.per_page) < data.meta.total);
                        return {
                            results: data.data,
                            pagination: {
                                more: (data.meta.current_page * data.meta.per_page) < data.meta.total
                            }
                        };
                    },
                    // cache: true,

                }
            });

            businessCategorySelect.on('select2:select', function (element) {
                serviceSelect.removeAttr('disabled');
                $.ajax({
                    url:"{{route('business-category-management.search')}}",
                    dataType: 'json',
                    delay: 250,
                    data: {
                        type: "linked-services",
                        business_category_id: businessCategorySelect.val(),
                    },
                    success: function (linkedServices) {
                        serviceSelect.empty();
                        // serviceSelect.select2();
                        console.log(linkedServices.data);
                        linkedServices.data.forEach(linkedService => {
                            var option = new Option(linkedService.text, linkedService.id, true, true);
                            // $(option).data('pagination', true);
                            serviceSelect.append(option).trigger('change');
                            serviceSelect.trigger({
                                type: 'select2:select',
                                params: {
                                    data: linkedService
                                }
                            });
                        });

                    },
                    error: function(xhr, status, error) {
                        serviceSelect.empty();
                        serviceSelect.val('').trigger('change');
                    },

                });
            });

            businessCategorySelect.on('select2:clear', function (element) {
                serviceSelect.attr("disabled", "disabled");
            });

            $('.serviceSelectField').select2({
                allowClear: true,
                ajax: {
                    url: "{{route('business-category-management.search')}}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        var query = {
                          search: params.term,
                          type: 'all-services',
                          business_category_id: businessCategorySelect.val(),
                          page: params.current_page ? params.current_page + 1: 1
                        }
                        return query;
                    },
                    processResults: function (data, params) {
                        params.current_page = data.meta.current_page;
                        console.log((data.meta.current_page * data.meta.per_page) < data.meta.total);
                        console.log(data.data);
                        return {
                            results: data.data,
                            pagination: {
                                more: (data.meta.current_page * data.meta.per_page) < data.meta.total
                            }
                        };
                    },
                    // cache: true,

                    // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                }
            });

            onCustomEvent('click', '.editBusinessCategory', function (element) {
                var id = element.target.getAttribute('data-business-category-id');
                var name = element.target.getAttribute('data-business-category-name');
                var data = {
                    id: id,
                    text: name
                };

                var option = new Option(data.name, data.id, true, true);
                console.log(data);
                businessCategorySelect.empty();
                businessCategorySelect.append(option).trigger('change');
                businessCategorySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });

            // $('.editBusinessCategory').on('click', function (element) {
            //     alert('here');
            //     let id = element.target.getAttribute('data-business-category-id');
            //     let name = element.target.getAttribute('data-business-category-name');
            //     let data = [id, name];

            //     var option = new Option(data.name, data.id, true, true);
            //                 serviceSelect.append(option).trigger('change');
            //                 serviceSelect.trigger({
            //                     type: 'select2:select',
            //                     params: {
            //                         data: data
            //                     }
            //                 });
            // });

            Livewire.on('redrawDataTable', (msg)=> {
                redrawTable('business_category_service');
            });

            Livewire.on('resetSelect', function () {
                businessCategorySelect.empty();
                serviceSelect.empty();
            });


            alertSuccessMsg();

            alertErrorMsg();
        });
    </script>


    @livewireScripts()
    @endpush
@endsection