@extends('site.layouts.app')
@section('title', 'Calculator')
@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>Payment Exchange Calculator</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">Payment Exchange Calculator</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">
                <h1 class="text-center">Currency Converter</h1>
                <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;">

                        <div class="card shadow border rounded-5">
                            <form action="{{ route('site.money_trnasfer.submit') }}" method="post">
                                @csrf
                                <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="box d-flex">
                                        <div class="left_box">
                                            <select name="sender_currency" class="currency" id="currency1"
                                                class="form-control" style="width: 95%;"></select>
                                            <div class="mt-3">
                                                <label for="">You send exactly</label>
                                                <input type="number" name="send_amount" id="num" value="10"
                                                    class="form-control mt-1" style="width: 95%;">
                                                <small class="text-danger" id="errorMsg"></small>
                                            </div>
                                        </div>
                                        <div class="right_box ml-1">
                                            <select name="receiver_currency" class="currency" id="currency2"
                                                style="width: 95%;"></select>
                                            <div class="mt-3">
                                                <label for="">Recipient gets</label>
                                                <input type="number" name="receive_amount" id="ans" readonly
                                                    class="form-control mt-1 bg-light" style="width: 95%;">

                                            </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>
                                    {{-- <small id="info"></small> --}}
                                    {{-- @php

                                        $tax = calculateTax(10, 'AUD');

                                    @endphp --}}

                                    <div class="">
                                        <div class="fw-bold mt-4 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 select = document.querySelectorAll(".currency");
        const swap = document.getElementById("swap");
        const num = document.getElementById("num");
        const ans = document.getElementById("ans");
        const err = document.getElementById("errorMSG");
        const info = document.getElementById("info");
        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);

        document.addEventListener('DOMContentLoaded', function() {
            const countries = {!! json_encode($countries) !!};
            const select = document.querySelectorAll(".currency");
            const err = document.getElementById("errorMSG");

            displayOptions(countries);

            $('.currency').select2({
                width: 'resolve',
                templateResult: formatCountry,
                templateSelection: formatCountry,
                maximumInputLength: 3
            });



            $("#data").html(loader);
            let currency1 = select[0].value;
            let currency2 = select[1].value;
            let value = num.value;

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

            swap.addEventListener("click", () => {
                let currency1 = select[0].value;
                let currency2 = select[1].value;

                // Swap the selected currencies
                $('#currency1').val(currency2).trigger('change');
                $('#currency2').val(currency1).trigger('change');

                // Get the updated values after triggering change event
                currency1 = select[0].value;
                currency2 = select[1].value;

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

                let num1 = num.value;
                console.log(currency1, currency2, num1);

                // Call the convert function with the updated values
                convert(currency1, currency2, num1);
            });


            $('.currency').on('select2:select', function(e) {
                $("#data").html(loader);
                let currency1 = select[0].value;
                let currency2 = select[1].value;
                let num1 = num.value;

                convert(currency1, currency2, num1)
            });

            function displayOptions(countries) {
                for (const country of countries) {
                    select[0].innerHTML +=
                        `<option ${country.name === 'Australia' ? 'selected' : ''} value="${country.currency}">${country.name}</option>`;
                    select[1].innerHTML +=
                        `<option ${country.name === 'Pakistan' ? 'selected' : ''} value="${country.currency}">${country.name}</option>`;

                }

            }

            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;
            }

        });

        $('#num').on('input', function() {
            $("#data").html(loader);
            let currency1 = select[0].value;
            let currency2 = select[1].value;
            let num1 = $(this).val();
            if (num1 < 10 || num1 > 3000) {
                $(this).css('border', '1px solid red');
                $("#errorMsg").text('Value must be between 10 and 3000');
                $("#btn_proceed").attr('disabled', true);
            } else {
                $(this).css('border', '1px solid gray');
                $("#errorMsg").text('');
                $("#btn_proceed").attr('disabled', false);
            }

            // Call the convert function with the updated values
            convert(currency1, currency2, num1);
            // exchange_fee(currency1, num1)
        });



        function exchange_fee(currency, amount) {

            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "get",
                    url: "/exchange_fee",
                    data: {
                        'currency': currency,
                        'amount': amount
                    },
                    dataType: "json",
                }).done(function(response) {
                    console.log("Fee",currency,response);
                    $("#our_fee").text(response)
                    resolve(response.result);
                }).fail(function(response) {
                    reject('Currency exchange request failed');
                });
            });
        }


        function convert(from, to, amount) {
            // amount =
            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "get",
                    url: "/currency_exchange",
                    data: {
                        'from': from,
                        'to': to,
                        'amount': amount
                    },
                    dataType: "json",
                }).done(function(response) {
                    resolve(response.result);
                    console.log('Converted ' + from + ' to ' + to + response.result);
                    $('#data').html(`
                    <div class="d-flex justify-content-between">
                        <div class="fw-bold fs-6">- <span id="our_fee">0</span></div>
                        <div class="fs-6 fw-bold text-end">Our Fee</div>
                    </div>
                    <div class="d-flex justify-content-between mt-3">
                        <div class="fw-bold fs-6">= ${amount}</div>
                        <div class="fs-6 text-end">Total Amount will convert</div>
                    </div>
                    <div class="d-flex justify-content-between mt-3">
                        <div class="fw-bold fs-6">x ${response.result.toFixed(2)}</div>
                        <div class="fs-6 fw-bold text-end">Guarantee Exchange rate (24H)</div>
                    </div>
                    `);
                    ans.value = response.result.toFixed(2);
                }).fail(function(response) {
                    reject('Currency exchange request failed');
                });
            });
        }

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