@extends('layouts.main')

@php
    use App\Models\TingkatKegiatan;

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

    $levelOptions = TingkatKegiatan::orderBy('tingkat')->pluck('tingkat', 'tingkat_id')->all();
    if (filled($sertifikasi->level) && !isset($levelOptions[$sertifikasi->level])) {
        $levelOptions[$sertifikasi->level] = optional(TingkatKegiatan::find($sertifikasi->level))->tingkat ?? $sertifikasi->level;
    }
@endphp

@section('judul')
    <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">Sertifikasi</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('sertifikasi.index') }}" class="text-muted text-hover-primary">Sertifikasi</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; }
        .prestasi-form-header,
        .prestasi-member-section .card-header { display: flex; justify-content: space-between; align-items: center; }
        @media (max-width: 767.98px) {
            .prestasi-form-intro { margin-bottom: 1.5rem !important; }
            .prestasi-form-intro h2 { font-size: 1.25rem; }
            .prestasi-form-header { flex-direction: column; align-items: flex-start !important; gap: 1rem; padding: 1.25rem !important; }
            .prestasi-form-header > .d-flex { align-items: flex-start !important; width: 100%; }
            .prestasi-form-header .symbol { flex-shrink: 0; }
            .prestasi-form-card .card-body,
            .prestasi-member-section .card-body { padding: 1.25rem !important; }
            .prestasi-member-card { padding: 1rem !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('sertifikasi.update', $sertifikasi) : route('sertifikasi.store') }}">
                        @csrf
                        @if ($isEdit)
                            @method('PUT')
                        @endif

                        <div class="alert bg-light-primary border border-primary border-dashed mb-8 prestasi-form-intro">
                            <span class="badge badge-light-primary mb-4">Tambah Sertifikasi</span>
                            <h2 class="fw-bold text-gray-900">Form sertifikasi terpadu</h2>
                            <div class="text-muted fs-5">Lengkapi data sertifikasi, mahasiswa, dan dosen pendamping dalam satu alur.</div>
                        </div>

                        <div class="card shadow-sm mb-8 prestasi-form-card">
                            <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 Sertifikasi</div>
                                        <div class="text-muted">Informasi sertifikasi, penyelenggara, 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', $sertifikasi->level) == $value)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-8">
                                        <label class="required form-label">Nama Kegiatan / Sertifikasi</label>
                                        <input type="text" name="nama" class="form-control" value="{{ old('nama', $sertifikasi->nama) }}" placeholder="Nama Kegiatan / Sertifikasi" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="required form-label">Tanggal Sertifikat</label>
                                        <input type="date" name="tgl_sertifikat" class="form-control" value="{{ old('tgl_sertifikat', optional($sertifikasi->tgl_sertifikat)->format('Y-m-d')) }}" required>
                                    </div>
                                    <div class="col-12">
                                        <label class="required form-label">Nama Penyelenggara</label>
                                        <input type="text" name="penyelenggara" class="form-control" value="{{ old('penyelenggara', $sertifikasi->penyelenggara) }}" placeholder="Penyelenggara" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="required form-label">URL Kegiatan</label>
                                        <input type="url" name="url_peserta" class="form-control" value="{{ old('url_peserta', $sertifikasi->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', $sertifikasi->url_sertifikat) }}" placeholder="URL" 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', $sertifikasi->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', $sertifikasi->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', $sertifikasi->keterangan) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @include('prestasi.sertifikasi.partials.mahasiswa', ['rows' => $mahasiswaRows])
                        @include('prestasi.sertifikasi.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('sertifikasi.index') }}" class="btn btn-light">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