@extends('layouts.front-layout')

@section('content')
    <!-- Begin: Main Slider -->
<div class="innerBan">
    <img src="{{asset('front-assets/images/innerbnr1.png')}}" class="w-100" alt="">
    <div class="overlay">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <h2>Check Out</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Main Slider -->

<section class="checkout-section padd-y">
    <div class="container">
        <div class="row">
            <form class="checkout-form checkout-page d-flex" action="{{ route('checkout.order') }}" method="post" id="payment-form">
             @csrf
            <div class="col-md-7">
                    <div class="checkout-form-box">
                        <h3>Personal Information</h3>
                        <div class="row">
                            <div class="col-12">
                                <input type="text" placeholder="Your Name" name="first_name"value="{{ Auth::check() ? Auth::user()->name : '' }}">
                                <small class="text-danger">
                                    @error('first_name')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                            <div class="col-md-6">
                                <input type="email" placeholder="Email" name="email"value="{{ Auth::check() ? Auth::user()->email : '' }}">
                                <small class="text-danger">
                                    @error('email')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                            <div class="col-md-6">
                                <input type="tel" placeholder="Phone Number" name="phone_number"value="{{ Auth::check() ? Auth::user()->phone_number : '' }}">
                                <small class="text-danger">
                                    @error('phone_number')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="checkout-form-box">
                        <h3>Shipping Address</h3>
                        <div class="row">
                            <div class="col-md-8">
                                <input type="text" placeholder="Addres" name="address"value="{{ Auth::check() ? Auth::user()->address : '' }}">
                                <small class="text-danger">
                                    @error('address')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                            <div class="col-md-4">
                                <input type="tel" placeholder="Postal Code" name="postal_code">
                                <small class="text-danger">
                                    @error('postal_code')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="City" name="city">
                                <small class="text-danger">
                                    @error('city')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="State" name="state">
                                <small class="text-danger">
                                    @error('state')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                            <div class="col-md-6">
                                <input type="text" placeholder="Country" name="country">
                                <small class="text-danger">
                                    @error('country')
                                    {{ $message }}
                                    @enderror
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="checkout-form-box ">
                        <h3>Voucher</h3>

                        <div class=" d-flex">
                            <div class="col-9">
                                <input type="text" class="get_voucher_code"
                                       placeholder="Enter Voucher Code"name="voucher_code">
                                <small id="error_voucher" class="text-danger"></small>
                            </div>
                            <div class="col-4 mt-4">
                                <button class="themeBtn apply-btn">Apply</button>

                            </div>
                        </div>

                    </div>
                    <div class="checkout-form-box">
                        <h3>Payment Methods</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-radio">
                                    <label>
                                        <input type="radio" name="payment_type" value="cash-on-delivery" checked>
                                        <span>Cash On Delivery</span>
                                    </label>
                                    <label>
                                        <input type="radio" name="payment_type" value="credit-or-debit">
                                        <span>Credit or Debit</span>
                                    </label>
                                </div>
                            </div>
                            <div class="payment_form" style="display: none;">
                                <div class="row">
                                    <div class="col-12">
                                        <input type="text" placeholder="Cardholder Name" name="card_name" class="cardholder_name"
                                               value="{{ old('card_name') }}">
                                        <small class="text-danger">
                                            @error('card_name')
                                            {{ $message }}
                                            @enderror
                                        </small>

                                    </div>
                                    <div class="col-12">
                                        <input type="number" name="card_number" class="card-number" placeholder="Enter card number"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                               value="{{ old('card_number') }}" >
                                        <small class="text-danger">
                                            @error('card_number')
                                            {{ $message }}
                                            @enderror
                                        </small>

                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" placeholder="EXP Month" class="card-expiry-month"
                                               name="exp_month"oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                               value="{{ old('exp_month') }}">
                                        <small class="text-danger">
                                            @error('exp_month')
                                            {{ $message }}
                                            @enderror
                                        </small>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" placeholder="EXP Year" name="exp_year" class="card-expiry-year"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                               value="{{ old('exp_year') }}">
                                        <small class="text-danger">
                                            @error('exp_year')
                                            {{ $message }}
                                            @enderror
                                        </small>

                                    </div>
                                    <div class="col-md-6">
                                        <input type="number" placeholder="CVC" name="cvv" class="card-cvc"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                               value="{{ old('cvv') }}">
                                        <small class="text-danger">
                                            @error('cvv')
                                            {{ $message }}
                                            @enderror
                                        </small>
                                    </div>
                                </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 $id => $data)
                    <div class="item-box-card">
                        <div class="product-add">
                            <figure>
                                <img src="{{$data['item_image'] ? : ''}}" alt="image" class="img-fluid">
                                <span>1</span>
                            </figure>
                            <div class="product-add-content">
                                <h5>{{ $data['item_name'] ? : '' }}</h5>
                                @php
                                    if($data['item_quantity']){
                                       $total = $total + ($data["item_quantity"] * $data["item_price"]);

                                        }else{
                                          $total = $total + ($data['item_price']);
                                        }

                                @endphp
                                <a href="javascript:void(0);" id="delete-btn"
                                   data-id=" {{ $data['item_id'] ? : '' }} ">
                                    <span><i class="fas fa-times"></i></span> Remove
                                </a>
                            </div>
                        </div>
                        <h4>  @if($data['item_quantity'])
                                $ {{ $data['item_quantity'] * $data['item_price']}}
                            @else
                                $ {{$data['item_price']}}
                            @endif
                        </h4>
                    </div>
                        @endforeach


                    <div class="item-subtotal">
                        <ul>
                            <li>Subtotal</li>
                            <li class="update_grand_total_price">$
                                @if(isset($cart_data))
                                    {{$total}}
                                    @endif
                            </li>
                        </ul>
                        <ul>
                            <li>Discount</li>
                            <li class="discount_price">$0.00</li>
                        </ul>
                        <ul>
                            <li>Shipping</li>
                            <li>$2.00</li>
                        </ul>
                    </div>
                    <div class="item-total">
                        <ul>
                            <li>Total</li>
                            <li class="update_grand_total_price">$
                                @if(isset($cart_data))
                                    {{$total}}
                                @endif
                            </li>
                            @if(isset($cart_data))
                            <input type="hidden" name="get_total_price"
                                   value="{{number_format($total) ? : ''}}" class="get_total_price">
                            @endif
                        </ul>
                    </div>
                    <div class="checkout-item-btn">
                    <button type="submit" class="themeBtn">Checkout</button>

                    </div>
                    @else
                        <h2>Please add a product to the cart.</h2>
                    @endif
                </div>
            </div>
            </form>
        </div>
    </div>
</section>

@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> 
    <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 paymentTypeRadios = document.querySelectorAll('input[name="payment_type"]');
            const paymentForm = document.querySelector('.payment_form');

            paymentTypeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.value === 'credit-or-debit') {
                        paymentForm.style.display = 'block';
                    } else {
                        paymentForm.style.display = 'none';
                    }
                });
            });

            // Set initial visibility based on the default checked option
            if (document.querySelector('input[name="payment_type"]:checked').value === 'credit-or-debit') {
                paymentForm.style.display = 'block';
            }
        });
   
        $(document).ready(function() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $(document).on("click", '#delete-btn', function(e) {
                var id = $(this).data('id');

                console.log(id);
                e.preventDefault();
                $.ajax({
                    url: '{{ route('cart.delete.checkout') }}',
                    type: "post",
                    dataType: "json",
                    data: {
                        id: id
                    },
                    success: function(response) {
                        toastr.success('Product removed from cart successfully!');
                        window.location.reload();
                    }
                });
            });



        var stripePublishableKey = "{{ config('services.stripe.key') }}";

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

        Stripe.setPublishableKey(stripePublishableKey);
         
        var currentURL = window.location.href;
        var baseUrl = currentURL.split('/').slice(0, 5).join('/') + '/';


        


        $('input[name="payment_type"]').on('change', function() {
            if ($(this).val() === 'credit-or-debit') {
                $('.payment_form').show();
            } else {
                $('.payment_form').hide();
            }
        });

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

        function checkAuthentication() {
            var currentURL = window.location.href;
            var baseUrl = currentURL.split('/').slice(0, 5).join('/') + '/';
            
            $.ajax({
                url: baseUrl + 'check-auth',
                method: 'GET',
                xhrFields: { withCredentials: true },
                success: function(response) {
                    if (!response.authenticated) {
                        window.location.href = baseUrl + 'user/login';
                    } else {
                        handlePayment();
                    }
                },
                error: function() {
                    // If there's an error, redirect to login page
                    window.location.href = baseUrl + 'user/login';
                }
            });
        }

        function handlePayment() {
            var cardNumber = $('input[name="card_number"]').val();
            var cardCVC = $('input[name="cvv"]').val();
            var cardExpMonth = $('input[name="exp_month"]').val();
            var cardExpYear = $('input[name="exp_year"]').val();

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

            // Validate the payment form fields
            if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' || cardExpYear === '') {
                toastr.error('Please fill all required fields');
                return;
            }

            // Use Stripe API to create token for the payment method
            Stripe.card.createToken({
                number: cardNumber,
                cvc: cardCVC,
                exp_month: cardExpMonth,
                exp_year: cardExpYear,
            }, function(status, response) {
                console.log('Tokenization response:', response);

                if (response.error) {
                    toastr.error(response.error.message);
                } else {
                    console.log(response);

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

    });


    </script>
@endsection