@extends('layout.layout')

{{-- Style --}}
@push('links')
<style type="text/css">
  .row .col-md #peripherals {
    overflow-x: auto;
    white-space: nowrap;
  }
  .row #peripherals table {
    word-break:break-all;
    border: 1px solid;
    border-collapse: collapse;
  }
  .row #peripherals th, .row #peripherals td {
    border: 1px solid;
    vertical-align: middle;
  }
  .row #peripherals th {
    text-align: center;
  }
</style>
@endpush

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

<div class="row mb-3">
  <div class="col-md">
    <form method="POST">
      {{csrf_field()}}
      @if ($peripherals->count())
      <div id="peripherals">
        <table summary="週邊設備租借規劃">
          <thead>
            <th scope="col">項目</th>
            <th scope="col">費用</th>
            @foreach ($dates as $date)
              <th scope="col">{{$date}}</th>
            @endforeach
          </thead>
          <tbody>
            @foreach ($peripherals as $peripheral)
              <tr>
                @if ($peripheral->type == 'range')
                  @php
                    $info = explode('/', $peripheral->name);
                    $unit = (isset($info[1])) ? '每'.$info[1] : '';
                    $ranges = json_decode($peripheral->setting, true);
                  @endphp
                  <td>{{$info[0]}}</td>
                  <td>
                    @foreach ($ranges as $range)
                      <div>@if (count($ranges) > 1){{$range['min']}}~{{$range['max']}}：@endif {{$unit.$range['fee']}}/天</div>
                    @endforeach
                  </td>
                @else
                  <td>{{$peripheral->name}}</td>
                  <td>{{$peripheral->fee}}/{{config('site.charge_types')[$peripheral->type]}}</td>
                @endif
                @foreach ($dates as $date)
                  @php
                    $field = 'peripheral.'.$peripheral->id.'.'.$date;
                  @endphp
                  @if ($peripheral->type == 'time')
                    <td colspan="{{count($dates)}}">
                      <input type="hidden" name="peripheral[{{$peripheral->id}}][{{$date}}]" value="0">
                      <input type="checkbox" name="peripheral[{{$peripheral->id}}][{{$date}}]" value="1" title="{{$peripheral->name}}" @if (old($field, isset($rentPeripherals[$peripheral->id])) == '1') checked @endif>
                    </td>
                    @break
                  @else
                    <td>
                      @switch($peripheral->type)
                        @case('period')
                          @php
                            $values = [];
                            if (isset($rentPeripherals[$peripheral->id]['data'][$date])) {
                              $values = $rentPeripherals[$peripheral->id]['data'][$date]['values'];
                            }
                          @endphp
                          @foreach (config('rent.rent_period') as $key => $text)
                            <div>
                              <label>
                                <input type="checkbox" name="peripheral[{{$peripheral->id}}][{{$date}}][]" value="{{$key}}" title="{{$date}}{{$peripheral->name}}{{$text}}" @if (in_array($key, old($field, $values))) checked @endif>{{$text}}
                              </label>
                            </div>
                          @endforeach
                          @break
                        @case('range')
                        @case('bout')
                        @case('day-num')
                          @php
                            $value = null;
                            if (isset($rentPeripherals[$peripheral->id]['data'][$date])) {
                              $value = $rentPeripherals[$peripheral->id]['data'][$date]['value'];
                            }
                          @endphp
                          @if (($peripheral->type == 'range' && count($ranges) == 1) || $peripheral->type == 'bout')
                            @php
                              $min = 1;
                              $max = 5;
                              if ($peripheral->type == 'range') {
                                $min = $ranges[0]['min'];
                                $max = $ranges[0]['max'];
                              }
                            @endphp
                            <select name="peripheral[{{$peripheral->id}}][{{$date}}]" title="{{$date}}{{$peripheral->name}}">
                              <option value="">請選擇</option>
                              @for($i = $min;$i <= $max;$i++)
                              <option value="{{$i}}" @if (old($field, $value) == $i) selected @endif>{{$i}}</option>
                              @endfor
                            </select>
                          @else
                          <input type="text" name="peripheral[{{$peripheral->id}}][{{$date}}]" value="{{old($field, $value)}}" title="{{$date}}{{$peripheral->name}}">
                          @endif
                          @break
                        @case('day')
                          @php
                            $values = [];
                            if (isset($rentPeripherals[$peripheral->id]['data'])) {
                              $values = $rentPeripherals[$peripheral->id]['data'];
                            }
                          @endphp
                          <input type="hidden" name="peripheral[{{$peripheral->id}}][{{$date}}]" value="0">
                          <input type="checkbox" name="peripheral[{{$peripheral->id}}][{{$date}}]" value="1" title="{{$date}}{{$peripheral->name}}" @if (old($field, in_array($date, $values)) == '1') checked @endif>
                          @break
                        @case('hour')
                          <div id="hours-{{$peripheral->id}}-{{$date}}">
                            @php
                              $sValues = old($field.'.s', []);
                              $eValues = old($field.'.e', []);
                              if (empty($sValues) && isset($rentPeripherals[$peripheral->id]['data'][$date])) {
                                $values = $rentPeripherals[$peripheral->id]['data'][$date]['values'];
                                foreach ($values as $i => $value) {
                                  list($sValues[$i], $eValues[$i]) = explode('~', $value);
                                }
                              }
                            @endphp
                            @foreach ($sValues as $key => $value)
                              <div>
                                <select name="peripheral[{{$peripheral->id}}][{{$date}}][s][]" title="{{$date}}{{$peripheral->name}}起始小時">
                                  <option value=""></option>
                                  @for ($i = 8;$i < 23;$i++)
                                    <option value="{{$i}}" @if ($value == $i) selected @endif>{{$i}}</option>
                                  @endfor
                                </select>
                                ~
                                <select name="peripheral[{{$peripheral->id}}][{{$date}}][e][]" title="{{$date}}{{$peripheral->name}}結束小時">
                                  <option value=""></option>
                                  @for ($i = 8;$i < 23;$i++)
                                    <option value="{{$i}}" @if ($eValues[$key] == $i) selected @endif>{{$i}}</option>
                                  @endfor
                                </select>
                                <button type="button" class="btn btn-link removeBtn" title="刪除{{$date}}{{$peripheral->name}}租用時段">
                                  <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
                                </button>
                              </div>
                            @endforeach
                          </div>
                          <button type="button" class="btn btn-link addBtn" data-pid="{{$peripheral->id}}" data-pname="{{$peripheral->name}}" data-date="{{$date}}" title="新增{{$date}}{{$peripheral->name}}租用時段">
                            <span class="fas fa-plus-circle fa-2x">&ensp;</span>
                          </button>
                          @break
                      @endswitch
                    </td>
                  @endif
                @endforeach
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <input type="hidden" name="no_peripheral" value="false">
      @else
      無週邊設施資料！
      <input type="hidden" name="no_peripheral" value="true">
      @endif
      <div class="form-group row" style="margin-top: 5px;">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <input type="submit" name="submit" class="btn btn-success" value="下一步" title="下一步">
        </div>
      </div>
    </form>
  </div>
</div>

<div id="clone-sample" class="d-none">
  <div>
    <select name="peripheral[_PID_][_DATE_][s][]" title="_DATE__PNAME_起始小時">
      <option value=""></option>
      @for ($i = 8;$i < 23;$i++)
        <option value="{{$i}}">{{$i}}</option>
      @endfor
    </select>
    ~
    <select name="peripheral[_PID_][_DATE_][e][]" title="_DATE__PNAME_結束小時">
      <option value=""></option>
      @for ($i = 8;$i < 23;$i++)
        <option value="{{$i}}">{{$i}}</option>
      @endfor
    </select>
    <button type="button" class="btn btn-link removeBtn" title="刪除_DATE__PNAME_租用時段">
      <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
    </button>
  </div>
</div>
@endsection


{{-- Script --}}
@section('script')
@parent
<script type="text/javascript" src="{{ Module::asset('site:js/peripheral/create.js')}}"></script>
<script type="text/javascript">
  $(".removeBtn").on("click", function () {
    $(this).parent().remove();
  });
  $(".addBtn").on("click", function () {
    let date = $(this).data('date');
    let pid = $(this).data('pid');
    let pname = $(this).data('pname');
    let lastRow = $("#hours div:last");
    let newRow = $("#clone-sample div").clone(true);
    $(newRow).find('select').each(function() {
      $(this).prop('name', $(this).attr('name').replace('_PID_', pid));
      $(this).prop('name', $(this).attr('name').replace('_DATE_', date));
      $(this).prop('title', $(this).attr('title').replace('_PNAME_', pname));
      $(this).prop('title', $(this).attr('title').replace('_DATE_', date));
    });
    $(newRow).find('.removeBtn').each(function() {
      $(this).prop('title', $(this).attr('title').replace('_PNAME_', pname));
      $(this).prop('title', $(this).attr('title').replace('_DATE_', date));
    });
    $("#hours-"+pid+'-'+date).append(newRow);
  });
</script>
@endsection