@extends('masterdata::gelombang-setting')

@section('gelombang-setting')
  <div class="tab-pane active" id="jalur" role="tabpanel">
    <h5>
      Pengaturan Jalur Masuk
    </h5>

    @if (Session::has('success'))
      <div class="alert alert-success alert-dismissible fade show" role="alert">


        <strong> {{ Session::get('success') }}</strong>
      </div>
    @endif

    @if ($errors->any())
      {!! implode(
          '',
          $errors->all('<div class="alert alert-danger alert-dismissible fade show" role="alert">
                                          		 <strong>:message</strong>
                                          	</div>'),
      ) !!}
    @endif

    <div class="d-flex justify-content-between mt-2 mb-2 gap-2">
      <form id='search-gelombang-jalur ' method="GET">
        <div class="input-group ">
          @foreach (request()->all() as $key => $value)
            @if ($key != 'page' && $key != 'nama')
              <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endif
          @endforeach

          <input name="nama" value="{{ request('nama') }}" class="form-control py-2 border-right-0 border"
            placeholder="Nama Komponen... " id="example-search-input">
          <span class="input-group-append">
            <button type="submit" class="btn btn-primary rounded-right" type="button">
              <i class="fas fa-search"></i>
            </button>
          </span>
        </div>
      </form>

      <div>
        <button type="button" value="false" id="check-all-btn" class="btn btn-outline-primary"></button>
      </div>
    </div>

    <form id='gelombang-jalur' style="overflow-x: auto" method="POST" action="/masterdata/gelombang/jalur">
      @csrf
      @method('post')
      <input type='hidden' name="id_gelombang" value="{{ request()->id_gelombang }}">
      <table class="table table-bordered rounded">

        <thead class="bg-secondary text-white ">
          <tr>
            <th style="width: 20px">
            </th>
            <th>Jalur Pendaftaran</th>
            <th>Kapasitas</th>
            <th>Biaya Pendaftaran</th>
          </tr>
        </thead>

        <tbody>
          @foreach ($gelombang_jalurs as $index => $gelombang_jalur)
            <tr>
              <td class="fs-4 text-center">
                <input type='hidden' name="id[]" value="{{ $gelombang_jalur->id }}">
                <input type='hidden' name="id_jalur[]" value="{{ $gelombang_jalur->id_jalur }}">

                <input name='status[]' value="1" @if ($gelombang_jalur->status == 1) checked @endif
                  class="form-check-input id-jalur-checkbox " type="checkbox"
                  onchange='
										if(this.checked){
										$("#status-{{ $gelombang_jalur->id_jalur }}").prop("checked", false);
										}else{
										$("#status-{{ $gelombang_jalur->id_jalur }}").prop("checked", true);
										}
									'
                  style="cursor: pointer;" />

                <input name='status[]' class="d-none id-jalur-checkbox-rev" id="status-{{ $gelombang_jalur->id_jalur }}"
                  value="0" @if ($gelombang_jalur->status == 0) checked @endif class="form-check-input" type="checkbox"
                  style="cursor: pointer;" />
              </td>
              <td>
                <input type="hidden" name="name[]"
                  value="{{ $gelombang_jalur->name_related ? $gelombang_jalur->name_related : $gelombang_jalur->name }}">
                {{ $gelombang_jalur->name_related ? $gelombang_jalur->name_related : $gelombang_jalur->name }}
              </td>
              <td>
                <input name="capasity[]" type="hidden"
                  value="{{ $gelombang_jalur->capasity_related ? $gelombang_jalur->capasity_related : $gelombang_jalur->capasity }}">
                {{ numberFormat($gelombang_jalur->capasity_related ? $gelombang_jalur->capasity_related : $gelombang_jalur->capasity) }}

                <input name="code[]" type="hidden"
                  value="{{ $gelombang_jalur->code_related ? $gelombang_jalur->code_related : $gelombang_jalur->code }}">
              </td>

              <td class="fs-4 ">
                <input name='is_bayar[]' value="1" @if ($gelombang_jalur->is_bayar == 1) checked @endif
                  class="form-check-input is-bayar-checkbox" type="checkbox"
                  onchange='
										if(this.checked){
										$("#is_bayar-{{ $gelombang_jalur->id_jalur }}").prop("checked", false);
										}else{
										$("#is_bayar-{{ $gelombang_jalur->id_jalur }}").prop("checked", true);
										}
									'
                  style="cursor: pointer;" />

                <input name='is_bayar[]' class="d-none is-bayar-checkbox-rev"
                  id="is_bayar-{{ $gelombang_jalur->id_jalur }}" value="0"
                  @if ($gelombang_jalur->is_bayar == 0) checked @endif class="form-check-input" type="checkbox"
                  style="cursor: pointer;" />
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>

      <input type="submit" id="submit-form-gelombang-jalur" class="d-none" />
    </form>

    <div class="d-flex justify-content-end">
      <label for="submit-form-gelombang-jalur" class="btn btn-primary" style="width: 150px">Simpan</label>
    </div>
  </div>

  <script>
    var checkAllButton = $('#check-all-btn');
    let isCheckedAll = true;
    let id_jalur_checkboxes = $('.id-jalur-checkbox');

    for (let i = 0; i < id_jalur_checkboxes.length; i++) {
      if (!id_jalur_checkboxes[i].checked) {
        isCheckedAll = false;
      }
    }


    if (isCheckedAll) {
      checkAllButton.val(true)
      checkAllButton.html('Batal tandai')
    } else {
      checkAllButton.val(false)
      checkAllButton.html('Tandai semua')
    }

    $(document).ready(
      function() {
        if (checkAllButton) {
          checkAllButton.on('click', function() {
            if (
              this.value === 'false'
            ) {
              let id_jalur_checkboxes = $('.id-jalur-checkbox');
              let id_jalur_checkboxes_rev = $('.id-jalur-checkbox-rev');

              let is_bayar_checkboxes = $('.is-bayar-checkbox');
              let is_bayar_checkboxes_rev = $('.is-bayar-checkbox-rev');

              for (let i = 0; i < id_jalur_checkboxes.length; i++) {
                id_jalur_checkboxes[i].checked = true;
                id_jalur_checkboxes_rev[i].checked = false;
                is_bayar_checkboxes[i].checked = true;
                is_bayar_checkboxes_rev[i].checked = false;
              }
              this.value = 'true';
              this.innerHTML = 'Batal tandai'
            } else {
              let id_jalur_checkboxes = $('.id-jalur-checkbox');
              let id_jalur_checkboxes_rev = $('.id-jalur-checkbox-rev');

              let is_bayar_checkboxes = $('.is-bayar-checkbox');
              let is_bayar_checkboxes_rev = $('.is-bayar-checkbox-rev');

              for (let i = 0; i < id_jalur_checkboxes.length; i++) {
                id_jalur_checkboxes[i].checked = false;
                id_jalur_checkboxes_rev[i].checked = true;
                is_bayar_checkboxes[i].checked = false;
                is_bayar_checkboxes_rev[i].checked = true;
              }
              this.value = 'false';
              this.innerHTML = 'Tandai Semua'
            }
          })
        }
      }
    )
  </script>
@endsection