@extends('app_admin')

@section('title', 'Property settings | Luxury Concierge')

@section('content')
  <div class="container-fluid" ng-controller="PropertyCtlr as vm">
    <div class="row">
      <div class="col-sm-12">
        <!-- Header -->
        <div class="page-header">
          <span class="icon icon-gear_settings_set_tune_tuning_options_preferences_controls_configuration_adjustment_2"></span>
          <h1>Property Settings</h1>
        </div>
        <!-- Property Bar -->
        @if(Auth::user()->get_admin_properties()->count() >= 2)
          @include('admin.partials.property_bar')
        @endif
        <!-- Panel -->
        <div class="panel">
          <!-- Phone -->
          <div class="input-group">
            <input id="phone"
              class="m-input"
              ng-class="{ true: 'active', false: '' }[vm.phone > 0]"
              type="text"
              ng-model="vm.phone"
              ng-init="vm.phone = '{{ $venue->phone }}'">
            <label for="phone">Property Phone Number</label>
          </div>
          <!-- Request Types -->
          @if(Auth::user()->hasRole('admin'))
            <div class="form-group mg-top-30">
              <label for="concierge-request">Request Types</label><br>
              <div class="row">
                <div class="col-sm-12">
                  @foreach($request_types as $request_type)
                    <div class="form-group">
                      <div class="check-box">
                        <input id="concierge-request-{{ $request_type->id }}"
                          type="checkbox"
                          ng-checked="{{ $venue->request_type->contains($request_type) }}"
                          ng-model="vm.request_types[{{ $request_type->id }}]"
                          ng-init="vm.request_types[{{ $request_type->id }}] =
                          {{ $venue->request_type->filter(function($item) use ($request_type) {
                            return $item->id == $request_type->id;
                          })->first() ? 'true' : 'false' }}">
                        <label for="concierge-request-{{ $request_type->id }}"></label>
                      </div>
                      <span style="width: 80px; margin-left: 15px">{{ $request_type->name }}</span>
                    </div>
                  @endforeach
                </div>
              </div>
            </div><!-- form group -->
          @endif
          <!-- Work Hours -->
          <div class="form-group mg-top-30">
            <label for="work-hours">Work Hours</label><br>
            <div class="full-table">
              <table class="category-table grid-list no-shadow">
                <tr>
                  <th><div>Day</div></th>
                  <th><div>Working day</div></th>
                  <th><div>Starting time</div></th>
                  <th><div>Closing time</div></th>
                </tr>
                @foreach($venue->week_days() as $key => $week_day)
                  <tr class="toggle animate-repeat"
                    ng-init="vm.days[{{ $key }}] = '{{ $week_day }}'">
                    <td class="bold" data-th="Name">{{ $week_day }}</td>
                    <td>
                      <switch id="enabled"
                        class="green"
                        style="margin: 25px 0; position: absolute"
                        name="enabled"
                        ng-model="vm.working_days[{{ $key }}]"
                        ng-init="vm.working_days[{{ $key }}] =
                        {{ ($venue->work_hours->count() && $venue->work_hours[$key]->working) ? 'true' : 'false' }}">
                      </switch>
                    </td>
                    <td data-th="starting">
                      <div class="dropdown" style="margin: 10px 0">
                        <a id="starting-{{ $key }}"
                          class="dropdown-toggle btn-small no-open"
                          ng-class="!vm.working_days[{{ $key }}] ? 'disabled' : ''"
                          role="button"
                          data-toggle="dropdown"
                          data-target="#"
                          ng-init="vm.open_time[{{ $key }}] = '{{ ($venue->work_hours->count() && $venue->work_hours[$key]->open_time) ?
                          angular_datetime($venue->work_hours[$key]->open_time) :
                          angular_datetime(date('Y-m-d 09:00:00')) }}'">
                          {{ vm.open_time[] | date:'h:mm a' }}
                        </a>
                        <ul class="dropdown-menu" role="menu" ng-disabled>
                          <datetimepicker
                            data-ng-model="vm.open_time[{{ $key }}]"
                            data-datetimepicker-config="{ dropdownSelector: '#starting-' + {{ $key }} + '', startView: 'hour', minView: 'minute' }"/>
                        </ul>
                      </div>
                    </td>
                    <td data-th="closing">
                      <div class="dropdown" style="margin: 10px 0">
                        <a id="closing-{{ $key }}"
                          class="dropdown-toggle btn-small no-open"
                          ng-class="!vm.working_days[{{ $key }}] ? 'disabled' : ''"
                          role="button"
                          data-toggle="dropdown"
                          data-target="#"
                          ng-init="vm.close_time[{{ $key }}] = '{{ ($venue->work_hours->count() && $venue->work_hours[$key]->close_time) ?
                          angular_datetime($venue->work_hours[$key]->close_time) :
                          angular_datetime(date('Y-m-d 17:00:00')) }}'">
                          {{ vm.close_time[] | date:'h:mm a' }}
                        </a>
                        <ul class="dropdown-menu" role="menu" ng-disabled>
                          <datetimepicker
                            data-ng-model="vm.close_time[{{ $key }}]"
                            data-datetimepicker-config="{ dropdownSelector: '#closing-' + {{ $key }} + '', startView: 'hour', minView: 'minute' }"/>
                        </ul>
                      </div>
                    </td>
                  </tr>
                @endforeach
              </table>
            </div><!-- .full-table -->
          </div>
          <!-- Offline Message -->
          <div class="form-group">
            <label for="auto-message">Auto Offline Message Text</label>
            <textarea id="offline_message"
              class="form-control"
              ng-model="vm.offline_message"
              ng-init="vm.offline_message = '{{ $venue->offline_message }}'"
              elastic>
            </textarea>
          </div>
          <!-- Private -->
          @if(Auth::user()->get_admin_properties()->count() == 1)
            <div class="form-group">
              <label for="private">Private</label>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group">
                    <div class="check-box">
                      <input id="private"
                        type="checkbox"
                        ng-checked="{{ $venue->private }}"
                        ng-model="vm.private"
                        ng-init="vm.private = {{ $venue->private ? 'true' : 'false' }}">
                      <label for="private"></label>
                    </div>
                    <span style="width: 80px; margin-left: 15px">Hide resident private information</span>
                  </div>
                </div>
              </div>
            </div><!-- form group -->
          @endif
          <div class="clearfix">
            <button class="btn btn-large btn-request uppercase right"
              type="button"
              ng-click="vm.save_settings({{ $venue->id }})">Save
            </button>
          </div>
        </div><!-- panel -->
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    angular.module('luxury-concierge', [
      'ui.dateTimeInput',
      'ui.bootstrap.datetimepicker',
      'uiSwitch',
      'angularUtils.directives.dirPagination',
      'ngFileUpload',
      'vsGoogleAutocomplete',
      'textAngular',
      'user',
      'socket',
      'liveChat',
      'property',
      'modal'
    ]);
  </script>
  <script type="text/javascript" src="/assets/js/moment.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="/assets/js/dirPagination.js"></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="{{ elixir('assets/js/controllers/modal.js') }}"></script>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/property.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>
  <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
@endsection