@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Due Reports
            <small>Preview</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Reports</a></li>
            <li class="active">Due</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Custom Tabs -->
        <div class="box box-info">
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">

                        <form method="GET" action="#" id="custom_search_form" class="no-print" role="form">

                            <div class="row">

                                <div class="col-md-3 form-group">
                                    <label for="email">Start date</label>
                                    <input class="form-control datepicker" value="{{request('start_date')}}" id="start_date"
                                           type="text"
                                           placeholder="Start Date"
                                           autocomplete="off"
                                           name="start_date">
                                </div>

                                <div class="col-md-3 form-group">
                                    <label for="pwd">End date</label>
                                    <input class="form-control datepicker" value="{{request('end_date')}}" id="end_date"
                                           type="text"
                                           placeholder="End Date"
                                           autocomplete="off"
                                           name="end_date">
                                </div>


                            </div>

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

                        </form>

                        <table id="yajraDatatable" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Date</th>
                                <th>Invoice Id</th>
                                <th>Patient Id</th>
                                <th>Name</th>
                                <th>Mobile No</th>
                                <th>Gender</th>
                                <th>Amount</th>
                                <th>Action</th>
                            </tr>
                            </thead>

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

            </div>
        </div>
    </section>
    <!-- Normal Modal -->

@endsection

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

@section('script')
    {{ Html::script('assets/bower_components/datatables.net/js/jquery.dataTables.min.js') }}
    {{ Html::script('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}
    <script>

        $(document).ready(function () {

            var yajraTable = $('#yajraDatatable').DataTable({
                processing: true,
                serverSide: true,
                bFilter: true,
                dom: 'Bfrtip',
                lengthMenu: [
                    [10, 25, 50, -1],
                    ['10 rows', '25 rows', '50 rows', 'Show all']
                ],
                order: [[0, "asc"]],
                ajax: {
                    url: '{{ route("accounts.view.due.lists.ajax") }}',
                    data: function (d) {
                        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: 'date', name: 'date', orderable: false, searchable: false},
                    {data: 'invoice_id', name: 'invoice_id', orderable: true, searchable: true},
                    {data: 'patient_id', name: 'patient_id', orderable: true, searchable: true},
                    {data: 'full_name', name: 'full_name'},
                    {data: 'mobile_no', name: 'mobile_no'},
                    {data: 'gender', name: 'gender'},
                    {data: 'due_amount', name: 'due_amount'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],

            });

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

        });


    </script>
@endsection