@extends('layouts.main')

@section('title', 'Payment Request')

@push('css')
    <link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .is-invalid + .select2.select2-container .selection .select2-selection.select2-selection--multiple  {
            border: 1px solid  #f44336;
        }

        .multiple-select2 .is-invalid {
            border: none;
        }
    </style>
@endpush

@section('content')
<div class="row justify-content-center mb-5">
    <div class="col-md-6">
        <div class="card">
            <h2 class="card-header">
                Payment Request
            </h2>
            <div class="card-body">
                <h4>Payment Details</h4>
                <ul>
                    <li>Account No: {{ $user->seasonCards->first()->account_no}}</li>
                    <li>Card No: {{ $user->seasonCards->pluck('card_no')->implode(', ') }}</li>
                    <li>Amount: RM {{ $amount }}</li>
                    <li>Ref No: {{ $transaction}}</li>
                </ul>
                <h4>Payment Mode</h4>
                <div class="alert alert-info">
                    <i class="bi bi-info-circle-fill"></i>
                    <span>Individual: Minimum RM 1.00 and maximum RM 30,000.00<br>Corporate: Minimum RM 2.00 and maximum RM 1,000,000.00</span>
                </div>
                <form action="{{ route('payment.process') }}" id="payment-form" name="payment-form" method="post">
                @csrf
                <div class="row mb-3">
                    <div class="col-lg-6 col-sm-12">
                        <div class="form-check">
                            <input type="radio" id="fpx" name="payment_mode" class="form-check-input" value="fpx">
                            <label class="form-check-label" for="fpx">Internet Banking (Individual)</label>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12">
                        <div class="form-check">
                            <input type="radio" id="fpx1" name="payment_mode" class="form-check-input" value="fpx1">
                            <label class="form-check-label" for="fpx1">Internet Banking (Corporate)</label>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="select_bank"></div>
                    <div class="col">
                        <select name="bank_code" id="bank_code" class="form-select" required="">
                            <option>- Choose Bank -</option>
                        </select>
                        <input type="hidden" name="be_message" id="be_message">
                    </div>
                </div>

                <div class="row mb-3 d-none" id="bank-list-parent">
                    <div class="col">
                        <div class="radio-tile-group" id="bank-list"></div>
                    </div>
                </div>

                <div class="row mb-3 d-none" id="fpx-agree">
                    <div class="col">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="agree" name="agree">
                            <label class="form-check-label" for="agree">Agree to FPX's <a href="https://www.mepsfpx.com.my/FPXMain/termsAndConditions.jsp" target="_blank">terms and coditions</a></label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <input type="hidden" name="amount" value="{{ $amount }}">
                <input type="hidden" name="ref_no" value="{{ $transaction }}">
                <input type="hidden" name="name" value="{{ $user->name }}">
                <input type="hidden" name="email" value="{{ $user->email }}">
                <button type="submit" class="btn btn-primary" id="make-payment">Make Payment</button>
                </form>
            </div>
        </div>
    </div>
</div>


@endsection

@push('js')
    <script src="/assets/plugins/select2/dist/js/select2.full.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.bank').select2({
                "placeholder" : "-- Select bank --"
            });
        });
    </script>
    <script>
        // get bank list
        let app_url = '{{ config('app.url') }}';
        let paymentData = [];
        let payment = 1;
        let payment_mode = 'fpx';
        let fpx_charge = '0.50'; //default to individual
        let to_pay = 0;
        let asset_path = '{{ asset("banks") }}';
        let final_amount = 0;

        $(document).ready(function(){

            function getBankListDropdown(mode){

                $('#bank_code').append('<option value="">Choose bank</option>').find('option:not(:first)').remove();

                $.ajax({
                    type:'GET',
                    dataType: "json",
                    url: app_url + '/api/payment/fpx/bank-list/'+mode,
                    success:function(response){
                        $.each(response.data.bank_list, function(key,value){
                            var optionExists = ($('#bank_code option[value=' + key + ']').length > 0);
                            if(!optionExists){
                                $('#bank_code').append('<option value="'+ key +'">'+ value +'</option>');
                            }
                        });
                        $('#be_message').val(response.data.be_message);
                        paymentData['BE_MESSAGE'] = response.data.be_message;
                        $('#fpx-agree').removeClass('d-none');
                    }
                });
            }

            // get bank code
            $('#bank_code').on('change', function(){
                $('#bank-code').val($('#bank_code option:selected').val());
                $('#bank-name').text($('#bank_code option:selected').text());
                paymentData['BANK_CODE'] = $('#bank_code option:selected').val();
            });

            function getBankList(mode){

                $.ajax({
                    type:'GET',
                    dataType: "json",
                    url: app_url + '/api/payment/fpx/bank-list/'+mode,
                    success:function(response){
                        $.each(response.data.bank_list, function(key,value){
                            $('#bank-list').append('<div class="input-container"><input id="'+ key +'" class="radio-button" type="radio" name="bank" value="'+ key +'"><div class="radio-tile"><img src="'+ asset_path +'/'+ key +'.png" height="48px" title="'+ value +'"><label for="'+ key +'" class="radio-tile-label">'+ value +'</label></div></div>');
                        });
                        $('#be_message').val(response.data.be_message);
                        paymentData['BE_MESSAGE'] = response.data.be_message;
                        $('#fpx-agree').removeClass('d-none');
                    }
                });
            }

            $('#payment-form').change(function(){

                let final_amount = $('#amount').val();

                paymentData['amount'] = final_amount;
                payment_mode = $("input[name='payment_mode']:checked").val();

                $("#amount").val(final_amount);

                // for open amount
                let minAmount = 1;
                let maxAmount = 30000;

                $('#amount').attr('min', minAmount);
                $('#amount').attr('max', maxAmount);

                $('#amount').on('keydown keyup change', function(){

                    let char = $(this).val();
                    let min_text = 'Minimum amount is';
                    let max_text = 'Maximum amount is';
                    if(char < minAmount){
                        $('#warning-message').text(min_text +' RM '+ minAmount.toFixed(2) +'');
                    }else if(char > maxAmount){
                        $('#warning-message').text(max_text +' RM '+ maxAmount.toFixed(2) +'');
                        $(this).val(char.substring(0, maxAmount));
                    }else{
                        $('#warning-message').text('');
                    }
                });
            });

            // individual
            $('#fpx').change(function() {

                let mode = "01";
                minAmount = 1;
                maxAmount = 30000;

                $('#bank-list').empty();

                $('#amount').attr('min', minAmount);
                $('#amount').attr('max', maxAmount);

                payment_mode = 'fpx';
                $('#payment_mode').val(payment_mode);

                getBankListDropdown(mode);
                $('#bank-list-parent').removeClass('d-none');

                // set bank list as required
                $('#bank_code, #agree').attr('required', true);
            });

            // corporate
            $('#fpx1').change(function() {

                var mode = "02";
                minAmount = 2;
                maxAmount = 1000000;

                $('#bank-list').empty();

                $('#amount').attr('min', minAmount);
                $('#amount').attr('max', maxAmount);

                payment_mode = 'fpx1';
                $('#payment_mode').val(payment_mode);

                getBankListDropdown(mode);

                $(".payment option").val(function(idx, val) {
                    $(this).siblings('[value="'+ val +'"]').remove();
                });

                // set bank list as required
                $('#bank_code, #agree').attr('required', true);
            });

            if(payment_mode == 'fpx'){

                to_pay = parseFloat(final_amount) + parseFloat('0.5'); // FPX individual by default
                $('#final-amount').text(to_pay.toFixed(2));
                paymentData['payment_mode'] = 'fpx';
                $('#fpx-charge').val('0.50'); // TODO follow bank charge dynamically
                $('#payment').text('FPX (Individual)');

                minAmount = 1;
                maxAmount = 30000;

                $('#amount').attr('min', minAmount).attr('max', maxAmount);

            }

            if(payment_mode == 'fpx1'){

                to_pay = parseFloat(final_amount) + parseFloat('1.00');
                $('#final-amount').text(to_pay.toFixed(2));
                paymentData['payment_mode'] = 'fpx1';
                $('#fpx-charge').val('1.00'); // TODO follow bank charge dynamically
                $('#payment').text('FPX (Corporate)');

                minAmount = 2;
                maxAmount = 1000000;

                $('#amount').attr('min', minAmount).attr('max', maxAmount);
            }
        });
        </script>
@endpush