@extends('layouts.web')
@section('content')
<nav class="navbar navbar-default navbar-fixed-top stuck">
	<div class="container">
    	@include('include.navbar')
    </div>
</nav>
<div class="navbar-fixed-padding-top">
@include('include.subnavbar')
    <div class="container">
    	@include('partials.alerts')
    	<div class="breadcrumb-block">
   		<h3><strong>My Place</strong></h3>
        </div>
            <div id="bidding-list" class="myplace-list">   
                <form>
                    
                    <!--<table class="table vmiddle">
                        <thead>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Image</th>
                            <th>Area</th>
                            <th>Bedrooms</th>
                            <th>Washrooms</th>
                            <th>Monthly Rent</th>
                            <th>Help</th>
                        </thead>-->
                        <div class="row"> 
                            @foreach($properties as $property)
                            <div class="col-md-6">
                            	<div class="white-box white-box-shadow pos-rel">                                    
                                <div class="media">
                                    @if(empty($property['property']['media']))
                                        <div class="media-left myplaceimg" style="background-image:url({{ url('/').'/images/default.jpg' }});">
                                            <div></div>
                                        </div>
                                    @else
                                        <div class="media-left myplaceimg" style="background-image:url({{ URL::asset($property['property']['media'][0]['path']) }});">
                                            <div></div>
                                        </div>
                                    @endif
                                	
                                    <div class="media-body">
                                    	<h3 class="mt-0 mb-0"><strong>{{$property['property']['name']}}</strong></h3>
                                        <p class="text-muted">{{$property['property']['address']}}</p>
                                        <hr/>
                                        <div class="row text-center">
                                            <div class="col-xs-4"><h4 class="mt-0 mb-0"><strong>{{$property['property']['bedroom_size']['name']}}</strong></h4><div><small class="text-muted">bedrooms</small></div></div>
                                            <div class="col-xs-4"><h4 class="mt-0 mb-0"><strong>{{$property['property']['washroom_size']['name']}}</strong></h4><div><small class="text-muted">baths</small></div></div> 
                                            <div class="col-xs-4"><h4 class="mt-0 mb-0"><strong>{{$property['property']['area']}}</strong></h4><div><small class="text-muted">size</small></div></div> 
                                        </div>
                                        <hr/>
                                        <h4><strong>{{$property['property']['monthly_rent']}}</strong><small class="text-muted"> AED / Month</small></h4>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <div class="visible-xs pt-5">&nbsp;</div>
                                        <a href="#supportModal" data-toggle="modal" data-prop="{{$property['property']['id']}}" data-bid="{{$property['id']}}" class="support btn btn-purple app-edit-bid">Support Request</a>
                                    </div>
                                </div>

                            </div>
                            @endforeach
                        </div>
                    <!--</table>-->
                </form>
            </div>
    </div>
</div>

<div class="modal fade" id="supportModal">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Support Request</h4>
        </div>
        {{ Form::open(['url' => 'users/support', 'id' => 'supportrequest', 'method'=>'post']) }}
        <div class="modal-body">
            <div class="row">
                <div class="col-xs-12">
                	<div class="form-group">
                    <label class="form-label">Subject<em class="text-danger">*</em></label>
                    <input type="text" class="form-control" id="subject" name="subject">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                	<div class="form-group">
                    <label class="form-label">Description<em class="text-danger">*</em></label>
                    <textarea type="text" class="form-control" id="desc" name="description"></textarea>
                    </div>
                </div>
            </div>
            <input type="hidden" id="property_id" name="property_id" value="">
            <input type="hidden" id="bid_id" name="bid_id" value="">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-purple">Submit</button>
        </div>
        {{ Form::close() }}
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@include('include.footer')
@include('include.scripts')

<script>
    jQuery(document).on('click', '.support', function(){
        var property_id = jQuery(this).data('prop');
        var bid_id = jQuery(this).data('bid');
        $('#property_id').val(property_id);
        $('#bid_id').val(bid_id);
        $('#supportModal').modal('show')
    });
</script>
<script>
$("#supportrequest").validate({
	rules: {
		subject: {
			required: true
		},
		description: {
			required: true
		}
	},
	messages: {
		subject: {
			required: "Required"
		},
		description: {
			required: "Required"
		}
	}
});
</script>
@endsection