@extends ('backend.layouts.app')
@section ('title', app_name() . ' | ' . __('outgoingpoint::labels.backend.outgoingpoint.management'))

@section('breadcrumb-links')
    @include('outgoingpoint::includes.breadcrumb-links')
@endsection

@push('after-styles')
{{ style('assets/plugins/select2/css/select2.min.css') }}
{{ style('assets/plugins/select2/css/select2-bootstrap.min.css') }}
{{ style('assets/plugins/sweetalert2/sweetalert2.min.css') }}
{{ style('assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }} 
<style>
    .dataTables_length {
        float: left;
    }
    div.dt-buttons {
        float: right;
    }
</style>       
@endpush

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    {{ __('outgoingpoint::labels.backend.outgoingpoint.management') }} 
                </h4>
            </div><!--col-->
        </div><!--row-->
        {{ html()->form('get', '/admin/outgoingpoint/view')->open() }}
        <div class="row mt-4"> 
            <div class="col-md-4">
                <select class="select" name="client_id" id="client" style="width: 100%;">
                    <option value="All" selected>All Merchant</option>
                    @foreach($clients as $client)
                        <option value="{{$client['id']}}">{{$client['merchant_name']}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <input name="generated_date" class="form-control generated_date" id= "date" type="text" placeholder="Choose Date" readonly="true">
            </div>
            <div class="col-md-2">
                <button type="submit"  class="btn btn-primary" disabled="disabled"><i class="fa fa-search"></i>&nbsp;Search</button>
            </div>
        </div>
        {{ html()->form()->close() }}
        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive">
                    <table id="outgoingpoint-table" class="table table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.id') }}</th>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.client_name') }}</th>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.total_points') }}</th>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.total_amount') }}</th>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.generated_date') }}</th>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.created_by') }}</th>
                            <th>{{ __('outgoingpoint::labels.backend.outgoingpoint.table.created_at') }}</th>
                            <th>{{ __('labels.general.actions') }}</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div><!--col-->
        </div><!--row-->
    </div><!--card-body-->
</div><!--card-->

@endsection


@push('after-scripts')
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    {{ script('assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js')}}
    {{ script('assets/plugins/sweetalert2/sweetalert2.all.min.js')}}
    {{ script('assets/plugins/select2/js/select2.full.min.js')}}
    {{ script("assets/plugins/select2/component/components-select2.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js ") }}
    {{ script("https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js") }}
    <script>
        $(function() {
            $('.generated_date').datetimepicker({
                format:'yyyy-mm-dd hh:ii',
                endDate: new Date(),
                autoclose: true
            });

            $('#date').change(function(){ 
                if($(this).val()){
                    $(':input[type="submit"]').prop('disabled', false);
                }
            });

            $('.select').select2({
                placeholder:'Choose Merchant'
            });    

            var colArray = [ 0, 1, 2, 3, 4];
            var table= $('#outgoingpoint-table').DataTable({
                language:
                    {
                        processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                    },
                dom: 'lBfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: colArray
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: colArray
                        }
                    }
                ],
                processing: true,
                searching: false,
                serverSide: true,
                ajax: {
                    url: '{!! route("admin.outgoingpoint.get") !!}',
                    type: 'post',
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [
                    { data: "id", name: "id" },
                    { data: "client_name", name: "client_name" },
                    { data: "total_points", name: "total_points"},
                    { data: "total_amount", name: "total_amount"},
                    { data: "generated_date", name: "generated_date"},
                    {data: "created_by", name: "created_by"},
                    { data: "created_at", name: "created_at"},
                    {data: 'actions', name: 'actions', searchable: false, sortable: false}
                ],
                order: [[0, "asc"]],
                searchDelay: 500,
                fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    load_plugins();
                }
            });
        });
    </script>

@endpush