@extends('layout.app')
@section('content')


<!-- Breadcrumbs -->
<section class="inflanar-breadcrumb">
    <div class="container">
        <div class="row">
            <!-- Breadcrumb-Content -->
            <div class="col-12">
                <div class="inflanar-breadcrumb__inner">
                    <div class="inflanar-breadcrumb__content">
                        <h2 class="inflanar-breadcrumb__title m-0">Book Now</h2>
                        <ul class="inflanar-breadcrumb__menu list-none">
                            <li><a href="index.html">Home</a></li>
                            <li class="active"><a href="book-now.html">Book Now</a></li>
                        </ul>
                    </div>	
                    <div class="inflanar-breadcrumb__img">
                        <div class="inflanar-breadcrumb__thumb">
                            <img src="https://placehold.co/512x330">
                        </div>
                        <div class="inflanar-breadcrumb__group">
                            <img src="{{asset('img/in-social-group.png') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End breadcrumbs -->

<!-- Features -->
<section class="pd-top-90 pd-btm-120">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-12 mg-top-30">
                
                <!--Tab Nav -->
                <div class="list-group inflanar-bdetail__tabnav" id="list-tab" role="tablist">
                    <a class="list-group-item active" data-bs-toggle="list" href="#in-tab6" role="tab">
                        <span>1</span> Service
                    </a>
                    <a class="list-group-item" data-bs-toggle="list" href="#in-tab7" role="tab">
                        <span>2</span> Information
                    </a>
                    <a class="list-group-item" data-bs-toggle="list" href="#in-tab8" role="tab">
                        <span>3</span> Confirmation
                    </a>
                </div>
                
                <!-- Tab Content -->
                <div class="tab-content mg-top-30" id="nav-tabContent">
                    <!-- Single Tab -->
                    <div class="tab-pane fade active show" id="in-tab6" role="tabpanel">
                       
                        <div class="inflanar-sdetail">
                            <!-- Service Thumb -->
                            <div class="inflanar-sdetail__thumb">
                                <img src="https://placehold.co/945x400" alt="#">
                            </div>
                            <!-- Service Content -->
                            <div class="inflanar-sdetail__content">
                                <h2 class="inflanar-sdetail__title mg-btm-20">Electricia in workwear open air conditioner unit as melted cheese on black</h2>
                                
                                <div class="inflanar-sdetail__tcontent">
                                    <p>This is one of the best WordPress Theme. It is clean, user friendly, fully responsivle, pixel perfect, our modern as design with latest WordPress Technologies. This WordPress theme is perfect for any ki Custom Slider holo  the powerfu jemon temon as website.This WordPress Theme has the powerful theme control panel ki holo as with lots  It is cleans, user of useful Addons tools to manage the site: Elementor Page Builder, Custom ki Slider, our Custom Icon Font,etc. With as variation and demos I am sure you gonna love it and use it for your next Project.</p>
                                    <h4 class="inflanar-sdetail__tcontent--title mg-top-40">Features</h4>
                                    <div class="row mg-btm-20">
                                        <div class="col-lg-6 col-12">
                                            <ul class="inflanar-list-style inflanar-list-style__grey  inflanar-list-style__row list-none">
                                                <li><img src="{{asset('img/in-check-icon2.svg') }}">4 Unique Header Style</li>
                                                <li><img src="{{asset('img/in-check-icon2.svg') }}">100% Valid Code</li>
                                                <li><img src="{{asset('img/in-check-icon2.svg') }}">Elementor Page Builder</li>
                                                <li><img src="{{asset('img/in-check-icon2.svg') }}">3000+ Font Icon</li>
                                                <li><img src="{{asset('img/in-check-icon2.svg') }}">4 Footer Copyright Style</li>
                                                <li><img src="{{asset('img/in-check-icon2.svg') }}">One Click Demo Import</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <p>There are many variations of passages of Lorem Ipsum available but the majorty have suffered many ki in as some form, by injected humour, or randomised words which don't look even</p>
                                </div>
                            </div>
                        </div>

                        <!-- Addon List -->
                        <div class="inflanar-opackage mg-top-60">
                            <h3 class="inflanar-opackage__title">Upgrade your order with extras</h3>
                            <!-- Single Addon -->
                            <div class="inflanar-opackage__single">
                                <div class="inflanar-opackage__thumb">
                                    <img src="https://placehold.co/138x170" alt="#">
                                </div>
                                <div class="inflanar-opackage__scontent">
                                    <div class="inflanar-opackage__list">
                                        <h4 class="inflanar-opackage__ltitle">Shoulder view of woman streaming first person shooter</h4>
                                        <ul class="inflanar-list-style inflanar-list-style__grey  inflanar-list-style__row list-none">
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">10 Social Media Post</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Post Views 10K+</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Duration 3-4 Days</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Digital Marketing</li>
                                        </ul>
                                    </div>
                                    <div class="inflanar-opackage__aprice">
                                        <div class="inflanar-opackage__apgroup">
                                            <h4 class="inflanar-opackage__aamount">$80</h4>
                                            <a href="#" class="inflanar-btn inflanar-btn__border">Add Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Addon -->
                             <!-- Single Addon -->
                             <div class="inflanar-opackage__single">
                                <div class="inflanar-opackage__thumb">
                                    <img src="https://placehold.co/138x170" alt="#">
                                </div>
                                <div class="inflanar-opackage__scontent">
                                    <div class="inflanar-opackage__list">
                                        <h4 class="inflanar-opackage__ltitle">Shoulder view of woman streaming first person shooter</h4>
                                        <ul class="inflanar-list-style inflanar-list-style__grey  inflanar-list-style__row list-none">
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">10 Social Media Post</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Post Views 10K+</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Duration 3-4 Days</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Digital Marketing</li>
                                        </ul>
                                    </div>
                                    <div class="inflanar-opackage__aprice">
                                        <div class="inflanar-opackage__apgroup">
                                            <h4 class="inflanar-opackage__aamount">$120</h4>
                                            <a href="#" class="inflanar-btn inflanar-btn__border">Add Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Addon -->
                             <!-- Single Addon -->
                             <div class="inflanar-opackage__single">
                                <div class="inflanar-opackage__thumb">
                                    <img src="https://placehold.co/138x170" alt="#">
                                </div>
                                <div class="inflanar-opackage__scontent">
                                    <div class="inflanar-opackage__list">
                                        <h4 class="inflanar-opackage__ltitle">Shoulder view of woman streaming first person shooter</h4>
                                        <ul class="inflanar-list-style inflanar-list-style__grey  inflanar-list-style__row list-none">
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">10 Social Media Post</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Post Views 10K+</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Duration 3-4 Days</li>
                                            <li><img src="{{asset('img/in-check-circle.svg') }}">Digital Marketing</li>
                                        </ul>
                                    </div>
                                    <div class="inflanar-opackage__aprice">
                                        <div class="inflanar-opackage__apgroup">
                                            <h4 class="inflanar-opackage__aamount">$90</h4>
                                            <a href="#" class="inflanar-btn inflanar-btn__border">Add Now</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Single Addon -->
                        </div>
                        <div class="inflanar-step-buttons mg-top-60">
                            <button href="#" class="inflanar-btn">Next Step</button>
                        </div>
                    </div>
                    <!-- End Single Tab -->
                    <!-- Single Tab -->
                    <div class="tab-pane fade" id="in-tab7" role="tabpanel">
                       
                        <div class="inflanar-sdetail">
                            <!-- Service Content -->
                            <div class="inflanar-sdetail__content">
                                <h2 class="inflanar-sdetail__title m-0">Booking Information</h2>
                                <form action="#">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Name*</label>
                                                <input class="ecom-wc__form-input" type="text" name="f_name" placeholder="Name" required="required">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Email*</label>
                                                <input class="ecom-wc__form-input" type="text" name="email" placeholder="Email Address" required="required">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Phone *</label>
                                                <input class="ecom-wc__form-input" type="text" name="phone" placeholder="Phone Number" required="required">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Platform*</label>
                                                <select class="property-sidebar__group inflanar-border">
                                                    <option data-display="Bangladesh">Bangladesh</option>
                                                    <option value="2"> United Kingdom</option>
                                                    <option value="3">United Sates</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Select Schedule*</label>
                                                <input class="ecom-wc__form-input" type="date" name="date" placeholder="04 / 06 / 2023" required="required">
                                            </div>
                                        </div>
                                        <div class="col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Your Address*</label>
                                                <input class="ecom-wc__form-input" type="text" name="f_name" placeholder="Your Address Here" required="required">
                                            </div>
                                        </div>
                                        <div class="col-12 mg-top-20">
                                            <div class="form-group inflanar-form-input">
                                                <label>Write Description*</label>
                                                <div class="form-group inflanar-form-input">
                                                    <textarea placeholder="Description" id="ckdesc1" required></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="inflanar-step-buttons mg-top-60">
                            <button type="submit" class="inflanar-btn inflanar-btn__border"><span>Previous</span></button>
                            <button href="#" class="inflanar-btn">Next Step</button>
                        </div>
                    </div>
                    <!-- End Single Tab -->
                    <!-- Single Tab -->
                    <div class="tab-pane fade" id="in-tab8" role="tabpanel">
                       
                        <div class="inflanar-sdetail">
                            <!-- Service Thumb -->
                            <div class="inflanar-sdetail__thumb">
                                <img src="https://placehold.co/945x400" alt="#">
                            </div>
                            <!-- Service Content -->
                            <div class="inflanar-sdetail__content">
                                <h2 class="inflanar-sdetail__title mg-btm-20">Booking Information</h2>
                                <div class="inflanar-sdetail__tcontent mg-top-10">
                                    <ul class="inflanar-booking-info list-none">
                                        <li>
                                            <span class="inflanar-booking-info__label">Name:</span> <span class="inflanar-booking-info__desc">Garikoka Thomash:</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Email:</span> 
                                            <span class="inflanar-booking-info__desc">infoyour@gmail.com</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Phone Number:</span> 
                                            <span class="inflanar-booking-info__desc">+88 0140 8317188</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Platform:</span> 
                                            <span class="inflanar-booking-info__desc">Facebook</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Platform:</span> 
                                            <span class="inflanar-booking-info__desc">Facebook</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Select Schedule:</span> 
                                            <span class="inflanar-booking-info__desc">04 / 06 / 2023</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Your Address:</span> 
                                            <span class="inflanar-booking-info__desc">374 FA Tower, William S Bloibvd 2721, IL, USA</span> 
                                        </li>
                                        <li>
                                            <span class="inflanar-booking-info__label">Order Note:</span> 
                                            <span class="inflanar-booking-info__desc inflanar-booking-info__flabel inflanar-font-normal">There are many variations of passages of Lorem psum available but the majorty have suffered many
                                            ki in as some form, by injected humour, or randomised words which don't look even</span>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                        </div>

                        <!-- Payment list -->
                        <div class="inflanar-payment-list mg-top-60">
                            <ul class="inflanar-payment-method__list">
                                <li>
                                    <a href="#">
                                        <input class="form-check-input " type="radio" value="" id="payment-1"  name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-1"><img src="{{asset('img/payment-1.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input " type="radio" value="" id="payment-2"  name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-2"><img src="{{asset('img/payment-2.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input " type="radio" value="" id="payment-3"  name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-3"><img src="{{asset('img/payment-3.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input " type="radio" value="" id="payment-4"  name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-4"><img src="{{asset('img/payment-4.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input " type="radio" value="" id="payment-5"  name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-5"><img src="{{asset('img/payment-5.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input payment-bank-button" type="radio" value="" id="payment-6"  name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-6"><img src="{{asset('img/payment-6.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input payment-stripe-button " type="radio" value="" id="payment-7" name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-7"><img src="{{asset('img/payment-7.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input payment-stripe-button " type="radio" value="" id="payment-8" name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-8"><img src="{{asset('img/payment-8.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input payment-stripe-button " type="radio" value="" id="payment-9" name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-9"><img src="{{asset('img/payment-9.png') }}"></label>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <input class="form-check-input payment-stripe-button " type="radio" value="" id="payment-10" name="payment-method">
                                        <label class="form-check-label inflanar-payment-method__label" for="payment-10"><img src="{{asset('img/payment-10.png') }}"></label>
                                    </a>
                                </li>
                            </ul>

                        </div>
                        <!-- End Payment List -->


                    </div>
                    <!-- End Single Tab -->
                </div>
            </div>
            <div class="col-lg-3 col-12 mg-top-30">
                <!-- Single Sidebar -->
                <div class="book-single-sidebar">
                    <div id="inflanar-calender" class="inflanar-default-cd"></div>
                </div>
                <!-- Single Sidebar -->
                <div class="book-single-sidebar mg-top-30">
                    <h4 class="book-single-sidebar__title">Select Schedule</h4>
                    <select class="property-sidebar__group inflanar-border">
                        <option data-display="Bangladesh">Saturday</option>
                        <option value="2"> Sundary</option>
                        <option value="3">Monday</option>
                    </select>
                </div>
                <!-- Single Sidebar -->
                <div class="book-single-sidebar p-0 mg-top-30">
                    <div class="book-single-sidebar__summary">
                        <h4 class="book-single-sidebar__title">Booking Summery</h4>
                        <ul class="inflanar-list-style inflanar-list-style__white list-style-normal list-none">
                            <li><img src="{{asset('img/in-check-icon3.svg') }}">30 Social Media Post</li>
                            <li><img src="{{asset('img/in-check-icon3.svg') }}">Duration 5-6 Months</li>
                            <li><img src="{{asset('img/in-check-icon3.svg') }}">Digital Marketing</li>
                            <li><img src="{{asset('img/in-check-icon3.svg') }}">Company Profile Build</li>
                            <li><img src="{{asset('img/in-check-icon3.svg') }}">Business Growing</li>
                            <li><img src="{{asset('img/in-check-icon3.svg') }}">6 Video Post My Profile</li>
                        </ul>
                    </div>
                    <div class="inflanar-package-info">
                        <!-- Single Package Info -->
                        <div class="inflanar-package-info__single">
                            <p><span>Package Fee</span> <span>$120</span></p>   
                            <p><span><b>Extra Service</b></span> <span><b>$120</b></span></p>   
                        </div>                                         
                        <!-- Single Package Info -->
                        <div class="inflanar-package-info__single">
                            <p><span>Subtotal</span> <span>$490</span></p>   
                            <p><span>Tax(0%)</span> <span>$00</span></p>   
                        </div>                                         
                        <!-- Single Package Info -->
                        <div class="inflanar-package-info__single">
                            <p><span><b>Total</b></span> <span><b>$490</b></span></p>   
                        </div>                                        
                    </div>
                    
                </div>
                <div class="book-single-sidebar mg-top-30">
                    <form>
                        <div class="form-group inflanar-form-input">
                            <label>Coupon Code</label>
                            <input class="ecom-wc__form-input" type="text" name="c_name" placeholder="" required="required">
                        </div>
                        <button type="submit" class="inflanar-btn mg-top-20"><span>Confirm now</span></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Features -->
    
@endsection