@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('js/jquery-ui-1.12.1/jquery-ui.theme.min.css') }}" rel="stylesheet" type="text/css">
@endpush

{{-- Content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<div class="row justify-content-center">
  <div class="col-12 col-lg-10">
    <div class="shadow-sm p-3 bg-white rounded-lg pt-4">
      <form id="editForm" method="post">
        @csrf
        {{-- 開始時間 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputStartDate">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>開始時間</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="start_date" class="form-control datepicker {{ $errors->has('start_date') ? ' is-invalid' : '' }}" id="InputStartDate" value="{{old('start_date')}}" readonly required />
            @if($errors->has('start_date'))
              @foreach ($errors->get('start_date') as $error)
                <div class="invalid-feedback">
                  {{$error}}
                </div>
              @endforeach
            @endif
          </div>
        </div>

        {{-- 結束時間 --}}
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="InputEndDate">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>結束時間</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <input type="text" name="end_date" class="form-control datepicker {{ $errors->has('end_date') ? ' is-invalid' : '' }}" id="InputEndDate" value="{{old('end_date')}}" readonly required />
            @if($errors->has('end_date'))
              @foreach ($errors->get('end_date') as $error)
                <div class="invalid-feedback">
                  {{$error}}
                </div>
              @endforeach
            @endif
          </div>
        </div>

        <div class="text-center mt-5">
          <button type="button" class="btn btn-lg btn-success font-weight-bold export-btn">匯出</button>
          <button type="button" class="btn btn-lg btn-success font-weight-bold submit-btn">查詢</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui-1.12.1/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datepicker-default-setting.js') }}"></script>
<script>
  let setting = {
    controlType: "select",
    changeMonth: true,
    dateFormat:"yy-mm-dd",
    showOn: 'both',
    buttonText: '<i class="fas fa-calendar"></i>',
    stepMinute: 30,
    onClose: function (dateText, inst) {
      var start = $('[name="start_date"]').val();
      var end = $('[name="end_date"]').val();

      if (start.length>0&&end.length>0) {
        if (start>end) {
          alert('開始時間須小於結束時間！');
          $(this).val('');
        }
      }
    }
  };

$(document).ready(function() {
  $(".datepicker").datepicker(setting);
  $(document).on('click', '.export-btn', function() {
    var url = "{!!$export_route!!}";
    var form = $("#editForm");
    if (!form[0].checkValidity()) {

      form[0].reportValidity();
      return;
    }

    LoadingCover.show();
    $('.alert').remove();
    $.ajax({
      url: url ,
      type: 'POST',
      data: form.serialize(),
      success: function(data){
        LoadingCover.hide();
        window.location.reload();
      },
      error: function(xhr){
        LoadingCover.hide();
        var errors = xhr.responseJSON;
        var alerts = [];
        for (var i = 0; i < Object.keys(errors).length; i++) {
          var error_arr = errors[Object.keys(errors)[i]];
          for (var j = 0; j < error_arr.length; j++) {
            alerts.push({ type: "danger", content: error_arr[j] });
          }
        }
        $( "#AlertTemplate" ).tmpl( alerts )
        .prependTo( "#component-response-alert" );
      }
    });

  });

  $('.submit-btn').on("click", function() {
    var form = $("#editForm");
    var is_valid = true;

    if (!form[0].checkValidity()) {

      form[0].reportValidity();
      return;
    }

    var start_date = $('[name=start_date]').val();
    var end_date = $('[name=end_date]').val();
    if (typeof start_date =='undefined'||start_date.length<=0||typeof end_date =='undefined'||end_date.length<=0) {
      alert('『起迄日期』為必填!');
      is_valid = false;
    }

    if (!is_valid) {
      LoadingCover.hide();
      return;
    }

    LoadingCover.show();

    form.submit();
  });
});
</script>
@endpush