@extends('layouts.admin')
@section('content')
<div class="container-fluid">
    <div class="row">
        @include('include.admin-sidebar')
        <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2" id="page-wrapper">
        	<div class="page-title">
            	User Management
                <div class="page-title-buttons">
                    <a href="#add-user" class="add-user  btn btn-purple btn-sm" data-toggle="modal"><i class="fa fa-plus"></i><span class="hidden-xs"> Add User</span></a>
                </div>
            </div>
            @include('partials.alerts')
            {{ Form::open(['url' => 'admin/users', 'method'=>'post']) }} 
            <div class="widget p-md pb-0">
            	<div class="row">
                	<div class="col-lg-4 col-md-6 col-sm-12">
                    	<div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' class="form-control bottom-border-line inputNoEnter" name="start_date" Placeholder="Added Date From" value="{{ $start_date }}" id="start_date"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>                       
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <div class='input-group date' id='datetimepicker2'>
                                        <input type='text' class="form-control bottom-border-line inputNoEnter" name="end_date" Placeholder="Added Date To" value="{{ $end_date }}" id="end_date"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>                       
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 col-md-6 col-sm-6">
                    	<div class="form-group">
                        <select class="form-control input-sm" name="user_id" id="search_user_id">
                            <option value="0">All Users</option>
                                @foreach($all_users as $user)
                                    <option value="{{$user['id']}}">{{ $user['firstname'].' '. $user['lastname']. ' - '.$user['email'] }}</option>
                                @endforeach
                        </select>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-6">
                    	<div class="form-group">
                        <select class="form-control" name="user_type" id="search_user_type_id">
                            <option value="0">All User Type</option>
                                @foreach($user_types as $key=>$value)
                                    <option value="{{$key}}">{{ $value }}</option>
                                @endforeach
                        </select>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-6">
                    	<div class="form-group">
                        <select class="form-control" name="user_status" id="user_status">
                            <option value="">All Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        </div>
                    </div>                                                                 
                    
                    <div class="col-md-6 col-sm-12">
                        <div class="form-group form-group-buttons">
                            <button type="submit" class="btn btn-sm btn-primary" onclick="return checkFields()">Search</button>
                            <a href="{{ url('admin/users') }}" class="btn btn-sm btn-primary-outline">View All</a>
                            
                        </div>
                    </div>
                </div>
            </div>
            {{Form::close()}}
            @if(sizeof($users))
            <div class="widget p-md">
                <div class="text-right">
                    <a href="{{ url('admin/export-users/'.$user_id.'/'.$user_type_id.'/'.$start_date.'/'.$end_date.'/'.$status)}}" class="btn btn-sm btn-warning"><i class="fa fa-file-excel-o"></i> Export to Excel</a>
                </div>
                <hr/>
            	<div class="table-responsive">
                    <table class="table table-striped table-nowarp" cellpadding="0" cellspacing="0" border="0" id="brandstable">
                        <thead>
                            <tr>
                                <th>@sortablelink('id','ID')</th>
                                <th>@sortablelink('firstname','First Name')</th>
                                <th>Last Name</th>
                                <th>Email Address</th>
                                <th>Contact Number</th>
                                <th>Verified?</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>DOB</th>
                                <th>Bio</th>
                                <th>Emirates Id Expiration Date</th>
                                <th>User Type</th>
                                <th>User Status</th> 
                                <th>Added On</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $user)
                            <tr>
                                <td> {{ $user['id'] }} </td>
                                <td>{{ $user['firstname'] }}</td>
                                <td>{{ $user['lastname'] }} </td>
                                <td>{{ $user['email'] }} </td>
                                <td>+{{ $user['country_code'] }}{{ $user['mobile'] }} </td>
                                <td>@if($user['is_mobile_verified'] == 1) Yes @else No @endif </td>
                                <td> {{ $user['address'] }} </td>
                                <td> {{ $user['city'] }} </td>                                
                                <td> {{ $user['dob'] }} </td>
                                <td> <a href="#bioModal" data-toggle="modal" class="bio" data-bio="{{ $user['short_bio'] }} "><i class="fa fa-file-text-o"></i> </a></td> 
                                <td> {{ (!empty($user['emirates_id_expiration_date'])) ? date("j F, Y", strtotime($user['emirates_id_expiration_date'])) : '' }} </td>                                                             
                                <td>@if($user['user_type_id'] == 1) Admin @endif
                                     @if($user['user_type_id'] == 2) Owner @endif
                                     @if($user['user_type_id'] == 3) Tenant @endif
                                </td>
                                <td>@if($user['status'] == 1) Active @else Inactive @endif </td>
                                <td> {{ $user['created_at'] }} </td>
                                <td class="text-right actions-icons">
                                    <a href="#editUserblk" data-toggle="modal" data-id="{{ $user['id'] }}" data-first="{{ $user['firstname'] }}"
                                    data-last="{{ $user['lastname'] }}" data-dob="{{ $user['dob'] }}" data-shortbio="{{ $user['short_bio'] }}" data-address="{{ $user['address'] }}" data-mobile="{{ $user['mobile'] }}" data-verified="{{ $user['is_mobile_verified'] }}" data-type="{{ $user['user_type_id'] }}" data-email="{{ $user['email'] }}" data-city="{{ $user['city'] }}" data-status="{{ $user['status'] }}" class="edit-user btn btn-sm font-size-12 btn-link p-0">View/Edit</a>
                                </td>
                                <td> <a href="#showDocument" data-toggle="modal" data-user-name="{{ $user['firstname'].' '.$user['lastname'] }}" data-document="{{ $user['document'] }}" data-facebook="{{ $user['facebook_profile'] }}" data-linkedin="{{ $user['linkedin_profile'] }}" data-passport="{{ $user['passport'] }}" class="document btn btn-sm font-size-12 btn-link p-0">Info</a> </td> 
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>                
                <!-- {{ $users->appends(['user_id' => $user_id, 'status'=> $status, 'user_type_id'=>$user_type_id, 'start_date'=>$start_date, 'end_date'=>$end_date])->links() }} -->
                {{ $users->appends(\Request::except('page'))->render() }}
                <div class="paging">
                Records {{ $users->firstItem() }} - {{ $users->lastItem() }} of {{ $users->total() }}
                </div>
            </div>
            @else
                {{ 'No records to display' }}
            @endif
        
        </div>
        
        <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2 footer text-center">2017 &copy; Bid2Rent</div>
        
    </div>
</div>
<!-- For showing Tenant Note -->
<div class="modal fade" id="bioModal">
  <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">Bio</h4>
      </div>
      {{ Form::open() }}
      <div class="modal-body">
        <p id="bio"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      {{ Form::close() }}
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 


<!-- Modal -->
<div class="modal fade" id="editUserblk">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times-circle"></i></button>
            	<h4 class="modal-title">Edit User</h4>
            </div>
            {{ Form::open(['url' => 'admin/editUser', 'id'=>'edituser', 'method'=>'post']) }}
            <div class="modal-body">
            	<div class="row">
                	<div class="col-md-2 col-sm-2">
                        <div class="form-group">
                            <label class="text-muted">User Id</label>
                            <p><span id="useridlbl"></span></p>
                        </div>
                    </div>
                    <div class="col-md-5 col-sm-5">
                        <div class="form-group">
                            <label class="text-muted">Email Address</label>
                            <p><span id="emaillbl"></span></p>
                        </div>
                    </div>
                    <div class="col-md-5 col-sm-5">
                        <div class="form-group">
                            <label class="text-muted">Date Of Birth</label>
                            <p><span id="doblbl"></span></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                	<div class="col-xs-12">
                        <div class="">
                            <label class="text-muted">Bio</label>
                            <p><span id="shortbiolbl"></span></p>
                        </div>
                    </div>
                </div>
                <hr/>
            	<div class="row">
                    <div class="col-md-6 col-sm-6">
                    	<div class="form-group">
                        <label class="text-muted">First Name<em class="text-danger">*</em></label>
                        <input type="text" class="form-control" name="firstname" id="firstname" value="" >
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                    	<div class="form-group">
                        <label class="text-muted">Last Name<em class="text-danger">*</em></label>
                        <input type="text" class="form-control" name="lastname" value="" id="lastname" maxlength="80" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3 col-sm-2 pr-0">
                    	<div class="form-group">
                        <label class="text-muted">Code</label>
                        <input type="text" class="form-control" name="code" value="971"  id="code" maxlength="3" readonly />
                        </div>
                    </div>
                    <div class="col-xs-9 col-sm-4">
                    	<div class="form-group">
                        <label class="text-muted">Contact Number<em class="text-danger">*</em></label>
                        <input type="text" class="form-control" name="mobile" value=""  id="mobile" maxlength="12" />
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6"> 
                    	<div class="form-group">
                        <label class="text-muted">City<em class="text-danger">*</em></label>
                        <input type="text" class="form-control" name="city" value="" id="city" />
                        </div>
                    </div>
                    <!-- 
                    <div class="col-md-6 col-sm-6">
                        <label>Contact Verified?</label><br>
                        <input type="radio" class="" name="verified" value="1"/>Yes<br>
                        <input type="radio" class="" name="verified" value="0"/>No
                    </div> -->
                </div>
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                    	<div class="form-group">
                        <label class="text-muted">Address<em class="text-danger">*</em></label>
                        <textarea type="text" class="form-control" name="address" value="" id="address" maxlength="150" /></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- <div class="col-md-6 col-sm-6">
                        <label>User Type</label><br>
                        <input type="radio" class="" name="user_type" value="1"/>Admin<br>
                        <input type="radio" class="" name="user_type" value="2"/>Owner<br>
                        <input type="radio" class="" name="user_type" value="3"/>Tenant<br>
                    </div> -->
                    <input type="hidden" name="user_type" id="user_type_id">
                    <div class="col-md-6 col-sm-6">
                    	<div class="form-group">
                        <label class="text-muted">User Status</label>
                        <div>
                        <div class="radio-custom radio-inline">
                        <label>Active
                        <input type="radio" class="" name="status" value="1"/><span class="circle"></span>
                        </label>
                        </div>
                        <div class="radio-custom radio-inline">
                        <label>Inactive
                        <input type="radio" class="" name="status" value="0"/><span class="circle"></span>
                        </label>
                        </div>
                        </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="user_id" id="user_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>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="add-user">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times-circle"></i></button>
            	<h4 class="modal-title">Add User</h4>
            </div>
            {{ Form::open(['url' => 'admin/addUser', 'method'=>'post', 'id'=>'adduser', 'enctype' => 'multipart/form-data']) }}
            <div class="modal-body">
                
                    <div class="row">
                        <div class="col-sm-6">
                        	<div class="form-group">
                        	<label class="text-muted">User Type<em class="text-danger">*</em></label>
                            <select class="form-control" name="user_type" id="user_type">
                                <option value="1">Admin</option>
                                <option value="2">Owner</option>
                                <option value="3">Tenant</option>
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                        	<div class="form-group">
                        	<label class="text-muted">First Name<em class="text-danger">*</em></label>
                            <input type="text" class="form-control" name="firstname" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                        	<div class="form-group">
                        	<label class="text-muted">Last Name<em class="text-danger">*</em></label>
                            <input type="text" class="form-control" name="lastname" required>
                            </div>
                        </div>
                    </div>
                
                    <div class="row">
                    	<div class="col-xs-2 col-sm-2 pr-0">
                        	<div class="form-group">
                        	<label class="text-muted">Code<em class="text-danger">*</em></label>
                            <input type="text" id="code" class="form-control" name="country_code" value="971" readonly>
                            </div>
                        </div>
                        <div class="col-xs-10 col-sm-4">
                        	<div class="form-group">
                        	<label class="text-muted">Mobile<em class="text-danger">*</em></label>
                            <input type="text" id="mobile" class="form-control" name="mobile" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                        	<div class="form-group">
                        	<label class="text-muted">Email<em class="text-danger">*</em></label>
                            <input type="text" class="form-control" name="email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                        	<div class="form-group">
                        	<label class="text-muted">Address<em class="text-danger">*</em></label>
                            <input type="text" class="form-control" name="address" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                        	<div class="form-group">
                        	<label class="text-muted">City<em class="text-danger">*</em></label>
                            <input type="text" class="form-control" name="city" required>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row" style="display:none" id="document">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Emirates ID / Passport Copy here</label>
                                    <button id="upload-button" type="button">Upload Document</button> 
                                    <input type="file" accept="application/pdf, image/*" name="document" id="user_doc"/>
                                    <div class="text-muted"><small>File size should not be more than 1 MB. Valid Type: jpg, pdf</small></div>
                                    <img id="blah" src="" width="400" height="400"/>                           
                                    <div id="pdf-main-container">
                                    <div id="pdf-loader">Loading document ...</div>
                                    <div id="pdf-contents">
                                        <canvas id="pdf-canvas" width="400"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
            </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>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="showDocument">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times-circle"></i></button>
                <h4 class="modal-title" id="user_name"></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                        <label class="text-muted">Facebook Profile :</label>
                        <div>
                            <a id="facebook" target="_blank"></a>
                        </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                        <label class="text-muted">Linkedin Profile :</label>
                        <div>
                            <a id="linkedin" target="_blank"></a>
                        </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                        <label class="text-muted">Document :</label>
                        <iframe src="" width="100%" height="400px" id="user_document"></iframe>
                        <label class="text-muted">Passport Copy :</label>
                        <iframe src="" width="100%" height="400px" id="passport_copy"></iframe>
                        </div>
                    </div>

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

@include('include.admin-footer')
<script type="text/javascript">
  $(document).ready(function() {
      $("#search_user_id").select2({
        allowClear: true
      });
    });

  $(document).on('click', '.bio', function(){
        $('#bio').text($(this).data('bio'));
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
      $("#search_user_id").val("<br />
<b>Warning</b>:  Undefined variable $user_id in <b>/home/albumbz/public_html/bid2rent/resources/views/admin/users.blade.php</b> on line <b>462</b><br />
").trigger("change");
    });
</script>
<script type="text/javascript" src="{{ asset('js/moment.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap-datetimepicker.js') }}"></script>
<script type="text/javascript">    
    $(window).load(function() {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            useCurrent: false
        }).on("dp.change", function (e) {
                $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                $('#todate').val('');
            });

        $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            useCurrent: false
        }).on("dp.change", function (e) {
                $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                $('#todate').val('');
            });
    });
</script>
<script>
    $(document).ready(function() {
        $("#search_user_id").val("<br />
<b>Warning</b>:  Undefined variable $user_id in <b>/home/albumbz/public_html/bid2rent/resources/views/admin/users.blade.php</b> on line <b>488</b><br />
");
        $("#user_status").val("<br />
<b>Warning</b>:  Undefined variable $status in <b>/home/albumbz/public_html/bid2rent/resources/views/admin/users.blade.php</b> on line <b>489</b><br />
");
        $("#search_user_type_id").val("<br />
<b>Warning</b>:  Undefined variable $user_type_id in <b>/home/albumbz/public_html/bid2rent/resources/views/admin/users.blade.php</b> on line <b>490</b><br />
");
    });

    jQuery(document).on('click', '.edit-user', function(){
        var user_id = jQuery(this).data('id');
        var firstname = jQuery(this).data('first');
        var lastname = jQuery(this).data('last');
		var email = jQuery(this).data('email');
		var dob = jQuery(this).data('dob');
		var shortbio = jQuery(this).data('shortbio');
        var mobile = jQuery(this).data('mobile');
        var verified = jQuery(this).data('verified');
        var address = jQuery(this).data('address');
        var city = jQuery(this).data('city');
        var user_type = jQuery(this).data('type');
        var status = jQuery(this).data('status');

		$('#useridlbl').html(user_id);
		$('#emaillbl').html(email);
		$('#doblbl').html(dob);
		$('#shortbiolbl').html(shortbio);
        $('#user_id').val(user_id);
        $('#firstname').val(firstname);
        $('#lastname').val(lastname);
        $('#mobile').val(mobile);
        $('#address').text(address);
        $('#city').val(city);
        $('#user_type_id').val(user_type);
        if(verified == 1){
            $('input:radio[name=verified]:nth(0)').attr('checked',true);
        }
        if(verified == 0){
            $('input:radio[name=verified]:nth(1)').attr('checked',true);
        }
        if(user_type == 1){
            $('input:radio[name=user_type]:nth(0)').attr('checked',true);
        }
        if(user_type == 2){
            $('input:radio[name=user_type]:nth(1)').attr('checked',true);
        }
        if(user_type == 3){
            $('input:radio[name=user_type]:nth(2)').attr('checked',true);
        }
        if(status == 1){
            $('input:radio[name=status]:nth(0)').attr('checked',true);
        }
        if(status == 0){
            $('input:radio[name=status]:nth(1)').attr('checked',true);
        }

    });


    jQuery(document).on('change', '#user_type', function(){
        $('#user_doc').val('');
        $('#document').css({'display':'none'});
        if($('#user_type').val() == '3'){
            $('#document').css({'display':'block'});
        }
        
    });

    jQuery(document).on('click', '.document', function(){
        var user_name = jQuery(this).data('user-name');
        var user_document = jQuery(this).data('document');
        var passport_copy = jQuery(this).data('passport');
        $('#user_name').html(user_name);

        fb = jQuery(this).data('facebook');
        $('#facebook').attr('href', fb);
        $('#facebook').text(fb);

        lk = jQuery(this).data('linkedin');
        $('#linkedin').attr('href', lk );
        $('#linkedin').text(lk);
		
        if(user_document == ""){
        	$('#user_document').prop("src","");
		}else{
			$('#user_document').prop("src",APPURL +'/'+ user_document);
		}
        if(passport_copy == ""){
            $('#passport_copy').prop("src","");
        }else{
            $('#passport_copy').prop("src",APPURL +'/'+ passport_copy);
        }
    });

</script>
<script>
$("#adduser").validate({
	rules: {
		user_type: {
			required: true
		},
		firstname: {
			required: true
		},
		lastname: {
			required: true
		},
		mobile: {
			required: true
		},
		email: {
			required: true
		},
		address: {
			required: true
		},
		city: {
			required: true
		}
	},
	messages: {
		user_type: {
			required: "Required"
		},
		firstname: {
			required: "Required"
		},
		lastname: {
			required: "Required"
		},
		mobile: {
			required: "Required"
		},
		email: {
			required: "Required"
		},
		address: {
			required: "Required"
		},
		city: {
			required: "Required"
		}
	}
});

$("#edituser").validate({
	rules: {
		firstname: {
			required: true
		},
		lastname: {
			required: true
		},
		mobile: {
			required: true
		},
		address: {
			required: true
		},
		city: {
			required: true
		}
	},
	messages: {
		firstname: {
			required: "Required"
		},
		lastname: {
			required: "Required"
		},
		mobile: {
			required: "Required"
		},
		address: {
			required: "Required"
		},
		city: {
			required: "Required"
		}
	}
});
</script>
<script type = "text/javascript">
    function checkFields(){
        var start_date = document.getElementById("start_date").value;
        var end_date = document.getElementById("end_date").value;
        if((end_date != "" && start_date == "") || (start_date != "" && end_date == "")){
            alert("Please Choose the From Date/To Date");
            return false;
        }
        else{
            return true;
        }
    }
</script>
@endsection