@extends('layouts.frontlayout')
@section('content')

<section class="heading_title_section">
    <div class="container">
        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="heading_area">
                <div class="title_area">
                    <h3>Checkout</h3>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="cart_product_section shipping_section billing_sec">
	<div class="container">
		<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
			<div class="inner_product_area">
				<div class="product_left_area">
					<div class="product_list_area">
						<div class="inner_list_area">
							<div class="content_list">
								<div class="inner_area">
									<div class="left_area">
										<div class="img_area">
											<img src="{{ url('frontend/images/cart_2.png') }}" title="Cart" alt="Cart" fetchpriority="low" />
										</div>
									</div>
									<div class="right_area">
										<h4>
											Billing Address
										</h4>
									</div>
								</div>
							</div>

							<div class="address_area">
								<div class="home_delivery_location">
									@if(isset($addresses) && !empty($addresses) && count($addresses) >0)
										@include('frontend.orders.deliveryAddress')
									@else
										<div class="button_area">
											<a href="javascript:;" aria-label="Add Address" class="btn-primary" data-bs-toggle="modal" data-bs-target=".add_address_form">Add Address</a>
										</div>
									@endif
								</div>
							</div>
							<div class="form-check form-switch">
								<label class="form-check-label" for="shipping_address">Shipping Address</label>
								<input class="form-check-input" name="shipping_address" type="checkbox" id="shipping_address" value="1">
							</div>

							<div class="shipping_form d-none">
								<form class="insert_modal_form shipping_form_submit">
								    <div class="row">
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="text" class="form-control" name="first_name"  required />
									                <label>First Name <span>*</span></label>
									            </div>
									            <label id="first_name-error" class="error" for="first_name">@error('first_name') {{ $message }} @enderror</label>
								            </div>  
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="text" class="form-control" name="last_name" />
									                <label>Last Name</label>
									            </div>
								            </div>
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="number" class="form-control" name="phonenumber" minlength="10" maxlength="10" required />
									                <label>Phone <span>*</span></label>
									            </div>
									            <label id="phonenumber-error" class="error" for="phonenumber">@error('phonenumber') {{ $message }} @enderror</label>
								            </div>
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="number" class="form-control" name="alternate_phonenumber" minlength="10" maxlength="10" />
									                <label>Alternative Phone</label>
									            </div>
								            </div>
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                {{-- <input type="number" class="form-control" name="country_id" /> --}}
									                <select name="country_id" class="form-control country_id select2" id="country_id" required>
									                    <option value="">Select Country</option>
									                    @foreach($countries as $k => $v)
									                    	<option data-type="{{ isset($v['address_type']) && $v['address_type'] ? $v['address_type'] : ''  }}" value="{{ $v['id'] }}">{{ $v['short_name'] }}</option>
									                    @endforeach
									                </select>
													<label>Country <span>*</span></label>
									            </div>
									            <label id="country_id-error" class="error" for="country_id">@error('country_id') {{ $message }} @enderror</label>
								            </div>
								        </div>     
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                {{-- <input type="number" class="form-control" name="state_id" /> --}}
									                <select name="state_id" class="form-control state_id select2" id="state_id" required>
									                    <option value="">Select State</option>
									                </select>
									                <label>State <span>*</span></label>
									            </div>
								            </div>
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                {{-- <input type="number" class="form-control" name="city_id" /> --}}
									                <select name="city_id" name="city_id" class="form-control city_id select2" id="city_id" required>
									                    <option value="">Select City</option>
									                </select>
									                <label>City/District/town <span>*</span></label>
									            </div>
								            </div>  
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="text" class="form-control" name="pincode" required />
									                <label>Pin code <span>*</span></label>
									            </div>
									            <label id="pincode-error" class="error" for="pincode">@error('pincode') {{ $message }} @enderror</label>
								            </div>  
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="text" class="form-control" name="locality" />
									                <label>Locality</label>
									            </div>
								            </div>
								        </div>
								        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="text" class="form-control" name="landmark" />
									                <label>Landmark</label>
									            </div>
								            </div>
								        </div>
								        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
								            <div class="form-web">
                								<div class="form-floating">
									                <input type="text" class="form-control" name="address" required />
									                <label>Address <span>*</span></label>
									            </div>
									            <label id="address-error" class="error" for="address">@error('address') {{ $message }} @enderror</label>
								            </div>  
								        </div>
								    </div>
								</form>
							</div>

							<div class="content_list">
								<div class="inner_area">
									<div class="left_area">
										<div class="img_area">
											<img src="{{ url('frontend/images/cart_3.png') }}" title="Cart" alt="Cart" fetchpriority="low" />
										</div>
									</div>
									<div class="right_area">
										<h4>
											Payment
										</h4>
									</div>
								</div>
							</div>
							<div class="address_area cash_space">
								<div class="inner_box select_payment_box cash_on_delivery {{ isset($order_data['order_type']) && $order_data['order_type'] == 'international' ? 'd-none' : '' }} {{isset($payment_type) && $payment_type == "cash" ? 'active' : ''}} ">
									<div class="left">
										<div class="icon">
											<img src="{{ url('frontend/images/cart_img2.png') }}" title="Cart" alt="Cart" fetchpriority="low" />
										</div>
									</div>
									<div class="right">
										<div class="content">
											<h5>
												Cash on Delivery
											</h5>
											
										</div>
										<div class="button_area">
											<a href="javascript:;" aria-label="Select" data-payment_type="cash" class="btn-primary payment_type"> {{isset($payment_type) && $payment_type == "cash" ? 'Selected' : 'Select'}}</a>
										</div>
									</div>
								</div>
								<div class="inner_box select_payment_box {{isset($payment_type) && $payment_type == "online" ? 'active' : ''}}">
									<div class="left">
										<div class="icon">
											<img src="{{ url('frontend/images/cart_img1.png') }}" title="Cart" alt="Cart" fetchpriority="low" />
										</div>
									</div>
									<div class="right">
										<div class="content">
											<h5>
												Razorpay
											</h5>											
										</div>
										<div class="button_area">
											<a href="javascript:;" aria-label="Select online" data-payment_type="online" class="btn-primary payment_type">{{isset($payment_type) && $payment_type == "online" ? 'Selected' : 'Select'}}</a>
										</div>
									</div>
								</div>	
							</div>
							<div class="form-group">
								<label>Enter Notes (If any)</label>
								<textarea rows="2" class="form-control" name="notes"></textarea>
							</div>
							<div class="refund_policy">Return/Exchange only if the product is damaged. please check 
								<a href="{{route('cms.cancellationReturns')}}">Return & Refund Policy</a>
							</div>
						</div>
						<div class="footer_btn">
							<div class="left_btn">
								<a href="{{ route('products.index') }}" aria-label="Continue Shopping" class="continue_btn">Continue Shopping</a>
							</div>
							<div class="right_btn">
								<ul>
									<li>
										<a href="{{route('order.cart')}}" aria-label="Cancel Order" class="btn-primary cancel_order" data-url="">Back</a>
									</li>
									<li>
										<a href="javascript:;" aria-label="Cancel" class="btn-primary cancel_order" data-url="{{ route('order.cancelOrder') }}">Cancel</a>
									</li>
									<li>
										<a href="javascript:;" aria-label="Check Out" class="btn-primary active checkout_proceed">Check Out</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="product_right_area">
					<div class="append_payment_detail">
						@include('frontend.orders.prices')	
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

@include('frontend.orders.checkout.coupon')
@include('frontend.orders.checkout.addAddress')
@endsection