{{-- resources/views/admin/kesiswaan/ppdb/bulk/index.blade.php --}}
@extends('layouts.admin')

@section('title', 'Bulk Convert PPDB → Siswa')

@section('content')
<div class="page-inner">

  <div class="d-flex align-items-center justify-content-between mb-3">
    <h3 class="fw-bold mb-0">
        Bulk Convert PPDB → Siswa
    </h3>

    <a href="{{ route('admin.ppdb.index') }}"
        class="btn btn-secondary btn-sm">
        <i class="fa fa-arrow-left me-1"></i>
        Kembali
    </a>
  </div>


  <form method="POST"
      action="{{ route('admin.ppdb.bulk.execute') }}"
      id="bulk-form">

        @csrf

        {{-- A. FILTER AKADEMIK --}}
        @include('admin.kesiswaan.ppdb.bulk._filter')

        {{-- B. TABEL PPDB --}}
        @include('admin.kesiswaan.ppdb.bulk._table')

        {{-- C. MAPPING ROMBEL --}}
        @include('admin.kesiswaan.ppdb.bulk._mapping')

        {{-- D. PREVIEW --}}
        @include('admin.kesiswaan.ppdb.bulk._preview')

  </form>

</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
  $(document).on('change', '#check-all', function () {
    $('.ppdb-check').prop('checked', this.checked);
  });

  $(document).on('click', '#btn-preview', function () {

    const ppdbIds = $('input[name="ppdb_ids[]"]:checked')
      .map(function () { return this.value })
      .get();

    const rombelPutra = $('input[name="rombel_putra[]"]:checked')
      .map(function () { return this.value })
      .get();

    const rombelPutri = $('input[name="rombel_putri[]"]:checked')
      .map(function () { return this.value })
      .get();

    if (ppdbIds.length === 0) {
      alert('Pilih minimal 1 calon siswa');
      return;
    }

    if (rombelPutra.length === 0 || rombelPutri.length === 0) {
      alert('Pilih minimal 1 rombel putra & putri');
      return;
    }

    $('#preview-result').html('<i>Memproses preview...</i>');

    $.ajax({
      url: "{{ route('admin.ppdb.bulk.preview') }}",
      type: "POST",
      data: {
        _token: "{{ csrf_token() }}",
        ppdb_ids: ppdbIds,
        rombel_putra: rombelPutra,
        rombel_putri: rombelPutri
      },

      success: function (res) {

        const jmlPutra = res.data.putra.length;
        const jmlPutri = res.data.putri.length;
        const total    = jmlPutra + jmlPutri;

        let html = `
          <div class="row">
            <div class="col-md-6">
              <h6 class="text-primary">
                Putra
                <span class="badge bg-primary ms-2">${jmlPutra} siswa</span>
              </h6>
              <ul>
                ${res.data.putra.map(n => `<li>${n}</li>`).join('')}
              </ul>
            </div>

            <div class="col-md-6">
              <h6 class="text-warning">
                Putri
                <span class="badge bg-warning text-dark ms-2">${jmlPutri} siswa</span>
              </h6>
              <ul>
                ${res.data.putri.map(n => `<li>${n}</li>`).join('')}
              </ul>
            </div>
          </div>

          <hr>

          <div class="text-center fw-bold">
            Total Calon Siswa:
            <span class="badge bg-success">${total} siswa</span>
          </div>
        `;

        $('#preview-result').html(html);
        $('#btn-execute').prop('disabled', false);
      },

      error: function (xhr) {
        $('#preview-result').html(
          `<span class="text-danger">
            Gagal preview: ${xhr.responseJSON?.message ?? 'Error'}
          </span>`
        );
      }
    });
  });

});
</script>

<script>
$(document).on('submit', '#bulk-form', function (e) {

  if (!window.__bulkConfirmed) {
    e.preventDefault();

    swal({
      title: "Yakin Konversi Massal?",
      text: "Semua data PPDB terpilih akan dijadikan siswa aktif.\nTindakan ini TIDAK bisa dibatalkan!",
      icon: "warning",
      buttons: {
        cancel: {
          text: "Batal",
          value: null,
          visible: true,
          closeModal: true,
        },
        confirm: {
          text: "Ya, Konversi!",
          value: true,
          visible: true,
          closeModal: true
        }
      },
      dangerMode: true,
    })
    .then(function (willConvert) {
      if (willConvert) {
        window.__bulkConfirmed = true;
        $('#bulk-form').submit();
      }
    });
  }

});
</script>
@endpush