@extends('OfflinePayment.payment')
@section('tab-content')

<div class="tab-content">
    <div class="tab-pane fade show active" id="tax-charges" role="tabpanel" aria-labelledby="tax-charges-tab">
        <div class="tab-form-contents">
            <div class="col-12 d-flex justify-content-end">
                <button class="btn btn-info" data-toggle="modal" data-target="#checkModal" title="Check Exchange value">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-exchange" viewBox="0 0 16 16">
                        <path d="M0 5a5.002 5.002 0 0 0 4.027 4.905 6.46 6.46 0 0 1 .544-2.073C3.695 7.536 3.132 6.864 3 5.91h-.5v-.426h.466V5.05c0-.046 0-.093.004-.135H2.5v-.427h.511C3.236 3.24 4.213 2.5 5.681 2.5c.316 0 .59.031.819.085v.733a3.46 3.46 0 0 0-.815-.082c-.919 0-1.538.466-1.734 1.252h1.917v.427h-1.98c-.003.046-.003.097-.003.147v.422h1.983v.427H3.93c.118.602.468 1.03 1.005 1.229a6.5 6.5 0 0 1 4.97-3.113A5.002 5.002 0 0 0 0 5zm16 5.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-7.75 1.322c.069.835.746 1.485 1.964 1.562V14h.54v-.62c1.259-.086 1.996-.74 1.996-1.69 0-.865-.563-1.31-1.57-1.54l-.426-.1V8.374c.54.06.884.347.966.745h.948c-.07-.804-.779-1.433-1.914-1.502V7h-.54v.629c-1.076.103-1.808.732-1.808 1.622 0 .787.544 1.288 1.45 1.493l.358.085v1.78c-.554-.08-.92-.376-1.003-.787H8.25zm1.96-1.895c-.532-.12-.82-.364-.82-.732 0-.41.311-.719.824-.809v1.54h-.005zm.622 1.044c.645.145.943.38.943.796 0 .474-.37.8-1.02.86v-1.674l.077.018z"/>
                    </svg>
                </button>
            </div>
            <div class="modal fade" id="checkModal" tabindex="-1" role="dialog" aria-labelledby="checkModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="checkModalLabel">Check Exchange Value</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <div class="text-label-with_send_to_info">
                                            <span>Send to</span>
                                            <select class="selected-dropdown-s2" id="type">
                                                <option value="India">India</option>
                                                <option value="Philippines">Philippines</option>
                                                <option value="Colombia">Colombia</option>
                                                <option value="Mexico">Mexico</option>
                                                <option value="Pakistan">Pakistan</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group" id="money-send">
                                        <div class="primary-innput-with-right-unit">
                                            <div class="primary-innput">
                                                <div class="floating-input-box">
                                                    <input type="text" id="from_money" class="form-control">
                                                </div>
                                                <span class="payment_amount_error" style="color:red;"></span>
                                            </div>
                                            <div class="right-unit">
                                                <select class="selectpicker selected-dropdown-s3 " id="from_currency">
                                                    <option value="CAD">CAD</option>
                                                    <option value="INR">INR</option>
                                                

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-12">
                                    <div class="form-group">
                                        <div class="label-with-rg-value">
                                            <label>Rate</label>
                                            <span id="exchange-rate"></span>
                                        </div>
                                        <div class="primary-innput-with-right-unit with-falg">
                                            <div class="primary-innput">
                                                <div class="floating-input-box">
                                                    <input type="text" id="to_money" class="form-control" readonly>
                                                </div>
                                            </div>
                                            <div class="right-unit ">
                                                <div class="flag-icon-container">
                                                    
                                                </div>
                                                <select class="selectpicker selected-dropdown-s3" id="to_currency">
                                                    <option value="INR">INR</option>
                                                    <option value="CAD">CAD</option>

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button class="btn btn-primary" id="exchange_button" onclick="checkExchange()">Check Exchange</button>
                        </div>
                    </div>
                </div>
            </div>
            <form action="{{ url('/admin/payment/offline-payment-step-four')}}" method="POST">
                {{ csrf_field() }}
                <div class="row ">
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label>Enter amount</label>
                            <div class="select-with-left-input">
                                <div class="left-input-box">
                                    <input onkeypress='return event.charCode >= 48 && event.charCode <= 57'  value="{{ old('amount')? old('amount'): @request()->session()->get('transaction_details_tab3')[0]['amount'] }}" type="text" name="amount" class="form-control" id="amount" placeholder="">
                                    <span class="text-danger" id="amt_validation"> </span>
                                </div>
                                <div class="select-box">
                                    <select class="form-control select1" id="convert_from" name="currency_converted_from">
                                        <option value="CAD">CAD</option>
                                        <!-- <option value="USD">USD</option> -->
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    <!-- <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label>Converted Amount</label>
                            <div class="select-with-left-input">
                                <div class="left-input-box">
                                    <input type="text" name="converted_amount" class="form-control" id="amt_val" placeholder="" readonly>
                                </div>
                                <div class="select-box">
                                    <select class="form-control select1" id="convert_to" name="currency_converted_to">
                                        <option value="USD">USD</option>
                                        <option value="CAD">CAD</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="col-8 col-md-8">
                        <div class="form-group">
                            <div class="paymt-table-div">
                                <h3>Taux: <span id="taux" >@if( @request()->session()->get('transaction_details_tab3')[0]['taux']) {{@request()->session()->get('transaction_details_tab3')[0]['taux']}} @else 0.00 @endif</span></h3>
                                <input type="hidden" name="taux" id="tauxs" value="">
                                <!-- <ul class="others-price-lists">
                                    <li>
                                        <p>0.00</p> <span>Quantic Locate</span>
                                    </li>
                                </ul> -->
                                @php
                                $totalAmount = '';
                                if(Session::has('transaction_details_tab3') ) {
                                    $totalAmount = @request()->session()->get('transaction_details_tab3')[0]['taux']+@request()->session()->get('transaction_details_tab3')[0]['amount'];
                                    $totalAmount = number_format($totalAmount,2,".","");
                                    // die;
                                }
                                @endphp
                                <div class="total-value-box">
                                    <input value="{{$totalAmount}}" type="text" class="form-control" name="totalAmount"  id="totalAmount" readonly>
                                    <h4>Total</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 col-md-4">
                        <div class="row ">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Payment Mode</label>
                                    <select class="form-control select1">
                                        <option>{{data_get($tab2_content,'payment_mode')}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-action-group">
                            {{-- <a href="javascript:;" class="theme-border-btn cancel-btn">Cancel</a> --}}
                            <a href="{{url('admin/payment/offline-payment-step-two')}}" class="payment-offline-back-button">Back</a>

                            <button class="theme-solid-btn submit-btn" @if(!Session::has('transaction_details_tab3') )  disabled @endif>Next</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){

        $('input[name=amount]').change(function(){
            console.log('hit');

            // let amount          = $('#amount').val();
            let amount = parseFloat($('#amount').val());
            let convert_from    = $('#convert_from').val();
            let convert_to      = $('#convert_to').val();
            let pass_validation = false ;
            console.log(amount);

            if(amount==''){
            $('#amt_validation').html('Please Enter A Amount');
            $('.submit-btn').prop("disabled", true);
            return false;
            }else{
                $('#amt_validation').html('');
                pass_validation = true ;
                $('.submit-btn').prop("disabled", false);
            }
            if (amount < 10 || amount > 10000) {
                    $('#amt_validation').html('Amount must be between 10 and 10000');
                    $('#taux').text('0.00');
                    $('#totalAmount').val('');
                    $('.submit-btn').prop("disabled", true);
                    return false;
                } else {
                    $('#amt_validation').html('');
                    pass_validation = true;
                    $('.submit-btn').prop("disabled", false);
                }

                let taux = 0.00;

                if (amount >= 10 && amount <= 50) {
                    taux = 5.00;
                } else if (amount >= 51 && amount <= 100) {
                    taux = 5.50;
                } else if (amount >= 101 && amount <= 200) {
                    taux = 7.50;
                } else if (amount >= 201 && amount <= 300) {
                    taux = 9.00;
                } else if (amount >= 301 && amount <= 400) {
                    taux = 10.50;
                } else if (amount >= 401 && amount <= 500) {
                    taux = 12.00;
                } else if (amount >= 501 && amount <= 600) {
                    taux = 14.00;
                } else if (amount >= 601 && amount <= 700) {
                    taux = 16.00;
                } else if (amount >= 701 && amount <= 800) {
                    taux = 18.00;
                } else if (amount >= 801 && amount <= 900) {
                    taux = 19.00;
                } else if (amount >= 901 && amount <= 1000) {
                    taux = 19.75;
                } else if (amount >= 1001 && amount <= 1500) {
                    taux = 23.50;
                } else if (amount >= 1501 && amount <= 2000) {
                    taux = 25.00;
                } else if (amount >= 2001 && amount <= 2500) {
                    taux = 27.00;
                } else if (amount >= 2501 && amount <= 3000) {
                    taux = 29.00;
                } else if (amount >= 3001 && amount <= 3500) {
                    taux = 31.00;
                } else if (amount >= 3501 && amount <= 4000) {
                    taux = 33.00;
                } else if (amount >= 4001 && amount <= 4500) {
                    taux = 38.00;
                } else if (amount >= 4501 && amount <= 5000) {
                    taux = 43.00;
                } else if (amount >= 5001 && amount <= 5500) {
                    taux = 48.00;
                } else if (amount >= 5501 && amount <= 6000) {
                    taux = 53.00;
                } else if (amount >= 6001 && amount <= 6500) {
                    taux = 58.00;
                } else if (amount >= 6501 && amount <= 7000) {
                    taux = 63.00;
                } else if (amount >= 7001 && amount <= 7500) {
                    taux = 68.00;
                } else if (amount >= 7501 && amount <= 8000) {
                    taux = 73.00;
                } else if (amount >= 8001 && amount <= 8500) {
                    taux = 78.00;
                } else if (amount >= 8501 && amount <= 9000) {
                    taux = 83.00;
                } else if (amount >= 9001 && amount <= 9500) {
                    taux = 88.00;
                } else if (amount >= 9501 && amount <= 10000) {
                    taux = 93.00;
                }

                $('#tauxs').val(taux.toFixed(2));
                // Calculate the total amount
                let totalAmount = (amount + taux).toFixed(2);
                $('#taux').text(taux.toFixed(2));
                $('#totalAmount').val(totalAmount); 



            // if(pass_validation==true){
            //     $.ajax({
            //         type: "POST",
            //         data: {
            //             _token: '{{ csrf_token() }}',
            //             amount:amount,
            //             convert_from:convert_from,
            //             convert_to:convert_to,

            //         },
            //         url: "{{ url('/admin/payment/offline-payment-convert-price') }}",
            //         contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            //         success:function(data) {
            //             console.log("success");
            //             console.log(data);
            //             $('#amt_val').val(data);
            //         },
            //         errors:function(data) {
            //             // $('#content').html(data);
            //             console.log("errors");
            //             console.log(data);

            //         }
            //     });
            // }
        });

        $('#checkModal').on('hidden.bs.modal', function () {
            // Select and reset the input fields and elements in the modal
            $('#type').val('India'); // Reset the 'Send to' select
            $('#from_money').val(''); // Clear 'from_money' input
            $('#exchange-rate').text(''); // Clear the 'Rate' span
            $('#to_money').val(''); // Clear 'to_money' input
            $('#from_currency').val('CAD'); // Reset the 'From Currency' select
            $('#to_currency').val('INR'); // Reset the 'To Currency' select

            // You can add more reset logic here if needed

            // Optionally, clear any error messages
            $('.payment_amount_error').text('');
        });
    });

    async function checkExchange() {

        if (!$('#from_money').val()) {
            $('.payment_amount_error').text('Please put amount');

            $('#exchange-rate').html('');

        } else {
            $('.payment_amount_error').text('');

            $("#validation").remove();

            await calculate();
        }
    }

    function calculate() {
        return new Promise((resolve, reject) => {
            const from_currency_value = from_currency.value;
            const to_currency_value = to_currency.value;

            fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency_value}`)
                .then(res => res.json())
                .then(res => {

                    const rate = res.rates[to_currency_value];

                    console.log(rate);
                    const value = rate * $('#from_money').val();
                    $('#exchange-rate').html('1 ' + from_currency_value + " = " + rate + " " +
                        to_currency_value);
                    $('#to_money').val(value.toFixed(2));
                    return resolve(true);
                })
        })
    }
</script>