<?php $__env->startSection('content'); ?>
<div  id="app">
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">
    			Contacts
    		</h1>
    	</div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <?php if(session('status')): ?>
			<div class="alert alert-success">
				<?php echo e(session('status')); ?>

			</div>
			<?php endif; ?>
			<?php if(count($errors) > 0): ?>
				<div class="alert alert-danger">
					<strong>Whoops!</strong> There were some problems with your input.<br><br>
					<ul>
						<?php foreach($errors->all() as $error): ?>
							<li><?php echo e($error); ?></li>
						<?php endforeach; ?>
					</ul>
				</div>
			<?php endif; ?>
			<div class="content">
				<div class="row">
					<div class="col-lg-12">
						<div class="panel panel-default">
						    <div class="panel-heading">
						        Contacts <a><i class="fa fa-plus fa-fw" style='float: right; cursor: pointer;' data-toggle="modal" data-target="#addModal" title="Add Contact" @click="refresh()"></i></a>
						    </div>

						    <div class="panel-body">
						        <div class="dataTable_wrapper">
						            <table class="table table-striped table-bordered table-hover" id="dataTables-example1">
						                <thead>
						                    <tr>
						                        <th>Name</th>
						                        <th>Title</th>
						                        <th>Company</th>
						                        <th>Properties</th>
						                        <th>Phone Number</th>
						                        <th>Email</th>
						                        <th>Action</th>
						                    </tr>
						                </thead>
						                <tbody>
						                    <?php $count = 0; ?>
						                    <?php foreach($contacts as $contact): ?>
						                    <?php $count++; ?>
						                    <?php if($count % 2 == 1): ?>
						                    <tr class="odd">
						                    <?php else: ?>
						                    <tr class="even">
						                    <?php endif; ?>
						                        <td>
					                            <?php if($contact->name): ?>
					                                <?php echo e($contact->name); ?>

					                            <?php else: ?>
					                            	--
					                            <?php endif; ?>
					                            </td>
					                            <td>
					                            <?php if($contact->title): ?>
					                                <?php echo e($contact->title); ?>

					                            <?php else: ?>
					                            	--
					                            <?php endif; ?>
					                            </td>
					                            <td>
					                            <?php if($contact->company): ?>
					                                <?php echo e($contact->company); ?>

					                            <?php else: ?>
					                            	--
					                            <?php endif; ?>
					                            </td>
					                            <td>
					                            <?php if($contact->properties): ?>
					                                <?php echo e($contact->properties); ?>

					                            <?php else: ?>
					                            	--
					                            <?php endif; ?>
					                            </td>
					                            <td>
					                            <?php if($contact->phone_number): ?>
					                                <a href="tel:<?php echo e($contact->phone_number); ?>"><?php echo e($contact->phone_number); ?></a>
					                            <?php else: ?>
					                            	--
					                            <?php endif; ?>
					                            </td>
					                            <td>
					                            <?php if($contact->email): ?>
					                                <a href="mailto:<?php echo e($contact->email); ?>"><?php echo e($contact->email); ?></a>
					                            <?php else: ?>
					                            	--
					                            <?php endif; ?>
					                            </td>
					                            <td style="text-align: center;">
					                                <a>
					                                    <i class="fa fa-edit fa-fw edit-contact-button" style="text-align: left;" data-toggle="modal" data-id="<?php echo e($contact); ?>" data-target="#editModal" @click="refresh()"></i>
					                                </a>
					                                &nbsp &nbsp
	                                            	<form style="display: inline;" role="form" method="POST" action="<?php echo e(url('admin/properties/contact/delete')); ?>" 
														onsubmit="return confirm('Are you sure you want to remove contact (<?php echo e($contact->name); ?>)?')">
														<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
														<input type="hidden" name="contactID" value="<?php echo e($contact->id); ?>">
														<button type="submit" style="border: none; background-color: white; padding: 0;">
	                                            			<i class="fa fa-trash-o fa-fw" style="text-align: right;"></i>
	                                            		</button>
	                                            	</form>
					                            </td>
					                        </tr>
					                        <?php endforeach; ?>
						                </tbody>
					                </table>
					            </div>
					        </div>
					    </div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Add Contact Modal -->
	<div id="addModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Create New Contact</h4>
				</div>
				<form id="theForm" class="form-horizontal" style="margin-bottom: 0px;" role="form" method="POST" enctype="multipart/form-data" action="<?php echo e(url('admin/properties/contact/add')); ?>">
					<div class="modal-body">
						<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
						<input type="hidden" name="vueData" :value="allJson">

						<div class="form-group">
							<div class="col-sm-12 col-md-8 morePadding morePadding2" onclick="inputFocus('name')">
								<input type="text" class="form-control" id="name" name="name" value="<?php echo e(old('name')); ?>" title="Name">
								<span id="name-label" class="label-text">Name*</span>	
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12 col-md-8 morePadding morePadding2" onclick="inputFocus('title')">
								<input type="text" class="form-control" id="title" name="title" value="<?php echo e(old('title')); ?>" title="Title">
								<span id="title-label" class="label-text">Job Title</span>	
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-12 col-md-8 morePadding morePadding2" onclick="inputFocus('company')">
								<input type="text" class="form-control" id="company" name="company" value="<?php echo e(old('company')); ?>" title="Company">
								<span id="company-label" class="label-text">Company</span>	
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-12 col-md-6 morePadding morePadding2" onclick="inputFocus('phone_number')">
								<input type="text" class="form-control" id="phone_number" name="phone_number" value="<?php echo e(old('phone_number')); ?>" title="Phone Number">
								<span id="phone_number-label" class="label-text">Phone Number</span>	
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-12 col-md-12 morePadding morePadding2" onclick="inputFocus('email')">
								<input type="text" class="form-control" id="email" name="email" value="<?php echo e(old('email')); ?>" title="Email">
								<span id="email-label" class="label-text">Email</span>	
							</div>
						</div>

						<div class="form-group">

							<div class="col-sm-12 col-md-6 morePadding morePadding2">
								<select class="form-control" title="Properties" v-model="selected_properties[0]">
									<option id="property_option" value=0>Select One</option>
										<option v-for="property_option in property_options" v-if="validProperty(0,property_option.id)" v-bind:value="property_option.id">
											{{property_option.name}}
										</option>
								</select>
								<span id="properties-label" class="xlabel-text hasValue">Assigned Properties</span>	
							</div>

							<div v-for="(field,index) in property_fields">
								<div class="col-sm-12 col-md-6 morePadding morePadding2" style="">
									
									<select class="form-control" v-model="selected_properties[index+1]" title="Properties" style="width:80%; display:inline;">
										<option id="property_option" value=0>Select One</option>
										
										<option v-for="property_option in property_options" v-if="validProperty(index+1,property_option.id)" v-bind:value="property_option.id">
											{{property_option.name}}
										</option>

									</select>

									<label class="control-label"><i class="fa fa-times-circle" style="float: left; padding-left: 5px;" @click="remove(field, index+1)" style="cursor: pointer;" title="Remove"></i></label>
								</div>
							</div>

						</div>
						
						<button type="button" class="btn btn-primary" @click="add()">
							Add Property
						</button>

					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary" style="float: right;">
							Create
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- Edit Contact Modal -->
	<div id="editModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">Edit Contact</h4>
				</div>
				<form id="theForm" class="form-horizontal" style="margin-bottom: 0px;" role="form" method="POST" enctype="multipart/form-data" action="<?php echo e(url('admin/properties/contact/edit')); ?>">
					<div class="modal-body">
						<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
						<input type="hidden" id="edit-id" name="contactID" value="">
						<input type="hidden" name="vueData" :value="allJson">
						<input type="hidden" name="fromContact" :value="1">

						<div class="form-group">
							<div class="col-sm-12 col-md-8 morePadding morePadding2" onclick="inputFocus('name')">
								<input type="text" class="form-control" id="edit-name" name="name" value="<?php echo e(old('name')); ?>" title="Name">
								<span id="name-label" class="label-text">Name*</span>	
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-12 col-md-8 morePadding morePadding2" onclick="inputFocus('title')">
								<input type="text" class="form-control" id="edit-title" name="title" value="<?php echo e(old('title')); ?>" title="Title">
								<span id="title-label" class="label-text">Job Title</span>	
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-12 col-md-8 morePadding morePadding2" onclick="inputFocus('company')">
								<input type="text" class="form-control" id="edit-company" name="company" value="<?php echo e(old('company')); ?>" title="Company">
								<span id="company-label" class="label-text">Company</span>	
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-12 col-md-6 morePadding morePadding2" onclick="inputFocus('phone_number')">
								<input type="text" class="form-control" id="edit-phone_number" name="phone_number" value="<?php echo e(old('phone_number')); ?>" title="Phone Number">
								<span id="phone_number-label" class="label-text">Phone Number</span>	
							</div>
						</div>
						<div class="form-group">

							<div class="col-sm-12 col-md-12 morePadding morePadding2" onclick="inputFocus('email')">
								<input type="text" class="form-control" id="edit-email" name="email" value="<?php echo e(old('email')); ?>" title="Email">
								<span id="email-label" class="label-text">Email</span>	
							</div>
						</div>

						<div class="form-group">

							<div class="col-sm-12 col-md-6 morePadding morePadding2">
								<select class="form-control" title="Properties" v-model="selected_properties[0]">
									<option id="property_option" value=0>Select One</option>
										<option v-for="property_option in property_options" v-if="validProperty(0,property_option.id)" v-bind:value="property_option.id">
											{{property_option.name}}
										</option>
								</select>
								<span id="properties-label" class="xlabel-text hasValue">Assigned Properties</span>	
							</div>

							<div v-for="(field,index) in property_fields">
								<div class="col-sm-12 col-md-6 morePadding morePadding2" style="">
									
									<select class="form-control" v-model="selected_properties[index+1]" title="Properties" style="width:80%; display:inline;">
										<option id="property_option" value=0>Select One</option>
										
										<option v-for="property_option in property_options" v-if="validProperty(index+1,property_option.id)" v-bind:value="property_option.id">
											{{property_option.name}}
										</option>

									</select>

									<label class="control-label"><i class="fa fa-times-circle" style="float: left; padding-left: 5px;" @click="remove(field, index+1)" style="cursor: pointer;" title="Remove"></i></label>
								</div>
							</div>

						</div>
						
						<button type="button" class="btn btn-primary" @click="add()">
							Add Property
						</button>

					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary" style="float: right;">
							Save
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<?php $__env->stopSection(); ?>
	<style>
		input:focus+.label-text, input:not([value=" "])+.label-text, select+.label-text {
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		input+.label-text, select+.label-text, .hasValue{
		    font-size: 20px;
		    font-weight: 400;
		    position: absolute;
		    top: 0;
		    left: 0;
		    display: block;

		    padding-left: 20px;
		    padding-top: 5px;
		    padding-bottom: 5px;
		    opacity: .8;
		    transition: all .3s ease-out,opacity 150ms ease .3s;
		    -webkit-transform: translateY(0) scale(1);
		    transform: translateY(0) scale(1);
		    -webkit-transform-origin: left top;
		    transform-origin: left top;
		}
		span {
		    font-size: 1rem;
		    font-weight: 600;
		    display: block;
		    padding-top: .25rem;
		    padding-bottom: .25rem;
		    margin-left: 1rem;
		}
		.hasValue
		{
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		

		@media (max-width: 959px)
		{
			.morePadding {
			    margin-top: 1.5em;
			}
		}

		@media (min-width: 960px)
		{
			.morePadding {
			    margin-top: 1em;
			}
		}

.modal{
	padding-top: 100px;
}

</style>

<?php $__env->startSection('extras'); ?>
	<!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>

    <style>
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

    </style>
<?php $__env->stopSection(); ?>


<?php $__env->startSection('bottom'); ?>

    <!-- DataTables JavaScript -->
	<script type="text/javascript" src="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
    var table =    $('#dataTables-example1').dataTable( {
					"pageLength": 50,
					"order": [ 0, 'desc' ],
					"stateSave" : false,
					"scrollX" : window.innerWidth < 800 ? true : false
        } );  
    });

    
    if ( typeof $.fn.dataTable == "function" && typeof $.fn.dataTableExt.fnVersionCheck == "function" && $.fn.dataTableExt.fnVersionCheck('1.9.2')/*older versions should work too*/ )
    {
        $.fn.dataTableExt.oApi.clearSearch = function ( oSettings )
        {
     
            var table = this;
             
            //no image file needed, css embedding must be supported by browser
            var clearSearch = $('<i class="fa fa-times-circle-o fa-fw" style="vertical-align:text-bottom;cursor:pointer;color: gray;"></i>');
            $(clearSearch).click( function ()
                    {
                          table.fnFilter('');
                    });
            $(oSettings.nTableWrapper).find('div.dataTables_filter').append(clearSearch);
            $(oSettings.nTableWrapper).find('div.dataTables_filter label').css('margin-right', '-16px');//16px the image width
            $(oSettings.nTableWrapper).find('div.dataTables_filter input').css('padding-right', '16px');
        }
     
        //auto-execute, no code needs to be added
        $.fn.dataTable.models.oSettings['aoInitComplete'].push( {
            "fn": $.fn.dataTableExt.oApi.clearSearch,
            "sName": 'whatever'
        } );
    }
    </script> 


<script>
	$(document).on("click", ".edit-contact-button", function () {
    	var myContact = $(this).data('id');
    	if(myContact.name)
    		document.getElementById("edit-name").value = myContact.name;
    	else
    		document.getElementById("edit-name").value = '';

    	if(myContact.title)
    		document.getElementById("edit-title").value = myContact.title;
    	else
    		document.getElementById("edit-title").value = '';

    	if(myContact.company)
    		document.getElementById("edit-company").value = myContact.company;
    	else
    		document.getElementById("edit-company").value = '';

    	if(myContact.phone_number)
    		document.getElementById("edit-phone_number").value = myContact.phone_number;
    	else
    		document.getElementById("edit-phone_number").value = '';

    	if(myContact.email)
    		document.getElementById("edit-email").value = myContact.email;
    	else
    		document.getElementById("edit-email").value = '';

    	document.getElementById("edit-id").value = myContact.id;
    	
    	app.populate(myContact.property_ids);
	});
</script>

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			selected_properties: [0],
			property_fields:[0],
			property_options: []
		},
		methods: {
			add: function(){
				this.property_fields.push({
					property_id:''
				});
				this.selected_properties.push(0);
			},
		    remove: function(field, index){
		    	this.selected_properties.splice(index,1);
		    	this.property_fields.splice(this.property_fields.indexOf(field),1);
		    },
		    populate: function(prop_ids){
		    	if(prop_ids){
		    		this.property_fields.push({
						property_id:''
					});
					this.selected_properties[0] = prop_ids[0];
		    		for (i = 1; i < prop_ids.length; i++) {
					    this.property_fields.push({
							property_id: prop_ids[i]
						});
						this.selected_properties.push(prop_ids[i]);
					}
					this.selected_properties.splice(i,1);
		    		this.property_fields.splice(this.property_fields.indexOf(i),1);
		    	}
		    },
		    refresh: function(){
		    	this.selected_properties = [0];
		    	this.property_fields = [];
		    	this.property_options = Object.values(<?php echo json_encode($property_options); ?>);
		    },
		    init: function(){
		    	this.property_options = Object.values(<?php echo json_encode($property_options); ?>);
		    },
		    validProperty: function(field_index, property_id){
		    	for(i=0;i<this.selected_properties.length;i++){
		    		if(this.selected_properties[i]==property_id){
		    			if(i!==field_index){
		    				return false;
		    			}
		    		}
		    	}

		    	return true;
		    }
		},
		mounted(){
			this.init();
		},
		computed: {
			allJson: function () {
				return this.selected_properties;
			}
		}
	})
</script>
<?php $__env->stopSection(); ?>






<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>