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

@section('gelombang-setting')
  <div class="tab-pane" id="berkas" role="tabpanel">
    <h5>
      Pengaturan Berkas
    </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

    <form method="GET">
      <input type="hidden" name="id_gelombang" value="{{ request('id_gelombang') }}">
      <div class="row mt-2">
        <div class="form-group col-12 col-lg-4  ">
          <label for="">Jalur</label>
          <select id='pilihan-jalur' name="gel_jalur_id" class="form-control form-select" id="filter">
            <option value="">Pilih Jalur</option>
            @foreach ($pilihan_jalur as $jalur)
              <option value="{{ $jalur->id }}" @if (request('gel_jalur_id') == $jalur->id) selected @endif>{{ $jalur->name }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="form-group col-12 col-lg-4  ">
          <label for="">Fakultas</label>
          <select id="pilihan-fakultas" name="gel_fakultas_id" class="form-control form-select" id="filter">
            <option value="">Pilih Jalur Terlebih dahulu</option>
            @foreach ($pilihan_fakultas as $fakultas)
              <option value="{{ $fakultas->id }}" @if (request('gel_fakultas_id') == $fakultas->id) selected @endif>{{ $fakultas->name }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="form-group col-12 col-lg-4  ">
          <label for="">Prodi</label>
          <select onchange="submit()" id="pilihan-prodi" name="gel_prodi_id" class="form-control form-select"
            id="filter">
            <option value="">Pilih Jalur Terlebih dahulu</option>
            @foreach ($pilihan_prodi as $prodi)
              <option value="{{ $prodi->id }}" @if (request('gel_prodi_id') == $prodi->id) selected @endif>{{ $prodi->name }}
              </option>
            @endforeach
          </select>
        </div>
      </div>

      <div class="d-flex flex-lg-row flex-column justify-content-between mt-2">
        <div class="mb-2 mb-lg-0">
          <div class="input-group ">
            <input name="nama" value="{{ request('nama') }}" class="form-control py-2 border-right-0 border"
              type="search" placeholder="Cari Berkas... " 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>
        </div>

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

							status_berkas.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>
    </form>

    @if (request('gel_prodi_id'))
      <form method="POST" action="/masterdata/gelombang/berkas/batch-update" class="overflow-auto">
        @csrf
        <input type="hidden" name='gel_prodi_id' value="{{ request()->gel_prodi_id }}">
        <table class="table table-bordered rounded mt-2">
          <thead class="bg-secondary text-white">
            <tr>
              <th style="width: 20px"></th>
              <th>Nama Berkas</th>
              <th>Keterangan</th>
            </tr>
          </thead>
          <tbody>
            @foreach ($gelombang_berkas as $key => $berkas)
              <tr>
                <td class="text-center fs-4">
                  <input type='hidden' name='id[]' value="{{ $berkas->id }}" />
                  <input type='hidden' name='berkas_id[]' value="{{ $berkas->id_berkas }}" />

                  <input class="form-check-input status-berkas"
                    onchange="
										$('#status-berkas-{{ $key }}').val($(this).prop('checked') ? '1' : '0');
									"
                    type="checkbox" @if ($berkas->status_gelombang_prodi_berkas) checked @endif />
                  <input type="hidden" name="status[]" id="status-berkas-{{ $key }}"
                    value="{{ $berkas->status_gelombang_prodi_berkas ? 1 : 0 }}" />
                </td>
                <td>
                  <input type='hidden' name='nama_berkas[]'
                    value="{{ $berkas->gelombang_prodi_berkas_name ?? $berkas->nama_berkas }} " />
                  {{ $berkas->gelombang_prodi_berkas_name ?? $berkas->nama_berkas }}
                </td>
                <td>
                  <input type='hidden' name='is_wajib[]'
                    value="{{ $berkas->is_gelombang_prodi_berkas_wajib ?? $berkas->is_berkas_wajib }} " />
                  @if (($berkas->is_gelombang_prodi_berkas_wajib ?? $berkas->is_berkas_wajib) == 1)
                    <span class="badge rounded-pill bg-success p-2">Wajib</span>
                  @else
                    <span class="badge rounded-pill bg-warning p-2">Pilihan</span>
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
        <input type='submit' id="submit-berkas" class='d-none' />

        <div class="d-flex justify-content-end ">
          <label for="submit-berkas" class="btn btn-primary" style="width: 150px">Simpan</label>
        </div>
      </form>
    @else
      <div class="alert alert-warning mt-2">
        <i class="fas fa-info-circle"></i>
        Pilih Jalur, Fakultas, dan Prodi terlebih dahulu
      </div>
    @endif


  </div>

  <script>
    var checkAllButton = $('#check-all-btn');
    let isCheckedAll = true;
    let checks = $('.status-berkas');

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

    console.log(isCheckedAll);

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


    $(document).ready(function() {
      $('#pilihan-jalur').on(
        'change',
        function() {
          var jalur = this.value;
          if (jalur && jalur !== '') {
            $.ajax({
              url: '/masterdata/gelombang/berkas/dependant-fakultas/' + {{ request('id_gelombang') }} + '/' +
                jalur,
              type: 'GET',
              success: function(data) {
                $('#pilihan-fakultas').html('');
                $('#pilihan-fakultas').append(
                  '<option value="">Pilih Fakultas</option>'
                )
                if (data.length == 0) {
                  $("#pilihan-fakultas").html('');
                  $("#pilihan-fakultas").append(
                    '<option value="">Tidak ada fakultas aktif</option>'
                  );
                }

                $.each(data, function(key, value) {
                  $('#pilihan-fakultas').append(
                    '<option value="' + value.id + '">' + value.name + '</option>'
                  )
                })
              },
              error: function(data) {}

            })
          }
        }
      )

      $('#pilihan-fakultas').on(
        'change',
        function() {
          var fakultas = this.value;
          var jalur = $('#pilihan-jalur').val();

          if (fakultas && fakultas !== '') {
            $.ajax({
              url: '/masterdata/gelombang/berkas/dependant-prodi/' + {{ request('id_gelombang') }} + '/' +
                jalur +
                '/' + fakultas,
              type: 'GET',
              success: function(data) {
                $('#pilihan-prodi').html('');
                $('#pilihan-prodi').append(
                  '<option value="">Pilih Prodi</option>'
                )

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

                $.each(data, function(key, value) {
                  $('#pilihan-prodi').append(
                    '<option value="' + value.id + '">' + value.name + '</option>'
                  )
                })
              },
              error: function(data) {
                console.log(data)
              }


            })
          }
        }
      )

    });
  </script>
@endsection