@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('sales_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>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th class="text-center" colspan="8">ยอดรวม</th>
                                            <th class="text-center" ><u id="total"></u></th>
                                            <th class="text-center" ><u id="cost"></u></th>
                                            <th class="text-center" style="color:red;"><u id="profit"></u></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('sales') }}";
$(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: 'cost',
                name: 'cost',

            },
            {
                data: 'profit',
                name: 'profit',

            },
            // {
            //     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 Cost = 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 Profit = 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 );
            // Update footer by showing the total with the reference of the column index
            $('#total').html(Total.toFixed(2));
            $('#cost').html(Cost.toFixed(2));
            $('#profit').html(Profit.toFixed(2));
        },
    });
});

function filterData()
{
    var start_date = $('#start').val();
    var end_date = $('#end').val();
    var bill_type = $('#bill_type').val();
    var route_print = "{{ url('sales_pdf') }}";
    $('#print').attr("href", route_print +'/'+ start_date + '/' + end_date+'/'+bill_type);
    table.ajax.reload();
}

</script>



@endsection