@extends('layout.layout')

{{-- Style --}}
@push('links')
@endpush

{{-- Content --}}
@section('content')
<div class="row mb-3">
  <div class="col-12">
    <form method="POST" id="form">
      @csrf
      <div class="shadow-sm p-3 mb-4 bg-white rounded-lg">
        <div class="form-group row">
          <label class="col-form-label col-12 col-sm-3 text-sm-center" for="SelectGroup">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>群組</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <select name="group_id" id="SelectGroup" class="form-control custom-select {{ $errors->has('group_id') ? ' is-invalid' : '' }}" required>
              <option value="">請選擇群組</option>
              <option value="all">全部群組</option>
              @foreach($group_options as $option)
              <option value="{{$option->id}}">{{$option->name}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted w-100"></small>
            @if ($errors->has('group_id'))
              @foreach($errors->get('group_id') 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="SelectDep">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>部門/單位</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <select name="department_id" id="SelectDep" class="form-control custom-select {{ $errors->has('department_id') ? ' is-invalid' : '' }}" required>
              <option value="">請選擇部門/單位</option>
              <option value="all">全部部門/單位</option>
              @foreach($department_options as $option)
              <option value="{{$option->id}}">{{$option->name}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted w-100"></small>
            @if ($errors->has('department_id'))
              @foreach($errors->get('department_id') 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="SelectPosition">
            <span class="align-middle"><span class="text-red">※&ensp;</span><b>職稱</b></span>
          </label>
          <div class="input-group col-12 col-sm-9">
            <select name="position_id" id="SelectPosition" class="form-control custom-select {{ $errors->has('position_id') ? ' is-invalid' : '' }}" required>
              <option value="">請選擇職稱</option>
              <option value="all">全部職稱</option>
              @foreach($position_options as $option)
              <option value="{{$option->id}}">{{$option->name}}</option>
              @endforeach
            </select>
            <small class="form-text text-muted w-100"></small>
            @if ($errors->has('position_id'))
              @foreach($errors->get('position_id') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
          </div>
        </div>
        <div class="col-12 text-center mt-4">
          <input type="button" class="btn btn-lg btn-success font-weight-bold exportBtn" value="匯出">
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script nonce="{{ csp_nonce() }}">
var export_route = "{{$export_route}}";
</script>
<script nonce="{{ csp_nonce() }}">
  $(document).ready(function() {
    $(document).on('click', '.exportBtn', function() {
      var url = export_route;
      var form = $("#form");
      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( "#calendarForm-response-alert" );
        }
      });

    });

  });
</script>
@endpush