@extends('app_client')

@section('title', Auth::user()->first_name.' '.Auth::user()->last_name.' Profile | '.$property->name)

@section('content')
  <div class="container-fluid" ng-controller="UserCtlr">
    <div class="row" ng-cloak>
      <div id="profile-edit" class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">
        <div class="page-header">
          <div class="back-navigation no-mg">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
        </div>
        <form ng-submit="edit(user, myCroppedImage)" ng-cloak>
          <div class="panel profile-edit">
            <div class="row top-row">
              <div class="col-sm-6">
                <div class="profile-image-wrapper text-center">
                  <div class="profile-image text-center"
                    ng-if="!ImageEdit">
                    <img class="lazy user-profile-avatar"
                      ng-src="@{{ avatar }}"
                      alt=""/>
                  </div>
                  <img-crop class="cropArea"
                    image="myImage"
                    ng-show="ImageEdit"
                    result-image="myCroppedImage"
                    on-change="onchange"
                    area-min-size="10"
                    change-on-fly="true">
                  </img-crop>
                  <label class="btn btn-medium profile-file-upload"
                    for="avatar"
                    ng-if="!ImageEdit">Upload Image
                  </label>
                  <input id="avatar"
                    name="avatar"
                    type="file"
                    ng-model="avatar"
                    ng-init="avatar = '{{ Auth::user()->avatar }}'"
                    style="display:none"/>
                </div>
                <button class="btn btn-medium profile-image-save right"
                  ng-if="ImageEdit">Save
                </button>
              </div><!--./col-sm-6 -->
              <div class="col-sm-6">
                <div class="input-group">
                  <input type="text" id="first_name" ng-model="first_name" class="m-input" ng-class="{ true: 'active', false: '' }[first_name.length > 0]"
                  ng-init="first_name = '{{ Auth::user()->first_name }}'">
                  <label for="first_name">Your name</label>
                </div>
                <div class="input-group">
                  <input type="text" id="last_name" ng-model="last_name" class="m-input" ng-class="{ true: 'active', false: '' }[last_name.length > 0]"
                  ng-init="last_name = '{{ Auth::user()->last_name }}'">
                  <label for="last_name">Last name</label>
                </div>
                <div class="input-group">
                  <input type="text" id="email" ng-model="email" class="m-input" ng-class="{ true: 'active', false: '' }[email.length > 0]"
                  ng-init="email = '{{ Auth::user()->email }}'">
                  <label for="email">E-Mail</label>
                </div>
                <div class="input-group">
                  <input type="text" id="alternative_email" ng-model="alternative_email" class="m-input" ng-class="{ true: 'active', false: '' }[alternative_email.length > 0]"
                  ng-init="alternative_email = '{{ Auth::user()->alternative_email }}'">
                  <label for="alternative_email">Alternative E-Mail</label>
                </div>
                <div class="form-group date-of-birth select">
                  <label for="resident_birthdate">Date Of Birth</label>
                  <div class="dropdown">
                    <a id="resident_birthdate" role="button" data-toggle="dropdown" data-target="#" href="#">
                      <input type="text" class="form-control" data-date-time-input="MMMM D, YYYY" ng-model="date_of_birth"
                      ng-init="date_of_birth = '{{ Auth::user()->date_of_birth }}'">
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                      <datetimepicker data-ng-model="date_of_birth" data-datetimepicker-config="{ dropdownSelector: '#resident_birthdate', startView:'year', minView:'day' }" /> }"/>
                    </ul>
                  </div>
                </div>
              </div><!--./col-sm-6 -->
            </div><!--./row -->

            <div class="row">
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="gender">Gender</label>
                  <select class="form-control" ng-model="gender" id="gender"
                    ng-init="gender = '{{ Auth::user()->gender }}'">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="notify_by">Notify By</label>
                  <select class="form-control" ng-model="notify_by" id="notify_by"
                    ng-init="notify_by = '{{ Auth::user()->notify_by }}'">
                    <option value="email">Email</option>
                    <option value="sms">SMS</option>
                    <option value="both">Both</option>
                    <option value="none">None</option>
                  </select>
                </div>
              </div>
            </div><!--./row -->

            <div class="row">
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="gender">Notify Sound</label>
                  <select id="notify_sound"
                    class="form-control"
                    ng-model="notify_sound"
                    ng-options="option.value as option.name for option in sound_options"
                    ng-init="notify_sound = {{ Auth::user()->notify_sound }}">
                  </select>
                </div>
              </div>
            </div><!--./row -->

            <div class="row">
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="notify_by">Ownership</label>
                  <select class="form-control" ng-model="ownership" id="ownership"
                    ng-init="ownership = '{{ Auth::user()->ownership }}'">
                    <option value="owner">Owner</option>
                    <option value="renter">Renter</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="input-group">
                  <input type="text" id="unit-number" ng-model="unit_number" class="m-input"
                  ng-class="{ true: 'active', false: '' }[unit_number && unit_number.length !== 0]"
                  ng-init="unit_number = '{{ Auth::user()->unit_number }}'">
                  <label for="unit-number">Unit Number</label>
                </div>
              </div>
            </div><!--./row -->

            <div class="row">
              <div class="col-sm-6">
                <div class="input-group">
                  <input type="text" id="city" ng-model="city" class="m-input"
                  ng-class="{ true: 'active', false: '' }[city.length > 0]"
                  ng-init="city = '{{ Auth::user()->city }}'">
                  <label for="city">City</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="input-group">
                  <input type="text" id="area" ng-model="area" class="m-input"
                  ng-class="{ true: 'active', false: '' }[area.length > 0]"
                  ng-init="area = '{{ Auth::user()->area }}'">
                  <label for="area">Area</label>
                </div>
              </div>
            </div><!--./row -->

            <div class="row mg-top-10">
              <div class="col-sm-6">
                <div class="input-group">
                  <input id="phone-number"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[cell_phone && cell_phone !== 0]"
                    type="text"
                    ng-model="cell_phone"
                    ng-init="cell_phone = '{{ Auth::user()->cell_phone }}'"
                    phone-input>
                  <label for="cell_phone">Cell Phone Number</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="input-group">
                  <input id="phone-number"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[phone_number && phone_number !== 0]"
                    type="text"
                    ng-model="phone_number"
                    ng-init="phone_number = '{{ Auth::user()->phone }}'"
                    phone-input>
                  <label for="phone_number">Phone Number</label>
                </div>
              </div>
            </div><!--./row -->

          </div><!--./panel -->

          <div class="panel table-information profile-edit">
            <div class="heading"><h4>Family</h4></div>
            <div class="add-more-box text-center" ng-if="user.family.length == 0">
              <h5>No entries have been added, please add them</h5> <a class="btn btn-small no-open" ng-click="add_family_member(user)">Add new</a>
            </div>
            <div ng-repeat="family_member in user.family track by $index">
              <div class="row">
                <div class="col-sm-6">
                  <div class="input-group">
                    <input type="text" id="family-member-name" ng-model="family_member.name" class="m-input" ng-class="{true: 'active', false: ''}[family_member.name.length > 0]">
                    <label for="phone-number">Name</label>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group select">
                    <label for="gender">Member</label>
                    <select class="form-control" ng-model="family_member.member" id="family-member" ng-change="get_member(family_member)">
                      <option value="child">Child</option>
                      <option value="husband">Husband</option>
                      <option value="wife">Wife</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group select">
                    <label for="gender">Gender</label>
                    <select class="form-control" ng-model="family_member.gender" id="gender" ng-disabled="family_member.member == 'husband' || family_member.member == 'wife'">
                      <option value="female">Female</option>
                      <option value="male">Male</option>
                    </select>
                  </div>
                </div><!--./col-sm-6 -->
                <div class="col-sm-6">
                  <div class="form-group select">
                    <label for="member_birthdate_@{{ $index }}">Date Of Birth</label>
                    <div class="dropdown">
                      <a id="member_birthdate_@{{ $index }}" role="button" data-toggle="dropdown" data-target="#" href="#">
                        <input type="text" class="form-control" data-date-time-input="MMMM D, YYYY" ng-model="family_member.date_of_birth">
                      </a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <datetimepicker data-ng-model="family_member.date_of_birth" data-datetimepicker-config="{ dropdownSelector: '#member_birthdate_' + $index, startView: 'year', minView: 'day' }" /> }"/>
                      </ul>
                    </div>
                  </div>
                </div><!--./col-sm-6 -->
              </div><!--./row -->
              <div class="form-group date-of-birth">
                <label for="gender">Notes</label>
                <textarea name="name" ng-model="family_member.notes" rows="8" cols="40"></textarea>
              </div>
              <div class="delete">
                <a ng-click="remove_family_member(family_member)"> <span class="icon icon-trash_can_delete_remove_garbage_recycle_2"></span> Delete this entry</a>
              </div>
            </div><!--./ng-repeat-child -->
            <div class="add-more-box text-center" ng-show="user.family.length > 0">
              <h5>Have more entries?</h5> <a class="btn btn-small no-open" ng-click="add_family_member(user)">Add new</a>
            </div>
          </div><!--./panel -->

          <div class="panel table-information profile-edit">
            <div class="heading"><h4>Pets</h4></div>
            <div class="add-more-box text-center" ng-show="user.pets.length == 0">
              <h5>No entries have been added, please add them</h5> <a class="btn btn-small no-open" ng-click="add_pet(user)">Add new</a>
            </div>
            <div ng-repeat="pet in user.pets">
              <div class="row">
                <div class="col-sm-6">
                  <div class="input-group">
                    <input type="text" id="pet-name" ng-model="pet.name" class="m-input" ng-class="{true:'active', false:''}[pet.name.length !== 0]">
                    <label for="pet-name">Name</label>
                  </div>
                  <div class="input-group">
                    <input type="text" id="pet-type" ng-model="pet.type" class="m-input" ng-class="{true:'active', false:''}[pet.type.length !== 0]">
                    <label for="pet-type">Type</label>
                  </div>
                </div><!--./col-sm-6 -->
                <div class="col-sm-6">
                  <div class="input-group">
                    <input type="text" id="pet-color" ng-model="pet.color" class="m-input" ng-class="{true:'active', false:''}[pet.color.length !== 0]">
                    <label for="pet-color">Color</label>
                  </div>
                  <div class="input-group">
                    <input type="text" id="pet-breed" ng-model="pet.breed" class="m-input" ng-class="{true:'active', false:''}[pet.breed.length !== 0]">
                    <label for="pet-breed">Breed</label>
                  </div>
                </div>
              </div>
              <div class="form-group date-of-birth">
                <label for="gender">Notes</label>
                <textarea name="name" ng-model="pet.notes" rows="8" cols="40"></textarea>
              </div>
              <div class="delete">
                <a ng-click="remove_pet(pet)"> <span class="icon icon-trash_can_delete_remove_garbage_recycle_2"></span> Delete this entry</a>
              </div>
            </div><!--./ng-repeat-child -->
            <div class="add-more-box text-center" ng-show="user.pets.length > 0">
              <h5>Have more entries?</h5> <a class="btn btn-small no-open" ng-click="add_pet(user)">Add new</a>
            </div>
          </div><!--./panel -->

          <div class="panel table-information profile-edit">
            <div class="heading"><h4>Vehicles</h4></div>
            <div class="add-more-box text-center" ng-show="user.vehicles.length == 0">
              <h5>No entries have been added, please add them</h5> <a class="btn btn-small no-open" ng-click="add_vehicle(user)">Add new</a>
            </div>
            <div ng-repeat="vehicle in user.vehicles">
              <div class="row">
                <div class="col-sm-6">
                  <div class="input-group">
                    <input type="text" id="vehicle-type" ng-model="vehicle.type" class="m-input" ng-class="{true:'active', false:''}[vehicle.type.length !== 0]">
                    <label for="vehicle-type">Make</label>
                  </div>
                  <div class="input-group">
                    <input type="text" id="vehicle-model" ng-model="vehicle.model" class="m-input" ng-class="{true:'active', false:''}[vehicle.model.length !== 0]">
                    <label for="vehicle-model">Model</label>
                  </div>
                </div><!--./col-sm-6 -->
                <div class="col-sm-6">
                  <div class="input-group">
                    <input type="text" id="vehicle-number" ng-model="vehicle.year" class="m-input" ng-class="{true:'active', false:''}[vehicle.year.length !== 0]">
                    <label for="pet-color">Year</label>
                  </div>
                  <div class="input-group">
                    <input type="text" id="vehicle-color" ng-model="vehicle.color" class="m-input" ng-class="{true:'active', false:''}[vehicle.color.length !== 0]">
                    <label for="vehicle-color">Color</label>
                  </div>
                </div><!--./col-sm-6 -->
              </div>
              <div class="form-group date-of-birth">
                <label for="gender">Notes</label>
                <textarea name="name" ng-model="vehicle.notes" rows="8" cols="40"></textarea>
              </div>
              <div class="delete small-mg">
                <a ng-click="remove_vehicle(vehicle)"> <span class="icon icon-trash_can_delete_remove_garbage_recycle_2"></span> Delete this entry</a>
              </div>
            </div><!--./ng-repeat-child -->
            <div class="add-more-box text-center" ng-show="user.vehicles.length > 0">
              <h5>Have more entries?</h5> <a class="btn btn-small no-open" ng-click="add_vehicle(user)">Add new</a>
            </div>
          </div><!--./panel -->
          <button type="submit" name="button" class="btn btn-large">Save Profile Settings</button>
        </form>

        <form ng-submit="change_password(user)" ng-cloak>
          <div class="panel table-information profile-edit mg-top-60">
            <div class="heading"><h4>Change your password</h4></div>
            <div class="input-group">
              <input type="password" id="password-current" ng-model="user.password_current" class="m-input" ng-class="{true:'active', false:''}[user.password_current.length > 0]">
              <label for="password-current">Current Password</label>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="input-group">
                  <input type="password" id="password-new" ng-model="user.password" class="m-input" ng-class="{true:'active', false:''}[user.password.length > 0]">
                  <label for="password-new">New Password</label>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="input-group">
                  <input type="password" id="password-new-confirm" ng-model="user.password_confirmation" class="m-input" ng-class="{true:'active', false:''}[user.password_confirmation.length > 0]">
                  <label for="password-new-confirm">Confirmation Password</label>
                </div>
              </div>
            </div>
          </div><!--./panel -->
          <button type="submit" name="button" class="btn btn-large">Change Password</button>
        </form>

        <div class="mg-bottom-30" ng-controller="modalCtlr">
          <div class="panel table-information profile-edit mg-top-60">
            <div class="heading"><h4>Delete Profile</h4></div>
            <div class="row">
              <div class="col-sm-12">
                <div class="input-group">
                  <input type="password" id="delete-password" ng-model="user.delete_password" class="m-input" ng-class="{true:'active', false:''}[user.delete_password.length > 0]">
                  <label for="delete-password">Password</label>
                </div>
              </div>
            </div>
          </div><!--./panel -->
          <button type="button" name="button" class="btn btn-large" ng-click="open_delete_modal(user)">Delete Profile</button>
        </div>

      </div><!--./col-sm-8 col-sm-offset-2 -->
    </div>
  </div>

  @include('client.partials.delete_modal')
  @if(!Auth::user()->policy)
    <div ng-controller="modalCtlr" ng-init="open_policy_modal()"></div>
    <script type="text/ng-template" id="policyModalContent.html">
      <div name="policyForm">
        <div class="modal-header">
          <center><h3 class="modal-title" id="modal-title">Privacy Policy and Terms and Conditions of Use</h3></center>
        </div>
        <div class="modal-body animated fadeIn" id="modal-body">
          <div id="terms" class="terms">
            @include('client.partials.policy')
          </div>
        </div>
        <div class="modal-footer text-center animated fadeIn">
          <div class="action-buttons">
            <button id="agree" class="btn btn-request uppercase" type="button" ng-click="agree_policy()" disabled>I Agree</button>
            <a href="{{ url('logout') }}" class="btn btn-request uppercase">Decline</a>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        $('#terms').animate({ scrollTop: 0 }, 1);
        $('#terms').scroll(function () {
          if($(this).scrollTop() >= ($(this)[0].scrollHeight - $(this).height()) - 200) {
            $('#agree').removeAttr('disabled');
          }
        });
      </script>
    </script>
  @endif

@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'modal',
      'ngImgCrop',
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'user',
      'socket',
      'liveChat',
      'ngFileUpload'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/ng-file-upload-shim.min.js"></script>
  <script type="text/javascript" src="/assets/js/ng-file-upload.min.js"></script>
  <script type="text/javascript" src="/assets/js/moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/loader-image.min.js"></script>
  <script type="text/javascript" src="/assets/js/angular-moment.min.js"></script>
  <script type="text/javascript" src="/assets/js/dateTimeInput.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.js"></script>
  <script type="text/javascript" src="/assets/js/datetimepicker.templates.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="/assets/js/img-crop.min.js"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
@endsection