@extends("partnerportal.layouts.layout")

@section("title", trans("message_lang.LBL_CASH_PICKUP_TXNS"))

@section("page_style")
<link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('css/select2.min.css') }}">
<style type="text/css">
    .select2-container--default .select2-selection--single {
        min-height: 38px;
        max-height: 38px;
    }
</style>
@endsection

<div id="loading"  style="display:none;">
    <div id="image-loader">
        <img  src="{{ url('img/loading.gif')}}" alt="Loading..." />
    </div>
</div>

@section("content")
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <!-- <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
    </div> -->
    <!--end::Subheader-->
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--begin::Card-->
            <div class="card card-custom">
                <div class="card-header">
                    <div class="card-title">
                        <h3 class="card-label">{!! trans("message_lang.LBL_CASH_PICKUP_TXNS") !!}</h3>
                    </div>
                    <div class="card-toolbar">
                        <!--begin::Button-->
                        <a href="{{ url('partnerportal/dashboard') }}" class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                        <!--end::Button-->
                    </div>
                </div>
                <div class="card-body">

                    <!-- begin: search fields -->
                    <div class="p-4 mb-3 shadow-xs" style="border: 1px solid whitesmoke; border-radius: 5px" id="searchForms">
                        <!-- the search form -->
                        <form id="searchPartnerTxn_form" method="POST" action="{{ route('partnerportal.transactions.export_cashpickup') }}">
                            @csrf
                            <!-- sender informartion -->
                            <div class="mb-3 p-3" style="border: 1px dashed silver; border-radius: 10px">

                                <small class="mb-2 text-primary">{{ trans("message_lang.LBL_SENDER_DETAILS") }}</small>

                                <div class="form-row">
                                    <div class="col-12 col-lg-3">
                                        <label for="sender_fname">{{ trans("message_lang.LBL_FIRST_NAME") }}</label>
                                        <input type="text" name="sender_fname" id="sender_fname" class="form-control personalInfo">
                                    </div>

                                    <div class="col-12 col-lg-3">
                                        <label for="sender_lname">{{ trans("message_lang.LBL_LAST_NAME") }}</label>
                                        <input type="text" name="sender_lname" id="sender_lname" class="form-control personalInfo">
                                    </div>

                                    <div class="col-12 col-lg-3">
                                        <label for="sender_phone">{{ trans("message_lang.LBL_PHONE_NUMBER") }}</label>
                                        <input type="text" name="sender_phone" id="sender_phone" class="form-control personalInfo">
                                    </div>

                                    <!-- country -->
                                    <div class="col-12 col-lg-3">
                                        <label for="sender_country">{{ trans("message_lang.LBL_COUNTRY") }}</label>
                                        <select name="sender_country" id="sender_country" class="form-control">
                                            <option value="">{{ trans('message_lang.LBL_ALL') }}</option>
                                            @foreach ($countries as $country)
                                                <option value={{ $country->country_code }}>{{ $country->country_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- end: country -->
                                </div>

                            </div>

                            <!-- receiver informartion -->
                            <div class="mb-3 p-3" style="border: 1px dashed silver; border-radius: 10px">

                                <small class="mb-2 text-primary">{{ trans("message_lang.LBL_BNF_DETAILS") }}</small>

                                <div class="form-row">
                                    <div class="col-12 col-lg-3">
                                        <label for="receiver_fname">{{ trans("message_lang.LBL_FIRST_NAME") }}</label>
                                        <input type="text" name="receiver_fname" id="receiver_fname" class="form-control personalInfo">
                                    </div>

                                    <div class="col-12 col-lg-3">
                                        <label for="receiver_lname">{{ trans("message_lang.LBL_LAST_NAME") }}</label>
                                        <input type="text" name="receiver_lname" id="receiver_lname" class="form-control personalInfo">
                                    </div>

                                    <div class="col-12 col-lg-3">
                                        <label for="receiver_phone">{{ trans("message_lang.LBL_PHONE_NUMBER") }}</label>
                                        <input type="text" name="receiver_phone" id="receiver_phone" class="form-control personalInfo">
                                    </div>

                                    <!-- country -->
                                    <div class="col-12 col-lg-3">
                                        <label for="receiver_country">{{ trans("message_lang.LBL_COUNTRY") }}</label>
                                        <select name="receiver_country" id="receiver_country" class="form-control">
                                            <option value="">{{ trans('message_lang.LBL_ALL') }}</option>
                                            @foreach ($countries as $country)
                                                <option value={{ $country->country_code }}>{{ $country->country_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- end: country -->
                                </div>

                            </div>


                            <!-- transaction keys -->
                            <div class="mb-3 p-3" style="border: 1px dashed silver; border-radius: 10px">
                                <small class="mb-2 text-primary">{{ trans("message_lang.LBL_MY_TXNS_DETAILS") }}</small>

                                <div class="form-row mb-2">
                                    <!-- pickup code -->
                                    <div class="col-12 col-lg-3">
                                        <label for="pickup-code">{{ trans("message_lang.LBL_PICK_NO") }}</label>
                                        <input type="text" name="pickup_code" id="pickup_code" class="form-control">
                                    </div>
                                    <!-- end: pickup code -->

                                    <!-- pickup method -->
                                    <div class="col-12 col-lg-3">
                                        <label for="delivery_method">{{ trans("message_lang.LBL_DELIVERY_METHOD") }}</label>
                                        <select name="delivery_method" id="delivery_method" class="form-control">
                                            <option value="">{{ trans('message_lang.LBL_ALL') }}</option>
                                            @foreach($deliveryMethod as $deliveryCode)
                                                <option value="{{ $deliveryCode }}">{{ $deliveryCode }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <!-- end: Transaction Type -->

                                    <div class="col-12 col-lg-3">
                                        <label for="sending_currency">{{ trans("message_lang.LBL_SENDING_CURRENCY") }}</label>
                                        <select name="sending_currency" id="sending_currency" class="form-control">
                                            <option value="">{{ trans('message_lang.LBL_ALL') }}</option>
                                            @foreach ($currencies as $currency)
                                                <option value={{ $currency->code }}>{{ $currency->code }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-12 col-lg-3">
                                        <label for="receiving_currency">{{ trans("message_lang.LBL_RECEIVING_CURRENCY") }}</label>
                                        <select name="receiving_currency" id="receiving_currency" class="form-control">
                                            <option value="">{{ trans('message_lang.LBL_ALL') }}</option>
                                            @foreach ($currencies as $currency)
                                                <option value={{ $currency->code }}>{{ $currency->code }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                </div>

                                <div class="form-row mb-2">
                                    <div class="col-12 col-lg-3">
                                        <label for="txnStatus">{{ trans('message_lang.LBL_TXN_STATUS') }}</label>
                                        <select class="form-control mx-sm-0" name="txnStatus[]" id="txnStatus" multiple="multiple">
                                            <option value="">{{ trans('message_lang.LBL_ALL') }}</option>
                                            @foreach($txnstatuses as $status)
                                                <option value="{{ $status }}">{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12 col-lg-3">
                                        <label for="date_filter">{{ trans('message_lang.LBL_DATE_FILTER') }}</label>
                                        <select class="form-control mx-sm-0" name="date_filter" id="date_filter">
                                            <option value="txn_date" selected>{{ __('message_lang.LBL_TXN_DATE') }}</option>
                                            <option value="txn_paid_date">{{ __('message_lang.LBL_TXN_PAID_DATE') }}</option>
                                        </select>
                                    </div>

                                    <div class="col-12 col-md-3">
                                        <label for="from_date">{{ __('message_lang.LBL_FROM_DATE') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="from_date" placeholder="{{ __('message_lang.LBL_FROM_DATE') }}" value="{{ app()->getLocale() == "fr" ? date('d-m-Y') : date('Y-m-d') }}" id="from_date" class="form-control custom-field" autocomplete="off" readonly required>
                                    </div>

                                    <div class="col-12 col-md-3">
                                        <label for="to_date">{{ __('message_lang.LBL_TO_DATE') }} <span style="color:red;"></span></label>
                                        <input type="text" name="to_date" placeholder="{{ __('message_lang.LBL_TO_DATE') }}" id="to_date" class="form-control custom-field" autocomplete="off" readonly>
                                    </div>
                                </div>

                            </div>


                            <!-- search actions -->
                            <div class="form-row">
                                <div class="col-12 d-flex justify-content-between">
                                    <div>
                                        <button type="button" class="btn btn-primary btn-md mr-2" id="partnerTxnSearchBtn">
                                            {{ trans('message_lang.LBL_SEARCH_TXN') }}
                                            <span id="partnerTxnSearchLoader"></span>
                                        </button>
                                        <button type="reset" class="btn btn-secondary btn-md" onclick="window.location.reload()">
                                            {{ trans('message_lang.LBL_RESET_SEARCH') }}
                                        </button>
                                    </div>

                                    <button type="submit" class="btn btn-info btn-md" id="exportToCsvBtn" style="text-align: end">
                                        {{ trans('message_lang.LBL_EXPORT_TO_CSV') }}
                                        <span id="partnerTxnSearchLoader"></span>
                                    </button>
                                </div>
                            </div>
                            <!-- end search actions -->
                        </form>
                        <!-- end search form -->
                    </div>
                    <!-- end: search Fields -->

                    <!--begin: searchDetails-->
                    <div class="p-4 mb-3 shadow-xs" id="searchedTransactions" style="border: 1px solid whitesmoke; border-radius: 5px; display: none">

                        <!--begin: Datatable-->
                        <table id="datatable" class="table table-bordered grid-table nowrap">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('message_lang.LBL_REF_NO') }}</th>
                                    <th>{{ __('message_lang.LBL_SENDER_NAME') }}</th>
                                    <th>{{ __('message_lang.LBL_SENDER_COUNTRY') }}</th>
                                    <th>{{ __('message_lang.LBL_SENDER_MOBILE') }}</th>
                                    <th>{{ __('message_lang.LBL_BENEFICIARY_NAME') }}</th>
                                    <th>{{ __('message_lang.LBL_RECEIVER_MOBILE') }}</th>
                                    <th>{{ __('message_lang.LBL_TXN_STATUS') }}</th>
                                    <th>{{ __('message_lang.LBL_TYPE') }}</th>
                                    <th>{{ __('message_lang.LBL_SENDING_AMOUNT') }}</th>
                                    <th>{{ __('message_lang.LBL_RECEIVER_COUNTRY') }}</th>
                                    <th>{{ __('message_lang.LBL_RECEIVER_AMOUNT') }}</th>
                                    <th>{{ __('message_lang.LBL_DELIVERY_METHOD') }}</th>
                                    <th>{{ __('message_lang.LBL_TXN_DATE') }}</th>
                                    <th>{{ __('message_lang.LBL_TXN_PAID_DATE') }}</th>
                                </tr>
                            </thead>
                        </table>
                        <!--end: Datatable-->

                    </div>
                    <!--end: searchDetails-->
                </div>
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>

@endsection

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

@section("page_script")
<script type="text/javascript">

    var datatable;
    let isPersonal = false;

    $("#txnStatus").select2({
        placeholder: "{{ trans('message_lang.LBL_ALL') }}",
    });

    $(document).ready(() => {

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

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

        // process the search form on submission
        $("#partnerTxnSearchBtn").click(() => {
            window.location.hash = "";

            $("#searchedTransactions").fadeOut();

            // start form activities
            $("#partnerTxnSearchBtn").prop("disabled", true);

            $("#loading").show()

            // submit the search
            datatable.draw();
        })

        if($('#datatable').length > 0) {
            datatable = $('#datatable').DataTable({
                language: {
                    lengthMenu: "{!! trans('message_lang.DATATABLE_LBL_SHOW') !!} _MENU_ {!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}",
                    search: "{!! trans('message_lang.DATATABLE_LBL_SEARCH') !!}",
                    mptyTable: "{!! trans('message_lang.DATATABLE_LBL_NO_DATA_AVAILABLE') !!}",
                    info: "{!! trans('message_lang.DATATABLE_LBL_SHOWING_INFO') !!} _START_ {!! trans('message_lang.DATATABLE_LBL_TO') !!} _END_ {!! trans('message_lang.DATATABLE_LBL_OF') !!} _TOTAL_ {!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}",
                    infoEmpty: "{!! trans('message_lang.DATATABLE_LBL_SHOWING_INFO') !!} 0 {!! trans('message_lang.DATATABLE_LBL_TO') !!} 0 {!! trans('message_lang.DATATABLE_LBL_OF') !!} 0 {!! trans('message_lang.DATATABLE_LBL_ENTRIES') !!}",
                    infoFiltered:"({!! trans('message_lang.DATATABLE_FILTERED_FROM') !!} _MAX_ {!! trans('message_lang.DATATABLE_TOTAL_ENTRIES') !!})",
                    zeroRecords: "{!! trans('message_lang.DATATABLE_NO_MATCHING_RECORD_FOUND') !!}",
                },
                processing: true,
                serverSide: true,
                responsive: true,
                lengthMenu: [[10, 50, 100, -1], [10, 50, 100, '{!! trans("message_lang.LBL_ALL") !!}']],
                pageLength: 10,
                aaSorting: [14, 'DESC'],
                ajax: {
                    url: "{{ route('partnerportal.transactions.fetch_cashpickup') }}",
                    type: "POST",
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    data: function(data) {

                        data.sender_fname = $('#sender_fname').val();
                        data.sender_lname = $('#sender_lname').val();
                        data.sender_phone = $('#sender_phone').val();
                        data.sender_country = $('#sender_country').val();

                        data.receiver_fname = $('#receiver_fname').val();
                        data.receiver_lname = $('#receiver_lname').val();
                        data.receiver_phone = $('#receiver_phone').val();
                        data.receiver_country = $('#receiver_country').val();

                        data.txnStatus = $('#txnStatus').val();
                        data.date_filter = $('#date_filter').val();
                        data.from_date = $('#from_date').val();
                        data.to_date = $('#to_date').val();
                        data.pickupCode = $("#pickup_code").val();
                        data.sending_currency = $("#sending_currency").val();
                        data.receiving_currency = $("#receiving_currency").val();
                        data.delivery_method = $("#delivery_method").val();
                        data.isPersonal = isPersonal;
                    }
                },
                drawCallback: function(settings, json){
                    $("#searchedTransactions").fadeIn("slow");

                    // end form activities
                    $("#partnerTxnSearchBtn").prop("disabled", false);
                    $("#loading").hide();
                },
                columnDefs: [
                    {
                        targets: [0], // first column & numbering column
                        orderable: false, // set not orderable
                    },
                    {
                        targets: [6], // column index
                        visible: false,
                    }
                ],
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'reference_no',
                        name: 'reference_no'
                    },
                    {
                        data: 'sender_name',
                        name: 'sender_name'
                    },
                    {
                        data: 'sender_country',
                        name: 'sender_country'
                    },
                    {
                        data: 'sender_phone',
                        name: 'sender_phone'
                    },
                    {
                        data: 'receiver_name',
                        name: 'receiver_name',
                    },
                    {
                        data: 'receiver_phone',
                        name: 'receiver_phone'
                    },
                    {
                        data: 'txn_status',
                        name: 'txn_status'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'sending_amount',
                        name: 'sending_amount'
                    },
                    {
                        data: 'receiver_country',
                        name: 'receiver_country'
                    },
                    {
                        data: 'receiving_amount',
                        name: 'receiving_amount'
                    },
                    {
                        data: 'delivery_method',
                        name: 'delivery_method'
                    },
                    {
                        data: 'remittance_date',
                        name: 'remittance_date'
                    },
                    {
                        data: 'paid_date',
                        name: 'paid_date'
                    }
                ]
            });
        }

    });

</script>
@endsection