@extends('layout.layout')

@push('links')
<link href="{{ asset('js/jquery-ui-1.10.2/themes/base/jquery-ui.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content')
<input type="hidden" id="js-sitearea-url" value="{{url('/api/site/area/fetchAll')}}" />
<input type="hidden" id="js-datatable-baseUrl" value="{{route('admin.rent.index')}}" />

<div class="row mb-3">
  <div class="col-md">
    <form method="POST">
      {{csrf_field()}}
      <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 ($sites as $row)
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" id="site{{$row->id}}" name="site" value="{{$row->id}}" @if (old('site', $site??'') == $row->id) checked @endif>
            <label class="custom-control-label" for="site{{$row->id}}">{{$row->name}}</label>
          </div>
          @endforeach
          @if($errors->has('site'))
            @foreach ($errors->get('site') as $error)
              <div class="invalid-feedback" style="display:block;">{{$error}}</div>
            @endforeach
          @endif
        </div>
      </div>
      <div id="areas">
        <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">
            <div>
              @foreach (old('areas', $areas??[]) as $area)
                <input type="hidden" name="areas[]" value="{{$area}}">
              @endforeach
            </div>
            @if($errors->has('areas'))
              @foreach ($errors->get('areas') as $error)
                <div class="invalid-feedback" style="display:block;">{{$error}}</div>
              @endforeach
            @endif
          </div>
        </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="sdate" class="form-control datepicker" value="{{old('sdate', $sdate??'')}}" placeholder="起始日期">
          @if($errors->has('sdate'))
            @foreach ($errors->get('sdate') 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="edate" class="form-control datepicker" value="{{old('edate', $edate??'')}}" placeholder="結束日期">
          @if($errors->has('edate'))
            @foreach ($errors->get('edate') 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" for="status">
          <span class="align-middle">※<b>狀態</b></span>
        </label>
        <div class="input-group col-md-6">
          <select name="status" class="form-control" id="status">
            <option value="">全部</option>
            @foreach ($options as $i => $text)
            <option value="{{$i}}" @if ((string)old('status', $status??'') === (string)$i) selected @endif>{{$text}}</option>
            @endforeach
          </select>
        </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="查詢">
        </div>
      </div>
    </form>
  </div>
</div>

<div id="clone-sample" class="d-none">
  <div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="area_AID_" name="areas[]" value="_AID_">
    <label class="custom-control-label" for="area_AID_">_ANAME_</label>
  </div>
</div>

@if (!empty($site))
<div class="row mb-3">
  <div class="col">總計：{{$total}}</div>
</div>
<div class="row mb-3">
  <div class="col">
    <table class="table table-striped table-hover" id="dataTable">
      <thead class="thead-light text-center">
        <tr>
          <th scope="row">場地</th>
          <th scope="row">區域</th>
          <th scope="row">時間</th>
          <th scope="row">租金</th>
          <th scope="row">狀態</th>
          <th scope="row">申請時間</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="6" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
</div>
@endif
@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/datatable/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datatable/datatable-default-setting.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('rent:js/admin/statistics.js')}}"></script>
<script type="text/javascript">
  @if (!empty($areas))
    @foreach ($areas as $area)
      $('input[name="areas[]"][value="{{$area}}"]').prop('checked', true);
    @endforeach

    dataTableDefSetting.language.searchPlaceholder = "名稱";
    table = $("#dataTable").DataTable( Object.assign(dataTableDefSetting, {
      serverSide: true,
      ajax: {
        url: $("#js-datatable-baseUrl").val() + "/statisticsRent",
        type: 'POST',
        data: function(data) {
          data._token = $('input[name="_token"]').val();
          data.areas = $('input[type=checkbox]:checked').map(function(_, el) {
            return $(this).val();
          }).get();
          data.sdate = $('input[name="sdate"]').val();
          data.edate = $('input[name="edate"]').val();
          data.status = $('select[name="status"]').val();
        }
      },
      /**
       * 預設排序
       */
      "order": [
        ["5", "desc"]
      ],
      /**
       * targets: int
       * orderable: boolean 排序
       * orderData: array 複數排序
       * searchable: boolean 查詢
       * visible: boolean 顯示
       * className: string 加進去的class內容
       */
      "columnDefs": [
        { "targets": 0, 'orderable': false, 'searchable': false, 'className': 'align-middle text-center pr-3' },
        { "targets": 1, 'orderable': false, 'searchable': false, 'className': 'align-middle text-center pr-3' },
        { "targets": 2, 'orderable': false, 'searchable': false, 'className': 'align-middle text-center pr-3' },
        { "targets": 3, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center pr-3' },
        { "targets": 4, 'orderable': false, 'searchable': false, 'className': 'align-middle text-center pr-3' },
        { "targets": 5, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center pr-3' }
      ]
    }));
    $('#dataTable_filter').hide();
  @endif
</script>
@endpush