@extends('admin.layouts.app')

@section('title', 'Tahun Ajaran')

@section('content')
    <div class="main-panel">
        <div class="content-wrapper" style="padding: 2.5rem">
            <div class="row">
                <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card card-rounded">
                        <div class="card-body">
                            <h4 class="card-title pb-4" style="border-bottom: 1px solid black;">Tahun Ajaran</h4>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <h5>Tahun Ajaran Aktif <span class="badge badge-success">{{ $academies->count() }}</span>
                                            <button type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalAcademyForm"
                                                data-mode="create"
                                                data-action="{{ route('settings.academies.store') }}"
                                                class="btn btn-info btn-sm">
                                                <i class="icon-plus"></i>
                                            </button>
                                        </h5>
                                        <div class="form-group">
                                            @foreach ($academies as $academy)
                                                <div class="form-check form-check-success d-flex align-items-center justify-content-between border-bottom">
                                                    <div class="form-check form-check-success">
                                                        <label class="form-check-label">
                                                            <input type="checkbox" class="form-check-input"
                                                                {{ $academy->is_active == 1 ? 'checked' : '' }} disabled>
                                                            {{ $academy->year }}({{ $academy->stage->name }})
                                                        </label>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <button type="button"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#modalAcademyForm"
                                                            data-mode="edit"
                                                            data-action="{{ route('settings.academies.update', $academy->id) }}"
                                                            data-year="{{ $academy->year }}"
                                                            data-stage="{{ $academy->stage_id }}"
                                                            data-active="{{ $academy->is_active }}"
                                                            class="btn btn-primary p-1 ms-2 btn-sm"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-placement="bottom" title="Edit">
                                                            <i class="icon-pencil"></i>
                                                        </button>

                                                        <form action="{{ route('settings.academies.delete', $academy->id) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            @method('POST')
                                                            <button type="submit" class="btn btn-danger p-1 ms-2 btn-sm" onclick="return confirm('Yakin ingin menghapus?')">
                                                                <i class="icon-trash"></i>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                {{-- --- BAGIAN GELOMBANG (STAGE) --- --}}
                                <div class="col-6">
                                    <div class="form-group">
                                        <h5>Gelombang Aktif
                                            <span class="badge badge-success">{{ $stages->count() }}</span>
                                            {{-- Tombol Buat Gelombang --}}
                                            <a href="" class="btn btn-info btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#modalStageForm">
                                                <i class="icon-plus"></i>
                                            </a>
                                        </h5>
                                        <div class="form-group">
                                            @foreach ($stages as $stage)
                                                <div class="form-check form-check-success d-flex align-items-center justify-content-between border-bottom">
                                                    <div class="form-check form-check-success">
                                                        <label class="form-check-label">
                                                            <input type="checkbox" class="form-check-input" checked
                                                                disabled>
                                                            {{ $stage->name }}
                                                        </label>
                                                    </div>
                                                    <div class="d-flex">
                                                        <a href="#mymodal"
                                                            data-remote="{{ route('settings.stage-edit', $stage->id) }}"
                                                            data-toggle="modal" data-target="#mymodal"
                                                            data-title="Edit Gelombang {{ $stage->name }}"
                                                            class="btn btn-primary p-1 ms-2" data-bs-toggle="tooltip"
                                                            data-bs-placement="bottom" title="Edit">
                                                            <i class="icon-pencil"></i>
                                                        </a>
                                                        <form action="{{ route('settings.stage-delete', $stage->id) }}" method="POST">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="btn btn-danger p-1 ms-2" onclick="return confirm('Yakin ingin menghapus?')">
                                                                <i class="icon-trash btn-icon-prepend"></i>
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL TAHUN AJARAN --}}
    <div class="modal fade" id="modalAcademyForm" tabindex="-1" aria-labelledby="modalAcademyFormLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAcademyFormLabel">Form Tahun Ajaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- Action form akan diubah via JS. Default Method POST --}}
                    <form id="formAcademy" action="" method="POST">
                        @csrf
                        {{-- Container untuk menampung input hidden @method('PUT') saat edit --}}
                        <div id="method-spoof-container"></div>

                        <div class="card-body p-0">
                            {{-- Input Year --}}
                            <div class="form-group">
                                <label class="fs-6">Tahun ajaran<span class="text-danger">*</span></label>
                                <div class="input-group">
                                    {{-- Tambahkan ID agar mudah ditarget JS --}}
                                    <input type="number" id="inputYear" name="year"
                                        class="form-control @error('year') is-invalid @enderror p-3"
                                        placeholder="contoh : 2022" required value="{{ old('year') }}">
                                    @error('year')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Select Stage --}}
                            <div class="form-group">
                                <label class="fs-6">Pilih Gelombang<span class="text-danger">*</span></label>
                                @if (!empty($stages->first()))
                                    {{-- Tambahkan ID --}}
                                    <select id="selectStage" name="stage_id" class="form-select" required>
                                        <option value="">-- pilih gelombang --</option>
                                        @foreach ($stages as $stage)
                                            <option value="{{ $stage->id }}" {{ old('stage_id') == $stage->id ? 'selected' : '' }}>
                                                {{ $stage->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else
                                    <br>
                                    <small class="text-danger">Belum ada gelombang.</small>
                                @endif
                            </div>

                            {{-- Radio Status --}}
                            <div class="form-group">
                                <label class="fs-6">Status<span class="text-danger">*</span></label>
                                <div class="ps-4">
                                    <div class="form-check form-check-inline">
                                        {{-- Tambahkan ID unik --}}
                                        <input class="form-check-input radioActive" type="radio" name="is_active" id="radioActive1"
                                            value="1" {{ old('is_active') == '1' ? 'checked' : '' }} required>
                                        <label for="radioActive1">Aktif</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input radioActive" type="radio" name="is_active" id="radioActive0"
                                            value="0" {{ old('is_active') == '0' ? 'checked' : '' }} required>
                                        <label for="radioActive0">Tidak Aktif</label>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-icon icon-left">
                                <i class="fas fa-save"></i> Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{-- MODAL STAGE --}}
    <div class="modal fade" id="modalStageForm" tabindex="-1" aria-labelledby="modalStageFormLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalStageFormLabel">Buat Gelombang Pendaftaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('settings.stage-store') }}" method="POST">
                        @csrf
                        @method('POST')
                        <div class="card-body p-0">
                            <div class="form-group">
                                <label>Nama Gelombang<span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" name="name"
                                        class="form-control  @error('name') is-invalid @enderror"
                                        placeholder="contoh : gel-1" required value="{{ old('name') }}">
                                </div>
                                @error('name')
                                    <div class="invalid-feedback d-block">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <button type="submit" class="btn btn-primary btn-icon icon-left"> <i class="fas fa-save"></i>
                                Kirimkan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            @if ($errors->any())
                // Cek error milik Tahun Ajaran
                @if ($errors->has('year') || $errors->has('stage_id') || $errors->has('is_active'))
                    var myModal = new bootstrap.Modal(document.getElementById('modalAcademyForm'));
                    myModal.show();

                // Cek error milik Gelombang
                @elseif ($errors->has('name'))
                    var myModal = new bootstrap.Modal(document.getElementById('modalStageForm'));
                    myModal.show();
                @endif
            @endif


            // 2. LOGIKA UNTUK MENGUBAH ISI MODAL TAHUN AJARAN (CREATE vs EDIT)
            const modalAcademy = document.getElementById('modalAcademyForm');
            if (modalAcademy) {
                modalAcademy.addEventListener('show.bs.modal', function(event) {
                    // Tombol yang diklik untuk membuka modal
                    const button = event.relatedTarget;

                    // Ambil mode (create atau edit) dari data-mode di tombol
                    const mode = button.getAttribute('data-mode');
                    // Ambil action URL dari data-action di tombol
                    const actionUrl = button.getAttribute('data-action');

                    // Elemen-elemen di dalam modal
                    const modalTitle = document.getElementById('modalAcademyFormLabel');
                    const form = document.getElementById('formAcademy');
                    const spoofContainer = document.getElementById('method-spoof-container');
                    const inputYear = document.getElementById('inputYear');
                    const selectStage = document.getElementById('selectStage');
                    const radioActive1 = document.getElementById('radioActive1');
                    const radioActive0 = document.getElementById('radioActive0');

                    // Set Action URL pada form
                    form.setAttribute('action', actionUrl);

                    // Reset form terlebih dahulu (membersihkan inputan sebelumnya)
                    form.reset();
                    spoofContainer.innerHTML = ''; // Hapus input hidden PUT jika ada

                    if (mode === 'create') {
                        // --- MODE BUAT ---
                        modalTitle.textContent = 'Buat Tahun Ajaran Baru';
                        // Form sudah di-reset di atas, jadi inputan kosong.
                        // Radio button default checked (misal Tidak Aktif)
                        radioActive0.checked = true;

                    } else if (mode === 'edit') {
                        // --- MODE EDIT ---
                        modalTitle.textContent = 'Edit Tahun Ajaran';

                        // Tambahkan input hidden untuk metode PUT (karena HTML form cuma support GET/POST)
                        spoofContainer.innerHTML = '<input type="hidden" name="_method" value="PUT">';

                        // Isi nilai input berdasarkan data dari tombol yang diklik
                        inputYear.value = button.getAttribute('data-year');
                        selectStage.value = button.getAttribute('data-stage');

                        const isActive = button.getAttribute('data-active');
                        if (isActive == '1') {
                            radioActive1.checked = true;
                        } else {
                            radioActive0.checked = true;
                        }
                    }
                });
            }
        });
    </script>
@endsection