@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Item Purchase List
            <small>Preview</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Item Purchase List</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Custom Tabs -->

        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
                <form method="GET" action="#" id="custom_search_form" class="no-print" role="form">

                    <div class="row">

                        <div class="col-md-3 form-group">
                            <label>Start Date:</label>

                            <input class="form-control datepicker" type="text" placeholder="Start Date"
                                   autocomplete="off"
                                   name="start_date">
                        </div>

                        <div class="col-md-3 form-group">
                            <label>End Date:</label>
                            <input class="form-control datepicker" type="text" placeholder="End Date" autocomplete="off"
                                   name="end_date">
                        </div>


                        <div class="col-md-3 form-group">
                            <label>Suppliers:</label>

                            {!! Form::select('item_supplier_id',
                                            $suppliers
                                            ,null, ['class'=> 'form-control select2', 'placeholder'=>
                                            'Please Select Supplier']) !!}

                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12 form-group">
                            <input class="btn btn-info pull-right" type="submit" value="Search"/>
                        </div>
                    </div>

                </form>
                <table id="itemPurchaseDatatable"
                       class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>S/N</th>
                        <th>Invoice No</th>
                        <th>Total</th>
                        <th>Discount</th>
                        <th>Paid</th>
                        <th>Due</th>
                        <th>Supplier Name</th>
                        <th>Created By</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Payment</th>
                        <th>Action</th>
                    </tr>
                    </thead>

                    <tfoot>
                    <tr>
                        <th>S/N</th>
                        <th>Invoice No</th>
                        <th>Total</th>
                        <th>Discount</th>
                        <th>Paid</th>
                        <th>Due</th>
                        <th>Supplier Name</th>
                        <th>Created By</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Payment</th>
                        <th>Action</th>
                    </tr>

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

    </section>


@endsection

@section('extra-css')
    {{Html::style('assets/bower_components/datatables.net/buttons/css/buttons.dataTables.min.css')}}
@stop

@section('extra-js')
    <script src="{{ asset('assets/bower_components/datatables.net/buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{asset('assets/bower_components/datatables.net/buttons/js/buttons.html5.min.js')}}"></script>
    <script src="{{asset('assets/bower_components/datatables.net/buttons/js/buttons.print.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var itemPurchaseDatatable = $('#itemPurchaseDatatable').DataTable({
                processing: true,
                serverSide: true,
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'print',
                        charset: 'utf-8',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7]
                        }
                    },
                    'pageLength'
                ],
                lengthMenu: [
                    [10, 25, 50],
                    ['10 rows', '25 rows', '50 rows']
                ],
                order: [[0, "asc"]],
                ajax: {
                    'url': '{{ route("get.item.purchase.ajax") }}',
                    data: function (d) {
                        d.item_supplier_id = $('select[name=item_supplier_id]').val();
                        d.start_date = $('input[name=start_date]').val();
                        d.end_date = $('input[name=end_date]').val();
                    }
                }, columns: [
                    {data: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'invoice_no', name: 'invoice_no', orderable: true, searchable: true},
                    {data: 'total_price', name: 'total_price', orderable: true, searchable: false},
                    {data: 'total_discount', name: 'total_discount', orderable: true, searchable: false},
                    {data: 'total_paid', name: 'total_paid', orderable: true, searchable: false},
                    {data: 'due', name: 'due', orderable: true, searchable: false},
                    {data: 'suppliers_name', name: 'item_suppliers.name', orderable: true, searchable: true},
                    {data: 'full_name', name: 'users.full_name', orderable: true, searchable: true},
                    {data: 'date', name: 'date', orderable: true, searchable: false},
                    {data: 'status', name: 'status', orderable: true, searchable: false},
                    {data: 'payment', name: 'payment', orderable: true, searchable: false},
                    {data: 'action', name: 'action', orderable: true, searchable: false}
                ],

                footerCallback: function (row, data, start, end, display) {

                    var api = this.api(), data;

                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    var totalapi = this.api();

                    var totalJsonData = totalapi.ajax.json();

                    var formatter = new Intl.NumberFormat();

                    // Update footer

                    $(api.column(2).footer()).html(formatter.format(totalJsonData.sub_total_price).replace('$', ''));
                    $(api.column(3).footer()).html(formatter.format(totalJsonData.sub_total_discount).replace('$', ''));
                    $(api.column(4).footer()).html(formatter.format(totalJsonData.sub_total_paid).replace('$', ''));
                    $(api.column(5).footer()).html(formatter.format(totalJsonData.sub_total_due).replace('$', ''));

                }
            });

            $('#custom_search_form').on('submit', function (e) {
                itemPurchaseDatatable.draw();
                e.preventDefault();
            });

            $('.btn-submit-action').on('click', function () {
                $("#myForm").submit();
            });
        });


    </script>
@stop