@extends('layouts.layout')
@section('content')
    <section class="gray-bg no-top-padding-sec" id="sec1">
        <div class="container">
            <div class="breadcrumbs inline-breadcrumbs fl-wrap block-breadcrumbs">
                <a href="{{ route('home.index') }}">Home</a><a
                    href="{{ route('residence.show', ['slug_id' => $residence->slug . '_' . $residence->id]) }}">{{ $residence->name }}</a>
                <span>Booking Form</span>
            </div>
            <div class="list-main-wrap-title single-main-wrap-title fl-wrap">
                <h2>Booking form for : <span>{{ $residence->name }} </span> {{ $room->course_name }}</h2>
            </div>
            <div class="fl-wrap ">
                <div class="row">
                    <div class="col-md-8">
                        <ul id="progressbar" class="no-list-style">
                            <li class="active"><span class="tolt" data-microtip-position="top"
                                    data-tooltip="Personal Info">01.</span></li>
                            <li><span class="tolt" data-microtip-position="top"
                                    data-tooltip="Confirm your reservation">02.</span>
                            </li>
                            <li><span class="tolt" data-microtip-position="top" data-tooltip="Payment Method">03.</span>
                            </li>
                        </ul>
                        <div class="bookiing-form-wrap block_box fl-wrap">
                            <!--   list-single-main-item -->
                            <div class="list-single-main-item fl-wrap hidden-section tr-sec">
                                <div class="profile-edit-container">
                                    <div class="custom-form">
                                        <form>
                                            <fieldset class="fl-wrap">
                                                <div class="list-single-main-item-title fl-wrap">
                                                    <h3>Your personal Information</h3>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Passport First Name <i
                                                                class="far fa-user"></i></label>
                                                        <input type="text" placeholder="Your Name" value="" />
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Passport Last Name <i
                                                                class="far fa-user"></i></label>
                                                        <input type="text" placeholder="Your Last Name" value="" />
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Email Address<i
                                                                class="far fa-envelope"></i> </label>
                                                        <input type="text" placeholder="yourmail@domain.com"
                                                            value="" />
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Phone<i class="far fa-phone"></i> </label>
                                                        <input type="text" placeholder="87945612233" value="" />
                                                    </div>

                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Contact Language </label>
                                                        <div class="listsearch-input-item ">
                                                            <select data-placeholder="Select Contact Language"
                                                                class="chosen-select no-search-select">
                                                                @forelse ($languages as $language)
                                                                    <option value="{{ $language->id }}">
                                                                        {{ $language->name }}</option>
                                                                @empty
                                                                @endforelse
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Home Country</label>
                                                        <div class="listsearch-input-item ">
                                                            <select data-placeholder="Home Country"
                                                                class="chosen-select no-search-select">
                                                                @forelse ($countries as $country)
                                                                    <option value="{{ $country->id }}">{{ $country->name }}
                                                                    </option>
                                                                @empty
                                                                @endforelse
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="log-massage">We will send any essential documents to this email
                                                    address</div>
                                                <a href="#" class="next-form action-button color-bg">Billing
                                                    Address</a>
                                            </fieldset>
                                            <fieldset class="fl-wrap">
                                                <div class="list-single-main-item-title fl-wrap">
                                                    <h3>Confirm your reservation</h3>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Check in <i
                                                                class="fal fa-globe-asia"></i></label>
                                                        <input type="text" placeholder="Check in" value="" />
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Duration <i
                                                                class="fal fa-globe-asia"></i></label>
                                                        <input type="text" placeholder="Duration" value="" />
                                                    </div>
                                                </div>

                                                <div class="list-single-main-item-title fl-wrap">
                                                    <h3>Addtional Notes</h3>
                                                </div>
                                                <textarea cols="40" rows="3" placeholder="Notes"></textarea>
                                                <span class="fw-separator"></span>
                                                <a href="#"
                                                    class="previous-form action-button back-form   color2-bg">Back</a>
                                                <a href="#" class="next-form   action-button color-bg">Payment
                                                    Step</a>
                                            </fieldset>
                                            <fieldset class="fl-wrap">
                                                <div class="list-single-main-item-title fl-wrap">
                                                    <h3>Payment method</h3>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Cardholder's Name<i
                                                                class="far fa-user"></i></label>
                                                        <input type="text" placeholder="" value="Adam Kowalsky" />
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <label class="vis-label">Card Number <i
                                                                class="fal fa-credit-card-front"></i></label>
                                                        <input type="text" placeholder="xxxx-xxxx-xxxx-xxxx"
                                                            value="" />
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-3">
                                                        <label class="vis-label">Expiry Month<i
                                                                class="fal fa-calendar"></i></label>
                                                        <input type="text" placeholder="MM" value="" />
                                                    </div>
                                                    <div class="col-sm-3">
                                                        <label class="vis-label">Expiry Year<i
                                                                class="fal fa-calendar"></i></label>
                                                        <input type="text" placeholder="YY" value="" />
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <label class="vis-label">CVV / CVC *<i
                                                                class="fal fa-credit-card"></i></label>
                                                        <input type="password" placeholder="***" value="" />
                                                    </div>
                                                    <div class="col-sm-4">
                                                        <p style="padding-top:20px;">*Three digits number on the back of
                                                            your card</p>
                                                    </div>
                                                </div>
                                                <div class="log-separator fl-wrap"><span>or</span></div>
                                                <div class="soc-log fl-wrap">
                                                    <p>Select Other Payment Method</p>
                                                    <a href="#" class="paypal-log"> Pay With Paypal</a>
                                                </div>
                                                <span class="fw-separator"></span>
                                                <a href="#"
                                                    class="previous-form  back-form action-button    color2-bg">Back</a>
                                                <a href="#" class="action-button   color-bg">Confirm and
                                                    Pay</a>
                                            </fieldset>

                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!--   list-single-main-item end -->
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="cart-details-wrap fl-wrap">
                            <div class="cart-details-item-header">
                                <h3> Your Booking Cart</h3>
                            </div>
                            <!--cart-details  -->
                            <div class="cart-details fl-wrap block_box">
                                <!--cart-details_header-->
                                <div class="cart-details_header">
                                    <a href="#" class="widget-posts-img"><img src="images/all/1.jpg"
                                            class="respimg" alt=""></a>
                                    <div class="widget-posts-descr">
                                        <h4><a href="listing-single.html">Iconic Cafe</a></h4>
                                        <div class="geodir-category-location fl-wrap"><a href="#">40 Journal Square
                                                Plaza, NJ, USA</a></div>
                                        <div class="widget-posts-descr-link"><a href="listing.html">Restaurants </a> <a
                                                href="listing.html">Cafe</a></div>
                                    </div>
                                </div>
                                <!--cart-details_header end-->
                                <!--ccart-details_text-->
                                <div class="cart-details_text">
                                    <ul class="cart_list no-list-style">
                                        <li>Date <span>04.11.19</span></li>
                                        <li>Hour <span>5:30 PM</span></li>
                                        <li>Guests<span>2 Adults</span></li>
                                    </ul>
                                </div>
                                <!--cart-details_text end -->
                            </div>
                            <!--cart-details end -->
                            <!--cart-total -->
                            <div class="cart-total color2-bg fl-wrap">
                                <span class="cart-total_item_title">Total Cost</span>
                                <strong>$190</strong>
                            </div>
                            <!--cart-total end -->
                        </div>
                        <!--box-widget-item -->
                        <div class="box-widget-item fl-wrap">
                            <div class="banner-wdget fl-wrap">
                                <div class="overlay"></div>
                                <div class="bg" data-bg="images/bg/1.jpg"></div>
                                <div class="banner-wdget-content fl-wrap">
                                    <h4>Still need help in filling out the form ? Visit our help page. </h4>
                                    <a href="help.html" class="color-bg"> Visit now</a>
                                </div>
                            </div>
                        </div>
                        <!--box-widget-item end -->
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection