@extends('layouts.mobile')
@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-xs-12 padding-0">
                            <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>  {{ $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>
                                    <p><i class="fa fa-calendar" aria-hidden="true"></i> 22-06-2019</p>
                                </div>  

                                <div class="des">
                                    <p>
                                         {{ $item_detail[0]->item_des }}
                                    </p>
                                  
                                </div>
                                <div class="properties">
                                    <table>
                                        <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>
                                        
                                    </table>
                                </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-xs-12">
                            <div class="col-xs-12">
                                {!! Form::open(array('route' => 'booking.store','method'=>'POST','enctype'=>'multipart/form-data','id' => 'form_validate')) !!}
                                    <div class="row no-gutters">
                                        <div class="form-group">
                                            <input type="text" name="client_fullname" class="form-control client_fullname" placeholder="Your 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="Your 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="Your 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>
                                            {!!$action_block!!}
                                        </div>
                                    </div>
                                </form>
                            </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
@section('script')
    
@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
}

</style>