@extends('front.include.app')
@section('content')

    <div class="innerBan">
        <img src="{{ asset('images/innerbnr2.jpg') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>Payment</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="check-out-section chkot-pag">
        <div class="container">
            <div class="check-out-form">
                <div class="row">
                    <div class="col-md-6">
                        <div class="col-md-12">
                            <div class="shirt-heading">
                                {{-- <h4 class="checkout-heading">{{ auth()->user()->name ?? '' }}</h4> --}}
                                <ul>
{{--                                    <li><a href="#">Information</a></li>--}}
{{--                                    <li><span> > </span></li>--}}
{{--                                    <li><a href="#">Shipping</a></li>--}}
{{--                                    <li><span> > </span></li>--}}
                                    {{-- <li><a href="#">Select Payment</a></li> --}}
                                </ul>
                            </div>
                        </div>
 
                        <h2  class="checkout-heading">Cart Summary</h2>
                        @foreach ($cart_data as $data)
                        <div class="myDiv cartpage">
                            <ul>
                                <li>
                                    <figure><img src="https://mjstudio.shop/storage/100/Lady-Going-to-Africa.jpeg" class="img-fluid" alt="img"></figure>
                                    <div>
                                        <h4>{{ $data['item_name'] ? : '' }}</h4>
                                        <h5>$ {{ number_format($data['item_price'], 0) }}</h5>
                                    </div>
                                    <div>
                                        @php $total = $total + ($data["item_quantity"] * $data["item_price"]) @endphp
                                        <h6 class="text-white">Total Price</h6>
                                        <h6 class="cart_grand_total_price text-white">
                                            $ {{ number_format($data['item_quantity'] * $data['item_price'], 2) }}
                                        </h6>
                                    </div>
                                </li>
                                <li>
                                    <div class="quantitySec">
                                        <h6>Quantity</h6>
                                        <ul>
                                            <li>
                                                <div class="number quantity" data-stock="{{ $data['stock'] }}">
                                                    <input type="hidden" class="product_id" value="{{ $data['item_id'] }}">
                                                    <span class="minus1 changeQuantity1 decrement-btn1"><i class="fas fa-minus"></i></span>
                                                    <input type="text" class="qty_input" id="quantity"
                                                           value="{{ $data['item_quantity'] ?? '1' }}" readonly>
                                                    <span class="plus1 changeQuantity1 increment-btn1"><i class="fas fa-plus"></i></span>
                                                </div>

                                            <!-- <div class="number quantity" data-stock="{{ $data['stock'] }}">
                                                <input type="hidden" class="product_id" value="{{ $data['item_id'] }}">
                                                <span class="minus  decrement-btn">-</span>
                                                <input type="text" class="qty_input" value="{{ $data['item_quantity'] ?: 1 }}" readonly>
                                                <span class="plus  increment-btn">+</span>
                                            </div> -->


                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        @endforeach
                    
                </div>
                    <div class="col-md-6 cola-shirt checkout-page">
                        @if(isset($cart_data))
                            @php $total="0"
                            @endphp
                            @foreach ($cart_data as $data)
                                <div class="biling-card">
                                    <div>
                                        <figure>
                                            <img src="{{$data['item_image'] ? : ''}}" class="img-fluid" alt="img">
                                        </figure>
                                        <div class="content">
                                            <h5>{{ $data['item_name'] ? : '' }}</h5>
                                            <p>Commissions available. Will not be exactly the same. All original
                                                work..</p>

                                            <span>

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

                                </div>
                            @endforeach
                            <div class="newsForm">
                                <input type="text" class="form-control get_voucher_code"
                                       placeholder="Enter Voucher Code" name="voucher_code">
                                <small id="error_voucher" class="text-danger"></small>
                                <button class="apply-btn">Apply</button>
                            </div>
                            <div class="discount">


                            </div>
                            @php
                            $total = 0;
                            @endphp
                            @foreach ($cart_data as $data)
                                @php
                                    $total += $data['item_price'] * $data['item_quantity']; 
                                @endphp
                            @endforeach
                            <div class="subtotal">
                                <h4>Subtotal Shipping</h4>
                                <div>
                                    <h6>{{ $total ?? '' }}</h6> <!-- Display total -->
                                    <h6> {{ number_format($shippingRate, 2) }}</h6>
                                </div>
                            </div>
                            <div class="subtotal">
                                <h4>Discount</h4>
                                <div>
                                    <span class="discount_price">0.00</span>
                                </div>
                            </div>

                            
                            @if(isset($cart_data))
                                @php
                                    $total = 0;
                                @endphp
                                @foreach ($cart_data as $data)
                                    @php
                                        $total += $data['item_price'] * $data['item_quantity']; 
                                    @endphp
                                @endforeach
                                <ul class="total">
                                    <li>Total</li>
                                    <li>${{ number_format($totalWithShipping, 2) }}</li>
                                </ul>
                            @endif

                        @endif

                        

                        <form action="{{ route('user.front.payment', ['orderId' => $last_order_id]) }}" method="POST" id="payment-form" class="contactForm">
                            @csrf
                            <div class="contactForm">
                                <h3>Payment Methods</h3>
                                <p>Select Payment</p>

                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <label style="color: white;">
                                            <input type="radio" name="payment_method" value="paypal" required>
                                            PayPal
                                            <div id="paypal-button-container" style="display: none; max-width: 300px;">
                                                <!-- PayPal Button Script -->
                                                <script src="https://www.paypalobjects.com/api/button.js?"
                                                    data-merchant="braintree"
                                                    data-id="paypal-button"
                                                    data-button="checkout"
                                                    data-color="gold"
                                                    data-size="medium"
                                                    data-shape="pill"
                                                    data-button_type="submit"
                                                    data-button_disabled="false">
                                                </script>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="col-md-6">
                                        <label style="color: white;">
                                            <input type="radio" name="payment_method" value="stripe" required>
                                            Debit/Credit Card
                                        </label>
                                    </div>
                                    @error('payment_method')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                        
                                <!-- Stripe Payment Fields (Initially hidden) -->
                                <div id="stripe-fields" style="display: none;">
                                    <div class="row">
                                        <div class="col-6">
                                            <input type="text" placeholder="Cardholder Name" name="cardholder_name" class="form-control">
                                        </div>
                                        <div class="col-6">
                                            <input type="text" placeholder="Card Number" name="card_number" class="card-number form-control">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" placeholder="MM" name="exp_month" class="card-expiry-month form-control">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" placeholder="YYYY" name="exp_year" class="card-expiry-year form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" placeholder="CVC" name="cvv" class="card-cvc form-control">
                                        </div>
                                    </div>
                                </div>
                                <div id="card-errors" role="alert" style="color: red; margin-top: 10px;"></div>

                                <!-- Hidden Fields -->

                                <input type="hidden" name="amount" value="{{ $total ?? 100 }}">
                                <input type="hidden" name="currency" value="USD">
                        
                                {{-- @auth --}}
                                    <button class="themeBtn m-0 mb-5" type="submit" id="submit-payment">Payment Submit</button>
                                {{-- @else
                                    <a href="{{ route('user.login') }}" class="themeBtn mx-0 my-5">CONTINUE TO SHIPPING</a>
                                @endauth --}}
                            </div>
                        </form>
                    </div>
            </div>
        </div>
    </div>

    
@endsection

@section('scripts')
<script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <script>
        
   document.addEventListener('DOMContentLoaded', function () {
    const paymentMethodRadios = document.querySelectorAll('input[name="payment_method"]');
    const paypalButtonContainer = document.getElementById('paypal-button-container');
    const stripeFields = document.getElementById('stripe-fields');
    const submitButton = document.getElementById('submit-payment');

    paymentMethodRadios.forEach(radio => {
        radio.addEventListener('change', function () {
            if (this.value === 'paypal') {
                paypalButtonContainer.style.display = 'block';
                stripeFields.style.display = 'none';
                submitButton.style.display = 'none';

                document.getElementById('payment-form').submit();
            } else if (this.value === 'stripe') {
                paypalButtonContainer.style.display = 'none';
                stripeFields.style.display = 'block';
                submitButton.style.display = 'block'; 
            }
        });
    });
});


$(function() {
    var stripePublishableKey = "{{ env('STRIPE_KEY') }}";

    if (!stripePublishableKey) {
        console.error("Stripe publishable key is missing.");
        return;
    }

    Stripe.setPublishableKey(stripePublishableKey);

    $('#payment-form').on('submit', function(e) {
        e.preventDefault();

        const $button = $('#proceed-now-button');
        const $form = $(this);

        // Disable the button to prevent multiple clicks
        $button.prop('disabled', true);

        let cardNumber = $('.card-number').val();
        let cardCVC = $('.card-cvc').val();
        let cardExpMonth = $('.card-expiry-month').val();
        let cardExpYear = $('.card-expiry-year').val();

        var $errorMessage = $form.find('div.error');
        $errorMessage.addClass('hide');
        $('.has-error').removeClass('has-error');

        if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' || cardExpYear === '') {
            $button.prop('disabled', false); 
            return;
        }

        Stripe.card.createToken({
            number: cardNumber,
            cvc: cardCVC,
            exp_month: cardExpMonth,
            exp_year: cardExpYear,
        }, function(status, response) {
            console.log('Tokenization response:', response);

            if (response.error) {
                const errorMessage = response.error.message;
                // Special handling for live_mode_test_card error
                if (response.error.decline_code === 'live_mode_test_card') {
                    alert('Payment failed: Test cards cannot be used.');
                } else {
                    alert('Payment failed: ' + errorMessage);
                }

            } else {
                console.log(response);

                // Add the token to the form and submit
                $form.append("<input type='hidden' name='payment_method_id' value='" + response.id + "'/>");
                $form.get(0).submit();
            }
        });
    });
});
</script>
@endsection