@extends('adminlte::page')
@section('title', 'Redeem Transactions')

@section('content_header')
    <h1>Redeem Transactions</h1>
@stop
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-3">
                        <form method="Get" action="{{url('redeem-transactions')}}" autocomplete="off">
                        @section('plugins.BootstrapColorpicker', true)
                        @php
                            $config = ['format' => 'YYYY-MM-DD'];
                        @endphp
                        <x-adminlte-input-date id="from_date" name="from_date" :config="$config" placeholder="Choose From date..." value="{{ $from_date }}"> 
                            <x-slot name="prependSlot">
                                <div class="input-group-text bg-gradient-info">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                            </x-slot>
                        </x-adminlte-input-date>
                    </div>
                    <div class="col-md-3">
                        <x-adminlte-input-date id="to_date" name="to_date" :config="$config" placeholder="Choose To date..." value="{{ $to_date }}">
                            <x-slot name="prependSlot">
                                <div class="input-group-text bg-gradient-info">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                            </x-slot>
                        </x-adminlte-input-date>
                    </div>
                    <div class="col-md-1">
                        <button class="btn btn-primary">Filter</button>
                        </form>
                    </div>
                    <div class="col-md-3">
                        <form method="Get" action="{{url('redeem-transactions-export')}}">
                            <input type="hidden" id="from_date_export" name="from_date" value="{{ $from_date }}">  
                            <input type="hidden" id="to_date_export" name="to_date" value="{{ $to_date }}">
                            <button class="btn btn-success">Export</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-bordered yajra-datatable">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Fuel Quantity</th>
                            <th>Amount</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop
@section('js')
<script type="text/javascript">
  $(document).ready(function() {    
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            "url" : "{{ route('redeem-transactions.list') }}",
            "data" : function ( d ) {
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'customer.name', name: 'Name'},
            {data: 'quantity', name: 'Fuel Quantity'},
            {data: 'redeem_amount', name: 'Amount'},
            {data: 'created_at', name: 'Date', 
                "render": function (data) {
                    var date = new Date(data);
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    return (("0" + day).slice(-2)+ "-" + (month.length > 1 ? month : "0" + month) + "-" + date.getFullYear());
                }
            }
        ]
    });
});

$("#from_date").on("change.datetimepicker", function (e) {
    if (e.oldDate !== e.date) {
        $('#from_date_export').val(new Date(e.date).toLocaleDateString('en-CA'));
    }
})

$("#to_date").on("change.datetimepicker", function (e) {
    if (e.oldDate !== e.date) {
        $('#to_date_export').val(new Date(e.date).toLocaleDateString('en-CA'));
    }
})

</script>
@stop