@extends('agentportal.layouts.layout')

@section('title', trans('message_lang.LBL_MONEYGRAM_PAID_TXNS'))

@section('page_style')
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
    <style type="text/css">
        .select2-container--default .select2-selection--single {
            min-height: 38px;
            max-height: 38px;
        }
        .card.card-custom > .card-header.align-center {
            align-items: center;
        }
        .perPage label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .perPage label select{width: auto;margin: 0 5px}
        .pagination {
            display: flex;
            justify-content: space-between;
        }
        .card-header.align-center h4{margin-bottom: 0;}
        .card-header.align-center label{margin-bottom: 0}
    </style>
@endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-custom gutter-b">
                            <div class="card-header">
                                <div class="card-title">
                                    <h3 class="card-label">
                                        {{ trans('message_lang.LBL_MONEYGRAM_PAID_TXNS') }}
                                    </h3>
                                </div>
                                <div style="float: right; padding:10px;">
                                    <a href="{{ route('agentportal.summary-index') }}"class="btn btn-light btn-lg btn-block">{{ trans('message_lang.BTN_BACK') }}</a>
                                </div>
                            </div>
                            <div class="card-body">

                                <form method="POST" action="{{ url('agentportal/summary/moneygram/paid-txn') }}" name="form" id="form">
                                    @csrf
                                    <input type="hidden" name="page" id="page" value="1">
                                    <div class="form-group row justify-content-end">
                                        <div class="col-md-3">
                                            <button type="submit" name="export" class="btn btn-primary font-weight-bolder float-right">{!! trans('message_lang.LBL_EXPORT_TO_CSV') !!}</button>
                                        </div>
                                    </div>
                                    <div class="form-group row justify-content-md-center">
                                        <div class="form-group col-md-3"
                                            style="display: @hasanyrole('administrator|operation|compliance|customer service|finance back office|bussiness development|tresorerie') block @else none @endhasanyrole">
                                            <label class="" for="agent_country_id">{!! trans('message_lang.LBL_COUNTRY') !!} <span style="color:red;"></span></label><br />
                                            <select name="agent_country_id" id="agent_country_id"
                                                class="form-control custom-field">
                                                <option value="">{!! trans('message_lang.PLACEHOLDER_SELECT_COUNTRY') !!}</option>
                                                @foreach ($agentCountries as $key => $country)
                                                    <option value="{{ $country->id }}" {{ $request->has('agent_country_id') && $request->agent_country_id == $country->id ? 'selected' : '' }} @hasanyrole('operation|compliance|customer service|finance back office|bussiness development|tresorerie') @if (auth()->guard('agentportal')->user()->country_id == $country->id) selected @endif @endhasanyrole>{{ $country->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="fromDate">{{ trans('message_lang.LBL_FROM_DATE') }} <span style="color:red;"></span></label>
                                            <input type="text" name="fromDate" value="{{ app()->getLocale() == "fr" ? date('d-m-Y',strtotime($request->has('fromDate') ? $request->fromDate : date('Y-m-d',strtotime(now())))) : date('Y-m-d',strtotime($request->has('fromDate') ? $request->fromDate : date('Y-m-d',strtotime(now())))) }}" placeholder="{{ trans('message_lang.LBL_FROM_DATE') }}" id="fromDate" class="form-control custom-field">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="toDate">{{ trans('message_lang.LBL_TO_DATE') }} <span style="color:red;"></span></label>
                                            <input type="text" name="toDate" value="{!! ($request->has('toDate') && $request->toDate != '') ? app()->getLocale() == "fr" ? date('d-m-Y',strtotime($request->toDate)) : date('Y-m-d',strtotime($request->toDate)) : '' !!}" placeholder="{{ trans('message_lang.LBL_TO_DATE') }}" id="toDate" class="form-control custom-field">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="referenceNo">{{ trans('message_lang.LBL_PICK_NO') }} <span style="color:red;"></span></label>
                                            <input type="text" name="pickup" value="{!! $request->pickup ?? '' !!}" placeholder="{{ trans('message_lang.LBL_PICK_NO') }}" id="referenceNo" class="form-control custom-field">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-3"
                                            style="display: @hasanyrole('administrator|operation|compliance|customer service|finance back office|bussiness development|tresorerie') block @else none @endhasanyrole">
                                            <label class="" for="agent_location_id">{!! trans('message_lang.LBL_LOCATION') !!} <span style="color:red;"></span></label><br />
                                            <select name="agent_location_id" id="agent_location_id" class="form-control custom-field">
                                                <option value="">{!! trans("message_lang.PLACEHOLDER_SELECT") !!}</option>
                                                @foreach ($agentLocations as $key => $agentLocation)
                                                <option value="{{ $key }}" {{ $request->has('agent_location_id') && $request->agent_location_id == $key ? 'selected' : '' }} >{{ $agentLocation }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        
                                    </div>
                                    <div class="form-group row justify-content-md-center">
                                        <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
                                        <button type="submit" class="btn btn-primary" id="apply-filter-paid" data-count="0">{!! trans("message_lang.BTN_SEARCH") !!}</button>
                                        <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
                                        <button type="button" onclick="window.location.replace('{{ url('agentportal/summary/moneygram/paid-txn')}}')" class="btn btn-secondary">{!! trans("message_lang.BTN_CLEAR_SEARCH") !!}</a>
                                    </div>
                                    @if($agentPaidTxns)
                                    <div class="perPage">
                                        <label>
                                            <div class="show">{!! trans('message_lang.DATATABLE_LBL_SHOW') !!}</div>
                                            <select name="per_page" id="perPage" class="custom-select custom-select-sm form-control form-control-sm">
                                                <option value="10" {!! $request->has('per_page') && $request->per_page == "10" ? 'selected' : '' !!} {!! !$request->has('per_page') ? 'selected' : '' !!}>10</option>
                                                <option value="50" {!! $request->has('per_page') && $request->per_page == "50" ? 'selected' : '' !!}>50</option>
                                                <option value="100" {!! $request->has('per_page') && $request->per_page == "100" ? 'selected' : '' !!}>100</option>
                                                <option value="{!! $agentPaidTxns->total() !!}" {!! $request->has('per_page') && $request->per_page == $agentPaidTxns->total() ? 'selected' : '' !!}>All</option>
                                            </select>
                                            <div class="entries">{!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}</div>
                                        </label>
                                    </div>
                                    @endif
                                </form>

                                <div class="row">
                                    <div class="col-md-12">
                                        <!--begin: Datatable-->
                                        <table id="paid_txn_table" class="table table-bordered grid-table nowrap">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>{{ trans('message_lang.LBL_PAID_DATE') }}</th>
                                                    <th>{{ trans('message_lang.LBL_LOCATION') }}</th>
                                                    <th>{{ trans('message_lang.LBL_PICKUP_CODE') }}</th>
                                                    <th>{{ trans('message_lang.LBL_PAYOUT_AMOUNT') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($agentPaidTxns as $key => $txn)
                                                    <tr>
                                                        <td>{!! $key + 1 !!}</td>
                                                        <td>{!! format_date_tz($txn->paid_at) !!}</td>
                                                        <td>{!! $txn->agent_location_code . " - " . $txn->agent_location_name !!}</td>
                                                        <td><a href="{!! url('agentportal/summary/location/paid-txn/' . $txn->id.'/'.base64_encode($txn->agent_location_id)) !!}">{!! $txn->pickup_code !!}</a></td>
                                                        <td>{!! number_format($txn->receiving_amount, 2) !!} {!! $txn->receiving_currency !!}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td valign="top" colspan="10" style="text-align: center">{!! trans('message_lang.DATATABLE_LBL_NO_DATA_AVAILABLE') !!}</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                        <!--end: Datatable-->
                                    </div>
                                </div>
                                <div>
                                    @if($agentPaidTxns)
                                    <div class="pagination">
                                        <div class="left-info">
                                            <span>
                                                {!! trans('message_lang.DATATABLE_LBL_SHOWING_INFO') !!} {!! $agentPaidTxns->firstItem() !!} {!! trans('message_lang.DATATABLE_LBL_TO') !!} {!! $agentPaidTxns->lastItem() !!} {!! trans('message_lang.DATATABLE_LBL_OF') !!} {!! $agentPaidTxns->total() !!} {!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}
                                            </span>
                                        </div>
                                        <div class="right-info">
                                            {!! $agentPaidTxns->appends(request()->query())->links() !!}
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Container-->
        </div>
        <!--end::Entry-->
    </div>

@endsection

@section('page_vendors')
    <script src="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_script')

    <script>
        var list_paid_txn_table;
        $(document).ready(function() {

            $('#agent_location_id').select2({
                allowClear: true,
                width: '100%',
                placeholder: '{!! trans('message_lang.PLACEHOLDER_SELECT_LOCATION') !!}',
            });

            $('#fromDate').datepicker({
                "format": "{{ app()->getLocale() == "fr" ? 'dd-mm-yyyy' : 'yyyy-mm-dd' }}",
                "keyboardNavigation": false,
                "autoclose": true,
                "endDate": new Date(),
                "orientation": 'bottom'
            }).on('change', function(e){
                var date = new Date($("#fromDate").val());
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                var minDate = new Date(y, m, d + 31);

                $('#toDate').datepicker('destroy').datepicker({
                    "format": "{{ app()->getLocale() == "fr" ? 'dd-mm-yyyy' : 'yyyy-mm-dd' }}",
                    "keyboardNavigation": false,
                    "autoclose": true,
                    "startDate": $("#fromDate").val(),
                    "endDate":minDate,
                    "orientation": 'bottom'
                }).datepicker('setDate', minDate);
            });

            $('#toDate').datepicker({
                "format": "{{ app()->getLocale() == "fr" ? 'dd-mm-yyyy' : 'yyyy-mm-dd' }}",
                "keyboardNavigation": false,
                "autoclose": true,
                "startDate": $("#fromDate").val(),
                "endDate": new Date(),
                "orientation": 'bottom'
            });

            $('#agent_country_id').on('change', function() {
                var country_id = $(this).val();
                $.ajax({
                    url: "{{ url('/agentportal/reports/summary/location/ajaxNetwork') }}",
                    type: "POST",
                    // dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: {
                        country_id: country_id,
                    },
                    success: function(response) {
                        $('#agent_location_id').html(response);
                    }
                });
            });

            $(document).on("click",".page-link",function(e){
                e.preventDefault();
                const params = new URL($(this).attr('href')).searchParams;
                $("#page").val(params.get('page'));
                $("#form").submit();
            });

            $("#perPage").on("change",function(){
                jQuery("#form").submit();
            });

        });
    </script>

@endsection