@extends('layout.app')

@section('content')

    <div class="card">
        <div class="card-body">
            <form action="" id="search">

                <div class="row">
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="form-group">
                            <label class="flex-1 block text-gray-700 text-sm font-bold mb-2">
                                Manager Name
                            </label>
                            <select name="reseller" id="reseller" class="form-control select2 form-control-sm" required>
                                <option value="all">ALL Manager</option>
                                @foreach ($resellers as $r)
                                    <option value="{{ $r->id }}">{{ $r->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="form-group">
                            <label class="flex-1 block text-gray-700 text-sm font-bold mb-2">
                                POP Name
                            </label>
                            <select name="pop" id="pop" class="select2 form-control form-control-sm">
                                <option value="all"> ALL POP</option>

                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="form-group">
                            <label class="flex-1 block text-gray-700 text-sm font-bold mb-2">
                                Select Area
                            </label>
                            <select name="area" id="area" class="select2 form-control form-control-sm">
                                <option value="all">ALL Area</option>

                            </select>

                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        @if (globalPermission('separate_billing_cycle_to_resellers'))
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2">
                                    Billing Cycle
                                </label>
                                <select name="billing_cycle" id="billing_cycle"
                                    class="select2 form-control form-control-sm">
                                    <option value="all">ALL Billing Cycle</option>
                                </select>
                            </div>
                        @else
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2">
                                    Billing Cycle
                                </label>
                                <select name="billing_cycle" id="billing_cycle"
                                    class="select2 form-control form-control-sm">
                                    <option value="all">ALL Billing Cycle</option>
                                    @foreach (explode(',', $confday) as $conf)
                                        <option value="{{ $conf }}">{{ $conf }}</option>
                                    @endforeach

                                </select>

                            </div>
                        @endif
                    </div>


                </div>
                <div class="form-group float-right">
                    <button class="btn btn-primary" type="submit" id="searchBtn"><i class="fa fa-search"></i>
                        Search</button>
                    <button class="btn btn-info" type="reset" id="reset">Reset</button>
                </div>

            </form>

        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <button class="btn btn-primary mb-2" onclick="export2csv()">Download csv</button>
            <div id="result">
                <table class="table table-striped table-borderless table-condensed" id="result_table">
                    <thead>
                        <tr class="bg-black">

                            <th style="padding-left: 2px;padding-right: 2px;">ID</th>
                            <th style="padding-left: 2px;padding-right: 2px;">User name</th>
                            <th style="padding-left: 2px;padding-right: 2px;">Status</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:100px">Expire</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:100px">Name</th>
                            <th style="padding-left: 2px;padding-right: 2px;">Billing Cycle</th>
                            <th style="padding-left: 2px;padding-right: 2px;max-width:200px">Package</th>
                            <th style="padding-left: 2px;padding-right: 2px; text-align: right;">Due Amount</th>
                            <th style="padding-left: 4px;padding-right: 2px;">POP</th>

                            <th style="padding-left: 2px;padding-right: 2px;max-width:200px">User Info</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>
            </div>
        </div>
    </div>




@endsection




@section('ajax')
    <script type="text/javascript">
        $(function() {
            $('#reset').click(function() {
                $("#result_table  tbody").empty();
                $('#pop').html('<option value="all">ALL POP</option>');
                $('#area').html('<option value="all"> All Area </option>');
                $("#reseller").val('all').change();
                $("#billing_cycle").val('all').change();

            });
            $('#reseller').on('change', function(e) {
                e.preventDefault();
                $('body').append('<div class="hidden" id="loading">Loading.....</div>');

                $.ajax({
                    type: 'get',
                    url: '{{ route('getResellerAreaPop') }}',
                    data: {
                        id: $(this).val()
                    },
                    success: function(result) {

                        $('#pop').empty();
                        $('#pop').append('<option value="all"> All Pop </option>');
                        result.pops.forEach(element => {
                            $('#pop').append('<option value="' + element.id + '">' +
                                element.popname + '</option>');
                        });

                        $('#area').empty();
                        $('#area').append('<option value="all"> All Area </option>');
                        result.areas.forEach(element => {

                            if (element != "") {
                                $('#area').append('<option value="' + element + '">' +
                                    element + '</option>');
                            }

                        });

                        $('#loading').remove();

                    }
                });

                @if (globalPermission('separate_billing_cycle_to_resellers'))
                    $.ajax({
                        type: 'get',
                        data: {
                            reseller_id: $(this).val()
                        },
                        url: '{{ route('getBillingCyclesByResellerId') }}',
                        success: function(result) {
                            if (result.status == 'success') {
                                $('#billing_cycle').empty();
                                $('#billing_cycle').append(
                                    '<option value="all">ALL Billing Cycle</option>');
                                for (const cycle of result.data) {
                                    $('#billing_cycle').append(
                                        `<option value="${cycle.value}">${cycle.label}</option>`
                                    );
                                }
                                $('#loading').remove();
                            } else {
                                $('#billing_cycle').empty();
                                $('#billing_cycle').append(
                                    '<option value="all">ALL Billing Cycle</option>');
                            }
                        }
                    });
                @endif

            });

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

                $('body').prepend('<div id="loading">Loading.....</div>');
                let total_due = 0;
                $.ajax({
                    type: 'get',
                    url: '{{ route('get-bill-extends-customers') }}',
                    data: $('#search').serialize(),

                    success: function(result) {
                        $("#result_table  tbody").empty();
                        let hole_data = '';
                        let clients = result.clients;

                        var size = Object.keys(clients).length;

                        for (const [key, value] of Object.entries(clients)) {
                            // check client status and set status class
                            total_due += parseFloat(value['due_amount']);
                            var status_class = '';
                            if (value['deleted_at'] != null || value['status'] == "expired") {
                                status_class = "bg-danger"

                            } else if (value['status'] == 'deactive') {
                                status_class = "bg-secondary"
                            } else if (value['status'] == 'disable') {
                                status_class = "bg-warning"
                            } else {
                                status_class = "bg-success"
                            }
                            // make full address
                            let address = '';
                            if (value['flat_no']) {
                                address = 'Flat No: ' + value['flat_no'] + '';
                            }
                            if (value['building_name']) {
                                address += '<br>Building Name: ' + value['building_name'] + '';
                            }
                            if (value['road_no']) {
                                address += '<br>Road No : ' + value['road_no'] + '';
                            }

                            if (value['block_sector']) {
                                address += '<br>Block/Sector : ' + value['block_sector'] + '';
                            }
                            if (value['area']) {
                                address += '<br>Area : ' + value['area'] + '';
                            }
                            if (value['box']) {
                                address += '<br>Box : ' + value['box'] + '';
                            }
                            if (value['client_latitude']) {
                                address += '<br>Latitude : ' + value['client_latitude'] + '';
                            }
                            if (value['client_longitude']) {
                                address += '<br>Longitude : ' + value['client_longitude'] + '';
                            }
                            // create connetion date
                            let connection_date = '';
                            if (value['created_at']) {
                                connection_date += 'CD : ' + value['created_at'] + '';
                            }
                            if (value['joinDate']) {
                                connection_date += '<br>JD : ' + value['joinDate'] + '';
                            }
                            // create action
                            let details_url = "{{ url('admin/clients') }}" + "/" + value['id'];
                            let edit_url = "{{ url('admin/clients') }}" + "/" + value['id'] +
                                "/edit";
                            let action = '<a href="' + details_url +
                                '"  class="btn btn-secondary btn-block btn-xs">Details</a>';
                            if (result.mac_customer_edit_permission == true) {
                                action += '<a href="' + edit_url +
                                    '" class="btn btn-primary btn-block inline-block btn-xs">Edit</a>';
                            }

                            if (value['status'] == 'deactive' && result
                                .customer_reactivate_permission == true) {
                                action += '<button onclick="status(' + value['id'] +
                                    ',\'idEnable\')" type="button" class="btn btn-success btn-block btn-xs">Reactive</button>';
                            }

                            if (result.customer_recharge_permission == true && result
                                .id_enable_permission == true && value['status'] !=
                                'deactive' && value['status'] == 'disable') {
                                action += '<button onclick="status(' + value['id'] +
                                    ',\'idEnable\')" type="button" class="btn btn-success btn-block btn-xs">Enable</button>';
                            }

                            if (result.customer_recharge_permission == true && result
                                .id_disable_permission == true && value['status'] !=
                                'deactive' && value['status'] != 'disable') {
                                action += '<button onclick="status(' + value['id'] +
                                    ',\'idDIsable\')" type="button" class="btn btn-warning btn-block btn-xs">Disable</button>';
                            }

                            if (result.customer_recharge_permission == true && result
                                .customer_deactivated_permission == true && value['status'] !=
                                'deactive') {
                                action += '<button onclick="status(' + value['id'] +
                                    ',\'idDeactive\')" type="button" class="btn btn-danger btn-block btn-xs">Deactive</button>';
                            }

                            hole_data += '<tr >' +

                                '<td style="padding-left: 2px;padding-right: 2px;">' + value[
                                    'id'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;">' + value[
                                    'user_id'] + '<br>' + value['password'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;" class=' +
                                status_class + '>' + value['status'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;max-width:130px" class=' +
                                status_class + '>BD: ' + value['expire_date'] + '<br>PD: ' +
                                value['payment_dadeline'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;max-width:150px" >' +
                                value['name'] + '<br>' + value['contact_no'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;text-align:center" >' +
                                value['billing_cycle'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;max-width:200px" ><span class="badge badge-info">' +
                                value['sub_package'] +
                                '</span><br><span class="badge badge-info">' + value[
                                    'mother_package'] + '</span></td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;max-width:200px;text-align: right;" >' +
                                value['due_amount'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;text-align: center" >' +
                                value['pop_name'] + '</td>' +
                                '<td style="padding-left: 2px;padding-right: 2px;max-width:200px" >' +
                                address + '</td>' +

                                // '<td style="padding-left: 2px;padding-right: 2px;max-width:100px" >CD:<br>'+element.created_at.split('T')[0]+'<br>JD:<br>'+join_date.split('T')[0]+'</td>' +
                                '</tr>';
                        }
                        hole_data += '<tr >' +
                            '<td colspan="6" style="padding-left: 2px;padding-right: 2px; text-align: right;" ><b>Total(' +
                            size + ')</b></td>' +
                            '<td colspan="2" style="padding-left: 2px;padding-right: 2px; text-align: right;" ><b>' +
                            parseFloat(total_due).toFixed(2) + ' Taka</b></td>' +
                            '</tr>';
                        $("#result_table  tbody").append(hole_data);

                        $('#loading').remove();
                    }
                });
            });
        });

        function export2csv() {
            let data = "";
            const tableData = [];
            const rows = document.querySelectorAll("table#result_table tr");
            for (const row of rows) {
                const rowData = [];
                for (const [index, column] of row.querySelectorAll("th, td").entries()) {
                    // To retain the commas in the "Description" column, we can enclose those fields in quotation marks.
                    //   if ((index + 1) % 3 === 0) {
                    //     rowData.push('"' + column.innerText + '"');
                    //   } else {
                    //     rowData.push(column.innerText);
                    //   }
                    rowData.push(column.innerText.replace(/[\r\n]/gm, ' '));
                }
                tableData.push(rowData.join(","));
            }
            data += tableData.join("\n");
            const a = document.createElement("a");
            a.href = URL.createObjectURL(new Blob([data], {
                type: "text/csv"
            }));
            a.setAttribute("download", "due_list.csv");
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    </script>
@endsection
