@extends('layouts.site_layout')

@section('content')

<section class="bg_light_grey py-5">
    <div class="container my-lg-5 my-0">
        <!-- <div class="breadcrumbs mb-5">
            <span>
                <a href="" class="fs-24 text-decoration-none text-dark opacity-5">Home <span
                        class="px-lg-4 px-0">></span> </a>
                <a href="" class="fs-24 text-decoration-none text-dark opacity-5">Information Hub <span
                        class="px-lg-4 px-0">></span> </a>
                <a href="" class="fs-24 text-decoration-none text-dark">Research</a>
            </span>
        </div> -->
        <div class="row">
            <div class="col-lg-7 mb-lg-0 mb-5">
                <p class="text-decorataion-none text-dark"><a href="{{ url()->previous() }}"
                        class="text-decoration-none text-dark"><i class="fa-solid fa-arrow-left me-2 opacity-5"></i> Go
                        Back</a></p>
                <hr>
                <h1 class="fs-42 my-5">Your Cart</h1>
                <div id="cartLists"></div>
                <!-- <div class="card border-0 shadow br-22 mb-5">
                    <div class="card-body d-lg-flex d-md-flex d-block text-lg-start text-md-start text-center justify-content-between align-items-center">
                        <img src="{{asset('images/info-hub/cart-1.png')}}" alt="Cart 1" class="img-fluid mb-lg-0 mb-md-0 mb-3">
                        <p class="fs-16 mb-lg-0 mb-md-0 mb-3">ESDM as a catalyst for ‘Make in <br> India’ for the World</p>
                        <p class="fw-bold mb-lg-0 mb-md-0 mb-3"> + <span class="badge text-dark item-numbers mx-1">1</span> -</p>
                        <p class="fs-20 fw-bold mb-lg-0 mb-md-0 mb-3">₹2,000.00</p>
                        <i class="fa-regular fa-trash-can opacity-5"></i>
                    </div>
                </div> -->
                <!-- <div class="card border-0 shadow br-22">
                    <div class="card-body d-lg-flex d-md-flex d-block text-lg-start text-md-start text-center justify-content-between align-items-center">
                        <img src="{{asset('images/info-hub/cart-2.png')}}" alt="Cart 1" class="img-fluid mb-lg-0 mb-md-0 mb-3">
                        <p class="fs-16 mb-lg-0 mb-md-0 mb-3">ESDM as a catalyst for ‘Make in <br> India’ for the World</p>
                        <p class="fw-bold mb-lg-0 mb-md-0 mb-3"> + <span class="badge text-dark item-numbers mx-1">1</span> -</p>
                        <p class="fs-20 fw-bold mb-lg-0 mb-md-0 mb-3">₹0.00</p>
                        <i class="fa-regular fa-trash-can opacity-5"></i>
                    </div>
                </div> -->
            </div>
            <div class="col-lg-5">
                <div class="card border-0 shadow br-22">
                    <div class="card-body p-lg-5 p-md-5 p-3">
                        <h2 class="fs-34 mb-3">Checkout</h2>
                        <form class="row g-3">
                            <div class="col-12 mb-2">
                                <label for="name" class="form-label">Full Name</label>
                                <input type="text" class="form-control" id="name" name="fullname"
                                    placeholder="Enter your Full Name">
                            </div>
                            <div class="col-12 mb-2">
                                <label for="phone" class="form-label">Phone</label>
                                <input type="tel" class="form-control" id="phone" name="phonenumber"
                                    placeholder="Enter your Phone number">
                            </div>
                            <div class="col-12 mb-2">
                                <label for="mail" class="form-label">Email</label>
                                <input type="email" class="form-control" id="mail" name="email"
                                    placeholder="Enter your Email Id">
                            </div>
                            <div class="col-lg-12 col-md-6 col-12 mb-2">
                                <label for="payment" class="form-label">Select Mode of Payment</label>
                                <div class="card">
                                    <div class="d-flex">
                                        <div class="payment_option border-end text-center form-check p-0 mb-0">
                                            <input class="form-check-input d-none" type="radio" name="exampleRadios"
                                                id="exampleRadios1" value="option1" checked>
                                            <label class="form-check-label checkout_radios" for="exampleRadios1"
                                                role="button">
                                                <div class="px-3 text-center py-2">
                                                    <img src="{{asset('images/info-hub/card.svg')}}" alt=""
                                                        class="img-fluid mb-2">
                                                    <h4 class="fs-12 mb-0">Card</h4>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="payment_option border-end text-center form-check p-0 mb-0">
                                            <input class="form-check-input d-none" type="radio" name="exampleRadios"
                                                id="exampleRadios2" value="option2">
                                            <label class="form-check-label checkout_radios" for="exampleRadios2"
                                                role="button">
                                                <div class="px-3 text-center py-2">
                                                    <img src="{{asset('images/info-hub/netbanking.svg')}}"
                                                        alt="Netbanking" class="img-fluid mb-2">
                                                    <h4 class="fs-12 mb-0">Netbanking</h4>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="payment_option border-end text-center form-check p-0 mb-0">
                                            <input class="form-check-input d-none" type="radio" name="exampleRadios"
                                                id="exampleRadios3" value="option3">
                                            <label class="form-check-label checkout_radios" for="exampleRadios3"
                                                role="button">
                                                <div class="px-lg-3 px-2 text-center py-2">
                                                    <img src="{{asset('images/info-hub/wallet.svg')}}" alt="Wallet"
                                                        class="img-fluid mb-2">
                                                    <h4 class="fs-12 mb-0">Wallet</h4>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="payment_option text-center form-check p-0 mb-0">
                                            <input class="form-check-input d-none" type="radio" name="exampleRadios"
                                                id="exampleRadios4" value="option4">
                                            <label class="form-check-label checkout_radios" for="exampleRadios4"
                                                role="button">
                                                <div class="px-3 text-center py-2">
                                                    <img src="{{asset('images/info-hub/upi.svg')}}" alt="UPI"
                                                        class="img-fluid mb-2">
                                                    <h4 class="fs-12 mb-0">UPI</h4>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn bg-orange w-100 text-white">Checkout</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="py-5 my-lg-5 my-0">
    <div class="container join-iesa-bg text-center py-lg-5 py-md-0 py-5">
        <h2 class="fs-40 fw-500 text-white mb-5 mt-lg-5 mt-md-0 mt-5 pt-lg-0 pt-5">Join the Vibrant IESA Community</h2>
        <div class="pb-lg-0 pb-5 mb-lg-5 mb-md-0 mb-5">
            <a href="{{url('become-a-member')}}" class="btn bg-white btn-padding">Register Now</a>
        </div>
    </div>
</section>
<!-- file calling here -->
<script src="{{asset('/js/site-api/check_out.js')}}"></script>
@endsection