@extends('masterdata::report-data')

@section('report-data')
  <div class="mt-2">
    <div class="d-flex flex-md-row flex-column justify-content-between mb-2">
      <form class=" d-flex flex-md-row flex-column gap-1 " method="GET">
        @foreach (request()->all() as $key => $value)
          @if ($key != 'page' && $key != 'per_page' && $key != 'jalur' && $key != 'fakultas' && $key != 'prodi')
            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
          @endif
        @endforeach
        <select name="jalur" value="{{ request()->jalur }}" class=" form-select" value='{{ request('jalur') }}'
          id="pilihan-jalur">
          <option value="">Semua Jalur</option>
          @foreach ($pilihan_jalur as $jalur)
            <option value="{{ $jalur->id }}" @if (request()->jalur == $jalur->id) selected @endif>
              {{ $jalur->name }}
            </option>
          @endforeach
        </select>

        <select name="fakultas" value="{{ request()->fakultas }}" class="form-select" value='{{ request('fakultas') }}'
          id="pilihan-fakultas">

          <option value="">Semua Fakultas</option>
          @foreach ($pilihan_fakultas as $fakultas)
            <option value="{{ $fakultas->id }}" @if (request()->fakultas == $fakultas->id) selected @endif>
              {{ $fakultas->name }}
            </option>
          @endforeach

        </select>

        <select name="prodi" value="{{ request()->prodi }}" class=" form-select" value='{{ request('prodi') }}'
          id="pilihan-prodi">
          <option value="">Semua Prodi</option>
          @foreach ($pilihan_prodi as $prodi)
            <option value="{{ $prodi->id }}" @if (request()->prodi == $prodi->id) selected @endif>
              {{ $prodi->name }}
            </option>
          @endforeach
        </select>

        <select name="status_pembayaran" class="form-select" onchange="submit()">
          <option value="all" selected>
            Semua Status
          </option>
          <option value="yes" @if (request('status_pembayaran') == 'yes') selected @endif>
            Terverifikasi
          </option>
          <option value="no" @if (request('status_pembayaran') == 'no') selected @endif>
            Belum Diverifikasi
          </option>
        </select>

        <button type="submit" class="btn btn-primary">
          <i class="fa fa-search"></i>
        </button>
      </form>


      <div class="mt-2 mt-md-0 d-flex justify-content-end">
        <button class="btn btn-success" id='export-pendaftar-regis'>
          <i class="fa-solid fa-file-excel me-1"></i>
          Download Report</button>
      </div>
    </div>

    <div class="row g-2 ">
      <div class="col-lg-3 col-md-6 col-12 text-center">
        <div class="card border m-0">
          <div class="card-header fs-3">
            Rp{{ number_format($sum_struck ?? 0, 0, ',', '.') }}
          </div>
          <div class="p-2">
            Total pembayaran masuk
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 col-12 text-center">
        <div class="card border m-0">
          <div class="card-header fs-3">
            {{ $sum_verif ?? 0 }} Pendaftar
          </div>
          <div class="p-2">
            Jumlah pendaftar terverifikasi
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 col-12 text-center">
        <div class="card border m-0">
          <div class="card-header fs-3">
            {{ $sum_not_verif ?? 0 }} Pendaftar
          </div>
          <div class="p-2">
            Jumlah pendaftar belum diverifikasi
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 col-12 text-center">
        <div class="card border m-0">
          <div class="card-header fs-3">
            {{ $count_belum_bayar ?? 0 }} Pendaftar
          </div>
          <div class="p-2">
            Jumlah pendaftar belum membayar
          </div>
        </div>
      </div>
    </div>

    <div class="mt-2 mb-2 overflow-auto ">

      <table id="" class="table table-striped table-bordered rounded table-hover">
        <thead class="bg-primary text-white">
          <tr>
            <th>No</th>
            <th>Nama Mahasiswa</th>
            <th>No Peserta</th>
            <th>Jalur</th>
            <th>Kelulusan Fakultas/prodi</th>
            <th>Nominal Pembayaran</th>
            <th>Tanggal Pembayaran</th>
            <th>Status</th>
          </tr>
        </thead>

        <tbody>
          @foreach ($mahasiswas as $index => $mahasiswa)
            <tr>
              <td>{{ $index + 1 + ($page_detail['page'] - 1) * $page_detail['per_page'] }}</td>
              <td>{{ $mahasiswa->nama }}</td>
              <td>{{ $mahasiswa->no_peserta }}</td>
              <td>{{ $mahasiswa->nama_jalur }}</td>
              <td>
                {{ $mahasiswa->nama_fakultas }} / {{ $mahasiswa->nama_prodi }}
              </td>

              <td>
                {{ $mahasiswa->nominal ? 'Rp' . number_format($mahasiswa->nominal, 0, ',', '.') : '-' }}
              </td>

              <td>
                {{ $mahasiswa->tanggal_transfer ? \Carbon\Carbon::parse($mahasiswa->tanggal_transfer)->translatedFormat('l, d M Y H:i') : '-' }}
              </td>

              <td>
                @if ($mahasiswa->va_status === null)
                  <span class="badge rounded-pill p-2 bg-secondary">Belum buat VA</span>
                @elseif ($mahasiswa->terverifikasi)
                  <span class="badge rounded-pill p-2 bg-success">
                    Terverifikasi</span>
                @elseif ($mahasiswa->is_comment)
                  <span v-else-if="siswa.is_comment" class="badge rounded-pill p-2 bg-danger">
                    Di tolak</span>
                @elseif ($mahasiswa->terverifikasi === null)
                  <span class="badge rounded-pill p-2 bg-warning">Belum
                    Upload</span>
                @elseif (!$mahasiswa->terverifikasi)
                  <div v-else-if="!pendaftar.struck_status" class="d-flex justify-content-start" id="tooltip-container">
                    <span class="badge rounded-pill bg-secondary p-2 mt-2 me-2">Belum di verifikasi
                    </span>

                    <span data-bs-container="#tooltip-container" data-bs-toggle="tooltip" data-bs-placement="left"
                      title="Sudah di upload" class="badge rounded-pill bg-info p-2 mt-2">
                      <i class="fa-solid fa-check"></i>
                    </span>
                  </div>
                @endif
              </td>

            </tr>
          @endforeach
        </tbody>
      </table>


      {{ $mahasiswas->appends([
              'tahun' => request('tahun'),
              'gelombang' => request('gelombang'),
              'jalur' => request('jalur'),
              'fakultas' => request('fakultas'),
              'prodi' => request('prodi'),
          ])->links('pagination::bootstrap-4') }}


    </div>


  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#pilihan-jalur').on(
        'change',
        function() {
          var jalur = this.value;
          if (jalur && jalur !== '') {
            $.ajax({
              url: '/masterdata/gelombang/berkas/dependant-fakultas/' + {{ request('gelombang') }} + '/' +
                jalur,
              type: 'GET',
              success: function(data) {
                $('#pilihan-fakultas').empty();
                $('#pilihan-fakultas').append(
                  '<option value="">Semua fakultas</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 id_fakultas = this.value;
        $("#pilihan-prodi").empty();
        $("#pilihan-prodi").append(
          '<option value=""> Semua Prodi </option>'
        );
        $.ajax({
          url: '/masterdata/gelombang/berkas/dependant-prodi/' + {{ request('gelombang') }} + "/" + $(
            '#pilihan-jalur').val() + "/" + id_fakultas,
          type: 'GET',
          dataType: 'json',
          success: function(data) {

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

        });

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