@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="row">
                <!-- From Date -->
                <div class="col-md-2 col-sm-2 col-xs-6">
                    <div class="form-group">
                        <label for="from_date" class="block text-gray-700 text-sm font-bold mb-2">From Date</label>
                        <div class="input-group date" id="searchFrom" data-target-input="nearest">
                            <input
                                type="text"
                                id="from_date"
                                class="form-control datetimepicker-input input-group-append"
                                data-toggle="datetimepicker"
                                data-target="#searchFrom"
                                value="{{ $start->format('m/d/y') }}"
                                autocomplete="off">
                        </div>
                    </div>
                </div>

                <!-- To Date -->
                <div class="col-md-2 col-sm-2 col-xs-6">
                    <div class="form-group">
                        <label for="to_date" class="block text-gray-700 text-sm font-bold mb-2">To Date</label>
                        <div class="input-group date" id="searchTo" data-target-input="nearest">
                            <input
                                type="text"
                                id="to_date"
                                value="{{ $end->format('m/d/y') }}"
                                class="form-control datetimepicker-input input-group-append"
                                data-toggle="datetimepicker"
                                data-target="#searchTo"
                                autocomplete="off">
                        </div>
                    </div>
                </div>

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

                <!-- POP Name -->
                <div class="col-md-2 col-sm-2 col-xs-6">
                    <div class="form-group">
                        <label class="block text-gray-700 text-sm font-bold mb-2">POP Name</label>
                        <select id="pop" class="select2 form-control form-control-sm">
                            <option value="all">ALL POP</option>
                        </select>
                    </div>
                </div>

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

                <!-- Payment Type -->
                <div class="col-md-2 col-sm-2 col-xs-6">
                    <div class="form-group">
                        <label class="block text-gray-700 text-sm font-bold mb-2">Payment Type</label>
                        <select id="payment_type" class="select2 form-control form-control-sm">
                            <option value="all">All Type</option>
                            @foreach ($bill_generate_type as $type)
                                <option value="{{ $type->billing_type }}">{{ $type->billing_type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- User Name -->
                <div class="col-md-2 col-sm-2 col-xs-6">
                    <div class="form-group">
                        <label class="block text-gray-700 text-sm font-bold mb-2">User Name</label>
                        <input id="user_name" class="form-control" />
                    </div>
                </div>
            </div>

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

    <div class="card">
        <div class="card-body">
            <a class="btn btn-primary mb-2" id="exportCsvBtn" href="#">Download CSV</a>

            <div class=" float-right d-flex amount-container" style="text-align:center; gap:3px !important; ">

                <p class="p-1" style="border:2px solid #fed7aa;" id="total_bill_account_client">
                    Total Row: 0
                </p>
                <p class="p-1" style="border:2px solid #fed7aa;" id="total_bill_account_amount">
                    Total Bill: 0.00
                </p>
                <p class="p-1" style="border:2px solid #fed7aa;" id="total_bill_account_paid">
                    Total Paid: 0.00
                </p>
                <p class="p-1" style="border:2px solid #fed7aa;" id="total_bill_account_due">
                    Total Due: 0.00
                </p>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-borderless table-condensed" id="dataTable"
                    style="width: 100% !important;">
                    <thead>
                        <tr class="bg-black">
                            <th>Date</th>
                            <th>Client User ID</th>
                            <th>Client Name</th>
                            <th>Type</th>
                            <th class="text-right">Bill</th>
                            <th class="text-right">Paid</th>
                            <th class="text-right">Due</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script type="text/javascript">
        $(function() {
            function currentFilters(d) {
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
                d.reseller = $('#reseller').val();
                d.pop = $('#pop').val();
                d.area = $('#area').val();
                d.payment_type = $('#payment_type').val();
                d.user_name = $('#user_name').val();
            }

            let table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                searching: false,
                pageLength: 100,
                lengthMenu: [
                    [10, 25, 50, 100, 200, 500],
                    [10, 25, 50, 100, 200, 500]
                ],
                ajax: {
                    url: '{{ route('bill-generate.datatable') }}',
                    data: currentFilters,
                    dataSrc: function(json) {
                        $('#total_bill_account_client').text('Total Row: ' + json.total_row);
                        $('#total_bill_account_amount').text('Total Bill: ' + json.total_bill);
                        $('#total_bill_account_paid').text('Total Paid: ' + json.total_paid);
                        $('#total_bill_account_due').text('Total Due: ' + json.total_due);
                        return json.data;
                    }
                },
                columns: [
                    { data: 'created_at', name: 'created_at' },
                    { data: 'client_userid', name: 'client_userid', orderable: false, searchable: false },
                    { data: 'client_name', name: 'client_name', orderable: false, searchable: false },
                    { data: 'billing_type', name: 'billing_type' },
                    { data: 'bill_amount', name: 'bill_amount', className: 'text-right' },
                    { data: 'paid_amount', name: 'paid_amount', className: 'text-right' },
                    { data: 'due_amount', name: 'due_amount', orderable: false, searchable: false, className: 'text-right' },
                ],
                order: [
                    [0, 'desc']
                ],
                createdRow: function(row, data) {
                    if (data.row_class) {
                        $(row).addClass(data.row_class);
                    }
                }
            });

            $('#reset').click(function() {
                $('#pop').html('<option value="all">ALL POP</option>');
                $('#area').html('<option value="all">ALL Area</option>');
                $('#payment_type').val('all').trigger('change');
                $('#user_name').val('');
                $('#reseller').val('all').trigger('change');
                table.draw();
            });

            $('#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" selected> ALL Area </option>');
                        result.areas.forEach(element => {
                            if (element != "") {
                                $('#area').append('<option value="' + element + '">' +
                                    element + '</option>');
                            }
                        });

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

                    }
                });
            });

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

            $('#exportCsvBtn').on('click', function(e) {
                e.preventDefault();
                let params = {};
                currentFilters(params);
                let query = $.param(params);
                window.location = '{{ route('bill-generate.export-csv') }}' + '?' + query;
            });
        });
    </script>
@endsection

<style>
    .amount-container {
        flex-direction: column;
    }

    @media (min-width:640px) {
        .amount-container {
            flex-direction: row;
        }
    }
</style>