@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>
            @if(!is_bool($dates) && count($dates)>0)
              @foreach ($dates as $date)
                <th scope="col">{{$date}}</th>
              @endforeach
            @endif
          </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
                @if(!is_bool($dates) && count($dates)>0)
                  @foreach ($dates as $date)
                    @php
                      $field = 'peripheral.'.$peripheral->id.'.'.$date;
                    @endphp
                    @if ($peripheral->type == 'time')
                      <td class="p-1" 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 class="text-center">
                        @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"></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"></span>
                            </button>
                            @break
                        @endswitch
                      </td>
                    @endif
                  @endforeach
                @endif
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <input type="hidden" name="no_peripheral" value="has">
      @else
      無週邊設施資料！
      <input type="hidden" name="no_peripheral" value="none">
      @endif
      <div class="form-group text-center">
        <input type="submit" name="submit" class="btn btn-success" value="下一步" title="下一步">
      </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"></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