@extends('layouts.user_app')
@section('content')
    <!-- ================ start: main-banner ================ -->
    <section class="main-banner">
        <div class="custom-container1">
            <div class="inner-row">
                <div class="text-container">
                    <h1>Transcash Solution inc</h1>
                    <p>@lang('public.is_an_international')</p>
                    <div class="action-container">
                        <a href="/help-desk" class="theme-border-btn more-btn">@lang('public.more_info')</a>
                    </div>
                </div>
                <div class="image-container">
                    <img src="{{ asset('frontend/assets/images/main-banner-pic1.svg') }}" alt="">
                </div>
            </div>
            <div class="send-money-box">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="text-label-with_send_to_info">
                                <span>@lang('public.send_to')</span>
                                {{-- <img src="{{ asset('frontend/assets/images/send-to-america-icon.png') }}"> --}}
                                <select class="selectpicker selected-dropdown-s2" id="type">
                                    <option value="Canada">Canada</option>
                                    <option value="USA">USA</option>
                                    <option value="Chili">Chili</option>
                                    <option value="Brazil">Brazil</option>
                                    <option value="Haiti">Haiti</option>
                                    <option value="Dominican Republic">Dominican Republic</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <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 class="flating_label">@lang('public.Amount') @lang('public.sent')</div>
                                    </div>
                                </div>
                                <div class="right-unit">
                                    <select class="selectpicker selected-dropdown-s3 remove-arow" id="from_currency">
                                        <option value="CAD" selected>CAD</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="label-with-rg-value">
                                <label>@lang('public.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 class="flating_label">@lang('public.Amount') @lang('public.received')</div>
                                    </div>
                                </div>
                                <div class="right-unit ">
                                    <div class="flag-icon-container">
                                        {{-- <img src="{{ asset('frontend/assets/images/Flag_of_India.svg') }}"
                                        id="country_flag_image"> --}}
                                    </div>
                                    <select class="selectpicker selected-dropdown-s3" id="to_currency">
                                        <option value="CAD">CAD</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="submit-actions">
                                <button class="theme-border-btn send_money_btn size-sm" id="exchange_button"
                                    onclick="checkExchange()">Check Exchange</button>
                            </div>
                            {{-- <div class="submit-actions">
                            <a class="" href="@if (Auth::check() && Auth::user()->is_verified == 1) /contact @else /login @endif">
                                <button class="theme-border-btn send_money_btn">@lang('public.send_money')</button></a>

                        </div> --}}
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <label>@lang('public.receive_mode')</label>
                            <select class="selectpicker selected-dropdown-s3">
                                <option>@lang('public.cash_withdrawal')</option>
                                <option>@lang('public.bank_transfer')</option>
                                <option>@lang('public.mobile_wallet')</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group mb-0" style="display: flex;justify-content: space-around;">
                            <div class="submit-actions">
                                <button class="theme-border-btn send_money_btn" id="exchange_button">Check Exchange</button>
                            </div>
                            <div class="submit-actions">
                                <a class="" href="@if (Auth::check() && Auth::user()->is_verified == 1) /dashboard @else /login @endif">
                                    <button class="theme-border-btn send_money_btn">@lang('public.send_money')</button></a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ================ end: main-banner ================ -->

    <!-- ====================== start: way to send money ========= -->
    <section class="money-send-status-sec d-none">
        <div class="custom-container2">
            <!-- Nav tabs -->
            <ul class="nav tab-menu" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="send-tab" data-toggle="tab" href="#send" role="tab"
                        aria-controls="send" aria-selected="true">Ways to send money</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="recive-tab" data-toggle="tab" href="#recive" role="tab"
                        aria-controls="recive" aria-selected="false">Ways to receive</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="send" role="tabpanel" aria-labelledby="send-tab">
                    <div class="content-wrapper">
                        <h2>Convenient ways to send to <span>165+</span> conuntries</h2>
                        <ul class="box-lists">
                            <li>
                                <div class="box">
                                    <div class="icon-container">
                                        <img src="{{ asset('frontend/assets/images/laptop.svg') }}">

                                    </div>
                                    <div class="text-container">
                                        <h3>Send Online</h3>
                                        <p>Use our website to check rates and send money from the comfort of home</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="icon-container">
                                        <img src="{{ asset('frontend/assets/images/mobile-app.svg') }}">
                                    </div>
                                    <div class="text-container">
                                        <h3>Send with our app</h3>
                                        <p>Send and track your money transfers on the go with our mobile app</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="icon-container">
                                        <img src="{{ asset('frontend/assets/images/person-send.svg') }}">
                                    </div>
                                    <div class="text-container">
                                        <h3>Send in person</h3>
                                        <p>Pay in cash at a store located conveniently near you</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="tab-pane" id="recive" role="tabpanel" aria-labelledby="recive-tab">
                    <div class="content-wrapper">
                        <h2>More way to receive money</h2>
                        <ul class="box-lists">
                            <li>
                                <div class="box">
                                    <div class="icon-container">
                                        <img src="{{ asset('frontend/assets/images/cash-pickup.svg') }}">
                                    </div>
                                    <div class="text-container">
                                        <h3>Cash pick-up</h3>
                                        <p>Visit one of our convenient Ria locations located near you</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="icon-container">
                                        <img src="{{ asset('frontend/assets/images/bank-account.svg') }}">
                                    </div>
                                    <div class="text-container">
                                        <h3>Bank accounts</h3>
                                        <p>Send and receive money directly to a bank account</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="box">
                                    <div class="icon-container">
                                        <img src="{{ asset('frontend/assets/images/money-transfer.svg') }}">
                                    </div>
                                    <div class="text-container">
                                        <h3>Mobile money/wallet</h3>
                                        <p>Transfer money to and from an e-wallet in minutes</p>
                                    </div>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================== end: way to send money ========= -->


    <!-- ================ start: way-to-send-money-abroad-sec ================ -->
    <section class="why-to-send-money-abroad-sec">
        <div class="custom-container1">
            <div class="title-sec1 text-center">
                <h1>@lang('public.ways_send_money')</h1>
            </div>
            <div class="custom-row">
                <div class="custom-col">
                    <figure>
                        <div class="image-container">
                            <img src="{{ asset('frontend/assets/images/why-to-send-money-abroad-pic1.svg') }}">
                        </div>
                        <figcaption>
                            <h4>@lang('public.cash_withdrawal')</h4>
                            <p>@lang('public.cash_withdrawal_text')</p>
                        </figcaption>
                    </figure>
                    <div class="more_actions">
                        <a href="/help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                    </div>
                </div>
                <div class="custom-col">
                    <figure>
                        <div class="image-container">
                            <img src="{{ asset('frontend/assets/images/why-to-send-money-abroad-pic2.svg') }}">
                        </div>
                        <figcaption>
                            <h4>@lang('public.bank_transfer')</h4>
                            <p>@lang('public.bank_transfer_text')</p>
                        </figcaption>
                    </figure>
                    <div class="more_actions">
                        <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                    </div>
                </div>
                <div class="custom-col">
                    <figure>
                        <div class="image-container">
                            <img src="{{ asset('frontend/assets/images/why-to-send-money-abroad-pic3.svg') }}">
                        </div>
                        <figcaption>
                            <h4>@lang('public.mobile_wallet')</h4>
                            <p>@lang('public.mobile_wallet_text')</p>
                        </figcaption>
                    </figure>
                    <div class="more_actions">
                        <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ================ end: way-to-send-money-abroad-sec ================ -->

    <!-- ================ start: way-to-recive-money-abroad-sec ================ -->
    <section class="why-to-send-money-abroad-sec">
        <div class="custom-container1">
            <div class="title-sec1 text-center">
                <h1>Ways to receive money abroad</h1>
            </div>
            <div class="custom-row">
                <div class="custom-col">
                    <figure>
                        <div class="image-container">
                            <img src="{{ asset('frontend/assets/images/why-to-send-money-abroad-pic1.svg') }}">
                        </div>
                        <figcaption>
                            <h4>Cash Pickup</h4>
                            <p>Visit a Transcash office near you. Our agents will be happy to help you with your transfer.
                            </p>
                        </figcaption>
                    </figure>
                    <div class="more_actions">
                        <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                    </div>
                </div>
                <div class="custom-col">
                    <figure>
                        <div class="image-container">
                            <img src="{{ asset('frontend/assets/images/why-to-send-money-abroad-pic2.svg') }}">
                        </div>
                        <figcaption>
                            <h4>@lang('public.bank_transfer')</h4>
                            <p>@lang('public.bank_transfer_text')</p>
                        </figcaption>
                    </figure>
                    <div class="more_actions">
                        <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                    </div>
                </div>
                <div class="custom-col">
                    <figure>
                        <div class="image-container">
                            <img src="{{ asset('frontend/assets/images/why-to-send-money-abroad-pic3.svg') }}">
                        </div>
                        <figcaption>
                            <h4>@lang('public.mobile_wallet')</h4>
                            <p>@lang('public.mobile_wallet_text')</p>
                        </figcaption>
                    </figure>
                    <div class="more_actions">
                        <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ================ end: way-to-recive-money-abroad-sec ================ -->

    <!-- ================ start: how-to-send-money-abroad-sec ================ -->
    <section class="how-to-send-money-abroad-sec ">
        <div class="custom-container2">
            <div class="title-sec1 text-center">
                <h1>@lang('public.how_send_money')</h1>
            </div>
            <div class="custom-row">
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.create_acc')</h4>
                        <p>@lang('public.create_acc_text')<a href="/Registration">@lang('public.learn_more')</a></p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.Info_verification')</h4>
                        <p>@lang('public.info_verify_text')
                            <a href="/help-desk">@lang('public.learn_more')</a>
                        </p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.make_transfer')</h4>
                        <p>@lang('public.make_transfer_text') <a href="/login">@lang('public.learn_more')</a></p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.beneficiary_details')</h4>
                        <p>@lang('public.beneficiary_details_text') <a href="/login">@lang('public.learn_more')
                            </a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ================ end: how-to-send-money-abroad-sec ================ -->

    <!-- ================ start: payment-methods-offered-by-tcs-sec ================ -->
    <section class="payment-methods-offered-by-tcs-sec">
        <div class="custom-container1">
            <div class="title-sec1 text-center">
                <h1>@lang('public.payemnet_method')</h1>
                <p>@lang('public.payement_method_text')</p>
            </div>
            <div class="custom-row">
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.COC')</h4>
                        <p>@lang('public.COC_text')</p>
                        <div class="more-actions">
                            <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                        </div>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.DC')</h4>
                        <p>@lang('public.DC_text')</p>
                        <div class="more-actions">
                            <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                        </div>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="inner-box">
                        <h4>@lang('public.CC')</h4>
                        <p>@lang('public.CC_text')</p>
                        <div class="more-actions">
                            <a href="help-desk" class="theme-border-btn more_btn">@lang('public.more_info')</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title-sec1 text-center">
                <h1>@lang('public.A_fast_Canada')</h1>
                <p>@lang('public.download_free')</p>
            </div>
            <div class="download-links-btns">
                <a href="#" class="theme-border-btn link_Btn"><img
                        src="{{ asset('frontend/assets/images/googlePlay-icon.svg') }}" />@lang('public.Google_Play')</a>
                <a href="#" class="theme-border-btn link_Btn"><img
                        src="{{ asset('frontend/assets/images/appleStore-icon.svg') }}" />@lang('public.App_Store')</a>
            </div>
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#type").change(function() {
                var val = $(this).val();
                console.log(val);
                if (val == "Canada") {
                    console.log('under canada');
                    // $('#country_image')[0].src = "{{ asset('frontend/assets/images/Flag_of_India.svg') }}";
                    $("#to_currency").html(
                        "<option value='CAD'>CAD</option><option value='CAD'>CAD</option>"

                    );
                    $('#from_currency').html(
                        "<option value='CAD'>CAD</option><option value='CAD'>CAD</option>"
                    )
                    $("#to_currency").selectpicker("refresh");
                    $('#to_currency')?.val('CAD')?.trigger('change');
                    $("#from_currency").selectpicker("refresh");
                    $('#from_currency')?.val('CAD')?.trigger('change');




                } else if (val == "USA") {
                    console.log('under USA');
                    // $('#country_image')[0].src = "{{ asset('frontend/assets/images/Flag_of_the_Philippines.svg') }}";
                    $("#to_currency").html(
                        "<option value='USD'>USD</option><option value='CAD'>CAD</option>"
                    );
                    $('#from_currency').html(
                        "<option value='CAD'>CAD</option><option value='USD'>USD</option>"
                    )
                    $("#to_currency").selectpicker("refresh");
                    $('#to_currency')?.val('USD')?.trigger('change');
                    $("#from_currency").selectpicker("refresh");
                    $('#from_currency')?.val('CAD')?.trigger('change');


                    // $('#country_flag_image')[0].src =
                    //     "{{ asset('frontend/assets/images/Flag_of_the_Philippines.svg') }}";

                } else if (val == "Chili") {
                    console.log('under Chili');
                    // $('#country_image')[0].src ="{{ asset('frontend/assets/images/Flag_of_Colombia.svg') }}";
                    $("#to_currency").html(
                        "<option value='CLP'>CLP</option><option value='CAD'>CAD</option>"
                    );
                    $('#from_currency').html(
                        "<option value='CAD'>CAD</option><option value='CLP'>CLP</option>"
                    )
                    $("#to_currency").selectpicker("refresh");
                    $('#to_currency')?.val('CLP')?.trigger('change');
                    $("#from_currency").selectpicker("refresh");
                    $('#from_currency')?.val('CAD')?.trigger('change');
                    // $('#country_flag_image')[0].src =
                    //     "{{ asset('frontend/assets/images/Flag_of_Colombia.svg') }}";


                } else if (val == "Brazil") {
                    console.log('under Brazil');
                    // $('#country_image')[0].src ="{{ asset('frontend/assets/images/Flag_of_Mexico.svg') }}";
                    $("#to_currency").html(
                        "<option value='BRL'>BRL</option><option value='CAD'>CAD</option>");
                    $('#from_currency').html(
                        "<option value='CAD'>CAD</option><option value='BRL'>BRL</option>"
                    )
                    $("#to_currency").selectpicker("refresh");
                    $('#to_currency')?.val('BRL')?.trigger('change');
                    $("#from_currency").selectpicker("refresh");
                    $('#from_currency')?.val('CAD')?.trigger('change');
                    // $('#country_flag_image')[0].src =
                    //     "{{ asset('frontend/assets/images/Flag_of_Mexico.svg') }}";

                } else if (val == "Haiti") {
                    console.log('under Haiti');
                    // $('#country_image')[0].src ="{{ asset('frontend/assets/images/Flag_of_Pakistan.svg') }}";
                    $("#to_currency").html(
                        "<option value='HTG'>HTG</option><option value='CAD'>CAD</option>");
                    $('#from_currency').html(
                        "<option value='CAD'>CAD</option><option value='HTG'>HTG</option>"
                    )
                    $("#to_currency").selectpicker("refresh");
                    $('#to_currency')?.val('HTG')?.trigger('change');
                    $("#from_currency").selectpicker("refresh");
                    $('#from_currency')?.val('CAD')?.trigger('change');
                    // $('#country_flag_image')[0].src =
                    //     "{{ asset('frontend/assets/images/Flag_of_Pakistan.svg') }}";

                }else if (val == "Dominican Republic") {
                console.log('under Dominican Republic');
                // $('#country_image')[0].src ="{{ asset('frontend/assets/images/Flag_of_Pakistan.svg') }}";
                $("#to_currency").html(
                    "<option value='DOP'>DOP</option><option value='CAD'>CAD</option>");
                $('#from_currency').html(
                    "<option value='CAD'>CAD</option><option value='DOP'>DOP</option>"
                )
                $("#to_currency").selectpicker("refresh");
                $('#to_currency')?.val('DOP')?.trigger('change');
                $("#from_currency").selectpicker("refresh");
                $('#from_currency')?.val('CAD')?.trigger('change');
                // $('#country_flag_image')[0].src =
                //     "{{ asset('frontend/assets/images/Flag_of_Pakistan.svg') }}";

            }

                // $("#to_currency").val($("#to_currency option:first").val()).trigger('change');
                // $("#to_currency").selectpicker("refresh");

                // $("#from_currency").val($("#from_currency option:first").val()).trigger('change');
                // $("#from_currency").selectpicker("refresh");

                // checkExchange();

            });

            document.getElementById('contact_search').addEventListener('input', (e) => {
                console.log(`Input value: "${e.currentTarget.value}"`);
                if (e.currentTarget.value == "") {
                    console.log('under blank');
                    $('#contact-list').html('');
                    $('#pay_money_button').attr("disabled", "disabled");
                }
            })
        });


        async function checkExchange() {

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

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

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

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

                await calculate();
                refreshSendMoneyButton()
            }
        }


        var to_amount = 0;

        function calculate() {
            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);
                    return;
                    // exchange-rate.value = `${rate}`
                    // to_amount = (input_amount.value * rate).toFixed(3);
                    // output_from.innerText= `${input_amount.value} ${from_currency_value}`;
                    // output_to.innerText = `${to_amount} ${to_currency_value}`;
                    // output_amount.style.display="block";
                })
        }


        document.getElementById("exchange_button").addEventListener("click", () => {

            if (!$('#from_money').val()) {
                $("#from_money").parent().parent().parent().append(
                    "<div class='validation' id='validation' style='color:red;margin-bottom: 20px;'>Please enter amount</div>"
                    );
            } else {
                $("#validation").remove();

                calculate();
            }
        });
    </script>
@endsection