@extends('layouts.main')

@php
    use App\Models\MKategoriPrestasi;
    use App\Models\MLevelPrestasi;
    use App\Models\MPeringkatPrestasi;
    use App\Models\PrestasiMandiri;

    $mahasiswaRows = old('mahasiswa', $prestasiMandiri->mahasiswa->toArray() ?: [['nim' => '', 'nama' => '']]);
    $dosenRows = old('dosen', $prestasiMandiri->dosen->toArray() ?: [['nuptk' => '', 'nama' => '', 'url_surat_tugas' => '']]);

    $levelOptions = MLevelPrestasi::options();
    if (filled($prestasiMandiri->level) && !isset($levelOptions[$prestasiMandiri->level])) {
        $levelOptions[$prestasiMandiri->level] = MLevelPrestasi::labelFor($prestasiMandiri->level) ?? $prestasiMandiri->level;
    }

    $kategoriOptions = MKategoriPrestasi::options();
    if (filled($prestasiMandiri->kategori) && !isset($kategoriOptions[$prestasiMandiri->kategori])) {
        $kategoriOptions[$prestasiMandiri->kategori] = MKategoriPrestasi::labelFor($prestasiMandiri->kategori) ?? $prestasiMandiri->kategori;
    }

    $peringkatOptions = MPeringkatPrestasi::options();
    if (filled($prestasiMandiri->peringkat) && !isset($peringkatOptions[$prestasiMandiri->peringkat])) {
        $peringkatOptions[$prestasiMandiri->peringkat] = MPeringkatPrestasi::labelFor($prestasiMandiri->peringkat) ?? $prestasiMandiri->peringkat;
    }
@endphp

@section('judul')
    <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">Prestasi Mandiri</h1>
@endsection

@section('breadchums')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
        <li class="breadcrumb-item text-muted"><a href="{{ route('home') }}" class="text-muted text-hover-primary">Home</a></li>
        <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
        <li class="breadcrumb-item text-muted"><a href="{{ route('prestasi-mandiri.index') }}" class="text-muted text-hover-primary">Prestasi Mandiri</a></li>
        <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
        <li class="breadcrumb-item text-muted">{{ $isEdit ? 'Edit' : 'Tambah' }}</li>
    </ul>
@endsection

@section('isi')
    <style>
        .prestasi-long-text { overflow-wrap: anywhere; }
        @media (max-width: 767.98px) {
            .prestasi-form-intro { margin-bottom: 1.5rem !important; }
            .prestasi-form-header { gap: 1rem; }
            .prestasi-form-header > .d-flex { align-items: flex-start !important; }
            .prestasi-member-section .card-header { flex-direction: column; align-items: stretch !important; gap: 1rem; }
            .prestasi-member-section .card-toolbar .btn,
            .prestasi-member-card .btn-light-danger,
            .prestasi-form-actions .btn { width: 100%; }
        }
    </style>
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <div id="kt_app_content_container" class="app-container container-fluid">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ $isEdit ? route('prestasi-mandiri.update', $prestasiMandiri) : route('prestasi-mandiri.store') }}">
                        @csrf
                        @if ($isEdit)
                            @method('PUT')
                        @endif

                        <div class="card shadow-sm mb-8">
                            <div class="card-header border-0 pt-6 prestasi-form-header">
                                <div class="d-flex align-items-center gap-4">
                                    <div class="symbol symbol-50px bg-light-primary"><i class="ki-outline ki-award fs-2x text-primary p-3"></i></div>
                                    <div>
                                        <div class="card-title fs-3 fw-bold mb-1">Data Prestasi</div>
                                        <div class="text-muted">Informasi kompetisi, prestasi, dan dokumen bukti utama.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row g-6">
                                    <div class="col-md-6">
                                        <label class="required form-label">Level</label>
                                        <select name="level" class="form-select" required>
                                            <option value="">Pilih Level</option>
                                            @foreach ($levelOptions as $value => $label)
                                                <option value="{{ $value }}" @selected(old('level', $prestasiMandiri->level) === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">Kategori</label>
                                        <select name="kategori" class="form-select" required>
                                            <option value="">Pilih Kategori</option>
                                            @foreach ($kategoriOptions as $value => $label)
                                                <option value="{{ $value }}" @selected(old('kategori', $prestasiMandiri->kategori) === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label class="required form-label">Nama Kompetisi / Lomba</label>
                                        <input type="text" name="lomba" class="form-control" value="{{ old('lomba', $prestasiMandiri->lomba) }}" placeholder="Nama Kompetisi / Lomba" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">Nama Cabang</label>
                                        <input type="text" name="cabang" class="form-control" value="{{ old('cabang', $prestasiMandiri->cabang) }}" placeholder="Nama Cabang" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">Peringkat</label>
                                        <select name="peringkat" class="form-select" required>
                                            <option value="">Pilih Peringkat</option>
                                            @foreach ($peringkatOptions as $value => $label)
                                                <option value="{{ $value }}" @selected(old('peringkat', $prestasiMandiri->peringkat) === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label class="required form-label">Nama Penyelenggara</label>
                                        <input type="text" name="penyelenggara" class="form-control" value="{{ old('penyelenggara', $prestasiMandiri->penyelenggara) }}" placeholder="Penyelenggara" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="required form-label">Jumlah PT Peserta</label>
                                        <input type="number" name="jumlah_unit_peserta" class="form-control" value="{{ old('jumlah_unit_peserta', $prestasiMandiri->jumlah_unit_peserta) }}" placeholder="Jumlah" min="1" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="required form-label">Kepesertaan</label>
                                        <select name="kelompok_prestasi" class="form-select" required>
                                            <option value="">Pilih Kepesertaan</option>
                                            @foreach (PrestasiMandiri::KELOMPOK_PRESTASI as $value => $label)
                                                <option value="{{ $value }}" @selected(old('kelompok_prestasi', $prestasiMandiri->kelompok_prestasi) === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="required form-label">Bentuk</label>
                                        <select name="bentuk" class="form-select" required>
                                            <option value="">Pilih Bentuk</option>
                                            @foreach (PrestasiMandiri::BENTUK as $value => $label)
                                                <option value="{{ $value }}" @selected(old('bentuk', $prestasiMandiri->bentuk) === $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label class="required form-label">URL Kompetisi / Lomba</label>
                                        <input type="url" name="url_peserta" class="form-control" value="{{ old('url_peserta', $prestasiMandiri->url_peserta) }}" placeholder="URL" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">Link Dokumen Sertifikat</label>
                                        <input type="url" name="url_sertifikat" class="form-control" value="{{ old('url_sertifikat', $prestasiMandiri->url_sertifikat) }}" placeholder="URL" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">Tanggal Sertifikat</label>
                                        <input type="date" name="tgl_sertifikat" class="form-control" value="{{ old('tgl_sertifikat', optional($prestasiMandiri->tgl_sertifikat)->format('Y-m-d')) }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Link Foto UPP</label>
                                        <input type="url" name="url_foto_upp" class="form-control" value="{{ old('url_foto_upp', $prestasiMandiri->url_foto_upp) }}" placeholder="URL">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Link Dokumen Undangan</label>
                                        <input type="url" name="url_dokumen_undangan" class="form-control" value="{{ old('url_dokumen_undangan', $prestasiMandiri->url_dokumen_undangan) }}" placeholder="URL">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Keterangan</label>
                                        <textarea name="keterangan" class="form-control" rows="3" placeholder="Keterangan tambahan">{{ old('keterangan', $prestasiMandiri->keterangan) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @include('prestasi.mandiri.partials.mahasiswa', ['rows' => $mahasiswaRows])
                        @include('prestasi.mandiri.partials.dosen', ['rows' => $dosenRows])

                        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-between mb-10 prestasi-form-actions">
                            <a href="{{ route('prestasi-mandiri.index') }}" class="btn btn-light"><i class="ki-outline ki-arrow-left fs-2"></i> Kembali</a>
                            <button type="submit" class="btn btn-primary"><i class="ki-outline ki-save-2 fs-2"></i> Simpan Data</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js-page')
    <script>
        let mahasiswaIndex = {{ count($mahasiswaRows) }};
        let dosenIndex = {{ count($dosenRows) }};

        function addMahasiswaRow() {
            const rows = document.getElementById('mahasiswa-rows');
            rows.insertAdjacentHTML('beforeend', mahasiswaRow(mahasiswaIndex));
            initMemberSelects(rows.lastElementChild);
            mahasiswaIndex++;
        }

        function addDosenRow() {
            const rows = document.getElementById('dosen-rows');
            rows.insertAdjacentHTML('beforeend', dosenRow(dosenIndex));
            initMemberSelects(rows.lastElementChild);
            dosenIndex++;
        }

        function removeRow(button) {
            button.closest('[data-row]').remove();
        }

        function mahasiswaRow(index) {
            return `<div class="border rounded p-5 mb-4 prestasi-member-card" data-row>
                <div class="row g-4 align-items-end">
                    <div class="col-md-4"><label class="required form-label">NIM</label><select name="mahasiswa[${index}][nim]" class="form-select js-mahasiswa-select" required></select></div>
                    <div class="col-md-7"><label class="required form-label">Nama Mahasiswa</label><input type="text" name="mahasiswa[${index}][nama]" class="form-control" placeholder="Nama Mahasiswa" readonly required></div>
                    <div class="col-md-1"><button type="button" class="btn btn-light-danger" onclick="removeRow(this)"><i class="ki-outline ki-trash fs-3"></i></button></div>
                </div>
            </div>`;
        }

        function dosenRow(index) {
            return `<div class="border rounded p-5 mb-4 prestasi-member-card" data-row>
                <div class="row g-4 align-items-end">
                    <div class="col-md-3"><label class="form-label">NIDN/NUPTK</label><select name="dosen[${index}][nuptk]" class="form-select js-dosen-select"></select></div>
                    <div class="col-md-3"><label class="form-label">Nama Dosen</label><input type="text" name="dosen[${index}][nama]" class="form-control" placeholder="Nama Dosen" readonly></div>
                    <div class="col-md-5"><label class="form-label">URL Surat Tugas</label><input type="url" name="dosen[${index}][url_surat_tugas]" class="form-control" placeholder="URL Surat Tugas"></div>
                    <div class="col-md-1"><button type="button" class="btn btn-light-danger" onclick="removeRow(this)"><i class="ki-outline ki-trash fs-3"></i></button></div>
                </div>
            </div>`;
        }

    </script>
    @include('prestasi.partials.member-select-script')
@endpush