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

@section('gelombang-setting')
  <div class="tab-pane" id="komponen-ujian" role="tabpanel">
    <h5>
      Pengaturan Komponen Penilaian Ujian
    </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="alert alert-info">
      Silahkan pilih jalur dan fakultas yang aktif pada gelombang ini untuk mengatur kapasitas beserta biaya
      pendaftaran program studi dari fakultas terpilih.
    </div>

    <div class=" mt-2 d-flex align-items-end justify-content-between">
      <form class="d-flex flex-column flex-md-row gap-2" method="GET">
        @foreach (request()->all() as $key => $value)
          @if ($key != 'nama' && $key != 'page' && $key != 'gel_jalur_id' && $key != 'gel_fakultas_id' && !is_array($value))
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
          @endif
        @endforeach

        <div class="form-group " style="width: 200px">
          <label for="">Jalur</label>
          <select name="gel_jalur_id" class="form-control form-select" value="{{ request()->gel_jalur_id }}"
            id="pilih-jalur-aktif">
            <option value="">Pilih Jalur</option>
            @if ($pilihan_jalur)
              @foreach ($pilihan_jalur as $jalur)
                <option value="{{ $jalur->id }}" @if ($jalur->id == request()->gel_jalur_id) selected @endif>
                  {{ $jalur->name }} </option>
              @endforeach
            @endif
          </select>
        </div>

        <div class="form-group " style="width: 200px">
          <label for="">Fakultas</label>
          <select name="gel_fakultas_id" value="{{ request()->gel_fakultas_id }}" class="form-control form-select"
            id="pilih-fakultas-aktif" onchange="submit()">
            @if ($pilihan_fakultas)
              <option value="">Pilih Fakultas</option>
              @foreach ($pilihan_fakultas as $fakultas)
                <option value="{{ $fakultas->id }}" @if ($fakultas->id == request()->gel_fakultas_id) selected @endif>
                  {{ $fakultas->name }} </option>
              @endforeach
            @else
              <option value=""> Pilih jalur terlebih dahulu </option>
            @endif
          </select>
        </div>
      </form>

      @if (request('gel_fakultas_id'))
        <div class="d-flex justify-content-end">
          <button value="true" class="btn btn-outline-primary" id='check-all-btn'
            onclick="
					var checked = this.value == 'true';

					var is_cbt = $('.is-cbt');
					is_cbt.each(function(index, element) {
						$(element).prop('checked', checked  );
						$(element).trigger('change');
					});

					var is_medic = $('.is-medic');
					is_medic.each(function(index, element) {
						$(element).prop('checked', checked  );
						$(element).trigger('change');
					});

					var is_interview = $('.is-interview');
					is_interview.each(function(index, element) {
						$(element).prop('checked', checked  );
						$(element).trigger('change');
					});

					this.value= this.value == 'true'? 'false' : 'true';
					this.innerHTML = this.value == 'true'? 'Tandai Semua' : 'Batal Tandai';
		 "></button>
        </div>
      @endif
    </div>


    @if (request('gel_fakultas_id'))
      <form class="overflow-auto" method="post" action="/masterdata/gelombang/komponen-ujian/batch-update">
        @csrf
        <table class="table table-bordered rounded mt-2">
          <thead class="bg-secondary text-white">
            <tr>
              <th>No</th>
              <th>Prodi</th>
              <th>CBT</th>
              <th>Ujian Kesehatan</th>
              <th>Ujian Wawancara</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($gelombang_ujian as $key => $ujian)
              <tr>
                <td>{{ $key + 1 }}
                  <input type="hidden" value="{{ $ujian->id }}" name="id[]">
                </td>
                <td>
                  {{ $ujian->gelombang_prodi_name }}
                  <input type="hidden" value="{{ $ujian->gel_prodi_id_rel }}" name="gel_prodi_id[]">
                </td>
                <td class="fs-4">
                  <input class="form-check-input is-cbt" type="checkbox" @if ($ujian->is_cbt) checked @endif
                    onchange="
											var checked = this.checked;
											var input = $('#is-cbt-' + {{ $key }});
											input.prop('value', checked==true? 1: 0);
										" />
                  <input type="hidden" id="is-cbt-{{ $key }}" name="is_cbt[]"
                    value="{{ $ujian->is_cbt ?? 0 }}">
                </td>
                <td class="fs-4">
                  <input class="form-check-input is-medic" type="checkbox"
                    @if ($ujian->is_medic) checked @endif
                    onchange="
											var checked = this.checked;
											var input = $('#is-medic-' + {{ $key }});
											input.prop('value', checked==true? 1: 0);
										" />
                  <input type="hidden" id="is-medic-{{ $key }}" name="is_medic[]"
                    value="{{ $ujian->is_medic ?? 0 }}">
                </td>
                <td class="fs-4">
                  <input class="form-check-input is-interview" type="checkbox"
                    @if ($ujian->is_interview) checked @endif
                    onchange="
											var checked = this.checked;
											var input = $('#is-interview-' + {{ $key }});
											input.prop('value', checked==true? 1: 0);
										" />
                  <input type="hidden" id="is-interview-{{ $key }}" name="is_interview[]"
                    value="{{ $ujian->is_interview ?? 0 }}">
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
        <input type="submit" class="d-none" id="batch-update" />
      </form>


      <div class="d-flex justify-content-end ">
        <label for="batch-update" class="btn btn-primary" style="width: 150px">Simpan</label>
      </div>
    @else
      <div class="alert alert-warning mt-2">
        <strong>Info!</strong> Pilih Fakultas terlebih dahulu.
      </div>
    @endif


  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <script>
    // $('#pilih-jalur-aktif').on('change', function() {});

    var checkAllButton = $('#check-all-btn');
    let isCheckedAll = true;

    let checks1 = $('.is-cbt');
    if (checks1) {
      for (let i = 0; i < checks1.length; i++) {
        if (!checks1[i].checked) {
          isCheckedAll = false;
        }
      }
    }


    let checks2 = $('.is-medic');
    if (checks2) {
      for (let i = 0; i < checks2.length; i++) {
        if (!checks2[i].checked) {
          isCheckedAll = false;
        }
      }
    }

    let checks3 = $('.is-interview');
    if (checks3) {
      for (let i = 0; i < checks3.length; i++) {
        if (!checks3[i].checked) {
          isCheckedAll = false;
        }
      }
    }

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

    $(document).ready(function() {
      $('#pilih-jalur-aktif').on('change', function() {
        var id_jalur = this.value;
        $("#pilih-fakultas-aktif").html('');

        $.ajax({
          url: '/masterdata/gelombang/fakultas/all-active',
          type: 'GET',
          dataType: 'json',
          data: {
            'id_jalur': id_jalur,
            'id_gelombang': {{ request()->id_gelombang }}
          },
          success: function(data) {
            $("#pilih-fakultas-aktif").append(
              '<option value=""> Pilih Fakultas </option>'
            );


            if (data.length == 0) {
              $("#pilih-fakultas-aktif").html('');
              $("#pilih-fakultas-aktif").append(
                '<option value="">Tidak ada fakultas aktif</option>'
              );
            }

            $.each(data, function(index, value) {
              $("#pilih-fakultas-aktif").append(
                '<option value="' + value.id + '">' + value.name + '</option>'
              );
            });

          }
        });

      });
    });
  </script>
@endsection