@extends('site.layouts.app')
@section('title', 'Checkout')
@section('content')


    {{-- {{ dd(session('cart')) }} --}}
    <!-- 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>Checkout</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">Checkout</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            @if (session('cart'))

                <div class="container">
                    
                    <form action="{{ route('checkout.submit') }}" method="post" class="Cartform">
                        <div class="row">
                            <div class="col-12">
                                @csrf
                                <div class="table-responsive shop_cart_table">
                                    @if (session('cart'))
                                        @php $total = 0 @endphp
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th class="product-thumbnail">&nbsp;</th>
                                                    <th class="product-name">Product</th>
                                                    <th class="product-price">Price</th>
                                                    <th class="product-quantity">Quantity</th>
                                                    <th class="product-subtotal">Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @if (session('cart'))
                                                    @foreach (session('cart') as $id => $details)
                                                        @php
                                                            $total += $details['price'] * $details['quantity'];
                                                            // $total = round($total, 2);
                                                        @endphp
                                                        <tr data-id="{{ $id }}">
                                                            <td class="product-thumbnail">
                                                                @if (!empty($details['variant_id']))
                                                                    @php
                                                                        $colorImage = App\Models\ProductVariant::where(
                                                                            'id', $details['variant_id']
                                                                        )->first();
                                                                    @endphp
                                                                     @if ($colorImage )
                                                                <img src="{{ asset('uploads/products/variations') . '/' . $colorImage->image }}"
                                                                alt="{{ $details['image'] }}">

                                                            @endif
                                                                @else
                                                                    <img src="{{ asset('uploads/products') }}/{{ $details['image'] }}"
                                                                        alt="{{ $details['image'] }}">
                                                                @endif

                                                            </td>
                                                            <td class="product-name" data-title="Product"><a
                                                                    href="#">{{ ucwords($details['name']) }}</a></td>
                                                            <td class="price" data-title="Price">
                                                                {{ $details['price'] }}</td>
                                                            <td class="product-quantity" data-title="Quantity">
                                                                <strong>{{ $details['quantity'] }}</strong>

                                                            </td>
                                                            <td class="price" data-title="Total">
                                                                ${{ $details['price'] * $details['quantity'] }}
                                                            </td>

                                                        </tr>
                                                        <input type="hidden" value="{{ $id }}"
                                                            name="product_id[]">
                                                        <input type="hidden" value="{{ $details['price'] }}"
                                                            name="price[]">
                                                        <input type="hidden" value="{{ $details['quantity'] }}"
                                                            name="quantity[]">

                                                        <input type="hidden"
                                                            value="{{ !empty($details['color_id']) ? $details['color_id'] : '' }}"
                                                            name="color_id[]">
                                                        <input type="hidden" value="{{ $details['size'] }}"
                                                            name="size[]">

                                                        <input type="hidden" value="{{ $details['weight_id'] }}"
                                                            name="weight_id[]">
                                                            <input type="hidden"
                                                            value="{{ !empty($details['variant_id']) ? $details['variant_id'] : '' }}"
                                                            name="variant_id[]">
                                                        <input type="hidden"
                                                            value="{{ !empty($details['delivery_date']) ? $details['delivery_date'] : '' }}"
                                                            name="delivery_date[]">
                                                    @endforeach
                                                @endif

                                            </tbody>
                                        </table>
                                    @else
                                        <h2 class="text-danger text-center">No product in cart</h2>
                                    @endif
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="medium_divider"></div>
                                <div class="divider center_icon"><i class="linearicons-credit-card"></i></div>
                                <div class="medium_divider"></div>
                            </div>
                        </div>
                        @php
                            $sender = App\Models\Country::where('id', auth()->user()->country_id)->first();
                            $sender_country_name = $sender->name;

                        @endphp
                        <div class="row">
                            {{-- <div class="col-md-6">
                                <div class="border p-3 p-md-4">
                                   <div class="heading_s1 mb-3">
                                        <h4>Sender Details</h4>
                                    </div>
                               <div class="form-group mb-3">
                                        <label for="name">Name</label>
                                        <input class="form-control" value="{{ auth()->user()->name }}" readonly
                                            type="text" placeholder="Name">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="name">Email</label>
                                        <input class="form-control" value="{{ auth()->user()->email }}" readonly
                                            type="email" placeholder="Email">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="Phone">Phone</label>
                                        <input class="form-control" value="{{ auth()->user()->phone }}" readonly
                                            type="text" placeholder="Phone">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="country_id">Country</label>
                                        @php
    $sender = App\Models\Country::where('id', auth()->user()->country_id)

        ->first();
    $sender_country_name = $sender->name;
                                        @endphp
                                        @if (isset($sender))
                                            <div class="">

                                                <input class="form-control" value="{{ $sender->name }}" readonly
                                                    type="text">
                                            </div>
                                        @else
                                            <select class="form-select first_null text-capitalize " disabled id="">
                                                <option value="">No country has set</option>
                                            </select>
                                            Kindly set your country for shop
                                            <u><a href="/">Click here</a></u>
                                        @endif
                                    </div>   <div class="form-group mb-3">
                                        <label for="currency">Currency</label>
                                        <input class="form-control" value="{{ $sender->currency }}" readonly
                                            type="text" name="sender_currency" placeholder="Currency">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="address">Address</label>
                                        <input class="form-control" readonly type="text"
                                            value="{{ auth()->user()->address }}" placeholder="Address">
                                    </div>



                                </div>


                            </div> --}}


                            <div class="col-md-12">
                                <div class="border p-3 p-md-4">
                                    <div class="heading_s1 mb-3">
                                        <h4>Receiver Details</h4>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="name">Receiver Name</label>
                                        <input class="form-control" required type="text" name="receiver_name"
                                            id="name" placeholder="Receiver Name">
                                        <div id="name_error" class="text-danger"></div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="name">Receiver Email</label>
                                        <input class="form-control" required type="email" name="receiver_email"
                                            placeholder="Email">
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="Phone">Receiver Phone</label> <br>
                                        <input class="form-control" required type="text" style="width: 100%"
                                            id="receiver_phone" placeholder="Phone">
                                        <div class="text-danger" id="phone_error"></div>
                                    </div>
                                    <input type="hidden" name="receiver_phone" id="receiver_phone1">

                                    <div class="form-group mb-3">
                                        <label for="country_id"> Receiver Country</label>
                                        @php
                                            $country = App\Models\Country::where(
                                                'id',
                                                session()->get('country_id'),
                                            )->first();
                                        @endphp
                                        @if (isset($country))
                                            <div class="">
                                                <select name="receiver_country"
                                                    class="form-select first_null text-capitalize" readonly
                                                    id="receiver_country">
                                                    {{-- <option value="">Your Country</option> --}}
                                                    <option selected value="{{ $country->id }}">{{ $country->name }}
                                                    </option>

                                                </select>
                                            </div>
                                        @else
                                            <select class="form-select first_null text-capitalize " disabled
                                                id="">
                                                <option value="">No country has set</option>
                                            </select>
                                            Kindly set your country for shop
                                            <u><a href="/">Click here</a></u>
                                        @endif
                                    </div>



                                    <div class="form-group mb-3">
                                        <label for="City">City</label>
                                        <div class="">
                                            <select name="receiver_city" required
                                                class="form-select first_null text-capitalize select2" style="width: 100%"
                                                id="cities">
                                            </select>
                                        </div>
                                    </div>

                                    @if ($country->name == 'Indonesia')
                                        <div class="form-group mb-3">
                                            <label for="address">House #: (if in City) RT/RW/ Nomor Rumah:</label>
                                            <textarea class="form-control" required name="receiver_address_rtrw" rows="1"></textarea>
                                        </div>
                                    @else
                                        <div class="form-group mb-3">
                                            <label for="address">Receiver Complete Address</label>
                                            <textarea class="form-control" required name="receiver_address" rows="1"></textarea>
                                        </div>
                                    @endif

                                    <div id="accordion" class="accordion accordion_style1 ">
                                        <div class="card ">

                                            <div class="card">
                                                <div class="card-header" id="headingTwo">
                                                    <h6 class="mb-0"> <a class="collapsed" data-bs-toggle="collapse"
                                                            href="#collapseTwo" aria-expanded="false"
                                                            aria-controls="collapseTwo">Do you want to add a wishing
                                                            card?</a> </h6>
                                                </div>
                                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                    data-bs-parent="#accordion">

                                                    <div class="card-body ">
                                                        @php
                                                            $wishing_card_categories = App\Models\WishingCategory::get();
                                                        @endphp
                                                        @foreach ($wishing_card_categories as $key => $category)
                                                            <div id="accordion1" class="accordion accordion_style1 ">
                                                                <div class="card ">
                                                                    <div class="card-header" id="headingThree">
                                                                        <h6 class="mb-0"> <a class="collapsed"
                                                                                data-bs-toggle="collapse"
                                                                                href="#collapse{{ $key + 1 }}"
                                                                                aria-expanded="false"
                                                                                aria-controls="collapse">{{ $category->name }}</a>
                                                                        </h6>
                                                                    </div>
                                                                    <div id="collapse{{ $key + 1 }}"
                                                                        class="collapse"
                                                                        aria-labelledby="heading{{ $key + 1 }}"
                                                                        data-bs-parent="#accordion1">
                                                                        @php
                                                                            $wishing_cards = App\Models\WishingCard::where(
                                                                                'wishing_category_id',
                                                                                $category->id,
                                                                            )->get();

                                                                        @endphp

                                                                        @foreach ($wishing_cards as $w => $wishing)
                                                                            @php
                                                                                $key++;
                                                                            @endphp
                                                                            <div class="card mb-3 rounded">
                                                                                <div class="card-body bank-card rounded">
                                                                                    <input type="radio"
                                                                                        name="wishing_card_id"
                                                                                        id="wishings{{ $key }}"
                                                                                        value="{{ $wishing->id }}"
                                                                                        class="card-radio">


                                                                                    <label
                                                                                        for="wishings{{ $key }}"
                                                                                        class="bank-label">
                                                                                        <div class="row ">
                                                                                            <div class="col-md-4">
                                                                                                <img w
                                                                                                    src="{{ asset('uploads/wishing_cards') . '/' . $wishing->image }}"
                                                                                                    class="img-fluid rounded-start"
                                                                                                    alt="Wish card">
                                                                                            </div>
                                                                                            <div class="col-md-8">
                                                                                                <h5
                                                                                                    class="card-title text-danger">
                                                                                                    {{ $wishing->title }}
                                                                                                </h5>

                                                                                            </div>
                                                                                        </div>
                                                                                    </label>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach



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

                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="modal fade" id="instructionModal">
                            <div class="modal-dialog">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header">
                                        <h4 class="modal-title">Payment Intstruction</h4>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>

                                    <!-- Modal body -->
                                    <div class="modal-body">
                                        {{ $content->payment_instruction }}
                                    </div>

                                    <!-- Modal footer -->
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-sm btn-dark"
                                            data-bs-dismiss="modal">Close</button>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="row mt-1 mb-1">
                            <div id="data" class="col-md-6">
                                <div class="border p-3 p-md-4">
                                    <div class="heading_s1 mb-3">
                                        <h6>Cart Total</h6>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <tbody>
                                                <tr>
                                                    <td class="cart_total_label">Subtotal</td>
                                                    <td class="cart_total_amount" id="sub_total"
                                                        data-total="{{ $total }}">
                                                        {{ str_replace('_', '', $sender->currency) }} <span
                                                            id="sub_total_">{{ number_format($total) }}</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="cart_total_label">Shipping Cost</td>
                                                    <td class="cart_total_amount font-weight-bold">
                                                        {{ str_replace('_', '', $sender->currency) }} <span
                                                            id="shipping_cost">0</span>
                                                    </td>
                                                    <input type="hidden" value="0" name="shipping_cost"
                                                        id="ship_cost">
                                                </tr>
                                                <tr>
                                                    <td class="cart_total_label">Total</td>
                                                    <input type="hidden" name="total" id="total"
                                                        value="{{ $total }}">
                                                    <td class="cart_total_amount">
                                                        <strong>{{ str_replace('_', '', $sender->currency) }} <span
                                                                id="total_">{{ number_format($total) }}</span></strong>
                                                    </td>
                                                </tr>
                                            <tbody id="walle_remainig">

                                            </tbody>

                                            </tbody>
                                        </table>

                                    </div>


                                </div>
                            </div>
                            <div id="loader" class="col-md-6" style="display: none;">
                                <div class="border p-3 p-md-4">
                                    <img class="d-block mx-auto" src="{{ asset('assets/images/ajax-loader.gif') }}"
                                        alt="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border p-3 p-md-4" id="PaymentCard" style="display: none">
                                    <div class="payment_method">
                                        <div class="heading_s1 d-flex justify-content-between">
                                            <h4>Payment</h4>
                                            <p>
                                                <a href="javascript::void(0)" data-bs-target="#instructionModal"
                                                    data-bs-toggle="modal" class="btn btn-sm btn-fill-out">Read
                                                    Instruction</a>
                                            </p>

                                        </div>
                                        <div class="payment_option">
                                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">



                                                @php
                                                    $country_name = auth()->user()->country->name;

                                                @endphp

                                                @if (($country_name == 'PAKISTAN_' && $total > 24000) || ($country_name == 'Indonesia' && $total >= 1520000))
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link  custom-red" id="pills-home-tab"
                                                            data-bs-toggle="pill" data-bs-target="#Bank" type="button"
                                                            role="tab" aria-controls="BankTransfer"
                                                            data-payment="BankPayment" aria-selected="true">
                                                            <span class="fa fa-bank">&#xf19c;</span>
                                                            Bank Transfer
                                                        </button>
                                                        <input type="radio" name="payment_method" value="Bank Transfer"
                                                            hidden>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link custom-red" id="pills-profile-tab"
                                                            data-bs-toggle="pill" data-bs-target="#E-Wallet"
                                                            type="button" role="tab" data-payment="E-Wallet"
                                                            aria-controls="E-Wallet" aria-selected="false"><span
                                                                class="fas fa-wallet">
                                                            </span>
                                                            E-Wallet</button>
                                                        <input type="radio" name="payment_method"
                                                            value="E-Wallet Transfer" hidden>
                                                    </li>
                                                @else
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link  custom-red" id="pills-home-tab"
                                                            data-bs-toggle="pill" data-bs-target="#Bank" type="button"
                                                            role="tab" aria-controls="BankTransfer"
                                                            data-payment="BankPayment" aria-selected="true">
                                                            <span class="fa fa-bank">&#xf19c;</span>
                                                            Bank Transfer
                                                        </button>
                                                        <input type="radio" name="payment_method" value="Bank Transfer"
                                                            hidden>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link custom-red" id="pills-profile-tab"
                                                            data-bs-toggle="pill" data-bs-target="#E-Wallet"
                                                            type="button" role="tab" data-payment="E-Wallet"
                                                            aria-controls="E-Wallet" aria-selected="false"><span
                                                                class="fas fa-wallet">
                                                            </span>
                                                            E-Wallet</button>
                                                        <input type="radio" name="payment_method"
                                                            value="E-Wallet Transfer" hidden>
                                                    </li>
                                                @endif



                                                @php
                                                    $user_wallet = App\Models\Wallet::where(
                                                        'user_id',
                                                        '=',
                                                        auth()->user()->id,
                                                    )->first();

                                                @endphp
                                                @if (!empty($user_wallet->amount))
                                                    @if ($user_wallet->amount > 0)
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link custom-red" id="pills-profile-tab"
                                                                data-bs-toggle="pill" data-bs-target="#User-Wallet"
                                                                type="button" role="tab" aria-controls="E-Wallet"
                                                                aria-selected="false"><span class="fas fa-wallet"> </span>
                                                                Your E-Wallet</button>
                                                        </li>
                                                    @endif
                                                @endif

                                            </ul>

                                            <div class="tab-content" id="pills-tabContent">
                                                <div class="tab-pane fade show " id="Bank" role="tabpanel"
                                                    aria-labelledby="pills-home-tab">
                                                    @php
                                                        $sender_country = $sender->id;
                                                        $banks = App\Models\BankAccount::where(
                                                            'country_id',
                                                            '=',
                                                            $sender_country,
                                                        )->get();
                                                    @endphp

                                                    @foreach ($banks as $key => $bank)
                                                        @if ($bank->type === 'Bank')
                                                            <div class="card mb-3 bank-card">
                                                                <div class="card-body">
                                                                    <input type="radio" name="payment_bank_id"
                                                                        id="bank{{ $key + 1 }}"
                                                                        value="{{ $bank->id }}" class="card-radio">


                                                                    <label for="bank{{ $key + 1 }}"
                                                                        class="bank-label">
                                                                        <div class="row ">
                                                                            <div class="col-md-4">
                                                                                <img src="{{ asset('uploads/bank') . '/' . $bank->logo }}"
                                                                                    class="img-fluid rounded-start"
                                                                                    alt="Bank Logo">
                                                                            </div>
                                                                            <div class="col-md-8">
                                                                                <h5 class="card-title text-danger">
                                                                                    {{ $bank->bank_name }}
                                                                                </h5>
                                                                                <p class="card-text">
                                                                                    <strong>Title:</strong>
                                                                                    {{ $bank->holder_name }} <br>
                                                                                    <strong>Account#:</strong>
                                                                                    {{ $bank->account_no }}<br>
                                                                                    <strong>IBAN:</strong>
                                                                                    {{ $bank->iban }} <br>
                                                                                    @if ($country->name != 'Pakistan')
                                                                                        <strong>Address:</strong>
                                                                                        {{ $bank->address }} <br>
                                                                                    @endif

                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach




                                                </div>
                                                <div class="tab-pane fade" id="E-Wallet" role="tabpanel"
                                                    aria-labelledby="pills-profile-tab">
                                                    @foreach ($banks as $key => $bank)
                                                        @if ($bank->type === 'E-Wallet')
                                                            <div class="card mb-3 bank-card">
                                                                <div class="card-body">
                                                                    <input type="radio" name="payment_bank_id"
                                                                        id="bank{{ $key + 1 }}"
                                                                        value="{{ $bank->id }}" class="card-radio">


                                                                    <label for="bank{{ $key + 1 }}"
                                                                        class="bank-label">
                                                                        <div class="row ">
                                                                            <div class="col-md-4">
                                                                                <img src="{{ asset('uploads/bank') . '/' . $bank->logo }}"
                                                                                    class="img-fluid rounded-start"
                                                                                    alt="Bank Logo">
                                                                            </div>
                                                                            <div class="col-md-8">
                                                                                <h5 class="card-title text-danger">
                                                                                    {{ $bank->bank_name }}
                                                                                </h5>
                                                                                <p class="card-text">
                                                                                    <strong>Title:</strong>
                                                                                    {{ $bank->holder_name }} <br>
                                                                                    <strong>Account#:</strong>
                                                                                    {{ $bank->account_no }}<br>
                                                                                    <strong>IBAN:</strong>
                                                                                    {{ $bank->iban }} <br>


                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                                @if (!empty($user_wallet->amount))
                                                    <div class="tab-pane fade" id="User-Wallet" role="tabpanel"
                                                        aria-labelledby="pills-profile-tab">

                                                        <div class="card mb-3 bank-card" style="border:1px solid red">
                                                            <div class="card-body ">



                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <h5 class="card-title text-danger">
                                                                            Your E-Wallet
                                                                        </h5>

                                                                        You have <strong class="text-danger"
                                                                            style="border-bottom: 1px dotted red">{{ $sender->currency }}
                                                                            {{ $user_wallet->amount }}</strong>. Do you
                                                                        want to
                                                                        pay? <br>



                                                                        <div class="form-check mt-2">
                                                                            <input class="form-check-input"
                                                                                type="checkbox"
                                                                                data-amount="{{ $user_wallet->amount }}"
                                                                                id="myWallet" name="user_wallet"
                                                                                value="{{ $user_wallet->amount }}">
                                                                            <label
                                                                                class="form-check-label font-weight-bold"
                                                                                for="myWallet">&nbsp;
                                                                                <strong>YES</strong></label>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>

                                                    </div>
                                                @endif
                                                <div class="form-group">
                                                    <strong for="">Payment Receipt</strong>
                                                    <input type="file" required name="payment_receipt" id=""
                                                        class="form-control uploadFile" placeholder=""
                                                        aria-describedby="helpId">
                                                    <small>Upload your Payment Receipt </small>
                                                    <div class="row imagePreview1"></div>
                                                </div>
                                                <div class="form-group">
                                                    <strong for="">Trx ID</strong>
                                                    <input type="text" name="trx_id" required id=""
                                                        class="form-control">
                                                </div>
                                                @auth
                                                    <button type="submit" class="btn btn-fill-out btn_save mt-2">Place
                                                        Order</button>
                                                @endauth
                                            </div>

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


                        </div>


                    </form>
                </div>
            @else
                <h2 class="text-danger text-center">No product in cart</h2>
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <a href="/" class="btn btn-outline-danger">Back to Home</a>
                    </div>
                </div>
            @endif

        </div>
    </div>

    <link href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.12/build/css/intlTelInput.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.12/build/js/intlTelInput.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var input = document.querySelector("#receiver_phone");
            var iti = window.intlTelInput(input, {
                initialCountry: "pk",
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.12/build/js/utils.js",

            });

            // store the instance variable so we can access it in the console e.g. window.iti.getNumber()
            window.iti = iti;

            // Rest of your script...
        });

        $("#name").on('input', function() {
            // Validate the receiver_name field using regex
            var receiverNameRegex = /^[a-zA-Z\s'-]+$/;
            var receiverNameValue = $(this).val();

            if (!receiverNameRegex.test(receiverNameValue)) {
                $("#name_error").text("Please enter a valid name.");
                $(".btn_save").attr("disabled", true);
                $(this).addClass('is-invalid');
            } else {
                $("#name_error").text("");
                $(".btn_save").attr("disabled", false);
                $(this).removeClass('is-invalid');
            }

        });

        $("#receiver_phone").on('input', function() {
            var phoneNumberRegex = /^[\d\s()-]+$/;
            var phoneNumberValue = $(this).val();

            if (!phoneNumberRegex.test(phoneNumberValue)) {
                $("#phone_error").text("Please enter a valid phone number.");
                $(".btn_save").attr("disabled", true);
                $(this).addClass('is-invalid');
            } else {
                $("#phone_error").text(""); // Clear the error message if valid
                $(".btn_save").attr("disabled", false);
                $(this).removeClass('is-invalid');
            }


        });


        function hideLoader() {
            $('#loader').hide();
            $('#data').show();
        }

        let to = "{{ $sender->currency }}";
        let amount = "{{ $total }}";

        $(document).ready(function() {
            $('#loader').show();
            $('#data').hide();

            exchange_rate(to, amount).then(function(convertedTotal) {

                let total = convertedTotal.toFixed(2);
                console.log('total', total.toLocaleString())
                $('#total_').text(total.toLocaleString());
                $('#total').val(total.toLocaleString());
                $('#sub_total').data('total', total.toLocaleString());
                $('#sub_total_').text(total.toLocaleString());

                // Hide the loader when the operation is complete
                hideLoader();
            }).catch(function(error) {
                console.error(error);

                // Hide the loader in case of an error
                hideLoader();
            });
        });



        function exchange_rate(to, amount) {

            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "get",
                    url: "/currency_exchange",
                    data: {
                        'to': to,
                        'amount': amount
                    },
                    dataType: "json",
                }).done(function(response) {
                    resolve(response.result);
                }).fail(function(response) {
                    reject('Currency exchange request failed');
                });
            });
        }

        $('.price').each(function(index, element) {
            var price = parseFloat($(element).text().replace(/[^0-9.-]+/g,
                "")); // Extract numerical value from the price text
            let from_currency = "{{ optional(auth()->user()->country)->currency }}"


            exchange_rate(from_currency, price)
                .then(function(price_result) {
                    from_currency = from_currency.replace('_', '', )
                    $(element).text(from_currency + price_result);
                })
                .catch(function(error) {
                    // Handle errors
                    toastr.error(error);
                    console.error('Exchange Rate Error:', error);
                });
        });



        $('#cities').on('change', function() {
            var ship_cost = $(this).find("option:selected").data('ship');
            var toCurrency = to;

            var phoneNumber = iti.getNumber();

            $("#receiver_phone1").val(phoneNumber)


            $('#loader').show();
            $('#data').hide();

            // $("#PaymentCard").show() // testing show hide
            if (ship_cost === undefined || ship_cost === null || ship_cost === '') {
                ship_cost = 0;
                total = $('#sub_total').data('total');
                $('#shipping_cost').text(ship_cost);
                $('#ship_cost').val(ship_cost);
                $('#total').val(total);
                $('#total_').text(total.toLocaleString());
                $('#loader').hide();
                $('#data').show();
                $("#PaymentCard").show()

            } else {
                // Convert the ship_cost using the exchange_rate function
                exchange_rate(toCurrency, ship_cost)
                    .then(function(convertedCost) {
                        convertedCost = Number(convertedCost.toFixed(2));
                        let total = Number($('#sub_total').data('total')) + convertedCost;
                        total = Number(total.toFixed(2));

                        $('#shipping_cost').text(convertedCost);
                        $('#ship_cost').val(convertedCost);
                        $('#total').val(total);
                        $('#total_').text(total.toLocaleString());
                        $('#loader').hide();
                        $('#data').show();
                        $("#PaymentCard").show()
                    })
                    .catch(function(error) {
                        console.error(error);
                        $('#loader').hide();
                        $('#data').show();
                    });
            }
        });




        $("#myWallet").change(function(e) {
            e.preventDefault();

            if ($(this).prop('checked')) {
                $('#loader').show();
                $('#data').hide();

                let amount = $(this).data('amount');

                hideLoader();

                // Assuming result is the amount to be deducted from the total
                let remainingValue = parseFloat($("#total").val()) - parseFloat(amount);

                $("#walle_remainig").html(`
                    <tr>
                        <td class="cart_total_label">Your wallet amount</td>
                        <th>{{ $sender->currency }} ${amount}</th>
                    </tr>
                    <tr>
                        <td class="cart_total_label">Total Remaining <span class='blink-amount'>👉</span> </td>
                        <th>{{ $sender->currency }} ${remainingValue.toFixed(2)}</th>
                    </tr>
                `);
                $('#total').val(remainingValue.toFixed(2));
            } else {
                $("#walle_remainig").html('');
                let totalValue = $("#total_").text().replace(/,/g, ''); // Remove commas
                $('#total').val(parseFloat(totalValue).toFixed(0));
            }
        });




        var country_id = $("#receiver_country").val();

        if (country_id) {
            $.ajax({
                url: '{{ route('country_cities') }}',
                method: 'GET',
                data: {
                    country_id: country_id
                },
                success: function(r) {
                    // console.log(r.cities)
                    $('#cities').empty().append(
                        '<option value="">Select City</option>');
                    $.each(r.cities, function(key, city) {
                        $('#cities').append('<option data-ship="' + city.shipping_cost + '" value="' +
                            city.id + '">' + city.name + '</option>');
                    });
                }
            });
        } else {
            $('#cities').empty().append('<option value="">Select City</option>');
        }

        $('.card-radio').change(function() {
            $('.bank-card').removeClass('red-border');
            if ($(this).is(':checked')) {
                $(this).closest('.bank-card').addClass('red-border');
            } else {
                $(this).closest('.bank-card').removeClass('red-border');
            }
        });
        $('#pills-tab button').on('click', function(e) {
            e.preventDefault();

            var activeTabText = $(this).data('payment');
            console.log(activeTabText);
            if (activeTabText === 'BankTransfer') {
                // Check bank radio button
                $('input[name="payment_method"][value="Bank Transfer"]').prop('checked', true);
                console.log(activeTabText);
            } else if (activeTabText === 'E-Wallet') {
                // Check E-Wallet radio button
                $('input[name="payment_method"][value="E-Wallet Transfer"]').prop('checked', true);
            }
        });


        $('.uploadFile').on('change', function() {
            const previewContainer = $('.imagePreview1');

            previewContainer.empty();

            const files = $(this)[0].files;
            if (files.length === 0) return;

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const imageSrc = e.target.result;
                    const previewHtml = `
                    <div class="col-md-4">
                        <div class="position-relative">
                            <img src="${imageSrc}" class="img-thumbnail preview-image" alt="Image Preview">
                            <button type="button" class="close btn btn-xs float-end btn-danger delete-image" aria-label="Delete" data-index="${i}">
                                <span aria-hidden="true"><span class='fa fa-trash'></span></span>
                            </button>
                        </div>
                    </div>
                `;
                    previewContainer.append(previewHtml);
                };

                reader.readAsDataURL(file);
            }
        });

        $('.imagePreview1').on('click', '.delete-image', function() {
            const index = $(this).data('index');
            const fileInput = $('.uploadFile')[0];
            const files = fileInput.files;
            const newFiles = [];

            for (let i = 0; i < files.length; i++) {
                if (i !== index) {
                    newFiles.push(files[i]);
                }
            }

            const newFileList = new DataTransfer();
            newFiles.forEach((file) => {
                newFileList.items.add(file);
            });

            fileInput.files = newFileList.files;

            $(this).closest('.col-md-4').remove();
        });


        $(".Cartform").submit(function(e) {
            let bank = $(".card-radio").is(':checked');

            if (!bank) {
                e.preventDefault();
                toastr.error('Please select a bank.');
                return;
            }

            e.preventDefault();

            var phoneNumber = iti.getNumber();

            $("#receiver_phone1").val(phoneNumber)
            var data = new FormData(this);
            var url = $(this).attr("action");
            $.ajax({
                type: "post",
                url: url,
                data: data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".btn_save").html(
                        `<span class="spinner-border spinner-border-sm text-white" ></span> Loading...`
                    ).attr('disabled', true);
                },
                complete: function() {
                    $(".btn_save").html("Place Order").attr('disabled', false);
                }
            }).done(function(response) {
                console.log("response");
                setTimeout(() => {
                    window.location.href = "{{ route('order.completed') }}"
                }, 2000);

                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.success("Your order placed successfully");
                $('form')[0].reset();

            }).fail(function(response) {

                // console.log(response.responseJSON.message)
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                // toastr.error(response.responseJSON.message);
            });
        });
    </script>


@endsection