@extends('layouts.desktop')
@section('content')
   
<div class="wrapper">
    <div class="content">
        <div class="main-head contact">
            <div class="mask"></div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="pull-left">
                            <h3>PROJECT LIST</h3>
                        </div>
                        <div class="pull-right">
                            <ul>
                                <li><a href="">Home</a></li>
                                <li><a href=""><i class="fa fa-angle-double-right"></i></a></li>
                                <li><a href="#">Item Detail</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item-detail">
            <div class="container">
                <div class="row session">
                    
                    <div class="slider">
                        <div class="col-sm-8">
                            <div class="thum">
                                <div class="product-slider">
                                    <div id="carousel" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner">

                                              @php
                                        $img = explode('||',$item_detail[0]->item_img);
                                    @endphp
                                 
                                       @for($i=0; $i<8; $i++)
                                            @if($img[$i] != " ")
                                            <div class="item @if($i==0)active @else @endif"><img src="{{ asset('/assets/images/resize/525x300/'.$img[$i]) }}" alt=""> </div>
                                             @else

                                            @endif
                                        @endfor
                                        </div>
                                    </div>
                                    <div class="clearfix">
                                        <div id="thumbcarousel" class="carousel slide" data-interval="false">
                                            <div class="carousel-inner">
                                                <div class="item active">
                                                    @for($i=0; $i<8; $i++)
                                                @if($img[$i] != " ")
                                                <div data-target="#carousel" data-slide-to="{{$i}}" class="thumb"><img src="{{ asset('/assets/images/resize/525x300/'.$img[$i]) }}"></div>

                                           
                                                @else
                                                    
                                                @endif
                                            @endfor

                                                </div>
                                                <!-- /carousel-inner --> 
                                                <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a>
                                            </div>
                                                <!-- /thumbcarousel --> 
                                        </div>
                                    </div>
                                </div>
                                <!-- <img src="https://via.placeholder.com/525x300"> -->
                            </div>
                            <div class="description">
                                <h3>  Description </h3>
                                 

                                <div class="des">
                                    <p>
                                         {{ $item_detail[0]->item_des }}
                                    </p>
                                  
                                </div>

                                <div class="accessories">
                                    <ul>
                                         @if(!$assessories->isEmpty()) 
                                             @foreach($assessories as $value)
                                                    @foreach(explode(',', $item_detail[0]->item_accessories) as $info) 
                                                        @if($value->id == $info)
                                                             <li>{{$value->title}}</li>
                                                        @endif 
                                                    @endforeach
                                            @endforeach 
                                        @endif
                                        
                                    </ul>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="col-sm-12">
                                <div class="description">
                                    <h3>  {{ $item_detail[0]->item_title }}</h3>
                                    <h3>$ {{ number_format($item_detail[0]->item_price, 2) }}</h3>
                                    <ul class="including">
                                        <li><i class="fa fa-building" aria-hidden="true"></i>{{ $item_detail[0]->item_sq_fp }} sqft</li>
                                        <li><i class="fa fa-bed" aria-hidden="true"></i> {{ $item_detail[0]->item_bedroom }}</li>
                                        <li><i class="fa fa-home" aria-hidden="true"></i> {{ $item_detail[0]->item_parking }}</li>
                                        <li><i class="fa fa-bed" aria-hidden="true"></i> {{ $item_detail[0]->item_bathroom }}</li>
                                    </ul>
                                    <div class="note">
                                        <p><i class="fa fa-map-marker" aria-hidden="true"></i> {{ $item_detail[0]->address }}</p>
                                        
                                    </div>  
                                    <div class="des">
                                        <p><i class="fa fa-calendar" aria-hidden="true"></i> 22-06-2019</p>
                                    </div>
                                    <div class="properties">
                                        <table>
                                            <tr>
                                                <td class="col-1">Project </td>
                                                <td class="col-2">:</td>
                                                <td class="col-3">{{ $item_detail[0]->project_name }}</td>
                                            </tr>
                                            <tr>
                                                <td class="col-1">Category </td>
                                                <td class="col-2">:</td>
                                                <td class="col-3">{{ $item_detail[0]->category_name }}</td>
                                            </tr>
                                            <tr>
                                                <td class="col-1">Item Code</td>
                                                <td class="col-2">:</td>
                                                <td class="col-3">{{ $item_detail[0]->item_name }}</td>
                                            </tr>
                                            <tr>
                                                <td class="col-1">Item Size</td>
                                                <td class="col-2">:</td>
                                                <td class="col-3">{{ $item_detail[0]->item_size }}</td>
                                            </tr>
                                            <tr>
                                                <td class="col-1">Street No</td>
                                                <td class="col-2">:</td>
                                                <td class="col-3">{{ $item_detail[0]->item_street }}</td>
                                            </tr>
                                            <tr>
                                                <td class="col-1">House No</td>
                                                <td class="col-2">:</td>
                                                <td class="col-3">{{ $item_detail[0]->item_house }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="description">
                                    {{-- <h3>  Form Booking</h3>
                                    {!! Form::open(array('route' => 'booking.store','method'=>'POST','enctype'=>'multipart/form-data','id' => 'form_validate')) !!}
                                        <div class="form-booking">
                                            <div class="form-group">
                                                <input type="text" name="client_fullname" class="form-control client_fullname" placeholder="Client Name *" required />
                                            </div>
                                            <div class="form-group">
                                                <select class="form-control select2 client_gender " name="client_gender" required>
                                                    <option hidden value="">Gender</option>
                                                    <option value="1">Male</option>
                                                    <option value="2">Female</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <input type="text" name="client_phone1" class="form-control number-only client_phone1" placeholder="Client Phone *" required />
                                            </div>
                                            <div class="form-group">
                                                <span class="text text-danger message"​ style="display: none;">Your balance is not enough</span>
                                                <input type="text" name="sale_receive" class="form-control number-only sale_receive" placeholder="Deposit Amount ($)*" required />
                                                <input type="hidden" class="number-only balance"value="{{$balance}}"/>
                                            </div>
                                            <div class="form-group">
                                                <textarea name="client_address" class="form-control client_address" placeholder="Client address *"></textarea>
                                            </div>
                                            <span>
                                                <input type="hidden" name="saledetail_itemid" value="{{$item_detail[0]->id}}">
                                                <input type="hidden" name="sale_item_code"    value="{{$item_detail[0]->item_name}}">
                                                <input type="hidden" name="saledetail_price"  value="{{$item_detail[0]->item_price}}">
                                                <input type="hidden" name="project_type"      value="{{$item_detail[0]->type}}">
                                                <input type="hidden" name="project_commission"      value="{{$item_detail[0]->commission}}">
                                                <input type="hidden" name="project_condition"      value="{{$item_detail[0]->condition}}">
                                            </span>
                                            <div class="form-group">
                                                <button type="submit" class="theme-btn btn-style-one">Book Now</button>
                                            </div>
                                        </div>
                                    </form> --}}
                                    <section class="form-booking">       
                                        <div class="form_warp">           
                                            <h1>Form Booking</h1>
                                            <div class="box">
                                                {!! Form::open(array('route' => 'booking.store','method'=>'POST','enctype'=>'multipart/form-data','id' => 'form_validate')) !!}
                                                    <div>
                                                        <input type="text" name="client_fullname" required="">
                                                        <label>Customer NAME</label>
                                                    </div>
                                                    <div>
                                                        <div class="form-group">
                                                            <select class="form-control select2 client_gender " name="client_gender" required>
                                                                <option hidden value="">Gender</option>
                                                                <option value="1">Male</option>
                                                                <option value="2">Female</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <input type="text" name="client_phone1" class="number-only" required />
                                                        <label>Phone Number</label>
                                                    </div>
                                                    <div>
                                                        <span class="text text-danger message"​ style="display: none;">Your balance is not enough</span>
                                                        <input type="text" name="sale_receive" class="form-control number-only sale_receive" required />
                                                        <input type="hidden" class="number-only balance"value="{{$balance}}"/>
                                                        <label>Deposit Amount ($)*</label>
                                                    </div>
                                                    <div>
                                                        <textarea name="client_address" placeholder="Customer Address"></textarea>
                                                    </div>
                                                    <div>
                                                        <span>
                                                            <input type="hidden" name="saledetail_itemid" value="{{$item_detail[0]->id}}">
                                                            <input type="hidden" name="sale_item_code"    value="{{$item_detail[0]->item_name}}">
                                                            <input type="hidden" name="saledetail_price"  value="{{$item_detail[0]->item_price}}">
                                                            <input type="hidden" name="project_type"      value="{{$item_detail[0]->type}}">
                                                            <input type="hidden" name="project_commission"      value="{{$item_detail[0]->commission}}">
                                                            <input type="hidden" name="project_condition"      value="{{$item_detail[0]->condition}}">
                                                        </span>
                                                        <input type="submit" class="orange_bg" value="Book Now"><br/>
                                                        {!!$action_block!!}
                                                    </div>
                                                {!! Form::close() !!}
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <div class="adv">
                                <!-- <div class="thum">
                                    <img src="https://via.placeholder.com/350x240">
                                </div>
                                <div class="thum">
                                    <img src="https://via.placeholder.com/350x440">
                                </div>
                                <div class="thum">
                                    <img src="https://via.placeholder.com/350x300">
                                </div> -->
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>



@endsection

<style type="text/css">
.product-slider #carousel { 
    margin: 0;
}

.product-slider #thumbcarousel .item {
    text-align: center; 
}

.product-slider #thumbcarousel .item .thumb { 
    border: 2px solid #cecece; 
    width: 20%; 
    margin: 5px; 
    display: inline-block; 
    vertical-align: middle; 
    cursor: pointer; 
    max-width: 50px; }

.product-slider #thumbcarousel .item .thumb:hover { 
    border-color: #1089c0; 
}

.product-slider .item img { 
    width: 100%; 
    height: auto; 
}

.carousel-control { 
    color: #0284b8; 
    text-align: center; 
    text-shadow: none; 
    font-size: 30px; 
    width: 30px; 
    height: 0px; 
    line-height: 45px; 
    /* line-height: 20px;  */
    top: 23%; 
}
.carousel-control:hover, 
.carousel-control:focus, 
.carousel-control:active { 
    color: #333; 
}

.carousel-caption, 
.carousel-control .fa { 
    color: #0284b8;
    font: normal normal normal 40px/45px FontAwesome; 
}
.carousel-control { 
    background-color: rgba(0, 0, 0, 0); 
    bottom: auto; 
    font-size: 20px; 
    left: 0; 
    position: absolute; 
    top: 30%; 
    width: auto; 
}

.carousel-control.right, 
.carousel-control.left { 
    background-color: rgba(0, 0, 0, 0); 
    background-image: none; 
}
.carousel-caption, .carousel-control .fa{
    color: #f58020
}





.form-booking .form_warp {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
    margin-top: 50px;    
    background-color: #fff;
    background-color: #fff;
    border: 1px solid transparent;
    border-color: #ddd;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}


.form-booking .form_warp h1 {
    font-size: 34px;
    font-weight: 400;
    color: #f58020;
    font-family: 'TitilliumWeb';
    margin-bottom: 20px;
}

/*++++++++++++++++++++++++++++++ 
      BASIC CONTACT FORM CSS
 ++++++++++++++++++++++++++++++*/


.form-booking .box input[type="submit"] {
    clear: both;
    display: block;
    height: auto;
    padding: 0;
    width: auto;
    margin: 0 auto;
    padding: 11px 50px;
    border: solid 0px;
    border-radius: 25px;
    box-shadow: none;    
    color: #fff;
    font-family: 'TitilliumWeb';
    transition: all .3s ease-in;
    text-transform: uppercase;
      cursor: pointer;
    border: none;
}

.form-booking .box input[type="submit"]:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    transition: all .3s ease-in;
}

.form-booking .box input {
    padding: 10px 0;
    margin-bottom: 30px;
}
.form-booking .box textarea {
    height: 80px;
    padding: 10px;
    margin-bottom: 40px;
}
.form-booking .box input, .box textarea {
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    padding: 10px;
    border: none;
    color: black;
    border-radius: 4px;
    border: 1px solid #999;
    font-family: 'TitilliumWeb';
}
.form-booking .box textarea {
    margin-bottom: 30px;
    color: black;
}

.form-booking .box form div {
    position: relative;
}
.form-booking .box form div label {
    position: absolute;
    top: 10px;
    color: #999;
    left: 15px;
    transition: .5s;
    background-color: #fff;
    font-family: 'TitilliumWeb';
    pointer-events: none;
    font-weight: 400;
}
.form-booking .box input:focus ~ label,
.form-booking .box textarea:focus ~ label,
.form-booking .box input:valid ~ label
{
    top: -10px;   
    color: #8855cf;
    font-size: 14px;
    font-weight: 400;
}
.form-booking .box input:focus
{
   border:solid 1px #8855cf;       
}
.form-booking .box textarea label {
    top: -12px;
    left: 0px;
    color: #999;
    font-size: 14px;
    font-weight: bold;
}

.form-booking .orange_bg {
    background-color: #f58020;
}


</style>