@extends('layouts/layout')
@section('title', 'Due Invoices')
@push('style')
@endpush

@section('content')
<!-- page content -->
<div class="" role="main">
    <div class="">
        <div class="row">
            <div class="col-md-12 col-sm-12 mt-2">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Due Invoices</h2>

                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content mt-0 p-0">
                        <form action="{{url('dueinvoicehistory')}}" method="post" class="mb-3">
                            @csrf
                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                <label class="form-control-label mb-1">From Date</label>
                                <input id="from_date" name="from_date" class="date-picker form-control"
                                    value=""
                                    placeholder="dd-mm-yyyy" type="text" required="required" type="text"
                                    onfocus="this.type='date'" onmouseover="this.type='date'" onclick="this.type='date'"
                                    onblur="this.type='text'" onmouseout="timeFunctionLong(this)">
                                <span id="from_date_error" class="validate"></span>
                            </div>
                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                <label class="form-control-label mb-1">To Date</label>
                                <input id="to_date" name="to_date" class="date-picker form-control"
                                    value=""
                                    placeholder="dd-mm-yyyy" type="text" required="required" type="text"
                                    onfocus="this.type='date'" onmouseover="this.type='date'" onclick="this.type='date'"
                                    onblur="this.type='text'" onmouseout="timeFunctionLong(this)">
                                <span id="to_date_error" class="validate"></span>
                            </div>
                            <div class="form-group">
                                <div class="col-12 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-md-1">
                                    <input type="submit" class="btn btn-round btn-primary mt-4" name="show_status"
                                        id="show_status" value="Show Invoices" />
                                    <!-- <button type="submit" id="training_id" class="btn btn-round btn-primary mt-4">Submit</button> -->
                                </div>
                            </div>
                        </form>
                        <div class="col-md-12 col-sm-12 ">
                            <div class="">
                                <div class="">

                                    <table id="datatable-fixed-header"
                                        class="table table-striped table-bordered text-center" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Sr.No</th>
                                                <th>Unit Name</th>
                                                <th>Month</th>
                                                <th>Year</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($receipts as $key => $receipt)
                                            <tr>
                                                <td>{{$key +1}}</td>
                                                <td>{{$receipt->unit_name}}</td>
                                                <td>{{date('M', strtotime($receipt->created_at))}}</td>
                                                <td>{{date('Y', strtotime($receipt->created_at))}}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
@endsection
@push('scripts')
<script>
function timeFunctionLong(input) {
    setTimeout(function() {
        input.type = 'text';
    }, 60000);
}
</script>
@endpush