@extends('adminlte::page')

@section('title', trans('adminlte::webApsPayment.title.index'))

@section('content_header')
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h1>@lang('adminlte::webApsPayment.header.index')</h1>
        </div>
        <div class="col-sm">
            <div class="col-sm">
                <div style="float: right">
                    @can('webaps-report-pdf-export')
                        <a class="btn btn-warning" style="color: white" onclick="exportreport('pdf')">Export to PDF</a>
                    @endcan
                    @can('webaps-report-excel-export')
                        <a class="btn btn-warning" style="color: white" onclick="exportreport('xls')">Export to Excel</a>
                    @endcan
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="container">

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Search</h3>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="col-sm-4">
                            <div class="input-group date" id="startdatetime" data-target-input="nearest">
                                <input type="text"  class="form-control datetimepicker-input filters" data-target="#startdatetime" name="searchByStartDateTime" id="searchByStartDateTime"  placeholder="Start Date-Time">
                                <div class="input-group-append" data-target="#startdatetime" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="input-group date" id="enddatetime" data-target-input="nearest">
                                <input type="text"  class="form-control datetimepicker-input filters" data-target="#enddatetime" name="searchByEndDateTime" id="searchByEndDateTime"  placeholder="End Date-Time">
                                <div class="input-group-append" data-target="#enddatetime" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <select class="form-control filters" id ="searchByRegion" name="searchByRegion">
                                    <option value="">Select Region</option>
                                    @foreach($regionName as $key => $value)
                                        <option value="{{$key}}" >{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <select class="form-control filters" id ="searchByParkingSite" name="searchByParkingSite">
                                    <option value="">Select Parking Site Name</option>
                                    @foreach($parkingSite as $key => $value)
                                        <option value="{{$key}}" >{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <select class="form-control filters" id ="searchByVehicleType" name="searchByVehicleType">
                                    <option value="">Select Vehicle Type</option>
                                    @foreach($vechicleType as $key => $value)
                                        <option value="{{$key}}" >{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <select class="form-control filters" id ="searchByPaymentGateway" name="searchByPaymentGateway">
                                    <option value="">Select Payment Gateway</option>
                                    @foreach($paymentGateway as $key => $value)
                                        <option value="{{$key}}" >{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="col-sm-4">
                        <a class="btn btn-primary" href="javascript:void(0);" id="search">@lang('adminlte::webApsPayment.header.search')</a>
                        <a class="btn btn-default" href="javascript:void(0);" id="clear">@lang('adminlte::webApsPayment.header.clear')</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="webapspayment_datatable" class="datatable table table-bordered table-striped"  width="100%">
                            <thead>
                                <tr>
                                    <th nowrap>@lang('adminlte::webApsPayment.parking_site_name')</th>
                                    <th nowrap>@lang('adminlte::webApsPayment.in_date_time')</th>
                                    <th nowrap>@lang('adminlte::webApsPayment.out_date_time')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.in_barcode')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.in_gate')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.vehicle_type')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.vehicle_number')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.mobile_number')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.txn_id')</th>
                                    <th data-orderable="false">@lang('adminlte::webApsPayment.payment_mode')</th>
                                    <th nowrap>@lang('adminlte::webApsPayment.total_payment_amount')</th><th nowrap>@lang('adminlte::webApsPayment.amount_paid')</th>
                                    <th nowrap>@lang('adminlte::webApsPayment.timestamp_of_payment')</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
    <script>
        $(document).ready(function () {
            var dataTable = $('.datatable').DataTable({
                "autoWidth": false, //this is for <th> width
                "order": [[12, "desc"]],
                "processing": true,
                "serverSide": true,
                "responsive": {
                    details: false
                },
                'searching': false,
                "ajax": {
                    "url": "{{ route('webaps_payment.index') }}",
                    "dataType": "json",
                    "type": "GET",
                    "data": function (data) {

                        var startDateTime = $('#searchByStartDateTime').val();
                        var endDateTime = $('#searchByEndDateTime').val();
                        var region = $('#searchByRegion').val();
                        var parkingSite = $('#searchByParkingSite').val();
                        var vehicleType = $('#searchByVehicleType').val();
                        var paymentGateway = $('#searchByPaymentGateway').val();

                        data.searchByStartDateTime = startDateTime;
                        data.searchByEndDateTime = endDateTime;
                        data.searchByRegion = region;
                        data.searchByParkingSite = parkingSite;
                        data.searchByVehicleType = vehicleType;
                        data.searchByPaymentGateway = paymentGateway;
                    }
                },
                "columns": [

                    {"data": "parking_site_name"},
                    {"data": "in_time"},
                    {"data": "out_time"},
                    {"data": "barcode"},
                    {"data": "gate"},
                    {"data": "vehicle_type"},
                    {"data": "vehicle_number"},
                    {"data": "mobile_number"},
                    {"data": "payment_reference_number"},
                    {"data": "payment_gateway"},
                    {"data": "total_payment_amount"},
                    {"data": "payment_amount"},
                    {"data": "updated_at"},
                ]
            });

            $('#search').click(function () {
                dataTable.draw();
            });

            $('#clear').click(function () {
                $('.filters').val('');
                dataTable.draw();
            });

            $('#startdatetime').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                useCurrent: false,
                showTodayButton: true,
                showClear: true,
                toolbarPlacement: 'bottom',
                sideBySide: true,
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down",
                    previous: "fa fa-chevron-left",
                    next: "fa fa-chevron-right",
                    today: "fa fa-clock-o",
                    clear: "fa fa-trash-o"
                }
            });

            $('#enddatetime').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                useCurrent: false,
                showTodayButton: true,
                showClear: true,
                toolbarPlacement: 'bottom',
                sideBySide: true,
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down",
                    previous: "fa fa-chevron-left",
                    next: "fa fa-chevron-right",
                    today: "fa fa-clock-o",
                    clear: "fa fa-trash-o"
                }
            });
        });

        function exportreport(type) {

            var query = {

                startDateTime: $('#searchByStartDateTime').val(),
                endDateTime: $('#searchByEndDateTime').val(),
                region: $('#searchByRegion').val(),
                regionName: $("#searchByRegion  option:selected").text(),
                parkingSite: $('#searchByParkingSite').val(),
                parkingSiteName: $("#searchByParkingSite  option:selected").text(),
                vehicleType: $('#searchByVehicleType').val(),
                vehicleTypeName: $("#searchByVehicleType  option:selected").text(),
                paymentGateway: $('#searchByPaymentGateway').val(),
                paymentGatewayName: $("#searchByPaymentGateway  option:selected").text(),
            }

            if(type == 'pdf')
            {
                var url = "{{ URL::to('/admin/webaps-payment/export/pdf?') }}" + $.param(query)
            }
            else if(type == 'xls')
            {
                var url = "{{ URL::to('/admin/webaps-payment/export/xls?') }}" + $.param(query)
            }
            window.location = url;
        }

    </script>
@stop