@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;
  }
</style>
@endpush

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

@include('custom::component.reply-btn', ['url' => $return_url])

<div class="col-md">
  <div class="text-center h3">{{$site->name}}</div>
  @if ($image)
    <div class="row text-center">
      <div class="col-md-8 mx-auto">
          <a href="{{route('site.upload.getImage', ['id' => $image->id])}}" target="_blank" title="{{$site->name}}平面圖">
            <img src="{{route('site.upload.getImage', ['id' => $image->id])}}" width="100%">
          </a>
      </div>
    </div>
  @endif
  <form method="POST" enctype="multipart/form-data">
    {{csrf_field()}}
    {!! $form->render() !!}

    {{-- 起始日期 --}}
    <div class="form-group row">
      <label class="col-form-label col-md-3 text-md-right" for="sdate">
        <span class="align-middle">※<b>起始日期</b></span>
      </label>
      <div class="input-group col-md-6">
        <input type="text" name="sdate" class="form-control datepicker" id="sdate" value="{{old('sdate', $sdate)}}" placeholder="起始日期" required="required">
      </div>
    </div>

    {{-- 起始日期 --}}
    <div class="form-group row">
      <label class="col-form-label col-md-3 text-md-right" for="edate">
        <span class="align-middle">※<b>結束日期</b></span>
      </label>
      <div class="input-group col-md-6">
        <input type="text" name="edate" class="form-control datepicker" id="edate" value="{{old('edate', $edate)}}" placeholder="結束日期" required="required">
      </div>
    </div>

    {{-- 申請/借用單位 --}}
    <div class="form-group row">
      <label class="col-form-label col-md-3 text-md-right" for="rent_unit">
        <span class="align-middle">※<b>申請/借用單位</b></span>
      </label>
      <div class="input-group col-md-6">
        <input type="text" name="rent_unit" id="rent_unit" class="form-control" value="{{old('rent_unit', $rent_unit)}}" placeholder= 
          @if (\Auth::user()->role == 'student' || \Auth::user()->role == 'teacher')
            系所/行政單位
          @else
            公司行號
          @endif>
      </div>
    </div>

    {{-- 附件 --}}
    <div class="form-group row">
      <label class="col-form-label col-md-3 text-md-right" 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 h-auto" id="file" placeholder="附件">
        @if($errors->has('file'))
          @foreach ($errors->get('file') as $error)
            <div class="invalid-feedback" style="display:block;">{{$error}}</div>
          @endforeach
        @endif
      </div>
    </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 row">
        <label class="col-form-label col-md-3 text-md-right">
          <span class="align-middle">※<b>用途</b></span>
        </label>
        <div class="input-group col-md-6 d-flex align-items-center">
          @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 row">
        <label class="col-form-label col-md-3 text-md-right">
          <span class="align-middle">※<b>{{$text}}</b></span>
        </label>
        <div class="input-group col-md-6 d-flex align-items-center">
          <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
    @if (Request::is('admin/rent/create') || \Auth::user()->auth == 'ldap')
      <div id="courses">
        <div class="form-group row">
          <label class="col-form-label col-md-3 text-md-right">
            <span class="align-middle">※<b>星期</b></span>
          </label>
          <div class="input-group col-md-6 d-flex align-items-center">
            @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 row">
          <label class="col-form-label col-md-3 text-md-right">
            <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 row">
          <label class="col-form-label col-md-3 text-md-right">
            <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>
    @endif
    <div id="schedules">
      <div class="form-group text-center">
        <button class="btn btn-primary" title="按下日期規劃會顯示每日規劃表">日期規劃</button>
      </div>
      <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']))
            @php
              $weeks = $data['course']['weeks'];
              $stime = $data['course']['stime'];
              $etime = $data['course']['etime'];
            @endphp
          @else
            @php
              $weeks = [];
              $stime = '';
              $etime = '';
            @endphp
            @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="form-group text-center">
      @php if(($user->role == 'firm' || $user->role == 'normal') && ($site->id ==env('SITE_ID'))) $btn_name='送審'; else $btn_name='下一步'; @endphp
      <input type="submit" name="submit" class="btn btn-success" value="{{ $btn_name }}" @if (!count($dates)) disabled @endif title="{{ $btn_name }}">
    </div>
  </form>
</div>

  <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());
      $('input[name="rent_unit"]').attr('placeholder','系所/行政單位');
    } else if (role == 'normal'){
      element.hide();
      showUse('');
    } else {
      element.hide();
      showUse('');
      $('input[name="rent_unit"]').attr('placeholder','公司行號');
    }
  }
  @endif
</script>
<script type="text/javascript" src="{{ Module::asset('rent:js/rent/create.js')}}"></script>
@endpush