@extends('layouts.admin')

@section('title', 'Kelola Indikator Kompetensi')
@section('page_title', 'Kelola Indikator')

@section('style')
    <style>
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .master-panel {
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            margin-bottom: 24px;
        }

        .card-header {
            background: #ffffff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1rem 1.25rem;
            border-radius: 12px 12px 0 0;
        }

        .jenjang-section {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .jenjang-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .indicator-row {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .indicator-number {
            background-color: #3b82f6;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
            margin-top: 4px;
        }

        .indicator-input {
            flex-grow: 1;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="page-header">
            <div>
                <h4 class="mb-1">Kelola Indikator: {{ $kompetensi->nama_kompetensi }}</h4>
                <p class="text-muted mb-0">Isi maksimal 3 indikator untuk setiap jenjang jabatan.</p>
            </div>
            <a href="{{ route('admin.assessment-master.index') }}#kompetensi-pane" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <form action="{{ route('admin.assessment-master.indikator.store-manage', $kompetensi->id) }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-12">
                    <div class="card master-panel">
                        <div class="card-body">
                            @foreach ($jenjangList as $jenjang)
                                @php
                                    $jenjangIndicators = $indikator->get($jenjang->id, collect())->values();
                                @endphp
                                <div class="jenjang-section">
                                    <div class="jenjang-title">
                                        <i class="fas fa-layer-group text-primary"></i> {{ $jenjang->nama_jenjang }}
                                    </div>

                                    <div class="row">
                                        @for ($i = 1; $i <= 3; $i++)
                                            @php
                                                $qText = $jenjangIndicators->get($i - 1)->pertanyaan ?? '';
                                            @endphp
                                            <div class="col-lg-4">
                                                <div class="indicator-row">
                                                    <div class="indicator-number">{{ $i }}</div>
                                                    <div class="indicator-input">
                                                        <textarea name="pertanyaan[{{ $jenjang->id }}][{{ $i }}]"
                                                            class="form-control" rows="3"
                                                            placeholder="Pertanyaan untuk indikator {{ $i }}...">{{ $qText }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="card-footer bg-white border-top text-end py-3">
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="fas fa-save me-2"></i> Simpan Seluruh Indikator
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection