title = "Agent Account Report"
url = "/agent-account/bookings"
layout = "agent-account"
is_hidden = 0

[viewBag]
localeUrl[gr] = "/agent-account"

[account]
redirect = "agent-account/"
paramCode = "code"
forceSecure = 1
==

<div class="current-books">
    <nav>
        <ul class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
            <li>
                <a
                        class="nav-item nav-link active"
                        id="nav-home-tab"
                        data-toggle="tab"
                        href="#nav-home"
                        role="tab"
                        aria-controls="nav-home"
                        aria-selected="true"
                >Make A BOOKINGs</a>
            </li>
            <li>
                <a
                        class="nav-item nav-link"
                        id="nav-bookings-tab"
                        data-toggle="tab"
                        href="#nav-bookings"
                        role="tab"
                        aria-controls="nav-bookings"
                        aria-selected="false"
                >Manage bookings</a>
            </li>
            <li>
                <a
                        class="nav-item nav-link"
                        id="nav-Group-booking-tab"
                        data-toggle="tab"
                        href="#nav-Group-booking"
                        role="tab"
                        aria-controls="nav-Group-booking"
                        aria-selected="false"
                >Group Booking & Special Request</a>
            </li>
        </ul>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div
                class="tab-pane fade show active"
                id="nav-home"
                role="tabpanel"
                aria-labelledby="nav-home-tab"
        >
            <div class="agent-group-booking">
                <div class="row">
                    <div class="col-md-12 col-lg-6 col-xl-4">
                        <div class="cleint-details pd50-30 radius-4">
                            <h3>Clinet Details</h3>
                            <ul class="newlient">
                                <li class="activecleint">
                                    <a href="javascript:void(0);">
                                        New Client
                                    </a>
                                </li>
                                <li>
                                    <a href="#">Existing client</a>
                                </li>
                            </ul>
                            <form class="user-form">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>First Name</label>
                                            <input
                                                    type="text"
                                                    class="form-control-custom"
                                                    placeholder="Client First Name"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Last Name</label>
                                            <input
                                                    type="text"
                                                    class="form-control-custom"
                                                    placeholder="Client Last name"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Contact Number</label>
                                            <input
                                                    type="number"
                                                    class="form-control-custom"
                                                    placeholder="000-000-0000"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Email Address</label>
                                            <input
                                                    type="email"
                                                    class="form-control-custom"
                                                    placeholder="Client Email Address"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Home Countrys</label>
                                            <select class="form-control-custom">
                                                <option>Select</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>City</label>
                                            <select class="form-control-custom">
                                                <option>City</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="userform-deatials">
                                            <label>State</label>
                                            <select class="form-control-custom">
                                                <option>Select</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="userform-deatials">
                                            <label>Post Code</label>
                                            <input
                                                    type="email"
                                                    class="form-control-custom"
                                                    placeholder="00000"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 col-xl-4">
                        <div class="special-request pd50-30 radius-4">
                            <h3>Special request</h3>
                            <form class="special-offers">
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <p class="slecrted-value pink">You have selected the below items</p>
                                <div class="selected-ccartvalue radius-4">
                                    <ul class="selectlist">
                                        <li>
                                            2x Tour of the season
                                            <button class="minuslist">-</button>
                                            <button class="pluslist">+</button>
                                        </li>
                                        <li>
                                            2x Tour of the season
                                            <button class="minuslist">-</button>
                                            <button class="pluslist">+</button>
                                        </li>
                                        <li>
                                            2x Tour of the season
                                            <button class="minuslist">-</button>
                                            <button class="pluslist">+</button>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-12 col-xl-4">
                        <div class="booking-from radius-4 pd50-30" style="background-color: #808495;">
                            <h3>Select Booking details</h3>
                            <form class="depart-package">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <span class="dates">Depart</span>
                                            <input
                                                    type="date"
                                                    class="form-control-custom dobs radius-25"
                                                    placeholder="Client Email Address"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <span class="dates">Return</span>
                                            <input
                                                    type="date"
                                                    class="form-control-custom dobs radius-25"
                                                    placeholder="Client Email Address"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <select class="form-control-custom radius-25">
                                                <option>4 Room</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <select class="form-control-custom radius-25">
                                                <option>6 Adults</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <select class="form-control-custom radius-25">
                                                <option>0 Kids</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button class="checknow btn btn-primary">Check Now</button>
                                        <ul class="selectlist">
                                            <li>
                                                <span class="details">$4000 x 4 night</span>
                                                <span class="price">$4000</span>
                                            </li>
                                            <li>
                                                <span class="details">$15% Group discount</span>
                                                <span class="price">-$30</span>
                                            </li>
                                            <li>
                                                <span class="details">Cleaning Fee</span>
                                                <span class="price">$10</span>
                                            </li>
                                            <li>
                                                <span class="details">Service Fee</span>
                                                <span class="price">$30</span>
                                            </li>
                                            <li class="total">
                                                <span class="details">Total</span>
                                                <span class="price">$1500</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-12">
                                        <button class="checknow btn btn-primary" style="background: #FF0068; margin-bottom: 0; border-color: #FF0068">Book Now</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="offser-infos-3 mt-30">
                    <div class="row">
                        <div class="col-md-12 col-xl-4 col-lg-6">
                            <div class="offer-box radius-4">
                                <img src="images/package-speacial-rate.jpg" class="radius-4 img-fluid">
                                <div class="oofser-list">
                                    <h5 class="pink">Special Offer</h5>
                                    <h6>A bolder way to beach day,St. John’s, Antigua & Barbuda</h6>
                                    <p class="lblue">Hilus Mountain</p>
                                    <a href="#" class="view-offer">View Offer</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-xl-4 col-lg-6">
                            <div class="offer-box radius-4">
                                <img src="images/package-speacial-rate.jpg" class="radius-4 img-fluid">
                                <div class="oofser-list">
                                    <h5 class="pink">Special Offer</h5>
                                    <h6>A bolder way to beach day,St. John’s, Antigua & Barbuda</h6>
                                    <p class="lblue">Hilus Mountain</p>
                                    <a href="#" class="view-offer">View Offer</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-xl-4 col-lg-6">
                            <div class="offer-box radius-4">
                                <img src="images/package-speacial-rate.jpg" class="radius-4 img-fluid">
                                <div class="oofser-list">
                                    <h5 class="pink">Special Offer</h5>
                                    <h6>A bolder way to beach day,St. John’s, Antigua & Barbuda</h6>
                                    <p class="lblue">Hilus Mountain</p>
                                    <a href="#" class="view-offer">View Offer</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
                class="tab-pane fade"
                id="nav-bookings"
                role="tabpanel"
                aria-labelledby="nav-bookings-tab"
        >
            <div class="commision-report">
                <div class="commision-report-panel">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-xl-3">
                            <h5>Commission Report</h5>
                        </div>
                        <div class="col-md-6 col-lg-6 col-xl-2">
                            <div class="range-selecter">
                                <i class="fas fa-search"></i>
                                <input type="text" class="search-report">
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-12 col-xl-7">
                            <div class="box-2">
                                <ul class="from-to">
                                    <li>
                                        <label>From</label>
                                        <input type="text" class="datepucker flatpickr-input" readonly="readonly">
                                    </li>
                                    <li>
                                        <label>To</label>
                                        <input type="text" class="datepucker flatpickr-input" readonly="readonly">
                                    </li>
                                </ul>
                                <a href="#" class="download-full-report">
                                    <i class="fas fa-arrow-circle-down"></i>
                                    &nbsp;  Download Full Report
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="report-table table-responisve listbox10">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">
                                Booking
                                Number
                            </th>
                            <th scope="col">
                                Transaction
                                Date
                            </th>
                            <th scope="col">
                                Itinerary
                                Code
                            </th>
                            <th scope="col">
                                Product
                                description
                            </th>
                            <th scope="col">Client Details</th>
                            <th scope="col">Travel Dates</th>
                            <th scope="col">
                                Gross
                                transaction
                            </th>
                            <th scope="col">
                                Commision
                                earned
                            </th>
                            <th scope="col">Status</th>
                            <th scope="col">Download Booking</th>
                            <th scope="col">Travel Dates</th>
                            <th scope="col">
                                Gross
                                transaction
                            </th>
                            <th scope="col">
                                Commision
                                earned
                            </th>
                            <th scope="col">Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="gren-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="yello-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="red-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="gren-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="yello-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="red-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="gren-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="yello-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="red-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="gren-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="yello-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="red-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="gren-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="yello-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        <tr>
                            <td class="lblue">A72501227</td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                            <td>12-15 Febuary 2020</td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                1250.00
                            </td>
                            <td>
                                <i class="fas fa-pound-sign"></i>
                                125.00
                            </td>
                            <td>
                                <span class="red-st"></span>
                            </td>
                            <td class="lblue">
                                <a href="#" class="downloadlink">
                                    <i class="fas fa-arrow-circle-down"></i>
                                </a>
                            </td>
                            <td>10 march 2020</td>
                            <td>A72501227</td>
                            <td>Package</td>
                            <td>Mr dawson</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div
                class="tab-pane fade"
                id="nav-Group-booking"
                role="tabpanel"
                aria-labelledby="nav-Group-booking-tab"
        >
            <div class="agent-group-booking">
                <div class="row">
                    <div class="col-md-12 col-lg-6 col-xl-4">
                        <div class="cleint-details pd50-30 radius-4">
                            <h3>Clinet Details</h3>
                            <ul class="newlient">
                                <li class="activecleint">
                                    <a href="javascript:void(0);">
                                        New Client
                                    </a>
                                </li>
                                <li>
                                    <a href="#">Existing client</a>
                                </li>
                            </ul>
                            <form class="user-form">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>First Name</label>
                                            <input
                                                    type="text"
                                                    class="form-control-custom"
                                                    placeholder="Client First Name"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Last Name</label>
                                            <input
                                                    type="text"
                                                    class="form-control-custom"
                                                    placeholder="Client Last name"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Contact Number</label>
                                            <input
                                                    type="number"
                                                    class="form-control-custom"
                                                    placeholder="000-000-0000"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Email Address</label>
                                            <input
                                                    type="email"
                                                    class="form-control-custom"
                                                    placeholder="Client Email Address"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>Home Countrys</label>
                                            <select class="form-control-custom">
                                                <option>Select</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <label>City</label>
                                            <select class="form-control-custom">
                                                <option>City</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="userform-deatials">
                                            <label>State</label>
                                            <select class="form-control-custom">
                                                <option>Select</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="userform-deatials">
                                            <label>Post Code</label>
                                            <input
                                                    type="email"
                                                    class="form-control-custom"
                                                    placeholder="00000"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 col-xl-4">
                        <div class="special-request pd50-30 radius-4">
                            <h3>Special request</h3>
                            <form class="special-offers">
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <div class="userform-deatials">
                                    <select class="form-control-custom with-border">
                                        <option>Special Offers</option>
                                    </select>
                                </div>
                                <p class="slecrted-value pink">You have selected the below items</p>
                                <div class="selected-ccartvalue radius-4">
                                    <ul class="selectlist">
                                        <li>
                                            2x Tour of the season
                                            <button class="minuslist">-</button>
                                            <button class="pluslist">+</button>
                                        </li>
                                        <li>
                                            2x Tour of the season
                                            <button class="minuslist">-</button>
                                            <button class="pluslist">+</button>
                                        </li>
                                        <li>
                                            2x Tour of the season
                                            <button class="minuslist">-</button>
                                            <button class="pluslist">+</button>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-12 col-xl-4">
                        <div class="booking-from radius-4 pd50-30" style="background-color: #808495;">
                            <h3>Select Booking details</h3>
                            <form class="depart-package">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <span class="dates">Depart</span>
                                            <input
                                                    type="date"
                                                    class="form-control-custom dobs radius-25"
                                                    placeholder="Client Email Address"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <span class="dates">Return</span>
                                            <input
                                                    type="date"
                                                    class="form-control-custom dobs radius-25"
                                                    placeholder="Client Email Address"
                                                    name=""
                                            >
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <select class="form-control-custom radius-25">
                                                <option>4 Room</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <select class="form-control-custom radius-25">
                                                <option>6 Adults</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="userform-deatials">
                                            <select class="form-control-custom radius-25">
                                                <option>0 Kids</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button class="checknow btn btn-primary">Check Now</button>
                                        <ul class="selectlist">
                                            <li>
                                                <span class="details">$4000 x 4 night</span>
                                                <span class="price">$4000</span>
                                            </li>
                                            <li>
                                                <span class="details">$15% Group discount</span>
                                                <span class="price">-$30</span>
                                            </li>
                                            <li>
                                                <span class="details">Cleaning Fee</span>
                                                <span class="price">$10</span>
                                            </li>
                                            <li>
                                                <span class="details">Service Fee</span>
                                                <span class="price">$30</span>
                                            </li>
                                            <li class="total">
                                                <span class="details">Total</span>
                                                <span class="price">$1500</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-12">
                                        <button class="checknow btn btn-primary" style="background: #FF0068; margin-bottom: 0; border-color: #FF0068">Book Now</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="offser-infos-3 mt-30">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="offer-box radius-4">
                                <img src="images/package-speacial-rate.jpg" class="radius-4 img-fluid">
                                <div class="oofser-list">
                                    <h5 class="pink">Special Offer</h5>
                                    <h6>A bolder way to beach day,St. John’s, Antigua & Barbuda</h6>
                                    <p class="lblue">Hilus Mountain</p>
                                    <a href="#" class="view-offer">View Offer</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="offer-box radius-4">
                                <img src="images/package-speacial-rate.jpg" class="radius-4 img-fluid">
                                <div class="oofser-list">
                                    <h5 class="pink">Special Offer</h5>
                                    <h6>A bolder way to beach day,St. John’s, Antigua & Barbuda</h6>
                                    <p class="lblue">Hilus Mountain</p>
                                    <a href="#" class="view-offer">View Offer</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="offer-box radius-4">
                                <img src="images/package-speacial-rate.jpg" class="radius-4 img-fluid">
                                <div class="oofser-list">
                                    <h5 class="pink">Special Offer</h5>
                                    <h6>A bolder way to beach day,St. John’s, Antigua & Barbuda</h6>
                                    <p class="lblue">Hilus Mountain</p>
                                    <a href="#" class="view-offer">View Offer</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script type="text/javascript" src="/themes/ketikidis-octobercms-success/assets/js/ext/jquery/jquery-3.5.1.js"></script>
<script type="text/javascript" src="/themes/ketikidis-octobercms-success/assets/js/ext/popper.min.js"></script>
<script src="/themes/ketikidis-octobercms-success/assets/js/ext/flatpickr.js"></script>
<script type="text/javascript" src="/themes/ketikidis-octobercms-success/assets/js/ext/bootstrap.min.js"></script>
<script type="text/javascript" src="/themes/ketikidis-octobercms-success/assets/js/ext/slick.js"></script>
<script>
    $('.multi-images').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        prevArrow: $('.home-sale-prev'),
        nextArrow: $('.home-sale-next'),
        fade: true,
        asNavFor: '.slider-nav'
    });

    $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.multi-images',
        dots: false,
        centerMode: false,
        arrows:false,
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                }
            }, {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }, {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
        ]
    });
</script>
<!-- pagination -->
<script>
    $(".datepucker").flatpickr({
        enableTime: false,
        disableMobile: "true",
        dateFormat: "F, d Y "
    });
</script>