@extends('layouts.user.main')
@section('content')


<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Card-->
            <div class="card card-flush">
                <!--begin::Card body-->
                <div class="card-body py-4">
                    <!--begin::Table-->
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5 table-hover table-striped" id="kt_table_billing_group">
                            <!--begin::Table head-->
                            <thead>
                                <!--begin::Table row-->
                                <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                    <th class="min-w-100px">Group</th>
                                    {{-- <th class="min-w-100px">Remove From Billing</th> --}}
                                    <th class="min-w-100px">Action</th>
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                            <tbody class="fw-bold">
                            </tbody>
                            <!--end::Table body-->
                        </table>
                    </div>
                    <!--end::Table-->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
</div>
<script type="text/javascript">
    const token   = "{{ csrf_token() }}";
    const table   = $('#kt_table_billing_group');

    var dataColumns = [
        {
            data: 'group',
            name: 'group'
        },
        // {
        //     data: 'billingStatus',
        //     name: 'billingStatus',
        //     render: function(data, type, full, meta) {
        //         var disableButton = '';
        //         @if (!auth()->user()->can('Exclusion Groups for Billing###Write'))    
        //         {
        //             disableButton = 'disabled';
        //         }
        //         @endif

        //         const ajaxUrl = @json(route('updatBillingGroupStatus', [':id']));

        //         return `
        //             <form action="${ajaxUrl.replace(':id', full.id)}" method="POST" id="statusForm_${full.id}" class="text-center">
        //                 <div class="form-check form-switch form-check-custom form-check-solid d-flex justify-content-center align-items-center">
        //                     <input class="form-check-input" type="checkbox" value="${full.billingStatus}" id="status_${full.id}" name="status" ${full.billingStatus === "2" ? 'checked="checked"' : ''} onchange="changeBillingGroupStatus('${full.id}')" ${disableButton}>
        //                     <input type="hidden" name="status" value="${full.billingStatus}">
        //                     <label class="form-check-label fw-bold text-gray-400 ms-3" for="status_${full.id}" id="status_label_${full.id}"></label>
        //                 </div>
        //             </form>
        //         `;
        //     },
        //     orderable: false,
        //     searchable: false
        // },
        {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false
        }
    ];

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function makeDataTable(table, dataColumns) {

        var reloadAjex = $(table).dataTable({
            // export buttons
            dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title'<'d-flex position-relative my-1'f>><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5 gap-2 d-flex align-items-center justify-content-center justify-content-md-start'l<i>><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>",
            processing: true,
            stateSave: true,
            "stateSaveParams": function (settings, data) {
                data.search.search = '';
            },
            pageLength: 10,
            "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
            language: {
                searchPlaceholder: "Search Billing Group",
                search: ""
            },
            buttons: [
                @if (auth()->user()->can('Exclusion Groups for Billing###Write'))    
                {
                    text: 'Add Billing Group',
                    action: function (e, dt, node, config) {
                        window.location.href = "{{ route('billingGroupCreate') }}";
                    }
                }
                @endif
            ],
            ajax: {
                url: "{{ route('billingGroup') }}",
                method: "GET",
                data: {}
            },
            columns: dataColumns,
            rowCallback: function(row, data) {
                $(row).addClass('text-center');
            },
            "stateLoadParams": function (settings, data) {
                if (data.select) {
                    data.select.rows = [];
                }
            },
            order: [
                [0, "asc"]
            ],
        });
    }

    function changeBillingGroupStatus(id) {
        const statusCheckbox    = $(`#status_${id}`);
        const csrfToken         = "{{ csrf_token() }}";
        const billingStatus     = statusCheckbox.prop('checked') ? 2 : 1;
        const message           = `Are you sure you want to ${billingStatus == 1 ? 'add' : 'remove'} this Group to Billing?`;
        
        Swal.fire({
            title: message,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, change it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('updatBillingGroupStatus', ['id' => ':id']) }}".replace(':id', id),
                    method: 'POST',
                    data: {
                        billingStatus: billingStatus,
                        _token: csrfToken
                    },
                    success: function (response) {
                        console.log(response);
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            } else {
                statusCheckbox.prop('checked', !statusCheckbox.prop('checked'));
            }
        });
    }

    $(document).ready(function() {
        makeDataTable(table, dataColumns);
    });
</script>
@endsection