@extends('app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Monthly 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">Monthly 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">

                    <form name="searchForm" class="searchForm form-horizontal" method="get"
                          action="{{route('accounts.getMonthlyDue.lists.post')}}">
                        <div class="row">
                            <div class="form-group" style="margin-top: 10px; margin-bottom: 5px;">
                                <div class="col-md-9 col-md-offset-3">
                                    <label class="col-md-1">
                                        <i class="fa fa-calendar"></i>
                                        From:
                                    </label>
                                    <div class="col-md-3">
                                        <input class="form-control datepicker" autocomplete="off" type="text"
                                               name="from" id="from" value="{{$from}}">

                                    </div>
                                    <label class="col-md-1">
                                        <i class="fa fa-calendar"></i>
                                        To:
                                    </label>
                                    <div class="col-md-3">
                                        <input class="form-control datepicker" autocomplete="off" type="text" name="to"
                                               id="to" value="{{$to}}">
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-sm btn-primary" type="submit"> Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="col-md-12">
                        @can('monthly-due-list-view')
                            <table id="testSaleReportDatatable"
                                   class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Invoice ID</th>
                                    <th>Patient Name</th>
                                    <th>Mobile No</th>
                                    <th>Due</th>
                                    <th>Date</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($dues as $key => $due)
                                    <tr>
                                        <th>{{ $due->invoice_id }}</th>
                                        <th>{{ $due->full_name }}</th>
                                        <th>{{ $due->mobile_no }}</th>
                                        <th>{{ $due->due_amount }}</th>
                                        <th>{{ $due->created_at}}</th>
                                    </tr>
                                @endforeach
                                </tbody>
                                <tfoot>
                                <tr>
                                    <th>Invoice ID</th>
                                    <th>Patient Name</th>
                                    <th>Mobile No</th>
                                    <th>Due</th>
                                    <th>Date</th>
                                </tr>
                                <tr>
                                    <th colspan="3" style="color: green; font-size: 18px;"> Total
                                        Amount
                                    </th>
                                    <th style="color: red; font-size: 18px;" id="totalDue"></th>
                                    <th></th>
                                </tr>
                                </tfoot>
                            </table>
                        @endcan
                    </div>

                    <!-- /.tab-content -->
                </div>
                <!-- nav-tabs-custom -->
                <!-- SELECT2 EXAMPLE -->
            </div>
        </div>
    </section>
    <!-- Normal Modal -->
    <div id="saleReportModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 800px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Diagnostic Test Sale Report</h4>
                </div>
                <!-- //Message from Ajax request// -->
                <div class="modal-body" id="saleDetailsBody">
                    Loading <img src="{{url('icons/loader.gif')}}" title="loading">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div> <!-- /.modal -->

@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            var fromDate = $("#from").val();
            var toDate = $("#to").val();

            $.ajax({
                url: 'get-monthly-due-total-feagure/' + fromDate + '/' + toDate,
                method: 'GET',
                dataType: '',
                success: function (data) {
                    $("#totalDue").empty();

                    $("#totalDue").html(data);
                },
                error: function (data) {
                    alert('Something went wrong !');
                }

            });

        });


        function loadingImg() {
            $('#loading').ajaxStart(function () {
                $(this).show();
            }).ajaxComplete(function () {
                $(this).hide();
            });
        }

    </script>
@endsection