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

@section('content_header')
    <h1>Purchase 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('purchase-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('purchase-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>Amount</th>
                            <th>Paid via</th>
                            <th>Fuel Station Name</th>
                            <th>Fuel Station Id</th>
                            <th>Transaction Id</th>
                            <th>Points Earned</th>
                            <th>Total Points</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('purchase-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: 'total_amount', name: 'Amount'},
            {data: 'payment_mode', name: 'Paid via'},
            {data: 'fuel_station.name', name: 'Fuel Station Name'},
            {data: 'fuel_station.id', name: 'Fuel Station Id'},
            {data: 'txn_id', name: 'Transaction Id'},
            {data: 'points_earned', name: 'Points Earned'},
            {data: 'total_points', name: 'Total Points'},
        ]
    });
});

$("#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