@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

<style>
        .holder {
            margin-left: 0px;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>

    <section style="background: #f9f9f9;">
    	<div class="nk_checkout_div_1">
            <h1>Checkout&nbsp;</h1>
            <!--<p class="nk_checkout_p_1">-->
            <!--    Already have an account? <a href="#">Login</a> -->
            <!--</p>-->
            <div class="nk_checkout_div_2">
            <div class="row">
    <!-- Left side: Account & Billing Details -->
    <div class="col-lg-6 col-md-6 col-sm-12 col-12" style="padding-left: 0px;">
    @if(Session::has('toast'))
                                <div class="alert alert-success">
                                    {{ Session::get('toast')['message'] }}
                                </div>
                            @endif
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12" style="padding: 0px;">
                <div class="nk_checkout_div_5">
                    <p class="nk_checkout_p_2">Account & Billing Details</p>
                </div>
                <div class="nk_checkout_div_3">
                    <!--<form action="{{ route('save_order') }}" method="post" class="nk_checkout_form_1">-->
                    <form action="{{ route('payment.process') }}" method="post" class="nk_checkout_form_1">
                    @csrf  
                    <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">Full name: <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="text" name="name" class="nk_checkout_input_1">
                            @if ($errors->has('name'))
                    <span class="alert alert-danger">{{ $errors->first('name') }}</span>
                @endif
                        </div>
                        
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">E-mail: <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="email" name="email" class="nk_checkout_input_1">
                            @if ($errors->has('email'))
                    <span class="alert alert-danger">{{ $errors->first('email') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">Telephone: <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="number" name="phone" class="nk_checkout_input_1">
                            @if ($errors->has('phone'))
                    <span class="alert alert-danger">{{ $errors->first('phone') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">Company: </label>
                            <input type="text" name="company" class="nk_checkout_input_1">
                            @if ($errors->has('company'))
                    <span class="alert alert-danger">{{ $errors->first('company') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">Address : <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="text" name="address" class="nk_checkout_input_1">
                            @if ($errors->has('address'))
                    <span class="alert alert-danger">{{ $errors->first('address') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">Country: <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="text" name="country" class="nk_checkout_input_1">
                            @if ($errors->has('country'))
                    <span class="alert alert-danger">{{ $errors->first('country') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">State: <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="text" name="state" class="nk_checkout_input_1">
                            @if ($errors->has('state'))
                    <span class="alert alert-danger">{{ $errors->first('state') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">City: <span style="color: red; font-size: 16px; margin-left: 5px;">*</span></label>
                            <input type="text" name="city" class="nk_checkout_input_1">
                            @if ($errors->has('city'))
                    <span class="alert alert-danger">{{ $errors->first('city') }}</span>
                @endif
                        </div>
                        <div class="nk_checkout_div_4">
                            <label class="nk_checkout_label_1">Post Code</label>
                            <input type="number" name="zip" class="nk_checkout_input_1">
                            @if ($errors->has('zip'))
                    <span class="alert alert-danger">{{ $errors->first('zip') }}</span>
                @endif
                        </div>

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

    <!-- Right side: Cart Summary -->
    <div class="col-lg-6 col-md-6 col-sm-12 col-12" style="padding: 0px;">
        <div class="nk_checkout_div_5">
            <p class="nk_checkout_p_2">Order Summary</p>
        </div>
        <div class="nk_checkout_div_8 check-scroll-div">
            <!-- Check if the cart session has items -->
            @php $total = 0 @endphp
            @if(session('cart') && count(session('cart')) > 0)
                <div class="nk_checkout_div_9 full-width-div">
                    <div class="row">
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                            <div class="nk_checkout_div_10">
                                <p class="nk_checkout_p_5">Image</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 col-4" style="padding: 0px;">
                            <div class="nk_checkout_div_10">
                                <p class="nk_checkout_p_5">Product</p>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                            <div class="nk_checkout_div_10">
                                <p class="nk_checkout_p_5">Quantity</p>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                            <div class="nk_checkout_div_10">
                                <p class="nk_checkout_p_5">Price</p>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                            <div class="nk_checkout_div_10">
                                <p class="nk_checkout_p_5">Total</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Loop through each cart item -->
                @foreach(session('cart') as $id => $details)
                    @php $total += $details['price'] * $details['quantity'] @endphp
                    <div class="nk_checkout_div_11">
                        <div class="row">
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                                <div class="nk_checkout_div_12">
                                    <img src="{{ $details['image'] }}" class="nk_checkout_img_1">
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 col-4" style="padding: 0px;">
                                <div class="nk_checkout_div_12">
                                    <p class="nk_checkout_p_6">{{ $details['name'] }}</p>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                                <div class="nk_checkout_div_12" style="padding-top: 2.5px;">
                                    <div class="holder">
                                        <P>{{ $details['quantity'] }}</P>
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                                <div class="nk_checkout_div_12">
                                    <p class="nk_checkout_p_7">₹ {{ $details['price'] }}</p>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                                <div class="nk_checkout_div_12">
                                    <p class="nk_checkout_p_7">₹ {{ $details['price'] * $details['quantity'] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <!-- Shipping and total cost -->
                <!-- <div class="nk_checkout_div_11">
                    <div class="row">
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-10" style="padding: 0px;">
                            <div class="nk_checkout_div_12">
                                <p class="nk_checkout_p_8">Free Shipping:</p>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                            <div class="nk_checkout_div_12">
                                <p class="nk_checkout_p_8">₹ 0.00</p>
                            </div>
                        </div>
                    </div>
                </div> -->

                <!-- Grand total -->
                <div class="nk_checkout_div_11">
                    <div class="row">
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-10" style="padding: 0px;">
                            <div class="nk_checkout_div_12">
                                <p class="nk_checkout_p_9">Total</p>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px;">
                            <div class="nk_checkout_div_12">
                                <p class="nk_checkout_p_9">₹ {{ $total }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <!-- Display message if the cart is empty -->
                <p>Your cart is empty.</p>
            @endif
        </div>
    </div>

<input type="hidden" name="total_bill" value="{{$total}}" class="nk_checkout_input_1">
<input type="submit" name="checkout" class="nk_checkout_button_1 btn-submit my-3" value="Proceed To Checkout">    

</form>    
</div>


            </div>
        </div>  
    </section>

<script>
	var closebtns = document.getElementsByClassName("close");
	var i;

	for (i = 0; i < closebtns.length; i++) {
	  closebtns[i].addEventListener("click", function() {
	    this.parentElement.style.display = 'none';
	  });
	}
</script>

<script>
    $('.quantity_button.plus').on('click', function () {
        var oldVal = $('input.quantity').val();
        var newVal = (parseInt($('input.quantity').val(), 10) + 1);
        $('input.quantity').val(newVal);
    });
                  
    $('.quantity_button.minus').on('click', function () {
        var oldVal = $('input.quantity').val();
        if (oldVal > 1) {
            var newVal = (parseInt($('input.quantity').val(), 10) - 1);
        }
        else {
            newVal = 1;
        }
        $('input.quantity').val(newVal);
    });
</script> 

@endsection