@extends('app_admin')

@section('title', 'Settings | Luxury Concierge')

@section('content')
  <div class="container-fluid"
    ng-controller="UserCtlr">
    <div class="row">
      <div class="col-md-8 col-sm-12 col-md-offset-2 col-sm-offset-0">
        <!-- Header -->
        <div class="page-header">
          <div class="back-navigation no-mg">
            <a href="javascript:history.go(-1)" class="btn-back">Back</a>
          </div>
        </div>
        <!-- Edit Profile -->
        <form ng-submit="edit(user, myCroppedImage)">
          <div class="panel profile-edit">
            <div class="row top-row">
              <!-- Upload Image -->
              <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"
                    result-image="myCroppedImage"
                    on-change="onchange"
                    area-min-size="10"
                    change-on-fly="true"
                    ng-show="ImageEdit">
                  </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"/>
                  <br>
                </div><!-- .profile-image-wrapper -->
                <button class="btn btn-medium profile-image-save right"
                  ng-if="ImageEdit">Save
                </button>
              </div><!--./col-sm-6 -->
              <!-- General Information -->
              <div class="col-sm-6">
                <!-- First Name -->
                <div class="input-group">
                  <input id="first_name"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[first_name.length > 0]"
                    type="text"
                    ng-model="first_name"
                    ng-init="first_name = '{{ Auth::user()->first_name }}'">
                  <label for="first_name">First name</label>
                </div>
                <!-- Last Name -->
                <div class="input-group">
                  <input id="last_name"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[last_name.length > 0]"
                    type="text"
                    ng-model="last_name"
                    ng-init="last_name = '{{ Auth::user()->last_name }}'">
                  <label for="last_name">Last name</label>
                </div>
                <!-- Email -->
                <div class="input-group">
                  <input id="email"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[email.length > 0]"
                    type="text"
                    ng-model="email"
                    ng-init="email = '{{ Auth::user()->email }}'">
                  <label for="email">E-Mail</label>
                </div>
                <!-- Alternative Email -->
                <div class="input-group">
                  <input id="alternative_email"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[alternative_email.length > 0]"
                    type="text"
                    ng-model="alternative_email"
                    ng-init="alternative_email = '{{ Auth::user()->alternative_email }}'">
                  <label for="alternative_email">Alternative E-Mail</label>
                </div>
              </div><!--./col-sm-6 -->
            </div><!--./row -->
            <div class="row">
              <!-- Date of Birth -->
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="admin_birthdate">Date Of Birth</label>
                  <div class="dropdown">
                    <a id="admin_birthdate"
                      data-toggle="dropdown"
                      data-target="#"
                      role="button"
                      href="#">
                      <input class="form-control"
                        type="text"
                        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: '#admin_birthdate', startView:'year', minView:'day' }"/>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- Gender -->
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="gender">Gender</label>
                  <select id="gender"
                    class="form-control"
                    ng-model="gender"
                    ng-init="gender = '{{ Auth::user()->gender }}'">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                  </select>
                </div>
              </div>
                          </div><!--./row -->
            <div class="row mg-top-10">
              <!-- Cell Phone Number -->
              <div class="col-sm-6">
                <div class="input-group">
                  <input id="cell_phone"
                    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">
                <!-- Phone Number -->
                <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 class="row mg-top-30">
              <!-- Notify By -->
              <div class="col-sm-6">
                <div class="form-group select">
                  <label for="notify_by">Notify By</label>
                  <select id="notify_by"
                    class="form-control"
                    ng-model="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>
              <!-- Notify Sound -->
              <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 -->

            @if(!Auth::user()->hasRole('admin'))
              @if(Auth::user()->get_admin_properties()->count() >= 2)
                              @else
                              @endif
            @endif
          </div><!-- .panel -->
          <!-- Save Button -->
          <button class="btn btn-large"
            type="submit"
            name="button">Save Profile Settings
          </button>
        </form><!-- Edit Profile -->
        <!-- Change Password -->
        <form ng-submit="change_password(user)">
          <div class="panel table-information profile-edit mg-top-60">
            <div class="heading">
              <h4>Change your password</h4>
            </div>
            <!-- Current Password -->
            <div class="input-group">
              <input id="password-current"
                class="m-input"
                ng-class="{ true: 'active', false: '' }[user.password_current.length > 0]"
                type="password"
                ng-model="user.password_current">
              <label for="password-current">Current Password</label>
            </div>
            <div class="row">
              <!-- New Password -->
              <div class="col-sm-6">
                <div class="input-group">
                  <input id="password-new"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[user.password.length > 0]"
                    type="password"
                    ng-model="user.password">
                  <label for="password-new">New Password</label>
                </div>
              </div>
              <!-- Confirmation Password -->
              <div class="col-sm-6">
                <div class="input-group">
                  <input id="password-new-confirm"
                    class="m-input"
                    ng-class="{ true: 'active', false: '' }[user.password_confirmation.length > 0]"
                    type="password"
                    ng-model="user.password_confirmation">
                  <label for="password-new-confirm">Confirmation Password</label>
                </div>
              </div>
            </div>
          </div><!--./panel -->
          <button class="btn btn-large"
            type="submit"
            name="button">Change Password
          </button>
        </form><!-- Change Password -->
        <!-- Delete Profile -->
        <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="input-group">
              <input id="delete-password"
                class="m-input"
                ng-class="{ true: 'active', false: '' }[user.delete_password.length > 0]"
                type="password"
                ng-model="user.delete_password">
              <label for="delete-password">Password</label>
            </div>
          </div><!--./panel -->
          <button class="btn btn-large"
            type="button"
            name="button"
            ng-click="open_delete_modal(user)">Delete Profile
          </button>
        </div><!-- Delete Profile -->

      </div><!-- .col-md-8 -->
    </div><!-- .row -->
  </div><!-- .container-fluid -->
  @include('admin.partials.delete_modal')
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'uiSwitch',
      'ngImgCrop',
      'user',
      'socket',
      'liveChat',
      'modal'
    ]);
  </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/img-crop.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="{{ 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