@extends('app')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Discount Patient List
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Account</a></li>
            <li class="active">Discount Patient List</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">
            <div class="box-header with-border">

            </div>
            <!-- /.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>
                        @can('patient-discount-view')
                            <table id="yajraDatatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>S/N</th>
                                    <th>Date</th>
                                    <th>Patient Name</th>
                                    <th>Mobile</th>
                                    <th>Gender</th>
                                    <th>Discount Amount</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>S/N</th>
                                    <th>Date</th>
                                    <th>Patient Name</th>
                                    <th>Mobile</th>
                                    <th>Total</th>
                                    <th>Discount Amount</th>
                                </tr>
                                </tfoot>

                            </table>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('css')
    {{ Html::style('assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}
    {{ Html::style('assets/bower_components/datatables.net/buttons/css/buttons.dataTables.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 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.flash.min.js')}}"></script>
    <script src="{{asset('assets/bower_components/datatables.net/buttons/js/jszip.min.js')}}"></script>
    <script src="{{asset('assets/bower_components/datatables.net/buttons/js/pdfmake.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>

        $(document).ready(function () {

            var yajraTable = $('#yajraDatatable').DataTable({
                processing: true,
                serverSide: true,
                bFilter: true,
                dom: 'Bfrtip',
                lengthMenu: [
                    [10, 25, 50, 100],
                    ['10 rows', '25 rows', '50 rows', '100 rows']
                ],
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print', 'pageLength'
                ],
                order: [[0, "asc"]],
                ajax: {
                    url: '{{ route("outdoor.view.discount.patients.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: 'full_name', name: 'full_name'},
                    {data: 'mobile_no', name: 'mobile_no'},
                    {data: 'gender', name: 'gender'},
                    {data: 'amount', name: 'amount'},
                ],

                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(5).footer()).html(formatter.format(totalJsonData.total_amount).replace('$', ''));
                }

            });

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

        });


    </script>
@endsection