@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>Card No: {{ $invoice['card_no'] }}</li>
                    <li>Account No: {{ $invoice['account_no'] }}</li>
                    <li>Amount: RM {{ $invoice['amount'] }}</li>
                    <li>Ref No: {{ $invoice['ref_no'] }}</li>
                    <li>Invoice No: {{ $invoice['invoice_no'] }}</li>
                </ul>

                @if($cardHolder?->isManual())
                    <h4>Payment Type: {{ $cardHolder->payment_type }}</h4>

                    <h4>Bank Details</h4>
                    <ul>
                        <li>Beneficiary banker: CIMB BANK BERHAD</li>
                        <li>Beneficiary Name: METRO PARKING (M) SDN BHD</li>
                        <li>Beneficiary Account Number:  8600051084</li>
                    </ul>
					**ONLY FOR JB CARPARK
					<ul>
                        <li>Beneficiary banker: MAYBANK</li>
                        <li>Beneficiary Name: METRO PARKING (M) SDN BHD</li>
                        <li>Beneficiary Account Number:  001 011 254 628</li>
                    </ul>

                    <form action="{{ route('payment.receipt') }}" id="payment-form" name="payment-form" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <div class="col">
                                <input name="receipt" type="file" class="form-control @error('receipt') is-invalid @enderror" id="receipt" aria-describedby="receipt" aria-label="Upload">

                                @error('receipt')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="card-footer">
                            <input type="hidden" name="amount" value="{{ $invoice['amount'] }}">
                            <input type="hidden" name="ref_no" value="{{ $invoice['ref_no'] }}">
                            <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">Upload Payment</button>
                        </div>
                    </form>
                @else
                    <form action="{{ route('payment.process') }}" id="payment-form" name="payment-form" method="post">
                        @csrf

                        <h4>Payment Mode: {{ $invoice['payment_mode_label'] }}</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>

                            <div class="row mb-3">
                                <div class="col-lg-4 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-4 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 class="col-lg-4 col-sm-12">
                                    <img src="{{ asset('img/logo-fpx-90x32.png') }}">
                                </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>- Select 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 class="card-footer">
                            <input type="hidden" name="amount" value="{{ $invoice['amount'] }}">
                            <input type="hidden" name="ref_no" value="{{ $invoice['ref_no'] }}">
                            <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>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

    @if($limit)
    <!-- Modal -->
    <div class="modal fade in" id="trx-limit" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="trx-limitLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5 fw-bold" id="trx-limitLabel">Transaction Limit</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    @if($user->user_type == 2)
                        <p class="fs-4 lh-lg">Minimum RM 2.00 and maximum RM 1,000,000.00</p>
                    @else
                        <p class="fs-4 lh-lg">Minimum RM 1.00 and maximum RM 30,000.00</p>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('js')
    <script src="/assets/plugins/select2/dist/js/select2.full.min.js"></script>
    <script>
        @if($limit)
        const backdrop = document.getElementById('trx-limit');
        const myModal = new bootstrap.Modal(backdrop)

        window.onload = () => {
            myModal.show();
        }
        @endif

        $(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