@extends('site.layouts.app')
@section('title', 'Currecy Exchange')
@section('content')
    <style>
        @keyframes lds-ellipsis1 {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes lds-ellipsis3 {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(0);
            }
        }

        @keyframes lds-ellipsis2 {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(24px, 0);
            }
        }

        .container .box {
            width: 100%;
            display: flex;
        }

        .box div {
            width: 100%;
        }


        .btn#swap {
            background: #099F1B;
            margin: 10px auto;
            max-width: 40px;
            text-align: center;
            height: auto;
            color: white;
            vertical-align: middle;
            display: block;
            padding: 1px 0px;
            box-shadow: 0px 1px 13px rgb(8 135 23 / 23%);
        }

        .img-flag {
            max-height: 11px;
        }

        .select2-selection {
            height: 40px !important;
            padding: 5px;
        }
    </style>
    <!-- START SECTION BREADCRUMB -->
    <div class="breadcrumb_section bg_gray page-title-mini">
        <div class="container">
            <!-- STRART CONTAINER -->
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="page-title">
                        <h1>Currency Exchange</h1>
                    </div>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb justify-content-md-end">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active">Currency Exchange</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">

                <div class="row justify-content-center">
                    <div class="col-lg-8 col-sm-12 rounded-5"
                        style="background: orange;
                    padding: 0;
                    padding-bottom: 15px;
                    border-radius: 10px;">
                        @php
                            $sender_country = App\Models\Country::where('id', auth()->user()->country_id)->first();
                            $receiver_country = App\Models\Country::where('id', session()->get('moneycart')['receiver_country'])->first();

                        @endphp
                        <div class="card shadow border rounded-5">
                            <form action="{{ route('site.money_trnasfer.submit') }}" method="post">
                                @csrf
                                <input type="hidden" name="sender_currency" value="{{ $sender_country->currency }}">
                                <input type="hidden" name="receiver_currency" value="{{ $receiver_country->currency }}">
                                <div class="card-body">
                                    {{-- <button type="button" class="btn" id="swap" title="Swap Country">
                                        <svg width="35" height="35" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
                                            <path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
                                        </svg>
                                    </button> --}}
                                    <div class="row mt-3">
                                        <div class="col-sm-12 col-md-6 col-lg-12 ">
                                            <label for="">You send exactly</label>
                                            <div class="input-group mb-3">

                                                <input type="text" class="form-control" name="send_amount" value="10"
                                                    id="send_amount">
                                                <button class="btn btn-outline-secondary" name="sender_currency_button"
                                                    type="button">
                                                    {{ str_replace("_","",$sender_country->currency ) }}</button>
                                            </div>
                                            <div class="text-danger" id="errorMsg"></div>

                                        </div>



                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-lg-8 col-md-8 col-sm-12" id="data" style="">

                                        </div>
                                    </div>
                                    <div class="text-danger" id="errorMSG"></div>


                                    <div class="row mt-3">
                                        <div class="col-sm-12 col-md-6 col-lg-12">
                                            <label for="">Recipient gets</label>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" readonly name="receive_amount"
                                                    id="receive_amount">
                                                <button class="btn btn-outline-secondary" name="receiver_currency_button"
                                                    type="button">
                                                    {{ $receiver_country->currency }}</button>
                                            </div>


                                        </div>
                                    </div>

                                    <div class="">
                                        <div class="fw-bold text-danger">Should Arrived in 10 Minutes</div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="text-start">
                                            <button type="submit"
                                                class="btn mt-3 btn-outline-danger rounded-5 btn-block btn_proceed">Continue</button>
                                        </div>
                                    </div>



                                </div>

                            </form>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <script>
        const baseFlagsUrl = "https://wise.com/public-resources/assets/flags/rectangle";
        const currencyApiUrl = "https://open.er-api.com/v6/latest";
        let loader = `<img class="d-inline" width="40" height="40" src="{{ asset('assets/images/ajax-loader.gif') }}">`;
        $("#data").html(loader);

        let currency1 = "{{ $sender_country->currency }}";
        let currency2 = "{{ $receiver_country->currency }}";

        let send_amount = $('#send_amount').val();
        let receive_amount = $('#receive_amount').val();
        err = document.getElementById('errorMSG')
        const swap = document.getElementById("swap");

        document.addEventListener('DOMContentLoaded', function() {

            $("#data").html(loader);


            if (send_amount === "") {
                err.innerHTML = "Enter Valid Number";
            } else if (currency1 !== currency2) {
                // Update this function based on your actual conversion logic

                convert(currency1, currency2, send_amount)
                validateCurrency(currency1, send_amount)
                err.innerHTML = "";
            } else {
                err.innerHTML = "Choose different currencies";
            }

            // swap.addEventListener("click", () => {
            //     // Swap the values of sender_currency and receiver_currency
            //     const senderInput = $('[name="sender_currency"]');
            //     const receiverInput = $('[name="receiver_currency"]');
            //     const senderButton = $('[name="sender_currency_button"]');
            //     const receiverButton = $('[name="receiver_currency_button"]');

            //     const senderValue = senderInput.val();
            //     const receiverValue = receiverInput.val();

            //     senderInput.val(receiverValue);
            //     receiverInput.val(senderValue);

            //     // Swap the text inside the buttons
            //     const senderButtonText = senderButton.text();
            //     senderButton.text(receiverButton.text());
            //     receiverButton.text(senderButtonText);

            //     // Get the updated values after swapping
            //     const updatedSenderValue = senderInput.val();
            //     const updatedReceiverValue = receiverInput.val();

            //     console.log(updatedSenderValue, updatedReceiverValue);
            //     // convert(currency1, currency2, send_amount)
            //     validateCurrency(currency1, send_amount)
            // });




            // function formatCountry(country) {
            //     if (!country.currency) {
            //         return country.text;
            //     }

            //     const selectedCountry = countries.find(c => c.currency == country.currency);
            //     const countryName = selectedCountry ? selectedCountry.name : 'Unknown Country';
            //     return countryName;
            // }

        });

        $('#send_amount').on('input', function() {
            $("#data").html(loader);

            let send_amount = $(this).val();

            validateCurrency(currency1, send_amount);
            convert(currency1, currency2, send_amount)

        });

        function convert(from, to, amount) {
            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "get",
                    url: "/exchange_fee",
                    data: {
                        'from': from,
                        'to': to,
                        'amount': amount
                    },
                    dataType: "json",
                }).done(function(response) {
                    resolve(response);
                    let fee = response.fee; // Assuming the fee is a percentage

                    send_amount = response.result
                    let convert = response.convert
                    let receive_amount = response.result;
                    console.log("data:", response);



                    // Update the HTML with the received data
                    $('#data').html(`
                <div class="d-flex justify-content-between">
                    <div class=" fs-6">
                        <input type="hidden" name="tax_fee" class="our_fee" value="${fee}">- <span class="our_fee">${fee}</span>
                    </div>
                    <div class="fs-6  text-end">Our Fee</div>
                </div>
                <div class="d-flex justify-content-between mt-3">
                    <div class=" fs-6">
                        = <input type="hidden" name="send_amount_converted" value="${convert}">
                        <span>${convert}</span>
                    </div>
                    <div class="fs-6 text-end">Total Amount will convert</div>
                </div>
                `);
                // <div class="d-flex justify-content-between mt-3">
                //     <div class=" fs-6">x ${response.rate} </div>
                //     <div class="fs-6  text-end">Guarantee Exchange rate (24H)</div>
                // </div>
                    $("#receive_amount").val(receive_amount)

                }).fail(function(response) {
                    reject('Currency exchange request failed');
                });
            });
        }


        function validateCurrency(currency, amount) {

            switch (currency) {
                case 'AUD':
                    if (amount < 10 || amount > 3000) {
                        $("#send_amount").focus()
                        $("#send_amount").css('border', '1px solid red');
                        $("#errorMsg").text('Value must be between 10 and 3000 ' + currency);
                        $(".btn_proceed").attr('disabled', true);
                    } else {
                        defaultSetting()
                    }
                    break;
                case 'USD':
                    if (amount < 10 || amount > 3000) {
                        $("#send_amount").focus()
                        $("#send_amount").css('border', '1px solid red');
                        $("#errorMsg").text('Value must be between 10 and 3000 ' + currency);
                        $(".btn_proceed").attr('disabled', true);
                    } else {
                        defaultSetting()
                    }
                    break;
                case 'PKR_':
                    if (amount < 1000 || amount > 50000) {
                        $("#send_amount").focus()
                        $("#send_amount").css('border', '1px solid red');
                        $("#errorMsg").text('Value must be between 1000 and 3000 ' + currency);
                        $(".btn_proceed").attr('disabled', true);
                    } else {
                        defaultSetting()
                    }
                    break;
                default:
                    defaultSetting()

            }


        }

        function validateCurrency(currencyCode, amount) {


            switch (currencyCode) {
                case 'PKR_':
                    handleInvalidAmount(amount, 1000, 1000000);
                    break;
                case 'IDR':
                    handleInvalidAmount(amount, 50000, 50000000);
                    break;
                case 'CNY':
                    handleInvalidAmount(amount, 50, 24000);
                    break;
                case 'INR':
                    handleInvalidAmount(amount, 1000, 1000000);
                    break;
                case 'MYR':
                    handleInvalidAmount(amount, 50, 17000);
                    break;
                case 'TRY':
                    handleInvalidAmount(amount, 150, 10800);
                    break;
                case 'AUD':
                    handleInvalidAmount(amount, 5, 5500);
                    break;
                case 'USD':
                case 'EUR':
                case 'EU':
                    handleInvalidAmount(amount, 5, 4000);
                    break;
                case 'SAR':
                case 'AED':
                    handleInvalidAmount(amount, 20, 14000);
                    break;
                case 'IRR':
                    handleInvalidAmount(amount, 200000, 150000000);
                    break;
                case 'JPY':
                    handleInvalidAmount(amount, 1000, 1000000);
                    break;
                case 'BDT':
                    handleInvalidAmount(amount, 500, 500000);
                    break;
                case 'CAD':
                    handleInvalidAmount(amount, 5, 4000);
                    break;
                case 'HKD':
                    handleInvalidAmount(amount, 50, 24000);
                    break;
                case 'GBP':
                case 'HUF':
                    handleInvalidAmount(amount, 5, 4000);
                    break;
                case 'NZD':
                    handleInvalidAmount(amount, 10, 6000);
                    break;
                case 'SGD':
                    handleInvalidAmount(amount, 5, 5000);
                    break;
                default:
                    defaultSetting();
            }
        }

        function handleInvalidAmount(amount, minValue, maxValue) {
            if (amount < minValue || amount > maxValue) {
                $("#send_amount").focus();
                $("#send_amount").css('border', '1px solid red');
                $("#errorMsg").text(`Amount must be between ${minValue} and ${maxValue}`);
                $(".btn_proceed").attr('disabled', true);
            } else {
                defaultSetting();
            }
        }

        function defaultSetting() {
            $("#send_amount").css('border', '1px solid gray');
            $("#errorMsg").text('');
            $(".btn_proceed").attr('disabled', false);
        }
        $("#receive_amount").css('border', '1px solid gray');




        $("form").submit(function(e) {

            e.preventDefault();
            var data = new FormData(this);
            var url = $(this).attr("action");

            $.ajax({
                type: "post",
                url: url,
                data: data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".btn_proceed").html(
                            `<span class="spinner-border spinner-border-sm text-white"></span> Loading...`
                        )
                        .attr('disabled', true);
                },
                complete: function() {
                    $(".btn_proceed").html("Continue").attr('disabled', false);
                }
            }).done(function(response) {
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.success(response.message);
                $('form')[0].reset();
                setTimeout(() => {
                    window.location.href = "{{ route('money.transfer.checkout') }}"
                }, 2000);
            }).fail(function(response) {
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.error(response.responseJSON.message);
            });
        });
    </script>
@endsection