@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;
    }
    .total_point {
        text-align: right;
    }
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    {{ __('outgoingpoint::labels.backend.outgoingpoint.management') }}
                </h4>
            </div><!--col-->
            <div class="col-sm-5"></div>
            <div class="col-sm-2 text-right">
                <form class="d-none" action="{{ route('admin.outgoingpoint.download_all') }}" id="downloadForm"
                    method="POST">
                    @csrf
                    <input type="text" name="generated_date" class="downloadGeneratedDate">
                    <input type="text" name="client" class="downloadClient">
                </form>
                <button type="button" class="btn btn-danger btn-sm ml-1" onclick="downloadAll()"><i
                        class="fas fa-download"></i>
                    {{ __('Download All') }}</button>
            </div>
        </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 {{$client['id']==$clientId ?'selected':''}}
                        value="{{$client['id']}}">
                            {{$client['merchant_name']}}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <input name="generated_date" class="form-control generated_date" value="{{$generatedDate}}" type="text" placeholder="Choose Date" readonly="true">
            </div>
            <div class="col-md-2">
                <button type="submit"  class="btn btn-primary"><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>{{ __('coupon::labels.backend.coupon.table.customer') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.phone') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.reward') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.point') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.amount') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.status') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.expiry') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.claimed_user') }}</th>
                                <th>{{ __('coupon::labels.backend.coupon.table.last_updated') }}</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr class="total_points">
                                <th colspan="1"> </th>
                                <th colspan="1"> Total </th>
                                <th colspan="2">
                                    <div class="input-icon">
                                        <input class="form-control total_point" type="text" disabled="disabled">
                                    </div>
                                </th>
                                <th colspan="2">
                                    <div class="input-icon">
                                        <input class="form-control total_amount" type="text" disabled="disabled">
                                    </div>
                                </th>
                                <th colspan="3"></th>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="actions pt-3">
                        <div class="row">
                            <div class="col">
                                {{ form_cancel(route('admin.outgoingpoint.index'),'<i class="fa fa-times"></i>&nbsp;&nbsp;'.__('buttons.general.cancel'))
                                    ->style(['width'=>'130px','font-size'=>'15px'])
                                 }}
                            </div><!--col-->

                            <div class="col text-right">
                                {{ html()->form('POST', '/admin/outgoingpoint/save')->open() }}
                                    <input type="hidden" name="generated_date" value="{{ $generatedDate }}">
                                    <input type="hidden" name="client_id" value="{{ $clientId }}">
                                    <input type="hidden" name="total_points" class="total_point">
                                    <input type="hidden" name="total_amount" class="total_amount">
                                    @can('save outgoingpoint')
                                    <div class="btn-group">
                                        <div class="pull-right" style="margin-bottom:10px">
                                            <div class="btn-group">
                                                <button type="submit" class="btn btn-success" style="width:130px;font-size:15px;"><i class="fa fa-check"></i>&nbsp;&nbsp;Save</button>
                                            </div><!--btn group-->
                                        </div><!--pull right-->
                                    </div>
                                    @endcan
                                {{ html()->form()->close() }}
                            </div><!--row-->
                        </div><!--row-->
                    </div>
                </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("https://cdn.datatables.net/plug-ins/1.12.1/api/sum().js") }}
    <script>

        const downloadAll = () => {
            var generatedDate = $('.generated_date').val();
            var client = $('#client option:selected').val();
            $('.downloadGeneratedDate').val(generatedDate);
            $('.downloadClient').val(client);
            $('#downloadForm').submit();
        };

        $(function() {

            $('.generated_date').datetimepicker({
                format:'yyyy-mm-dd hh:ii',
                endDate: new Date(),
                autoclose: true
            });
            $('.select').select2({
                placeholder:'Choose Merchant'
            });

            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: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                searching: true,
                serverSide: true,
                ajax: {
                    url: '{!! route("admin.outgoingpoint.search") !!}',
                    data: { 'client_id' : '{{$clientId}}', 'generated_date' : '{{$generatedDate}}', 'clear_outgoing' : 0},
                    type: 'post',
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [
                {data: 'customer', name: 'customer.name', searchable: true},
                {data: 'mobile', name: 'customer.mobile', searchable: true},
                {data: 'reward', name: 'reward'},
                {data: 'used_points', name: 'used_points'},
                {data: 'amount', name: 'amount'},
                {data: 'status', name: 'status'},
                {data: 'expiry', name: 'expiry'},
                {data: 'claimed_user', name: 'claimed_user'},
                {data: 'updated_at', name: 'updated_at'},
                ],
                success: function(result){
                    console.log(result)
                },
                order: [],
                searchDelay: 500,
                fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    var api = this.api();
                    $('.total_amount').val(api.column(3).data().sum());
                    load_plugins();
                }
            });

            table.on( 'xhr', function () {
                var json = table.ajax.json();
                $('.total_point').val(json.total_points);
                if(json.total == 0){
                    $('.actions').hide();
                    $('.total_points').hide();
                }
            });


        });
    </script>
@endpush