@extends('front.layout.app')
@section('title', 'Cart Page')
@section('content')
<section class="inner-banner">
    <img src="{{ asset('front/images/mainBanner.webp') }}" alt="image" class="img-fluid w-100 h-100">
    <div class="container">
        <div class="inner-banner__content">
            <h1>checkout</h1>
        </div>
    </div>
</section>

<section class="check-out-section chkot-pag">
    <div class="container">
        <div class="check-out-form">
            <h2 class="primary-heading">Billing Address</h2>
            <p>
                Fill the form below to complete your purchase
            </p>
            <p class="checkout-subheading">
                <a href="">Already Registered?</a> Click here to <a href="" class="text-uppercase">Login
                    now</a>
            </p>
            <form action="{{ route('checkout.order') }}" method="post">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <label for="">first NamE</label>
                        <input type="text" class="form-control" name="first_name"
                            value="{{ old('first_name') ?? '' }}" required>
                        @error('first_name')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="">Last NamE</label>
                        <input type="text" class="form-control" name="last_name" value="{{ old('last_name') ?? '' }}"
                            required>
                        @error('last_name')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="">email address</label>
                        <input type="email" class="form-control" name="email" value="{{ old('email') ?? '' }}"
                            required>
                        @error('email')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="">Phone</label>
                        <input type="text" class="form-control" name="phone_number"
                            value="{{ old('phone_number') ?? '' }}" pattern="\d{10}" maxlength="10" required
                            title="Please enter a valid 10-digit phone number.">
                        @error('phone_number')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <label for="">address</label>
                        <input name="address" class="form-control"
                            value="{{ old('address') ?? '' }}">
                        @error('address')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <label for="">Country</label>
                        <select name="country" class="form-control">
                            <option value="US">United States</option>
                        </select>
                        @error('country')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-12">
                        <label for="">city</label>

                        <input type="text" class="form-control" name="city" required
                            value="{{ old('city') ?? '' }}">
                        @error('city')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="">ZIP/POSTAL CODE</label>
                        <input type="text" class="form-control" name="postal_code"
                            value="{{ old('postal_code') ?? '' }}" required>
                        @error('postal_code')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="">sTATE/pROVINCE</label>
                        <select name="state" id="country-select" class="form-control">
                            @forelse($get_states as $state)
                            <option value="{{ $state->code }}"
                                {{ isset($get_info['country']) && $get_info['country'] == $state->id ? 'selected' : '' }}>
                                {{ $state->name }}
                            </option>
                            @empty
                            <option>States Not Found</option>
                            @endforelse
                        </select>
                        @error('state')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-12 checkbox">
                        <input type="checkbox" id="box-1">
                        <label for="box-1">Create an account for later use</label>
                    </div>
                    <div class="col-md-12 checkbox">
                        <input type="checkbox" id="box-2">
                        <label for="box-2">Ship to the same address mentioned above </label>
                    </div>
                </div>

                <hr>

                <div class="order-summery">

                    <h2 class="primary-heading text-center">Order Summary</h2>
                    <div class="row bb-1">
                        <div class="col-md-6">
                            <span>Subtotal (3 items)</span>
                        </div>
                        <div class="col-md-6 text-right">
                            USD {{ number_format($totalAmount, 2.0) }}
                        </div>
                    </div>
                    <div class="row bb-1">
                        <div class="col-md-6">
                            <span>Shipping fee</span>
                        </div>
                        <div class="col-md-6 text-right">
                            USD 12.00
                        </div>
                    </div>

                    <div class="row bb-1">
                        <div class="col-md-6">
                            <span>Total</span>
                        </div>
                        <div class="col-md-6 text-right">
                            USD {{ 12 + number_format($totalAmount, 2.0) }}
                        </div>
                    </div>
                    <div class="col-md-12 mt-4 p-0">
                        <button class="btn d-btn w-100" type="submit">proceed to
                            checkout</button>

                    </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