@extends('layout')

@section('content')
<div class="page-body">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4>{{ __('รายงานใบเสร็จรับเงิน') }}</h4>
                    <div class="card-header-right">
                        <ul class="list-unstyled card-option">
                           <li><a href="{{ url('bill_slip/'.$start_date.'/'.$end_date.'/'.$bill_type) }}" id="print_slip" target="_blank" class="btn btn-secondary btn-sm"><i class="fas fa-print" ></i> {{ __('พิมพ์รายงาน ( Slip )') }}</a></li>
                           <li><a href="{{ url('bill_excel/'.$start_date.'/'.$end_date.'/'.$bill_type) }}" id="print_excel" target="_blank" class="btn btn-secondary btn-sm"><i class="fas fa-print" ></i> {{ __('พิมพ์รายงาน ( Slip Excel)') }}</a></li>
                           <li><a href="{{ url('bill_pdf/'.$start_date.'/'.$end_date.'/'.$bill_type) }}" id="print" target="_blank" class="btn btn-secondary btn-sm"><i class="fas fa-print" ></i> {{ __('พิมพ์รายงาน') }}</a></li>
                        </ul>
                    </div>
                </div>
               <form action="" method="">
                    <div class="d-flex flex-row flex-wrap align-items-center">
                        <div class="col-2">
                            <label for="bill_type">{{ __('ประเภทบิล') }} : </label>
                            <select class="form-control" name="bill_type" id="bill_type">
                                <option value="0">ทั้งหมด</option>
                                <option value="1" @if($bill_type == '1') selected @endif>ใบเสร็จ</option>
                                <option value="2" @if($bill_type == '2') selected @endif>ใบกำกับภาษี</option>
                            </select>
                        </div>
                        <div class="col-2">
                            <label for="start">{{ __('วันที่เริ่มต้น') }} : <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="start" id="start" value="{{ $start_date }}" required autocomplete="off">
                        </div>
                        <div class="col-2">
                            <label for="end">{{ __('วันที่สิ้นสุด') }} : <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="end" id="end" value="{{ $end_date }}" required autocomplete="off">
                        </div>
                        <div class="col-2">
                            <br>
                            <label for="">&nbsp;&nbsp;</label>
                            <button type="button" class="btn btn-sm btn-info btn-lg" onclick="filterData()"><i class="fa fa-search"></i> ค้นหา</button>
                        </div>
                    </div>
                </form>
                <div class="card-block">
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table" id="dtTable">
                                    <thead>
                                        <tr class="table-active">
                                            <td class="text-center">{{ __('No.') }}</td>
                                            <td class="text-center">{{ __('เลขที่บิล') }}</td>
                                            <td class="text-center">{{ __('โต๊ะ') }}</td>
                                            <td class="text-center">{{ __('วันที่') }}</td>
                                            <td class="text-center">{{ __('เวลา') }}</td>
                                            <td class="text-center">{{ __('ราคารวม') }}</td>
                                            <td class="text-center">{{ __('ส่วนลด') }}</td>
                                            <td class="text-center">{{ __('ภาษีมูลค่าเพิ่ม') }}</td>
                                            <td class="text-center">{{ __('ยอดสุทธิ') }}</td>
                                            <td class="text-center">{{ __('เงินสด') }}</td>
                                            <td class="text-center">{{ __('เงินโอน') }}</td>
                                            <td class="text-center">{{ __('บัตรเครดิต') }}</td>
                                            <td class="text-center">{{ __('เงินทอน') }}</td>
                                            <td class="text-center">{{ __('หมายเหตุ') }}</td>
                                            <td class="text-center">{{ __('ผู้บันทึก') }}</td>
                                            <td class="text-center"></td>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th class="text-center" colspan="8">ยอดรวม</th>
                                            <th class="text-center" style="color:red;"><u id="total"></u></th>
                                            <th class="text-center" style="color:red;"><u id="cash"></u></th>
                                            <th class="text-center" style="color:red;"><u id="transfer"></u></th>
                                            <th class="text-center" style="color:red;"><u id="credit"></u></th>
                                            <th class="text-center" style="color:red;"><u id="change"></u></th>
                                            <th class="text-right" colspan="3"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
    $( document ).ready(function() {
        $('#mobile-collapse').click();
    });
var table = '';
var route_index = "{{ route('bill') }}";
$(function () {
    table = $('#dtTable').DataTable({
        "pageLength": 100,
        processing: true,
        serverSide: true,
        autoWidth: false,
        ajax: {
            url: route_index,
            data: function (d) {
                d.start_date = $('#start').val();
                d.end_date = $('#end').val();
                d.bill_type = $('#bill_type').val();
            }
        },
        columns: [
             {
                  data: 'DT_RowIndex',
                  name: 'DT_RowIndex'
             },
             {
                data: 'doc_no',
                name: 'doc_no'
            },
            {
                data: 'table_name',
                name: 'table_name'
            },
            {
                data: 'bill_date',
                name: 'bill_date'
            },
            {
                data: 'bill_time',
                name: 'bill_time'
            },
            {
                data: 'price',
                name: 'price',

            },
            {
                data: 'discount',
                name: 'discount',

            },
            {
                data: 'vat',
                name: 'vat',

            },
            {
                data: 'net',
                name: 'net',

            },
            {
                data: 'cash',
                name: 'cash',

            },
            {
                data: 'transfer',
                name: 'transfer',

            },
            {
                data: 'credit',
                name: 'credit',

            },
            {
                data: 'change',
                name: 'change',

            },
            {
                data: 'comment',
                name: 'comment',

            },
            {
                data: 'user',
                name: 'user',

            },
            {
                data: 'delete',
                name: 'delete',
                orderable: false,
                searchable: false
            },
        ],
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
            // computing column Total of the complete result
            var Total = api
                .column( 8 )
                .data()
                .reduce( function (a, b) {
                    b = b.replace('<label style="color:blue;" ><b>', "");
                    b = b.replace('</b></label>', "");
                    return intVal(a) + intVal(b);
                }, 0 );
            var Cash = api
                .column( 9 )
                .data()
                .reduce( function (a, b) {
                    b = b.replace('<label style="color:blue;" ><b>', "");
                    b = b.replace('</b></label>', "");
                    return intVal(a) + intVal(b);
                }, 0 );
            var Transfer = api
                .column( 10 )
                .data()
                .reduce( function (a, b) {
                    b = b.replace('<label style="color:blue;" ><b>', "");
                    b = b.replace('</b></label>', "");
                    return intVal(a) + intVal(b);
                }, 0 );
            var Credit = api
                .column( 11 )
                .data()
                .reduce( function (a, b) {
                    b = b.replace('<label style="color:blue;" ><b>', "");
                    b = b.replace('</b></label>', "");
                    return intVal(a) + intVal(b);
                }, 0 );
            var Change = api
                .column( 12 )
                .data()
                .reduce( function (a, b) {
                    b = b.replace('<label style="color:blue;" ><b>', "");
                    b = b.replace('</b></label>', "");
                    return intVal(a) + intVal(b);
                }, 0 );
            // Update footer by showing the total with the reference of the column index
            $('#total').html(Total.toFixed(2));
            $('#cash').html(Cash.toFixed(2));
            $('#transfer').html(Transfer.toFixed(2));
            $('#credit').html(Credit.toFixed(2));
            $('#change').html(Change.toFixed(2));
        },
    });
});

function deleteData(id) {
    Swal.fire({
        title: '',
        text: "{{ __('คุณต้องการลบข้อมูลนี้ใช่ หรือ ไม่?') }}",
        icon: 'warning',
        type: "input",
        showCancelButton: true,
        confirmButtonColor: '#fe5d70',
        cancelButtonColor: '#868e96',
        confirmButtonText: "{{ __('ลบ') }}",
        cancelButtonText: "{{ __('ยกเลิก') }}",
        reverseButtons: true,
    }).then((result) => {
        if (result.value) {
            $.ajax({
                type: "get",
                url: '/report/bill/'+id,
                success: function (data) {
                    table.ajax.reload();
                    show_success("{{ __('ลบ') }}");
                },
                error: function (err) {
                    console.log(err.responseText);
                }
            });
        }
    });
}

function confirm_delBill(id){
    Swal.fire({
        title: '',
        text: "{{ __('คุณต้องการลบข้อมูลนี้ใช่ หรือ ไม่ ถ้าใช่กรุณาระบุสาเหตุ !') }}",
        icon: 'warning',
        type: "input",
        showCancelButton: true,
        cancelButtonColor: '#868e96',
        cancelButtonText: "{{ __('ยกเลิก') }}",
        reverseButtons: true,
        input: 'text',
        inputAttributes: {
            autocapitalize: 'off'
        },
        showCancelButton: true,
        confirmButtonColor: '#fe5d70',
        confirmButtonText: "{{ __('ยืนยัน') }}",
        showLoaderOnConfirm: true,
        preConfirm: (login) => {
            if(login == ''){
                Swal.showValidationMessage(
                 'กรุณาระบุสาเหตุ !'
                )
            }
            return login;
        },
        allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
        if (result.value) {
            console.log(result.value);
            var val = result.value;
            $.ajax({
                type: "get",
                url: 'bill_cancel/'+id+'/'+val+'',
                success: function (data) {
                    table.ajax.reload();
                    show_success("{{ __('ลบ') }}");
                },
                error: function (err) {
                    console.log(err.responseText);
                }
            });
        }
    })
}


function filterData()
{
    var start_date = $('#start').val();
    var end_date = $('#end').val();
    var bill_type = $('#bill_type').val();
    var route_print = "{{ url('bill_pdf') }}";
    var route_print_slip = "{{ url('bill_slip') }}";
    var route_print_excel = "{{ url('bill_excel') }}";
    $('#print').attr("href", route_print +'/'+ start_date + '/' + end_date+'/'+bill_type);
    $('#print_slip').attr("href", route_print_slip +'/'+ start_date + '/' + end_date+'/'+bill_type);
    $('#print_excel').attr("href", route_print_excel +'/'+ start_date + '/' + end_date+'/'+bill_type);
    table.ajax.reload();
}

</script>



@endsection