@extends('layouts/contentLayoutMaster')

@section('title', __('locale.SuppliersProducts'))

@section('vendor-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')
    <!-- users list start -->
    <section class="suppliers-list">
        <!-- list and filter start -->
        <div class="card">
            <div class="card-body border-bottom">
                <h4 class="card-title">{{ __('locale.Sla') }}</h4>
                <div class="row">
                    <div class="col-md-5 company_status"></div>
                </div>
            </div>
            <div class="card-datatable table-responsive pt-0">
                <table class="user-list-table table">
                    <thead class="table-light">
                        <tr>
                            <th>{{ __('locale.Table.Supplier.Sla.Label.Code') }}</th>
                            <th>{{ __('locale.Table.Supplier.Sla.Label.Request_Type') }}</th>
                            <th>{{ __('locale.Table.Supplier.Sla.Label.Actions') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!-- list and filter end -->
    </section>

    <x-supplier.sla 
    :supplier="$supplier" 
    :sla="$sla" 
    :typerequests="$typerequests" 
    :typeintegrations="$typeintegrations"
    :documents="$documents" 
    />
    
@endsection

@section('vendor-script')
    {{-- Vendor js files --}}
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>

@endsection

@section('page-script')

    <script>
    
    $(document).ready(function() {

        $('#modalSla #operator_business, #modalSla #operator_humanittare').on('input', function() {
            let slaEmpressarial = $('#operator_business').val();
            let slaHumanittare = $('#operator_humanittare').val();
            
            if (slaEmpressarial.trim() === '' && slaHumanittare.trim() === '') {
                $('#slaTotalEmpressarial').text('Total Empresarial: ');
            } else {
            
                let total = 0;
                if (!isNaN(slaEmpressarial)) {
                    total += parseInt(slaEmpressarial);
                }
                if (!isNaN(slaHumanittare)) {
                    total += parseInt(slaHumanittare);
                }
                
                if (!isNaN(total)) {
                    $('#slaTotalEmpressarial').text('Total Empresarial: ' + total);
                } else {
                    $('#slaTotalEmpressarial').text('Total Empresarial:');
                }
            }
        });

        $('#modalSla #operator_pme, #modalSla #operator_humanittare').on('input', function() {
            let slaPme = $('#operator_pme').val();
            let slaHumanittare = $('#operator_humanittare').val();
            
            if (slaPme.trim() === '' && slaHumanittare.trim() === '') {
                $('#slaTotalPme').text('Total PME: ');
            } else {
            
                let total = 0;
                if (!isNaN(slaPme)) {
                    total += parseInt(slaPme);
                }
                if (!isNaN(slaHumanittare)) {
                    total += parseInt(slaHumanittare);
                }
                
                if (!isNaN(total)) {
                    $('#slaTotalPme').text('Total PME: ' + total);
                } else {
                    $('#slaTotalPme').text('Total PME:');
                }
            }
        });

        $("#slaForm").validate({
            rules: {
                types_request_id: 'required',
                documents_id: 'required',
                operator_humanittare: 'required',

            },
            messages: {
                types_request_id: "{{ __('locale.Table.partner.Column.RequiredField') }}",
                documents_id: "{{ __('locale.Table.partner.Column.RequiredField') }}",
                operator_humanittare: "{{ __('locale.Table.partner.Column.RequiredField') }}",
            }
        });

    });

    const openModal = (action, id = null) => {
        if (action === 'edit') {
            EditarSla(id);
            $('#modalSla').attr('data-action', 'edit');
        } else {

            $('#modalSla').attr('data-action', 'add');
            $('#modalSla form')[0].reset();
            $('.select2').val(null).trigger('change');
            $("#modalSla #supplier_sla_id").val('');
            $("#modalSla #types_request_id").val('').trigger('change');
            $("#modalSla #operator_business").val('');
            $("#modalSla #operator_pme").val('');
            $("#modalSla #operator_humanittare").val('');
            $("#modalSla #slaTotalEmpressarialEdit").text('');
            $("#modalSla #slaTotalPmeEdit").text('');
        }

        $("#modalSla").modal('show');
    };

    $("#saveButton").on('click', function() {
        const action = $('#modalSla').attr('data-action');
        if (action === 'edit') {
            editarInformacoesSla();
        } else {
            salvarInformacoesSla();
        }
    });

    const cadastrarSla = () => {

        $('.select2').select2();

        $("#modalSla form")[0].reset();
        $('.select2').val(null).trigger('change');

        $("#modalSla").modal('show');
        
    }

    const EditarSla = (id) => {

        let url = "{{ route('api.suppliers.slas.find', ['id' => ':id']) }}"
        url = url.replace(':id', id);

        axios.get(url, {
            headers: {
                "Authorization": "Bearer {{ session('Authorization') }}"
            }
        })
        .then(response => {
            
            let data = response.data;
            console.log(data);

            $('.select2').select2();

            $("#modalSla form")[0].reset();
            $('.select2').val(null).trigger('change');
            

            $("#modalSla #supplier_sla_id").val(data.id);
            $("#modalSla #types_request_id").val(data.supplier_type_request_id).trigger('change');
            $("#modalSla #type_integration_id").val(data.type_integration_id).trigger('change');
            $("#modalSla #operator_business").val(data.business_operator);
            $("#modalSla #operator_pme").val(data.pme_operator);
            $("#modalSla #operator_humanittare").val(data.humanittare);
            $("#modalSla #slaTotalEmpressarial").text('Total Empresarial: ' + (parseInt(data.humanittare) + parseInt(data.business_operator)));
            $("#modalSla #slaTotalPme").text('Total PME: ' + (parseInt(data.humanittare) + parseInt(data.pme_operator)));

            if (data.documents && data.documents.length > 0) {
                const documentIds = data.documents.map(doc => doc.supplier_document_id);
                $('#modalSla #documents_id').val(documentIds).trigger('change');
            } else {
                $('#modalSla #documents_id').val([]).trigger('change');
            }

            $("#modalSla").modal('show');

        })
        .catch(error => {
            console.error('Erro ao obter SLA:', error);
        });
        

    }

    const editarInformacoesSla = async  () => {

        let supplier_sla_id = $("#modalSla #supplier_sla_id").val();
        let supplier_id = $("#modalSla #supplier_id").val();
        let documents_id = $("#modalSla #documents_id").val();
        let supplier_type_request_id = $("#modalSla #types_request_id").val();
        let business_operator = $("#modalSla #operator_business").val();
        let pme_operator = $("#modalSla #operator_pme").val();
        let humanittare = $("#modalSla #operator_humanittare").val();
        let type_integration_id= $("#modalSla #type_integration_id").val();

        let json = {
            id: supplier_sla_id,
            supplier_id: supplier_id,
            documents_id: documents_id,
            supplier_type_request_id: supplier_type_request_id,
            business_operator: business_operator,
            pme_operator: pme_operator,
            humanittare: humanittare,
            type_integration_id: type_integration_id
        };
        // let tipo = typeof json.id;
        // console.log(tipo)
        console.log(json);
        if (Object.keys(json).length > 0) {
            try {
                let response;
 
                let updateUrl = `{{ route('api.suppliers.slas.update', ':id') }}`;
                    updateUrl = updateUrl.replace(':id', json.id); 

                    response = await axios.put(updateUrl, json, {
                        headers: {
                            "Content-Type": "application/json",
                            "Authorization": `Bearer {{ session('Authorization') }}`
                        }
                    });
                
                                            
                // Exibir mensagem de sucesso
                Swal.fire({
                    title: 'Uhuul!',
                    text: "{{ __('locale.Table.Sla.Column.UpdateSuccess') }}",
                    icon: "success"
                }).then((result) => {
                    if (result.isConfirmed) {
                        let updateUrl = `{{ route('dashboard.suppliers.sla.index', ':id') }}`;
                        updateUrl = updateUrl.replace(':id', supplier_id);
                        window.location.href = updateUrl;
                    }
                });
                } catch (error) {
                    
                    // Tratar erros da API
                    if (error.response) {
                        const {
                            status,
                            data
                        } = error.response;
                        if (status === 400 || status === 422) {
                            Swal.fire({
                                title: 'Ops!',
                                text: data.message,
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                            });
                        } else if (status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Contract.Column.RequestedNotFound') }}",
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                            });
                        } else {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Contract.Column.RegisterError') }}",
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                            });
                        }
                    } else {
                        console.error('Erro ao chamar API:', error);
                    }
                }
            }
            $("#modalCondicaoVida").modal('hide')
    }

    const salvarInformacoesSla = async  () => {
    
        let supplier_id = $("#modalSla #supplier_id").val();
        let supplier_type_request_id = $("#modalSla #types_request_id").val();
        let documents_id = $("#modalSla #documents_id").val();
        let business_operator = $("#modalSla #operator_business").val();
        let pme_operator = $("#modalSla #operator_pme").val();
        let humanittare = $("#modalSla #operator_humanittare").val();
        let type_integration_id= $("#modalSla #type_integration_id").val();

        let json = {
            supplier_id: supplier_id,
            supplier_type_request_id: supplier_type_request_id,
            documents_id: documents_id,
            business_operator: business_operator,
            pme_operator: pme_operator,
            humanittare: humanittare,
            type_integration_id: type_integration_id
        };


        if (Object.keys(json).length > 0) {
            try {
                let response;

                let createUrl = `{{ route('api.suppliers.slas.store') }}`;

                response = await axios.post(createUrl, json, {
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": `Bearer {{ session('Authorization') }}`
                    }
                });
                
                                            
                // Exibir mensagem de sucesso
                Swal.fire({
                    title: 'Uhuul!',
                    text: "{{ __('locale.Table.Sla.Column.AddSuccess') }}",
                    icon: "success"
                }).then((result) => {
                    if (result.isConfirmed) {
                        let updateUrl = `{{ route('dashboard.suppliers.sla.index', ':id') }}`;
                        updateUrl = updateUrl.replace(':id', supplier_id);
                        window.location.href = updateUrl;
                    }
                });
                } catch (error) {
                    
                    // Tratar erros da API
                    if (error.response) {
                        const {
                            status,
                            data
                        } = error.response;
                        if (status === 400 || status === 422) {
                            Swal.fire({
                                title: 'Ops!',
                                text: data.message,
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                            });
                        } else if (status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Contract.Column.RequestedNotFound') }}",
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                            });
                        } else {
                            Swal.fire({
                                title: 'Ops!',
                                text: "{{ __('locale.Table.Contract.Column.RegisterError') }}",
                                icon: "error",
                                cancelButtonText: "{{ __('locale.Table.Contract.Column.CloseButton') }}"
                            });
                        }
                    } else {
                        console.error('Erro ao chamar API:', error);
                    }
                }
            }
            $("#modalSla").modal('hide')
    }

    /**
     * @param {number} supplier_id
     */
    const deleteSuppliers = async (id) => {

        if(typeof id !== 'number'){
            if(window.Swal !== undefined){
                return window.Swal.fire({
                    title: 'Ops!',
                    text: '{{ __("locale.Table.suppliers.Column.DeleteInt") }}',
                    icon: 'error'
                })
            }
            return window.alert('{{ __("locale.Table.suppliers.Column.DeleteInt") }}');
        }

        if(window.Swal === undefined) return window.alert('{{ __("locale.Table.suppliers.Column.ModelSweetAlert2") }}');
        if(window.toastr === undefined) return window.alert('{{ __("locale.Table.suppliers.Column.ModelSweetToastr") }}');

        let swal = await window.Swal.fire({
            title: '{{ __("locale.Table.suppliers.Column.DeleteAttention") }}',
            text: '{{ __("locale.Table.suppliers.Column.DeleteMessageDelete") }}',
            icon: 'question',
            showCancelButton: true,
            cancelButtonText: '{{ __("locale.Table.suppliers.Column.DeleteMessageCancel") }}',
            confirmButtonText: '{{ __("locale.Table.suppliers.Column.DeleteMessage") }}'
        })

        if(!swal.isConfirmed) return cancelDeleteAction();

        let { data: json, ...response} = await axios({
            url: `{{route('api.suppliers.slas.delete','')}}/${id}`,
            method: 'delete',
            headers: {
                "Authorization": "Bearer {{ session('Authorization') }}"
            }
        })
        .catch((e) => {

            let response = e.response;

            @if(env('APP_DEBUG'))
            console.warn(e)
            @endif

            if (response.status === 400 || response.status === 422) {
                Swal.fire({
                    title: 'Ops!',
                    text: response.data.message,
                    icon: 'error',
                    cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
                })
            } else if (response.status === 404) {
                Swal.fire({
                    title: 'Ops!',
                    text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
                    icon: 'error',
                    cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
                })
            } else {

                Swal.fire({
                    title: 'Ops!',
                    text: '{{ __("locale.Table.suppliers.Column.DeleteErrorForm") }}',
                    icon: 'error',
                    cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
                })

            }
        });

        if(response.status === 204) {
            swal = await window.Swal.fire({
                title: 'Uhuul!',
                text: '{{ __("locale.Table.suppliers.Column.DeleteSuccess") }}',
                icon: 'success'
            });

            if(swal.isConfirmed){
                dtUserTable.ajax.reload()
            }

        }

	}

    const cancelDeleteAction = () => {
        window.toastr.error('{{ __("locale.Table.suppliers.Column.DeleteOperationCanceled") }}', '{{ __("locale.Table.suppliers.Column.DeleteAttention") }}', {
            positionClass: "toast-top-right",
            progressBar: true
        })
    }

    var dtUserTable = $('.user-list-table'),
        select = $('.select2'),
        dtContact = $('.dt-contact'),
        statusObj = {
            1: {
                title: "{{ __('locale.Active') }}",
                class: 'badge-light-success '
            },
            0: {
                title: "{{__('locale.Inactive')}}",
                class: 'badge-light-secondary'
            }
        };

    $(function() {
        'use strict';

		let e = '';

        const typeRequestNames = {
            1: 'Inclusão',
            2: 'Exclusão',
            3: 'Alteração de dados cadastrais',
            4: 'Transferências',
            5: 'Upgrade e Downgrade',
            6: 'Exceções',
            7: 'Reembolso',
            8: 'Contestação',
            9: '2ª via de carteirinha',
            10: 'Dúvidas/Esclarecimentos',
            11: 'Reclamações', 
        };
        
		

        select.each(function() {
            var $this = $(this);
            $this.wrap('<div class="position-relative"></div>');
            $this.select2({
                dropdownAutoWidth: true,
                width: '100%',
                dropdownParent: $this.parent()
            });
        });

        let supplier_id = {{$supplier->id}};

        if (dtUserTable.length) {
            dtUserTable = dtUserTable.DataTable({
                ajax: {
                    url: "{{ route('api.suppliers.slas.index') }}",
                    dataSrc: '',
                    beforeSend: function(request) {
                    request.setRequestHeader("Authorization",
                        "Bearer {{ session('Authorization') }}")
                    },
					data: function(d) {
						d.supplier_id = supplier_id;
					}
                },
                columns: [
                    {data: 'id'},
                    {data: null},
                    {data: null},
                ],

                columnDefs: [
                    {
                        targets: 1,
                        render(data, type, full, meta) {
                            let supplier_type_request_id = data['supplier_type_request_id'];
                            
                            if (typeRequestNames.hasOwnProperty(supplier_type_request_id)) {
                                return typeRequestNames[supplier_type_request_id];
                            } else {
                                return 'Tipo de solicitação desconhecido';
                            }
                        }
                    },
                    {
                        targets: -1,
						title: 'Actions',
						orderable: false,
						render: function(data, type, full, meta) {
                            return (
								// '<div>' +
								// 	'<div class=" d-flex">' +
								// 		`<a href="#" onclick="openModal('edit', ${full.id})" style="padding:0.4rem 0.6rem;" class="btn btn-primary me-50">` +
								// 		feather.icons['file-text'].toSvg({
								// 			class: 'font-small-4 text-white'
								// 		}) +
								// 		'</a>' +
								// 		`<a href="javascript:deleteSuppliers(${full.id});" style="padding:0.4rem 0.6rem;" class="delete-record btn btn-secondary">` +
								// 		feather.icons['trash-2'].toSvg({
								// 			class: 'font-small-4'
								// 		}) +
								// 		'</a>' +
								// 		'</div>' +
								// 	'</div>' +
								// '</div>'
                                '<div class="btn-group">' +
                                    '<a class="btn btn-sm dropdown-toggle hide-arrow" data-bs-toggle="dropdown">' +
                                    feather.icons['more-vertical'].toSvg({
                                        class: 'font-small-4'
                                    }) +
                                    '</a>' +
                                    '<div class="dropdown-menu dropdown-menu-end">' +
                                        '<div class="dropdown-menu dropdown-menu-end">' +
                                    `<a href="#" onclick="openModal('edit', ${full.id})" class="dropdown-item">` +
                                    feather.icons['file-text'].toSvg({
                                        class: 'font-small-4 me-50'
                                    }) +
                                    '{{ __("locale.Table.SuppliersProducts.Column.EditButton") }}</a>' +
                                    `<a href="javascript:deleteSuppliers(${full.id});" class="dropdown-item delete-record">` +
                                    feather.icons['trash-2'].toSvg({
                                        class: 'font-small-4 me-50'
                                    }) +
                                    '{{ __("locale.Table.SuppliersProducts.Column.DeleteButton") }}</a></div>' +
                                    '</div>' +
                                    '</div>'
							    );
                        }
                    }
                ],
                order: [
					[0, 'desc']
				],
				dom: '<"d-flex justify-content-between align-items-center header-actions mx-2 row mt-75"' +
					'<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
					'<"col-sm-12 col-lg-8 ps-xl-75 ps-0"<"dt-action-buttons d-flex align-items-center justify-content-center justify-content-lg-end flex-lg-nowrap flex-wrap"<"me-1"f>B>>' +
					'>t' +
					'<"d-flex justify-content-between mx-2 row mb-1"' +
					'<"col-sm-12 col-md-6"i>' +
					'<"col-sm-12 col-md-6"p>' +
					'>',
				language: {
					sLengthMenu: "{{ __('locale.Listing') }} _MENU_",
					search: "{{ __('locale.Search') }}",
					searchPlaceholder: "{{ __('locale.Search') }}..",
					paginate: {
						previous: '&nbsp;',
						next: '&nbsp;'
					},
					info: "{{ __('locale.ListingInfo') }}",
					infoEmpty: "{{ __('locale.ListingEmpty') }}",
					zeroRecords: "{{ __('locale.ZeroRecords') }}"

				},
				buttons: [
					{
						text: "+ {{ __('locale.Add') }}",
						className: 'add-new btn btn-primary me-2',
						action: function() {
							openModal('add');
						},
						init: function(api, node, config) {
							$(node).removeClass('btn-secondary');
						}
					},
					{
						extend: 'collection',
						className: 'btn btn-outline-secondary dropdown-toggle me-2',
						text: feather.icons['external-link'].toSvg({
							class: 'font-small-4 me-50'
						}) + "{{__('locale.Export')}}",
						buttons: [{
								extend: 'print',
								text: feather.icons['printer'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Print',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'csv',
								text: feather.icons['file-text'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Csv',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'excel',
								text: feather.icons['file'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Excel',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'pdf',
								text: feather.icons['clipboard'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Pdf',
								className: 'dropdown-item',
								exportOptions: {
									columns: [0, 1, 2, 3, 4, 5, 6, 7]
								}
							},
							{
								extend: 'copy',
								text: feather.icons['copy'].toSvg({
									class: 'font-small-4 me-50'
								}) + 'Copy',
								className: 'dropdown-item',
								exportOptions: {
									columns: [1, 2, 3, 4, 5]
								}
							}
						],
						init: function(api, node, config) {
							$(node).removeClass('btn-secondary');
							$(node).parent().removeClass('btn-suppliers');
							setTimeout(function() {
								$(node).closest('.dt-buttons').removeClass('btn-suppliers').addClass('d-inline-flex mt-50');
							}, 50);
						}
					}
				],
				responsive: {
					details: {
						display: $.fn.dataTable.Responsive.display.modal({
							header: function(row) {
								var data = row.data();
								return 'Details of ' + data['name'];
							}
						}),
					}
				},
                // responsive: false,
                //     scrollX: true,
                //     scrollCollapse: true,
				initComplete: function() {
					window.tableList = this.api();

				}
			});
		}
	});
</script>

@endsection