@extends('layout.layout')

{{-- Content --}}
@section('content')
@if(Request::is('site/*/peripheral/create'))
  @include('custom::component.reply-btn', ['url' => route('site.peripheral.index', $id)])
  @php
    $text = '新增'
  @endphp
@elseif(Request::is('site/*/peripheral/*/edit'))
  @include('custom::component.reply-btn', ['url' => route('site.peripheral.index', $peripheral->site_id)])
  @php
    $text = '儲存'
  @endphp
@endif

<div class="row mb-3">
  <div class="col-md">
    <form method="POST">
      {{csrf_field()}}
      {!! $form->render() !!}
      <div id="ranges">
        @if (old('ranges', []))
          @foreach (old('ranges.fee') as $i => $value)
            <div class="form-group row">
              <label class="col-form-label col-md-3 text-md-right">
                @if ($i == 0)<span class="align-middle"><b>區間</b>@endif</span>
              </label>
              <div class="input-group col-md-1">
                <input type="text" name="ranges[min][]" class="form-control" value="{{old('ranges.min.'.$i)}}" placeholder="最小">
              </div>
              <div class="input-group col-md-1">
                <input type="text" name="ranges[max][]" class="form-control" value="{{old('ranges.max.'.$i)}}" placeholder="最大">
              </div>
              <div class="input-group col-md-4">
                <input type="text" name="ranges[fee][]" class="form-control" value="{{$value}}" placeholder="費用">
                <button type="button" class="btn btn-link removeBtn">
                  <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
                </button>
              </div>
            </div>
          @endforeach
        @else
          @if (isset($peripheral) && $peripheral->type == 'range')
            @foreach ($ranges as $i => $range)
              <div class="form-group row">
                <label class="col-form-label col-md-3 text-md-right">
                  @if ($i == 0)<span class="align-middle"><b>區間</b>@endif</span>
                </label>
                <div class="input-group col-md-1">
                  <input type="text" name="ranges[min][]" class="form-control" value="{{$range['min']}}" placeholder="最小">
                </div>
                <div class="input-group col-md-1">
                  <input type="text" name="ranges[max][]" class="form-control" value="{{$range['max']}}" placeholder="最大">
                </div>
                <div class="input-group col-md-4">
                  <input type="text" name="ranges[fee][]" class="form-control" value="{{$range['fee']}}" placeholder="費用">
                  <button type="button" class="btn btn-link removeBtn">
                    <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
                  </button>
                </div>
              </div>
            @endforeach
          @else
            <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-1">
                <input type="text" name="ranges[min][]" class="form-control" placeholder="最小">
              </div>
              <div class="input-group col-md-1">
                <input type="text" name="ranges[max][]" class="form-control" placeholder="最大">
              </div>
              <div class="input-group col-md-4">
                <input type="text" name="ranges[fee][]" class="form-control" placeholder="費用">
                <button type="button" class="btn btn-link removeBtn">
                  <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
                </button>
              </div>
            </div>
          @endif
        @endif
      </div>
      <div class="form-group row">
        <label class="col-form-label col-md-3 text-md-right">
        </label>
        <div class="input-group col-md-6">
          <button type="button" class="btn btn-link addBtn">
            <span class="fas fa-plus-circle fa-2x">&ensp;</span>
          </button>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <input type="submit" name="submit" class="btn btn-success" value="{{$text}}">
        </div>
      </div>
    </form>
  </div>
</div>

<div id="clone-sample" class="d-none">
  <div class="form-group row">
    <label class="col-form-label col-md-3 text-md-right">
    </label>
    <div class="input-group col-md-1">
      <input type="text" name="ranges[min][]" class="form-control" placeholder="最小">
    </div>
    <div class="input-group col-md-1">
      <input type="text" name="ranges[max][]" class="form-control" placeholder="最大">
    </div>
    <div class="input-group col-md-4">
      <input type="text" name="ranges[fee][]" class="form-control" placeholder="費用">
      <button type="button" class="btn btn-link removeBtn">
        <span class="fas fa-minus-circle fa-2x text-danger">&ensp;</span>
      </button>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@section('script')
@parent
<script type="text/javascript" src="{{ Module::asset('site:js/peripheral/create.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){
    let addBtn = $('.addBtn').parent().parent();
    let element = $('input[name="fee"]').parent().parent();
    if ($('input[name="type"]:checked').val() == 'range') {
        $('#ranges').show();
        addBtn.show();
        element.hide();
        $('input[name="fee"]').prop('required', false);
    } else {
        $('#ranges').hide();
        addBtn.hide();
        element.show();
        $('input[name="fee"]').prop('required', true);
    }

    $('input[name="type"]').on('change', function(e) {
      if ($(this).val() == 'range') {
        $('#ranges').show();
        addBtn.show();
        element.hide();
        $('input[name="fee"]').prop('required', false);
      } else {
        $('#ranges').hide();
        addBtn.hide();
        element.show();
        $('input[name="fee"]').prop('required', true);
      }
    });
    checkFirst();
  });

  $(".removeBtn").on("click", function () {
    let count = $("#ranges .form-group").length;
    if(count > 1) {
      $(this).parent().parent(".form-group").remove();
    }
    checkFirst();
  });
  $(".addBtn").on("click", function () {
    let lastRow = $("#ranges form-group:last");
    let newRow = $("#clone-sample div.form-group").clone(true);
    if (lastRow.length == 0) {
      $("#ranges").append(newRow);
    } else {
      lastRow.after(newRow);
    }
    checkFirst();
  });

  function checkFirst(){
    let count = $("#ranges .form-group").length;
    if(count <= 1) {
      $("#ranges .form-group:first .removeBtn").addClass("d-none");
    }else{
      $("#ranges .form-group:first .removeBtn").removeClass("d-none");
    }
  }
</script>
@endsection