@extends('layouts.layout-admin')

@section('content')

@if(isset($user->id))
<div class="row box-body" ng-controller="usersCtrl" data-ng-init="init();loadBusiness('{{ $user->id }}');loadStaffs('{{ $user->id }}');">
  <form method="post" action="{{ route('user.business.update', ['id' => $user->id]) }}" enctype="multipart/form-data" name="formUser">
    <input name="_method" type="hidden" value="PATCH">
    <input type="hidden" name="scti_id" id="scti_id" value="{{ $user->scti_id }}" readonly>
    <input type="hidden" name="hdnBusinessId" id="hdnBusinessId" value="{{ $user->id }}" readonly>
@endif
@if(!isset($user->id))
<div class="row box-body" ng-controller="usersCtrl" data-ng-init="init()">
  <form method="post" action="{{ route('user.business.store') }}" enctype="multipart/form-data" name="formUser">
@endif
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#user-tab1" data-toggle="tab">Business</a></li>
    @if(isset($user->id))
        <li><a href="#user-tab2" data-toggle="tab">Profile</a></li>
        <li class=""><a href="#user-tab3" data-toggle="tab">Department</a></li>
        <li class=""><a href="#user-tab4" data-toggle="tab">Manage Staff</a></li>
    @endif
    @if(!isset($user->id))
    <li class="disabled"><a>Business Profile</a></li>
    <li class="disabled"><a>Department</a></li>
    <li class="disabled"><a>Manage Staff</a></li>
    @endif
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="user-tab1">  
      <div class="form-group">
        <label for="display_name">User's display name:</label>
        <input type="text" class="form-control" id="display_name" name="display_name" ng-model="userFields.display_name" required>
        <div class="help-block has-error" ng-messages="formUser.display_name.$error" ng-if="formUser.display_name.$touched">
          @include('users::partials.errormessages')
        </div>
      </div>

      <div class="form-group">
        <label for="personal_email">Personal email:</label>
        <input type="email" class="form-control" id="personal_email" name="personal_email" ng-model="userFields.personal_email" required>
        <div class="help-block has-error" ng-messages="formUser.personal_email.$error" ng-if="formUser.personal_email.$touched">
          @include('users::partials.errormessages')
        </div>
      </div>

      <div class="form-group">
        <label for="business_email">Business email:</label>
        <input type="email" class="form-control" id="business_email" name="business_email" ng-model="userFields.business_email" required>
        <div class="help-block has-error" ng-messages="formUser.business_email.$error" ng-if="formUser.business_email.$touched">
          @include('users::partials.errormessages')
        </div>
      </div>
  @if(!isset($user->id))
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" name="password" ng-model="userFields.password" required>
        <div class="help-block has-error" ng-messages="formUser.password.$error" ng-if="formUser.password.$touched">
          @include('users::partials.errormessages')
        </div>
      </div>

      <div class="form-group">
        <label for="confirm_password">Confirm password:</label>
        <input type="password" class="form-control" id="confirm_password" name="confirm_password" ng-model="userFields.confirm_password" required>
        <div class="help-block has-error" ng-messages="formUser.confirm_password.$error" ng-if="formUser.confirm_password.$touched">
          @include('users::partials.errormessages')
        </div>
      </div>
  @endif

      <div class="form-group">
        <input type="checkbox" name="role_id" id="role_id" value="3" checked="checked" onclick="return false;">
        <span>Business user</span>
      </div>  

      <div class="form-group">
        <a href="" ng-click="issueUserPasswordReset(userFields.id, userFields.personal_email)">Send password reset link.</a>
      </div>

      <div class="form-group">
        <label for="status">Status: </label>
        @if(isset($user->id))
        <select class="form-control" id="enabled" name="enabled">
          <option value="1" ng-selected="userFields.enabled == 1">Enable</option>
          <option value="0" ng-selected="userFields.enabled == 0">Disable</option>
        </select>
        @endif
        @if(!isset($user->id))
        <select class="form-control" id="enabled" name="enabled">
          <option value="1" selected="selected">Enable</option>
          <option value="0">Disable</option>
        </select>
        @endif
      </div>
    </div>

    <!-- // user tab 2 start -->
    <div class="tab-pane" id="user-tab2">
      @if(isset($user->id))
        @include('users::partials.business-profile')
      @endif
    </div>
    <!-- // user tab 2 end -->

    <!-- // user tab 3 start -->
    <div class="tab-pane" id="user-tab3">
      @if(isset($user->id))
        @include('users::partials.business-departments')
      @endif
    </div>
    <!-- // user tab 3 end -->

    <!-- // user tab 4 start -->
    <div class="tab-pane" id="user-tab4">
      @if(isset($user->id))
        <div class="form-group">
          <label for="staff">Member</label>
            <select name="member_name" ng-model="staff.member_name" class="form-control staff-select2" style="width: 100%;" data-placeholder="Please select">
              <option value=""></option>
              @foreach ($members as $member)
                <option value="{{ $member->id }}">{{ $member->display_name }}</option>
              @endforeach
            </select>
        </div>

        <div class="form-group">
          <label for="designation">Designation</label>
            <select name="member_designation" ng-model="staff.member_designation" class="form-control staff-dept-select2" style="width: 100%;" data-placeholder="Please select">
              <option value=""></option>
              @foreach ($departments as $key => $department)
                <option value="{{ $department->id }}">{{ $department->name }}</option>
              @endforeach
            </select>
        </div>

        <div class="form-group">
          <label for="role">Role</label>
            <select name="member_role" ng-model="staff.member_role" class="form-control" style="width: 100%;">
              <option value="">-Please select-</option>
              <option value="employee">Employee</option>
              <option value="admin">Administrator</option>
            </select>
        </div>

        <div class="form-group">
          <a class="btn btn-primary" ng-click="addStaff({{ $user->id }}, staff.member_name, staff.member_designation, staff.member_role)">Add Staff</a>
        </div>

        <div class="box-body no-padding">
          <table class="table table-striped">
            <tbody>
            <tr ng-repeat="staff in orgStaffs">
              <td><% staff.scti_id %></td>
              <td><% staff.display_name %></td>
              <td>
                <a 
                  sweetalert
                  sweet-options="{title: 'Are you sure?',text: 'You will not be able to recover this!',type: 'warning',showCancelButton: true,confirmButtonColor: '#DD6B55',confirmButtonText: 'Yes, delete it!',cancelButtonText: 'No, cancel please!'}"
                  sweet-confirm-option="{title: 'Deleted!',text: 'The selected item has been deleted.',type: 'success'}" sweet-cancel-option="{title: 'Cancelled!',text: 'Delete canceled',type: 'error'}"
                  sweet-on-confirm="removeStaff(staff.id, staff.business_id, '{{ csrf_token() }}');"
                  >
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      @endif
    </div>
    <!-- // user tab 4 end -->

  </div>
</div>
    {!! csrf_field() !!}
    <input type="hidden" name="hdnSave" id="hdnSave" value="0" readonly />
    <button type="submit" id="user-save" class="btn btn-primary" ng-disabled="formUser.$invalid">Save</button>
    <button type="submit" id="user-save-close" class="btn btn-primary" ng-disabled="formUser.$invalid">Save &amp; Close</button>
    <button class="btn btn-default" ng-click="gotoPage('user')">Cancel</button>
  </form>
</div>
@endsection

@push('scripts')
<script>
  $(document).ready(function() {
    $('.staff-select2').select2({ placeholder: "Please select" });
    $('.staff-dept-select2').select2({ placeholder: "Please select" });
  });
  $(function(){
      //Date range picker with time picker
      $('#dob').datepicker({ format: 'yyyy-mm-dd' });
  });
  $('#user-save').click(function() {
    $('#hdnSave').attr('value', 1);
  });
</script>
@endpush