@extends('layouts.user_dashboard_main')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />

    <div class="dashboard-recent-act-rg-card">
        <div class="recent-activity">

            <div class="dashboard-contact-chat-view">
                <div class="header-part">
                    <div class="contact-list-details">
                        <ul>
                            <li>
                                <div class="user-img-left-back">
                                    <a href="{{ redirect()->back()->getTargetUrl() }}" class="back-btn"><img
                                            src="{{ asset('frontend/assets/images/back-arow.svg') }}"></a>
                                    <figure class="user-img-w-text">
                                        <div class="img-container">
                                            <img src="{{ asset('storage/profile_images/' . $user->profile_image) }}">
                                        </div>
                                        <figcaption>{{ $user->name }}</figcaption>
                                    </figure>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="body-part">
                    <div class="send-user-info">
                        <h4>@lang('public.send_to') {{ $user->name }}</h4>
                        <ul class="send-price-information">

                            <li class="send_li">
                                <h5>@lang('public.They_Payement')</h5>
                                <div class="price_value">
                                    @php
                                        $paid = App\Models\Transaction_details::where('sender_id', $user->id)
                                            ->Where('receiver_id', auth()->user()->id)
                                            ->get();
                                        $total_receive = round($paid->sum('total_amount'));
                                    @endphp
                                    <h3><small>$</small>{{ $total_receive }}</h3>
                                    <p>CAD </p>
                                </div>
                            </li>
                            <li class="send_li">
                                <h5>@lang('public.Your_Payment')</h5>
                                <div class="price_value">
                                    @php
                                        $paid = App\Models\Transaction_details::where('sender_id', auth()->user()->id)
                                            ->Where('receiver_id', $user->id)
                                            ->get();
                                        $total_pay = round($paid->sum('total_amount'));
                                    @endphp
                                    <h3><small>$</small>{{ $total_pay }}</h3>
                                    <p>CAD</p>
                                </div>
                            </li>
                        </ul>
                        <div class="chat-lists" id="chart-list">
                            @foreach ($all_transaction as $key => $transaction)
                                <div class="chat-col @if ($transaction->sender_id == auth()->user()->id) right-dir  @else @endif ">
                                    <div class="chat-box">
                                        <p>@lang('public.Payment_to') @if ($transaction->sender_id == auth()->user()->id)
                                                {{ $user->name }}
                                            @else
                                                You
                                            @endif
                                        </p>
                                        <div class="price">$ {{ $transaction->total_amount }}</div>
                                        <div class="paid_tatus">
                                            <div class="leInfo"><img
                                                    src="{{ asset('frontend/assets/images/green-circle-tick.svg') }}">@lang('public.Paid')
                                                - {{ $transaction->created_at }}
                                            </div>
                                            <button type="button" class="rgArow-btn" data-toggle="modal"
                                                data-target="#transactionSuccesful-alert-modal-{{ $key }}"><img
                                                    src="{{ asset('frontend/assets/images/right-arow.svg') }}"></button>
                                        </div>
                                    </div>
                                    <div class="modal transactionSuccesful-alert-modal "
                                        id="transactionSuccesful-alert-modal-{{ $key }}">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4>@lang('public.Transaction_Succesful')</h4>
                                                    {{-- <h5>09:38 pm on 08 Feb 2023</h5> --}}
                                                    <h5>{{ $transaction->created_at->toDayDateTimeString('d.m.Y') }} </h5>
                                                    <button type="button" class="close"
                                                        data-dismiss="modal">&times;</button>
                                                </div>

                                                <div class="modal-body">
                                                    <div class="transactionSuccesful-box">
                                                        <div class="receivedfrom-info">
                                                            <h3>@lang('public.Payment_to')</h3>
                                                            <div class="recFrom-row">
                                                                <figure>
                                                                    <div class="icon-container">
                                                                        <img
                                                                            @if ($transaction->sender_id == auth()->user()->id) src="{{ asset('frontend/assets/images/up arrow.svg') }}"  @else  src="{{ asset('frontend/assets/images/arow-bottom-left.svg') }}" @endif>

                                                                    </div>
                                                                    <figcaption>
                                                                        <h4>
                                                                            @if ($transaction->sender_id == auth()->user()->id)
                                                                                {{ $user->name }}
                                                                            @else
                                                                                You
                                                                            @endif
                                                                        </h4>
                                                                        <h5>
                                                                            @if ($transaction->sender_id == auth()->user()->id)
                                                                                {{ $user->country_code }}
                                                                                {{ $user->phone }}
                                                                            @else
                                                                                {{ auth()->user()->country_code }}
                                                                                {{ auth()->user()->phone }}
                                                                            @endif
                                                                        </h5>
                                                                    </figcaption>
                                                                </figure>
                                                                <div class="price">
                                                                    @if ($transaction->sender_id == auth()->user()->id)
                                                                        - $ {{ $transaction->amount }}
                                                                    @else
                                                                        + $ {{ $transaction->amount }}
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>


                                                        <div class="transfer-info">
                                                            <h3><img
                                                                    src="{{ asset('frontend/assets/images/icon-park-outline_transaction-order.svg') }}">@lang('public.Transfer_Details')
                                                            </h3>
                                                            <h4>@lang('public.Transaction_ID')</h4>
                                                            <div class="id-with-rg-icon">
                                                                <h3><b>ID : {{ $transaction->uuid }}</b></h3>
                                                                <button type="button" class="copy_btn"><img
                                                                        src="{{ asset('frontend/assets/images/copy-icon.svg') }}"></button>
                                                            </div>
                                                            <div class="id-with-rg-icon mt-2">
                                                                <h3><b>Tax Amount : $ {{ $transaction->tax_amount }}</b>
                                                                </h3>
                                                            </div>
                                                            <div class="id-with-rg-icon mt-2">
                                                                <h3><b>Total Amount : $
                                                                        {{ $transaction->total_amount }}</b></h3>
                                                            </div>
                                                            <h4>@lang('public.Credited_to')</h4>
                                                            <div class="credit_info">
                                                                <figure>
                                                                    <div class="icon-container">
                                                                        <img
                                                                            src="{{ asset('frontend/assets/images/ph_wallet-light.svg') }}">
                                                                    </div>
                                                                    <figcaption>
                                                                        <h5>
                                                                            <span>
                                                                                @if ($transaction->sender_id == auth()->user()->id)
                                                                                    {{ $user->name }}
                                                                                @else
                                                                                    You
                                                                                @endif
                                                                            </span>
                                                                            <b>
                                                                                @if ($transaction->sender_id == auth()->user()->id)
                                                                                    + $ {{ $transaction->amount }}
                                                                                @else
                                                                                    + $ {{ $transaction->amount }}
                                                                                @endif
                                                                            </b>
                                                                        </h5>

                                                                    </figcaption>
                                                                </figure>
                                                            </div>
                                                        </div>
                                                        <div class="actions-btns">
                                                            <a href="javascript:;" class="download-btn">
                                                                <div class="icon-container">
                                                                    <img
                                                                        src="{{ asset('frontend/assets/images/down-arow-btn.svg') }}">
                                                                </div>
                                                                <span>@lang('public.Download_Receipt')</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach


                        </div>
                    </div>
                </div>
                <div class="footer-part">
                    <div class="send-actioins">
                        <button type="button" class="send-btn theme-solid-btn" onclick="openModal()"
                            style="width:50% !important; line-height:50px;margin-left:20%;">Send</button>
                    </div>
                    {{-- <div>
                        <form class="footer-row" id="send-money1" method="post" action="{{ route('payMoney') }}"
                            enctype="multipart/form-data">
                            <meta name="csrf-token" content="{{ csrf_token() }}" />
                            <div class="input-box">
                                <div class="prefixDolar">$</div>
                                <input type="text" id="amount" class="form-control message-box"
                                    placeholder="@lang('public.Add_Money_for_payment')" required>
                                <input type="hidden" id="receiver_id" value="{{ $user->id }}">
                            </div>
                            <div class="send-actioins">
                                <button type="button" class="send-btn theme-solid-btn"
                                    onclick="openModal()">@lang('public.Send')</button>
                            </div>
                        </form>
                        <span class="payment_amount_error" style="color:red; margin-left:60px"></span>
                    </div> --}}
                </div>
            </div>

        </div>
        <div class="card-info">
            <div class="list-header">
                <div class="left-info">
                    <h3>@lang('public.My_cards')</h3>
                </div>
            </div>
            @if ($allCard)
                <div class="card-lists">

                    <div class="card-item">
                        <div class="card-box">
                            <div class="card-text-img-row">
                                <div class="text-info">
                                    <h5>{{ $allCard[0]['exp_month'] }}/{{ $allCard[0]['exp_year'] }}</h5>
                                    <h5>**** **** **** {{ $allCard[0]['number_last'] }}</h5>
                                </div>
                                <div class="img-info">
                                    <img src="{{ asset('frontend/assets/images/mastercard.svg') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="view-more">
                    <a href="/manage-account" class="view-btn">@lang('public.View_more') <img
                            src="{{ asset('frontend/assets/images/right-arow.svg') }}"></a>
                </div>
            @else
                <div class="card-lists">

                    <div class="card-item">
                        <div class="card-box">
                            <h5 style="text-align: center; margin-top:60px;">@lang('public.No_Saved_Card') </h5>

                        </div>
                    </div>

                </div>
            @endif
        </div>

    </div>



    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Payment Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- <form class="footer-row" id="send-money" method="post" action="{{ route('payMoney') }}"
                            enctype="multipart/form-data">
                            <meta name="csrf-token" content="{{ csrf_token() }}" />
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr class="tabletitle">
                                                <th>Payment Amount</th>
                                                <th>Charge Amount</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>

                                        <tr class="list-item">
                                            <td data-label="Taxable Amount" id="payment_amount" class="tableitem"></td>
                                            <td data-label="Tax Amount" class="tableitem" id="payment_percent"></td>
                                            <td data-label="Total" class="tableitem" id="total_amount"></td>
                                        </tr>

                                        <tr class="list-item total-row">
                                            <th colspan="9" class="tableitem">Grand Total</th>
                                            <td data-label="Grand Total" class="tableitem" id="grand_total"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                {{-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --}}
                                <button type="submit" class="btn btn-primary">Pay Now</button>
                            </div>
                        </form> -->



                <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 d-none">
                            <div class="form-group">
                                <label>Payment method</label>
                                <select class="selectpicker selected-dropdown-s3">
                                    <option>Payment method</option>
                                    <option>Payment method</option>
                                    <option>Payment method</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-12 col-md-12 ">
                            <div class="form-group">
                                <label>Send Money</label>
                                <div class="promo-field-block">
                                    <input type="number" class="field form-control" id="send_money">
                                    <span class="payment_amount_error" style="color: red"></span>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="receiver_id" value="{{ $user->id }}">

                        <div class="col-12 col-md-12">
                            <div class="add-promo-block">
                                <p>Add Promo</p>
                                <div class="promo-field-block">
                                    <input type="text" class="field">
                                    <button class="btn" id="apply_promo">Apply</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="fees-totabl-block">
                                <ul>
                                    <li><span>Fees</span> <strong> <span id="send_money_value">00.00</span> CAD</strong>
                                    </li>
                                    <li><span>Tax</span> <strong> <span id="send_money_tax">00.00</span> CAD</strong>
                                    </li>
                                    <li><span>Total</span> <strong><span id="send_money_value_total">00.00</span> CAD</strong></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-group mb-0">
                                <div class="submit-actions">
                                    <button class="theme-solid-btn send_money_btn" onclick="payMoney()">Continue</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
</script>
<script>

    $(document).ready(function() {

        $('#send_money').on('keyup', function() {
            $amount = $(this).val();
            if($amount==null){
                $('#send_money_tax').text('00.00');
                $('#send_money_value_total').text('00.00');
            }
            if (event.keyCode == 8) {

                $('#send_money_tax').text('00.00');
                $('#send_money_value_total').text('00.00');
            }
            $('#send_money_value').text($(this).val());
            if ($amount >= 10 && $amount <= 50) {
                        $('#send_money_tax').text('5.00');
                        $total_amount = Number($amount) + 5.00;
                        console.log($total_amount);

                        $('#send_money_value_total').text($total_amount);


                    }
                    if ($amount >= 51 && $amount <= 100) {

                        $('#send_money_tax').text('5.50');
                        $total_amount = Number($amount) + 5.50;

                        $('#send_money_value_total').text($total_amount);
                    }

                    if ($amount >= 101 && $amount <= 200) {

                        $('#send_money_tax').text('7.50');
                        $total_amount = Number($amount) + 7.50;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 201 && $amount <= 300) {

                        $('#send_money_tax').text('9.00');
                        $total_amount = Number($amount) + 9.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 301 && $amount <= 400) {
                        $('#send_money_tax').text('10.50');
                        $total_amount = Number($amount) + 10.50;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 401 && $amount <= 500) {
                        $('#send_money_tax').text('12.00');
                        $total_amount = Number($amount) + 12.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 501 && $amount <= 600) {
                        $('#send_money_tax').text('14.00')
                        $total_amount = Number($amount) + 14.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 601 && $amount <= 700) {
                        $('#send_money_tax').text('16.00')
                        $total_amount = Number($amount) + 16.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 701 && $amount <= 800) {
                        $('#send_money_tax').text('18.00')
                        $total_amount = Number($amount) + 18.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 801 && $amount <= 900) {
                        $('#send_money_tax').text('19.00')
                        $total_amount = Number($amount) + 19.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 901 && $amount <= 1000) {
                        $('#send_money_tax').text('19.75')
                        $total_amount = Number($amount) + 19.75;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 1001 && $amount <= 1500) {
                        $('#send_money_tax').text('23.50')
                        $total_amount = Number($amount) + 23.50;

                        $('#send_money_value_total').text($total_amount);
                    }

                    if ($amount >= 1501 && $amount <= 2000) {
                        $('#send_money_tax').text('25.00')
                        $total_amount = Number($amount) + 25.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 2001 && $amount <= 2500) {
                        $('#send_money_tax').text('27.00')
                        $total_amount = Number($amount) + 27.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 2501 && $amount <= 3000) {
                        $('#send_money_tax').text('29.00')
                        $total_amount = Number($amount) + 29.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 3001 && $amount <= 3500) {
                        $('#send_money_tax').text('31.00')
                        $total_amount = Number($amount) + 31.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 3501 && $amount <= 4000) {
                        $('#send_money_tax').text('33.00')
                        $total_amount = Number($amount) + 33.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 4001 && $amount <= 4500) {
                        $('#send_money_tax').text('38.00')
                        $total_amount = Number($amount) + 38.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 4501 && $amount <= 5000) {
                        $('#send_money_tax').text('43.00');
                        $total_amount = Number($amount) + 43.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 5001 && $amount <= 5500) {
                        $('#send_money_tax').text('48.00')
                        $total_amount = $amount + 48.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 5501 && $amount <= 6000) {
                        $('#send_money_tax').text('53.00')
                        $total_amount = Number($amount) + 53.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 6001 && $amount <= 6500) {
                        $('#send_money_tax').text('58.00')
                        $total_amount = Number($amount) + 58.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 6501 && $amount <= 7000) {
                        $('#send_money_tax').text('63.00');
                        $total_amount = Number($amount) + 63.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 7001 && $amount <= 7500) {
                        $('#send_money_tax').text('68.00');
                        $total_amount = Number($amount) + 68.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 7501 && $amount <= 8000) {
                        $('#send_money_tax').text('73.00');
                        $total_amount = Number($amount) + 73.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 8001 && $amount <= 8500) {
                        $('#send_money_tax').text('78.00')
                        $total_amount = Number($amount) + 78.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 8501 && $amount <= 9000) {
                        $('#send_money_tax').text('83.00');
                        $total_amount = Number($amount) + 83.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 9001 && $amount <= 9500) {
                        $('#send_money_tax').text('88.00');
                        $total_amount = Number($amount) + 88.00;

                        $('#send_money_value_total').text($total_amount);
                    }
                    if ($amount >= 9501 && $amount <= 10000) {
                        $('#send_money_tax').text('93.00');
                        $total_amount = Number($amount) + 93.00;

                        $('#send_money_value_total').text($total_amount);
                    }



        })


        $("#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();
        }
    });
    $(document).ready(function() {

        var d = $('#chart-list');
        d.scrollTop(d.prop("scrollHeight"));

        $('select').on('change', function() {

            console.log("locale/" + this.value);

            $.ajax({

                url: "contact-pay/locale/" + this.value,

                success: function(result) {

                    window.location.reload();



                    // location.href = location.href; //here you can specify where you want to get your ajax call to redirect to.

                }



            });

        })

    });


    function payMoney(){

        $amount = $('#send_money').val();
        console.log('amount', $amount);
        if($amount==''){
            $('.payment_amount_error').text("@lang('public.Please_put_amount_first')");
        }else{
            $('.payment_amount_error').text('');

        $total_amount = $('#send_money_value_total').text();
        console.log('total_amount', $total_amount);
        var receiver_id = $('#receiver_id').val();
        if($total_amount!='00.00'){
                 $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({

                url: "{{ route('payMoney') }}",
                type: "POST",
                data: {
                    receiver_id: receiver_id,
                    total_amount: $total_amount


                },
                beforeSend: function() {
                    var data = confirm("Are you sure?");
                    console.log('data', data);
                    if (data) {
                        return true;
                    } else {

                        $(".loadingScreen").removeClass('show');
                        return false;

                    }
                },
                success: function(data) {
                    $(".loadingScreen").removeClass('show');

                    console.log(data);
                    if (data.status == 200) {

                        swal({
                            title: "Payement Done!",
                            text: "Your amount has been debited from your Transcash Wallet!",
                            type: "success"
                        }).then(function() {
                            window.location.reload();
                        });


                    } else if (data.status == 202) {
                        swal({
                            title: "Payement Failed!",
                            text: "Insufficient Balance! Please Add money in Transcash Wallet",
                            type: "error"
                        }).then(function() {
                            window.location.reload();
                        });

                    } else {
                        swal({
                            title: "Payement Success!",
                            text: "Notification Can'not sent !!",
                            type: "success"
                        }).then(function() {
                            window.location.reload();
                        });

                    }

                },
                complete: function() {
                    $(".loadingScreen").removeClass('show');

                }


            })
            }
        }


    }

    function showPayTransaction() {
        console.log('hit Pay modal');
    }

    function showReceiveTransaction() {
        console.log('hit Receive modal');

    }


    function openModal() {
        $('#exampleModal').modal('show');

    }
</script>