@extends('admin.layout')

@section('title', 'Edit Mata Pelajaran')

@section('content')
    <div class="card">
        <div class="card-header bg-warning text-dark">
            <h5 class="mb-0"><i class="bi bi-pencil-square me-1"></i> Edit Mata Pelajaran</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ request()->is('guru/*') ? route('guru.mata-pelajaran.update', $mp->id) : route('admin.mata-pelajaran.update', $mp->id) }}">
                @csrf
                @method('PUT')

                <div class="row g-2">
                    <div class="col-md-4">
                        <label class="form-label">Fase</label>
                        <select id="mp-fase" name="fase" class="form-select">
                            <option value="">Pilih Fase</option>
                            @foreach(['A','B','C'] as $ph)
                                <option value="{{ $ph }}" @if(($mp->fase ?? '')===$ph) selected @endif>{{ $ph }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tingkat</label>
                        <input name="tingkat" class="form-control" value="{{ old('tingkat', $mp->tingkat ?? '') }}" />
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Kelas</label>
                        <select id="mp-kelas" name="kelas_id" class="form-select">
                            <option value="">Pilih Kelas (opsional)</option>
                            @foreach($kelas as $k)
                                <option value="{{ $k->id }}" @if(($mp->kelas_id ?? null) == $k->id) selected @endif>{{ $k->nama ?? $k }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-9">
                        <label class="form-label">Mata Pelajaran</label>
                        <input name="nama" class="form-control" placeholder="Nama mata pelajaran" required value="{{ old('nama', $mp->nama ?? '') }}" />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Urutan</label>
                        <input name="urutan" type="number" min="1" class="form-control" value="{{ old('urutan', $mp->urutan ?? '') }}" />
                    </div>

                    <div class="col-12">
                        <label class="form-label">Materi</label>
                        @php $tabColors = ['#0d6efd', '#198754', '#ffc107', '#dc3545', '#6f42c1', '#0dcaf0']; @endphp
                        <ul class="nav nav-tabs" id="materiTabs" role="tablist">
                            @for($i=1;$i<=6;$i++)
                                @php $color = $tabColors[$i-1] ?? '#6c757d'; @endphp
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link @if($i==1) active @endif" id="tab-materi-{{ $i }}" data-bs-toggle="tab" data-bs-target="#materi-{{ $i }}" type="button" role="tab" aria-controls="materi-{{ $i }}" aria-selected="{{ $i==1 ? 'true':'false' }}" style="background-color: {{ $color }}; color: #fff; border-color: {{ $color }};">
                                        Materi {{ $i }}
                                    </button>
                                </li>
                            @endfor
                        </ul>
                        <div class="tab-content border p-2" id="materiTabsContent">
                            @for($i=1;$i<=6;$i++)
                                <div class="tab-pane fade @if($i==1) show active @endif" id="materi-{{ $i }}" role="tabpanel" aria-labelledby="tab-materi-{{ $i }}">
                                    <textarea name="materi{{ $i }}" class="form-control" rows="4" placeholder="Isikan Deskripsi Lingkup Materi Pembelajaran">{{ old('materi'.$i, $mp->{'materi'.$i} ?? '') }}</textarea>
                                </div>
                            @endfor
                        </div>
                    </div>

                </div>

                <div class="mt-3">
                    <a href="{{ url('admin/data-umum/mata-pelajaran') }}" class="btn btn-secondary">Batal</a>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            (function(){
                const faseSelect = document.getElementById('mp-fase');
                const kelasSelect = document.getElementById('mp-kelas');
                const tingkatInput = document.querySelector('input[name="tingkat"]');
                faseSelect && faseSelect.addEventListener('change', function(){
                    const mapping = { 'A': '1 & 2', 'B': '3 & 4', 'C': '5 & 6' };
                    if(mapping[this.value]) tingkatInput.value = mapping[this.value];
                });
            })();
        </script>
    @endpush
@endsection