@extends('front.layout.app')
@section('title', 'Cart Page')
@section('content')
    <section class="main-slider innerBanner p-0" id="mainSlider"
        style="background-image: url('{{ asset('front/images/mainBanner.webp') }}');">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-lg-6">
                    <div class="slideOne">
                        <h1 class="mainHeading text-white">{{ 'Checkout' }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="checkout-section padd-y my-5">
        <div class="container">
            <div class="row">
                <form action="{{ route('checkout.order') }}" method="POST" id="payment-form" data-cc-on-file="false"
                    data-stripe-publishable-key="{{ env('STRIPE_KEY') }}">
                    <div class="col-md-7">
                        @csrf
                        {{-- <form class="checkout-form"> --}}

                        <div class="checkout-form-box">
                            <h3>Personal Information</h3>
                            <div class="row">
                                <div class="col-12">
                                    <input type="text" placeholder="Your Name" name="name"
                                        value="{{ auth()->user()->first_name ?? '' }}">
                                    @error('name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="email" placeholder="Email" name="email"
                                        value="{{ auth()->user()->email ?? '' }}">
                                    @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="tel" placeholder="Phone Number" name="phone_number"
                                        value="{{ auth()->user()->phone_number ?? '' }}">
                                    @error('phone_number')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="checkout-form-box">
                            <h3>Shipping Address</h3>
                            <div class="row">
                                <div class="col-md-8">
                                    <input type="text" placeholder="Address" name="address"
                                        value="{{ auth()->user()->address ?? '' }}">
                                    @error('address')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <input type="tel" placeholder="Postal Code" name="postal_code">
                                    @error('postal_code')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="text" placeholder="City" name="city">
                                    @error('city')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <input type="text" placeholder="Country" name="country">
                                    @error('country')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="checkout-form-box">
                            <h3>Payment Methods</h3>
                            <div class="row">
                                <div class="col-12">
                                    <input type="text" placeholder="Cardholder Name" name="cardholder_name" required>
                                </div>
                                <div class="col-12">
                                    <input type="text" placeholder="Card Number" name="card_number" class="card-number"
                                        required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" placeholder="MM" name="exp_month" class="card-expiry-month"
                                        required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" placeholder="YYYY" name="exp_year" class="card-expiry-year"
                                        required>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" placeholder="CVC" name="cvv" class="card-cvc" required>
                                </div>
                                <div style="display: none" class='col-md-12 error form-group hide'>
                                    <div class='alert-danger alert'>
                                        Please correct the errors and try again.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="checkout-item">
                            <h3>Item</h3>
                            @if (isset($cart_data))
                                @php $total = '0'; @endphp
                                @foreach ($cart_data as $data)
                                    @php $total = $total + ($data->qty * $data->price) @endphp
                                    <div class="item-box-card">
                                        <div class="product-add">
                                            <figure>
                                                <img src="{{ $data->options->has('image') ? $data->options->image : '' }}"
                                                    alt="image" class="img-fluid">
                                                <span>{{ $data->qty }}</span>
                                            </figure>
                                            <div class="product-add-content">
                                                <input type="hidden" class="product_id" value="{{ $data->rowId }}">
                                                <h5>{{ $data->name }}</h5>
                                                <a href="" class="delete_cart_data"><span><i
                                                            class="fas fa-times"></i></span> Remove</a>
                                            </div>
                                        </div>
                                        <h4>${{ $data->price }}</h4>
                                    </div>
                                @endforeach
                                <div class="item-subtotal">
                                    <ul>
                                        <li>Subtotal</li>
                                        <li>${{ number_format($total, 2) }}</li>
                                    </ul>
                                    <ul>
                                        <li>Shipping</li>
                                        <li>$2.00</li>
                                    </ul>
                                </div>
                                <div class="item-total">
                                    <ul>
                                        <li>Total</li>
                                        <li>${{ number_format($total + 2, 2) }} </li>
                                    </ul>
                                </div>
                                <div class="checkout-item-btn">
                                    <button type="submit" class="themeBtn">Checkout</button>
                                </div>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

@endsection

@section('script')

    <script type="text/javascript">
        $(function() {

            /*------------------------------------------
            --------------------------------------------
            Stripe Payment Code
            --------------------------------------------
            --------------------------------------------*/
            var $form = $(this);

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


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




                var $form = $(this);
                var $errorMessage = $form.find('div.error');
                $errorMessage.addClass('hide');

                $('.has-error').removeClass('has-error');

                if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' || cardExpYear === '') {
                    return;
                }
                var $form = $(this),
                    $errorMessage = $form.find('div.error'),
                    valid = true;
                $errorMessage.addClass('hide');

                $('.has-error').removeClass('has-error');

                if (!$form.data('cc-on-file')) {
                    e.preventDefault();

                    let stripePublishableKey = $form.data('stripe-publishable-key');
                    console.log('stripePublishableKey', stripePublishableKey);

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


                        if (response.error) {
                            console.log('Error', response);

                            $('.error')
                                .removeClass('hide')
                                .removeAttr('style')
                                .find('.alert')
                                .text(response.error.message);
                        } else {
                            console.log(response);


                            $form.append("<input type='hidden' name='payment_method_id' value='" +
                                response.id + "'/>");

                            $form.get(0).submit();
                        }
                    });
                }


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