@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('js/jquery-ui-1.10.2/themes/base/jquery-ui.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-addon.min.css') }}" rel="stylesheet" type="text/css">
<style type="text/css">
  #schedule {
    overflow-x: auto;
    white-space: nowrap;
  }
  .row table {
    word-break:break-all;
    border: 1px solid;
    border-collapse: collapse;
  }
  .row th, .row td {
    border: 1px solid;
    vertical-align: middle;
  }
  .row th {
    text-align: center;
  }
  .text-white{
    text-shadow: 0 0 10px #000;
  }
  .site_bg{
    background: -moz-linear-gradient(-45deg,  rgba(33,37,41,0.78) 0%, rgba(24,137,201,0.68) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(33,37,41,0.78) 0%,rgba(24,137,201,0.68) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(33,37,41,0.78) 0%,rgba(24,137,201,0.68) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-size: cover;
  }
</style>
@endpush

{{-- Content --}}
@section('content')

@include('custom::component.reply-btn', ['url' => route('user.rent.site', ['id' => $site->id])])
<form method="POST" enctype="multipart/form-data">
  {{csrf_field()}}
  <div class="wrap d-md-flex">
    <div class="site_bg col-lg-5 text-wrap p-4 p-lg-5 d-flex img d-flex align-items-end" style="background-image: url('../../site/getImage?id={{$site->id}}'), linear-gradient(135deg,  rgba(33,37,41,0.78) 0%,rgba(24,137,201,0.68) 100%);">
      <div class="text w-100 text-white">
        <h2 class="mb-4">{{$site->name}}</h2>
        <p>歡迎租借</p>
      </div>
    </div>
    <div class="col-lg-7 login-wrap p-4 p-md-5">
      <h3 class="mb-3">{{$site->name}}</h3>
      <div class="row">
        <div class="col-md-12">
          {!! $form->render() !!}
          <div class="form-group align-items-center">
            <label class="label mr-3" for="sdate">
              <span class="align-middle">※<b>起始日期</b></span>
            </label>
            <input type="text" name="sdate" class="form-control datepicker" id="sdate" value="{{old('sdate', $sdate)}}" placeholder="起始日期" required="required">
          </div>
          <div class="form-group align-items-center">
            <label class="label mr-3" for="edate">
              <span class="align-middle">※<b>結束日期</b></span>
            </label>
            <input type="text" name="edate" class="form-control datepicker" id="edate" value="{{old('edate', $edate)}}" placeholder="結束日期" required="required">
          </div>
          <div class="form-group align-items-center">
            <label class="label mr-3" for="file">
              <span class="align-middle"><b>附件</b></span>
            </label>
            <input type="file" name="file" class="form-control" id="file" value="{{old('edate', $edate)}}" placeholder="結束日期">
            @if($errors->has('file'))
              @foreach ($errors->get('file') as $error)
                <div class="invalid-feedback" style="display:block;">{{$error}}</div>
              @endforeach
            @endif
          </div>
          @php
            $use = (isset($data['types']['use']) ? $data['types']['use'] : null);
          @endphp
          @if (in_array($use, ['course', 'club']))
            @php
              $weeks = $data['course']['weeks'];
              $stime = $data['course']['stime'];
              $etime = $data['course']['etime'];
            @endphp
          @else
            @php
              $weeks = [];
              $stime = '';
              $etime = '';
            @endphp
          @endif
          @if (Request::is('admin/rent/create') || \Auth::user()->auth == 'ldap')
            <div class="form-group align-items-center">
              <label class="label mr-3">
                <span class="align-middle">※<b>用途</b></span>
              </label>
              <div>
                @foreach (config('rent.intramural_use') as $key => $text)
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="use-{{$key}}" name="use" value="{{$key}}" @if (old('use', $use) === $key) checked @endif>
                  <label class="custom-control-label" for="use-{{$key}}">{{$text}}</label>
                </div>
                @endforeach
                @if($errors->has('use'))
                  @foreach ($errors->get('use') as $error)
                    <div class="invalid-feedback" style="display:block;">{{$error}}</div>
                  @endforeach
                @endif
              </div>
            </div>
          @endif
          @foreach (config('rent.rent_type') as $key => $text)
            @php
              $value = (isset($data['types'][$key]) ? $data['types'][$key] : null);
            @endphp
            <div class="form-group align-items-center">
              <label class="label mr-3">
                <span class="align-middle">※<b>{{$text}}</b></span>
              </label>
              <div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="{{$key}}1" name="{{$key}}" value="1" @if (old($key, $value) === '1') checked @endif>
                  <label class="custom-control-label" for="{{$key}}1">是</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" id="{{$key}}0" name="{{$key}}" value="0" @if (old($key, $value) === '0') checked @endif>
                  <label class="custom-control-label" for="{{$key}}0">否</label>
                </div>
                @if($errors->has($key))
                  @foreach ($errors->get($key) as $error)
                    <div class="invalid-feedback" style="display:block;">{{$error}}</div>
                  @endforeach
                @endif
              </div>
            </div>
          @endforeach
          <!-- <div class="form-group align-items-center">
            <label class="label mr-3" for="file">
              <span class="align-middle">
                <b>附件</b>
              </span>
            </label>
            <div class="input-group col-md-6">
              <input type="file" name="file" class="form-control" id="file">
              <small class="form-text text-muted" style="width:100%;">勾選體育性質請檢附體育賽事文件</small>
              @if($errors->has('file'))
                @foreach ($errors->get('file') as $error)
                  <div class="invalid-feedback" style="display:block;">{{$error}}</div>
                @endforeach
              @endif
            </div>
          </div> -->
          <div id="courses">
            <div class="form-group align-items-center">
              <label class="label mr-3">
                <span class="align-middle">※<b>星期</b></span>
              </label>
              <div>
                @foreach (config('rent.rent_week') as $key => $text)
                <div class="custom-control custom-checkbox custom-control-inline">
                  <input type="checkbox" class="custom-control-input" id="weeks-{{$key}}" name="weeks[]" value="{{$key}}" @if (in_array($key, old('weeks', $weeks))) checked @endif>
                  <label class="custom-control-label" for="weeks-{{$key}}">{{$text}}</label>
                </div>
                @endforeach
                @if($errors->has('weeks'))
                  @foreach ($errors->get('weeks') as $error)
                    <div class="invalid-feedback" style="display:block;">{{$error}}</div>
                  @endforeach
                @endif
              </div>
            </div>
            <div class="form-group align-items-center">
              <label class="label mr-3">
                <span class="align-middle">※<b>起始時間</b></span>
              </label>
              <div class="input-group col-md-6">
                <input type="text" name="stime" class="form-control timepicker" value="{{old('stime', $stime)}}" placeholder="課程/社團起始時間" id="stime">
                @if($errors->has('stime'))
                  @foreach ($errors->get('stime') as $error)
                    <div class="invalid-feedback" style="display:block;">{{$error}}</div>
                  @endforeach
                @endif
              </div>
            </div>
            <div class="form-group align-items-center">
              <label class="label mr-3">
                <span class="align-middle">※<b>結束時間</b></span>
              </label>
              <div class="input-group col-md-6">
                <input type="text" name="etime" class="form-control timepicker" value="{{old('etime', $etime)}}" placeholder="課程/社團結束時間" id="etime">
                @if($errors->has('etime'))
                  @foreach ($errors->get('etime') as $error)
                    <div class="invalid-feedback" style="display:block;">{{$error}}</div>
                  @endforeach
                @endif
              </div>
            </div>
          </div>
          <div class="mt-3 text-center" id="schedules_btn">
            <button class="btn btn-primary" title="按下日期規劃會顯示每日規劃表">日期規劃</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="p-4 p-md-5">
    <div id="schedules">
      <div id="schedule">
        <table width="100%" class="form-group" summary="租借日期規劃" @if (!count($dates)) style="display: none;" @endif>
          <tr>
            <th scope="col">借用日期</th>
            <th scope="col">用途</th>
            <th scope="col">基本時段</th>
            <th scope="col">加租時段</th>
          </tr>
          @if (!in_array($use, ['course', 'club']))
            @foreach ($dates as $date)
              @php
                $uses = [];
                $items = [
                  'before' => [
                    'Y' => 0,
                    's' => 0,
                    'e' => 8,
                  ],
                  'period' => [],
                  'after' => [
                    'Y' => 0,
                    's' => 22,
                    'e' => 24,
                  ],
                ];
              @endphp
              @foreach (config('rent.rent_use') as $type => $text)
                @php
                  $values = [];
                  if (!empty($data['basic']['date'][$date][$type])) {
                    $uses = $data['basic']['date'][$date]['use'];
                    $items = $data['basic']['date'][$date][$type];
                    $values = (!empty($items['period'])) ? $items['period'] : [];
                  }
                @endphp
                <tr>
                  @if ($type == 1)
                  <td rowspan="4">{{$date}}</td>
                  @endif
                  <td>
                    <div>
                      <label>
                        <input type="checkbox" name="date[{{$date}}][use][]" value="{{$type}}" title="{{$date}}{{$text}}" @if (in_array($type, old('date.'.$date.'.use', $uses))) checked @endif>
                        {{$text}}
                      </label>
                    </div>
                  </td>
                  <td>
                    @foreach (config('rent.rent_period') as $key => $period)
                      <div>
                        <label>
                          <input type="checkbox" name="date[{{$date}}][{{$type}}][period][]" value="{{$key}}" title="{{$date}}{{$text}}基本時段{{$period}}" @if (in_array($key, old('date.'.$date.'.'.$type.'.period', $values))) checked @endif>
                          {{$period}}
                        </label>
                      </div>
                    @endforeach
                  </td>
                  <td>
                    <div>
                      <input type="hidden" name="date[{{$date}}][{{$type}}][before][Y]" value="0">
                      <input type="checkbox" name="date[{{$date}}][{{$type}}][before][Y]" value="1" title="{{$date}}{{$text}}加租基本時段前" @if (old('date.'.$date.'.'.$type.'.before.Y', !empty($items['before']['Y']))) checked @endif>
                      <select name="date[{{$date}}][{{$type}}][before][s]" title="{{$date}}{{$text}}加租基本時段前起始小時">
                        @for ($i = 0;$i < 9;$i++)
                          <option value="{{$i}}" @if (old('date.'.$date.'.'.$type.'.before.s', $items['before']['s']) == $i) selected @endif>{{$i}}</option>
                        @endfor
                      </select>
                      時至~
                      <select name="date[{{$date}}][{{$type}}][before][e]" title="{{$date}}{{$text}}加租基本時段前結束小時">
                        @for ($i = 0;$i < 9;$i++)
                          <option value="{{$i}}" @if (old('date.'.$date.'.'.$type.'.before.e', $items['before']['e']) == $i) selected @endif>{{$i}}</option>
                        @endfor
                      </select>
                      時
                    </div>
                    <div>
                      <input type="hidden" name="date[{{$date}}][{{$type}}][after][Y]" value="0">
                      <input type="checkbox" name="date[{{$date}}][{{$type}}][after][Y]" value="1" title="{{$date}}{{$text}}加租基本時段後" @if (old('date.'.$date.'.'.$type.'.after.Y', !empty($items['after']['Y']))) checked @endif>
                      <select name="date[{{$date}}][{{$type}}][after][s]" title="{{$date}}{{$text}}加租基本時段後起始小時">
                        @for ($i = 22;$i < 25;$i++)
                          <option value="{{$i}}" @if (old('date.'.$date.'.'.$type.'.after.s', $items['after']['s']) == $i) selected @endif>{{$i}}</option>
                        @endfor
                      </select>
                      時至~
                      <select name="date[{{$date}}][{{$type}}][after][e]" title="{{$date}}{{$text}}加租基本時段後結束小時">>
                        @for ($i = 22;$i < 25;$i++)
                          <option value="{{$i}}" @if (old('date.'.$date.'.'.$type.'.after.e', $items['after']['e']) == $i) selected @endif>{{$i}}</option>
                        @endfor
                      </select>
                      時
                    </div>
                  </td>
                </tr>
              @endforeach
            @endforeach
          @endif
        </table>
      </div>
    </div>
    <div class="mt-3 mb-5 text-center">
      <input type="submit" name="submit" class="btn btn-success" value="下一步" @if (!count($dates)) disabled @endif title="下一步">
    </div>
  </div>
</form>

  <div id="clone-sample" class="d-none">
    <table>
      @foreach (config('rent.rent_use') as $type => $text)
      <tr>
        @if ($type == 1)
        <td rowspan="4"></td>
        @endif
        <td>
          <label>
            <input type="checkbox" name="date[_DATE_][use][]" value="{{$type}}" title="_DATE_{{$text}}">
            {{$text}}
          </label>
        </td>
        <td>
          @foreach (config('rent.rent_period') as $key => $period)
            <div>
              <label>
                <input type="checkbox" name="date[_DATE_][{{$type}}][period][]" value="{{$key}}" title="_DATE_{{$text}}基本時段{{$period}}">
                {{$period}}
              </label>
            </div>
          @endforeach
        </td>
        <td>
          <div>
            <input type="checkbox" name="date[_DATE_][{{$type}}][before][Y]" title="_DATE_{{$text}}加租基本時段前">
            <select name="date[_DATE_][{{$type}}][before][s]" title="_DATE_{{$text}}加租基本時段前起始小時">
              @for ($i = 0;$i < 9;$i++)
                <option value="{{$i}}">{{$i}}</option>
              @endfor
            </select>
            時至~
            <select name="date[_DATE_][{{$type}}][before][e]" title="_DATE_{{$text}}加租基本時段結束小時">
              @for ($i = 0;$i < 9;$i++)
                <option value="{{$i}}" @if ($i == 8) selected @endif>{{$i}}</option>
              @endfor
            </select>
            時
          </div>
          <div>
            <input type="checkbox" name="date[_DATE_][{{$type}}][after][Y]" title="_DATE_{{$text}}加租基本時段後">
            <select name="date[_DATE_][{{$type}}][after][s]" title="_DATE_{{$text}}加租基本時段後起始小時">
              @for ($i = 22;$i < 25;$i++)
                <option value="{{$i}}">{{$i}}</option>
              @endfor
            </select>
            時至~
            <select name="date[_DATE_][{{$type}}][after][e]" title="_DATE_{{$text}}加租基本時段後結束小時">
              @for ($i = 22;$i < 25;$i++)
                <option value="{{$i}}" @if ($i == 24) selected @endif>{{$i}}</option>
              @endfor
            </select>
            時
          </div>
        </td>
      </tr>
      @endforeach
    </table>
  </div>
@endsection

{{-- Script --}}
@push('scripts')
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.10.2/ui/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/jquery-ui-timepicker-addon.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-timepicker-addon/i18n/jquery-ui-timepicker-zh-TW.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datepicker-default-setting.js') }}"></script>
<script type="text/javascript">
  function getMaintenances() {
    $.ajax({
      method: "POST",
      url: "{{route('user.rent.getMaintenances')}}",
      async:false,
      data: {
        _token: $('input[name="_token"]').val(),
        id: {{$site->id}},
        sdate: $('input[name="sdate"]').val(),
        edate: $('input[name="edate"]').val()
      }
    })
    .done(function( json ) {
      let data = JSON.parse(json);
      for (let d in data) {
        let periods = data[d];
        if (periods.length == 3) {
          $('input[name^="date['+d+']"][name$="[use][]"]:eq(0)').closest('tr').html('<td>'+d+'</td><td colspan="3">維護</td>');
          $('input[name^="date['+d+']"][name$="[use][]"]').closest('tr').remove();
        } else {
          for (let p in periods) {
            $('input[name^="date['+d+']"][name$="[period][]"][value="'+periods[p]+'"]').prop('disabled', true);
          }
        }
      }
    });
  }
  @if (Request::is('admin/rent/create'))
  $( document ).ready(function() {
    setRoleUse($('input[name="role"]:checked').val());
    $('input[name="role"]').on('change', function() {
      setRoleUse($(this).val());
    });
  });
  function setRoleUse(role) {
    let element = $('input[name="use"]').parent().parent().parent();
    if (role == 'ntsu') {
      element.show();
      showUse($('input[name="use"]:checked').val());
    } else {
      element.hide();
      showUse('');
    }
  }
  @endif
</script>
<script type="text/javascript" src="{{ Module::asset('rent:js/rent/create.js')}}"></script>
@endpush