@extends('site.layouts.app')
@section('title', 'Checkout')
<style>
    label {
        font-weight: bold
    }
</style>
@section('content')
    <!-- 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">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <h4>Payment Checkout</h4>
                        <div class="card shadow border-0">
                            <form action="{{ route('mobileTopup.checkout.submit') }}">
                                @csrf
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{-- <h4>Details</h4> --}}

                                            @php
                                                $operator = App\Models\Operator::where(
                                                    'id',
                                                    session()->get('topupcart')['operator_id'],
                                                )->first();
                                                $package = App\Models\OperatorPackage::where(
                                                    'id',
                                                    session()->get('topupcart')['package_id'],
                                                )->first();
                                                $category = App\Models\PackageCategory::where(
                                                    'id',
                                                    session()->get('topupcart')['category_id'],
                                                )->first();
                                            @endphp
                                            {{-- <ul class="list-group list-group-unbordered mb-3 mt-4">
                                                <li class="list-group-item">
                                                    <div class="d-flex justify-content-between">
                                                        <div><b>Operator</b></div>
                                                        <div> {{ $operator->name }}</div>
                                                    </div>
                                                </li>

                                                <li class="list-group-item">
                                                    <div class="d-flex justify-content-between">
                                                        <div><b>Package</b></div>
                                                        <div> {{ $package->title }}</div>
                                                    </div>
                                                </li>

                                                <li class="list-group-item">
                                                    <div class="d-flex justify-content-between">
                                                        <div><b>Type</b></div>
                                                        <div> {{ $category->name }}</div>
                                                    </div>
                                                </li>

                                                <li class="list-group-item">
                                                    <div class="d-flex justify-content-between">
                                                        <div><b>Price</b></div>
                                                        <div> {{ session()->get('topupcart')['packageprice'] }}</div>
                                                    </div>
                                                </li>

                                            </ul> --}}
                                            <input type="hidden" name="operator_id" value="{{ $operator->id }}">
                                            <input type="hidden" name="package_id" value="{{ $package->id }}">
                                            <input type="hidden" name="package_category_id" value="{{ $category->id }}">

                                        </div>
                                        <div class="col-md-12">
                                            <div class="border p-3 p-md-4">
                                                <div class="heading_s1 mb-3">
                                                    <div class="d-flex justify-content-between">
                                                        <h4>Receiver Details</h4>
                                                        <div>
                                                            <a href="javascript::void(0)" data-bs-target="#recepientnModal"
                                                                data-bs-toggle="modal"
                                                                class="btn btn-xs btn-fill-out">Select Recipient</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3">
                                                    <label for="name">Receiver Name</label>
                                                    <input class="form-control" required type="text" name="receiver_name"
                                                        placeholder="Receiver Name" id="receiver_name">
                                                    <div class="text-danger" id="name_error"></div>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="Phone">Receiver Phone</label> <br>
                                                    <input class="form-control" required type="text" id="receiver_phone"
                                                        placeholder="Phone">
                                                    <div class="text-danger" id="phone_error"></div>
                                                    <input class="form-control" type="hidden" id="receiver_phone1"
                                                        name="receiver_phone" placeholder="Phone">
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label for="country_id"> Receiver Country</label>
                                                    @php

                                                        $rcountry = App\Models\Country::where(
                                                            'id',
                                                            session()->get('topupcart')['country_id'],
                                                        )->first();
                                                    @endphp
                                                    @if (isset($rcountry))
                                                        <div class="">
                                                            <input class="form-control" value="{{ $rcountry->id }}"
                                                                type="hidden" id="receiver_country"
                                                                name="receiver_country">
                                                            <input class="form-control" value="{{ str_replace('_', '', $rcountry->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>
                                        </div>

                                    </div>

                                    @php
                                        $sender = App\Models\Country::where('id', auth()->user()->country_id)->first();
                                        $sender_country_name = $sender->name;
                                    @endphp
                                    <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>Total</h6>
                                                </div>
                                                <div class="table-responsive">
                                                    <table class="table">
                                                        @php
                                                            $total = session()->get('topupcart')['packageprice'];
                                                        @endphp
                                                        <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">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 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 class="col-md-6">
                                            <div class="border p-3 p-md-4" id="PaymentCard">
                                                <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">
                                                        @include('site.bankSelection')

                                                        <div class="tab-content" id="pills-tabContent">
                                                            <div class="tab-pane fade show " id="Bank"
                                                                role="tabpanel" aria-labelledby="pills-home-tab">
                                                                @php
                                                                    $country = App\Models\Country::where(
                                                                        'id',
                                                                        '=',
                                                                        auth()->user()->country_id,
                                                                    )->first();
                                                                    $sender_country = $country->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 imagePreview"></div>
                                                            </div>
                                                            <div class="form-group">
                                                                <strong for="">Trx ID</strong>
                                                                <input type="text" name="trx_id" required
                                                                    id="" class="form-control">
                                                            </div>
                                                        </div>

                                                    </div>


                                                </div>
                                                @auth
                                                    <button type="submit" class="btn btn-fill-out btn_save">Place
                                                        Order</button>
                                                @endauth
                                                @guest
                                                    <a href="{{ route('customer_login') }}"
                                                        class="btn btn-fill-out btn_save">Login</a>
                                                @endguest
                                            </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>
                                </div>
                            </form>
                        </div>


                    </div>

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

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

                <!-- Modal body -->
                @php
                    $recipients = App\Models\Recipient::where('user_id', auth()->user()->id)
                        ->where('country_id', $rcountry->id)
                        ->get();
                @endphp
                <div class="modal-body">
                    <table class="table sm table-bordered">
                        <tr>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>+</th>
                        </tr>
                        @foreach ($recipients as $recipient)
                            <tr>
                                <td>{{ $recipient->receiver_name }}</td>
                                <td>{{ $recipient->phone }}</td>
                                <td>
                                    <a href="javascript::void(0)" data-name="{{ $recipient->receiver_name }}"
                                        data-phone="{{ $recipient->phone }}"
                                        class="btn btn-xs btn-fill-out add_recipient">
                                        <span class="fa fa-plus"></span>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-dark" data-bs-dismiss="modal">Close</button>
                </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>
    <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...
        });

        $("#receiver_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');
            }


        });

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

            if ($(this).prop('checked')) {


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


                // 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(2));
            }
        });


        $(".add_recipient").click(function() {
            let recipient_name = $(this).data("name");
            let recipient_phone = $(this).data("phone");
            $("#receiver_phone").val(recipient_phone)
            $("#receiver_name").val(recipient_name)
            $("#recepientnModal").modal('hide');
        })

        $("form").submit(function(e) {
            var phoneNumber = iti.getNumber();
            console.log("Phone", phoneNumber);
            $("#receiver_phone1").val(phoneNumber)
            let bank = $(".card-radio").is(':checked');

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

            e.preventDefault();
            var data = new FormData(this);
            var url = $(this).attr("action");
            $.ajax({
                type: "post",
                url: url,
                data: data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".btn_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) {

                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.success(response.message);
                $('form')[0].reset();
                setTimeout(() => {
                    window.location.href = "{{ route('order.topup.completed') }}"
                }, 2000);
            }).fail(function(response) {

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

@endsection