@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('banner_image', "banners/".$banner_data->banner_image)
@section('canonical_tag', $meta_data->canonical_tag)
@section('content')
<div class="container-fluid checkout-section">
            <div class="row custom_row ">
                <div class="col-12 col-md-12">
                    <h2 class="checkout-title mb-4  ml-2">Checkout</h2>
                </div>

                <div class="col-12 col-lg-7">
                    <div class="checkout-logintext mb-5">
                        <h4><a href="">Already have an account? Login for a faster checkout.</a></h4>
                    </div>

                    <div id="accordion" class="myaccordion checkout-accordion">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button
                                        class="d-flex align-items-center justify-content-between btn btn-link collapsed"
                                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne">
                                        <div class="col-12 address__title">
                                            <h2 class="bold-heading">Billing details</h2>
                                        </div>
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <div class="row checkout__address">
                                        <div
                                            class="col-12 col-sm-12 col-md-12 col-lg-12 checkout__address__billing address">
                                            <form id="billing_address">
                                                <div class="row m-0">
                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_first_name">First name*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_first_name"
                                                                    name="billing_address_first_name" value>
                                                                <div class="error">
                                                                    <span id="billing_address_first_name_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_last_name">Last name*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_last_name"
                                                                    name="billing_address_last_name" value>
                                                                <div class="error">
                                                                    <span id="billing_address_last_name_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_line_one">Address*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_line_one"
                                                                    name="billing_address_line_one" value>
                                                                <div class="error">
                                                                    <span id="billing_address_line_one_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_email">Email*</label>
                                                            </div>
                                                            <div class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control" id="billing_address_first_name" name="billing_address_first_name" value>
                                                               
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_city">City* </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_city"
                                                                    name="billing_address_city" value>
                                                                <div class="error">
                                                                    <span id="billing_address_city_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_state">State* </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_state"
                                                                    name="billing_address_state" value>
                                                                <div class="error">
                                                                    <span id="billing_address_state_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_pin_code">ZIP code* </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_pin_code"
                                                                    name="billing_address_pin_code" value>
                                                                <div class="error">
                                                                    <span id="billing_address_pin_code_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_mobile_number">Phone number*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" inputmode="numeric" pattern="[0-9]*"
                                                                    class="form-control"
                                                                    id="billing_address_mobile_number"
                                                                    name="billing_address_mobile_number" value>
                                                                <div class="error">
                                                                    <span id="billing_address_mobile_number_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-12" style="clear:both">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="billing_address_gst_number">GST</label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="billing_address_gst_number"
                                                                    name="billing_address_gst_number" value>
                                                                <div class="error">
                                                                    <span id="billing_address_gst_number_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address">Shipping
                                                                    Address</label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <select class="form-control" id="shipping_address" name="shipping_address">
                                                                    <option selected value="same">Same As Billing Address</option>
                                                                    <option value="alternate">Alternate Address</option>
                                                                </select>
                                                                <div class="error">
                                                                    <span id="billing_address_gst_number_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>


                                                <!-- Shiping address -->
                                                <div class="row m-0 mt-5 shhping__address" id="shipping-address">
                                                   <div class="col-12 address__title mb-5">
                                                      <h2 class="bold-heading">Add Shipping Address</h2>
                                                   </div>
                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_first_name">First name*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="shipping_address_first_name"
                                                                    name="shipping_address_first_name" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_first_name_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_last_name">Last name*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="shipping_address_last_name"
                                                                    name="shipping_address_last_name" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_last_name_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_line_one">Address*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="shipping_address_line_one"
                                                                    name="shipping_address_line_one" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_line_one_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <div class="col-12 col-md-12">
                                                        <div class="row address__field form-group">
                                                            <div class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_email">Email*</label>
                                                            </div>
                                                            <div class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control" id="shipping_address_email" name="billing_address_first_name" value>
                                                               
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_city">City* </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="shipping_address_city"
                                                                    name="shipping_address_city" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_city_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_state">State* </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="shipping_address_state"
                                                                    name="shipping_address_state" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_state_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_pin_code">ZIP code* </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" class="form-control"
                                                                    id="shipping_address_pin_code"
                                                                    name="shipping_address_pin_code" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_pin_code_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-12 col-md-6 fl-left">
                                                        <div class="row address__field form-group">
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__label">
                                                                <label for="shipping_address_mobile_number">Phone number*
                                                                </label>
                                                            </div>
                                                            <div
                                                                class="col-12 col-sm-12 col-md-12 address__field__input">
                                                                <input type="text" inputmode="numeric" pattern="[0-9]*"
                                                                    class="form-control"
                                                                    id="shipping_address_mobile_number"
                                                                    name="shipping_address_mobile_number" value>
                                                                <div class="error">
                                                                    <span id="shipping_address_mobile_number_err"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                                <!-- Shipping address done -->
                                                <div class="row m-0 checkout__continue">
                                                    <div class="col-12 checkout__payment__block__pay__btn">
                                                        <a class="show_pointer " data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                        aria-controls="collapseTwo">Continue</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <button
                                        class="d-flex align-items-center justify-content-between btn btn-link collapsed"
                                        data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                        aria-controls="collapseTwo">
                                        <div class="col-12 address__title">
                                            <h2 class="bold-heading">Post Card</h2>
                                        </div>
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <div class="row checkout__postcard">
                                        <div class="col-12 checkout__postcard__text">
                                            <p>Would you like us to send a card?</p>
                                        </div>
                                        
                                        <div class="col-12 address__selection__block terms_conditions form-group">
                                            <input type="checkbox" id="openpostcard" name="openpostcard" value="0">
                                            <label for="openpostcard">Yes</label>
                                        </div>
                                        <div
                                            class="col-12 col-sm-12 col-md-4 col-lg-4 checkout__postcard__options post_card_selection">
                                            <div class="checkout__postcard__options__block ">
                                                <img loading="lazy"
                                                    src="https://www.cocojungle.co/assets/images/post-cards/E6Kazab22Zl9a8x2T2LxDHR17G6qtE.jpg"
                                                    alt="Post Card" class="img-fluid">
                                                <div class="checkout__postcard__options__block__selected" data-id="2">
                                                    <i class="fa fa-check" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="col-12 col-sm-12 col-md-4 col-lg-4 checkout__postcard__options post_card_selection">
                                            <div class="checkout__postcard__options__block ">
                                                <img loading="lazy"
                                                    src="https://www.cocojungle.co/assets/images/post-cards/rxahi4fGM0sUxxjUoa6VTRD7UxE4Zq.jpg"
                                                    alt="Post Card" class="img-fluid">
                                                <div class="checkout__postcard__options__block__selected" data-id="1">
                                                    <i class="fa fa-check" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-12 col-md-4 col-lg-4 checkout__postcard__options post_card_selection">
                                            <div class="checkout__postcard__options__block ">
                                                <img loading="lazy"
                                                    src="https://www.cocojungle.co/assets/images/post-cards/k9m1kqcycqMy8KA4mYKVS9ZornRRVo.jpg"
                                                    alt="Post Card" class="img-fluid">
                                                <div class="checkout__postcard__options__block__selected" data-id="3">
                                                    <i class="fa fa-check" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-12 col-sm-12 col-md-12 postcard_message_input mt-2 mb-2 ">
                                                <textarea class="form-control postcard_message" rows="5" id="comment"
                                                    placeholder="Write Your Message"></textarea>
                                        </div>
                                        <div class="error">
                                            <span id="post_card_id_err"></span>
                                        </div>
                                        <div class="col-12 address__selection__block terms_conditions form-group">
                                            <input type="checkbox" id="nopostcard" name="nopostcard" value="0">
                                            <label for="nopostcard">No thank you</label>
                                        </div>
                                        <div class="col-12 checkout__payment__block__pay__btn">
                                            <a class="show_pointer " data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                                        aria-controls="collapseThree">Continue</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h2 class="mb-0">
                                    <button
                                        class="d-flex align-items-center justify-content-between btn btn-link collapsed"
                                        data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                                        aria-controls="collapseThree">
                                        <div class="col-12 address__title">
                                            <h2 class="bold-heading">Payment</h2>
                                        </div>
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                data-parent="#accordion">
                                <div class="card-body">
                                    <div class="row checkout__payment">
                                        <div
                                            class="col-12 col-sm-12 col-md-12 col-lg-12 checkout__payment__block address">
                                            <div class="row">
                                                <div class="col-12 address__title mb-0">
                                                    <p>How would you like to pay?</p>
                                                </div>
                                            </div>
                                            <div class=" payment_mode_select ">
                                                <form class="row" id="row payment_selection_form">
                                                    <div class="col-12 col-md-6 address__selection__block">
                                                        <input type="radio" name="payment_method_id"
                                                            id="net_banking_debit_card_credit_card" value="1" checked>
                                                        <label for="net_banking_debit_card_credit_card">Net Banking /
                                                            Debit Card /
                                                            Credit Card</label>
                                                    </div>
                                                    <div class="col-12 col-md-6 address__selection__block">
                                                        <input type="radio" name="payment_method_id" id="google_pay"
                                                            value="2">
                                                        <label for="google_pay">Google Pay</label>
                                                    </div>
                                                    <div class="error">
                                                        <span id="payment_method_id_err"></span>
                                                    </div>
                                                    <div
                                                        class="col-12 address__selection__block terms_conditions form-group">
                                                        <input type="checkbox" id="accept_terms" name="accept_terms"
                                                            value="1" checked>
                                                        <label for="accept_terms">I accept the  &nbsp;<a
                                                                href="https://www.cocojungle.co/terms-and-conditions"
                                                                target="_blank"> Terms & Conditions</a></label>
                                                        <div class="error">
                                                            <span id="accept_terms_err"></span>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 checkout__payment__block__pay">
                                                        <div class="checkout__payment__block__pay__btn">
                                                            <a class="show_pointer proceed_to_payment">Pay</a>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="row order-summary">
                        <div class="col-12 col-md-12">
                            <h3 class="ordersummary-title">Order summary</h3>
                        </div>
                        <div class="col-4 col-md-4 pr-0">
                            <div class="cart__image" width="200">
                                <a href="https://www.cocojungle.co/accents/acapulco/texture-charcoal-size-s/249"
                                    target="_blank">
                                    <img loading="lazy"
                                        src="https://www.cocojungle.co/assets/images/library/90DVOsXX4ecKB0oBfNzMsmfZFKasYX.jpg"
                                        alt="Acapulco" class="img-fluid">
                                </a>
                            </div>
                        </div>
                        <div class="col-8 col-md-8  pl-0">
                            <div class="cart__items pl-5">
                                <h2><a href="https://www.cocojungle.co/accents/acapulco/texture-charcoal-size-s/249"
                                        target="_blank">Acapulco ₹5250</a></h2>
                                <div class="cart-items-details">        
                                <ul class="cart_items_feature">
                                    <li>Texture: Charcoal<br>Size: S</li>
                                    <li>Quantity: 1</li>
                                </ul>

                                <ul class="cart_items_quantity" data-id="249">
                                    <li class="cart_items_quantity_minus  disable_pointer "></li>
                                    <li class="cart_items_quantity_input"><input type="number" step="1" min="1" max="5"
                                            class="form-control product_quantity" id="product_quantity" value="1"></li>
                                    <li class="cart_items_quantity_plus "></li>
                                    <li class="cart_items_quantity_delete"></li>
                                </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="ordersummary-price order-border">
                                <h4 class="price-head">Total
                                    <span>Free delivery</span>
                                    <span>All taxes included</span>
                                </h4>
                                <h4 class="price-sum">Rs. 25,250.00</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

@endsection