@extends('admin.layouts.app')

@section('title', 'Data Kriteria & Sub-Kriteria')

@section('content')
<div class="main-panel">
    <div class="content-wrapper" style="padding: 2.5rem">
        <div class="row">
            {{-- KOLOM KIRI: DAFTAR KRITERIA --}}
            <div class="col-md-4 grid-margin stretch-card">
                <div class="card card-rounded">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-4" style="border-bottom: 1px solid #e3e3e3;">
                            <h4 class="card-title pb-2">Daftar Kriteria</h4>
                            {{-- <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreateCriteria">
                                <i class="icon-plus"></i>
                            </button> --}}
                        </div>

                        <div class="list-group list-group-flush" style="max-height: 340px; overflow-y: auto;">
                            {{-- Looping Kriteria --}}
                            @forelse ($criterias as $criteria)
                                <a href="{{ route('criterias.index', ['id' => $criteria->id]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center {{ $active_criteria && $active_criteria->id == $criteria->id ? 'bg-light text-primary fw-bold' : '' }}">
                                    <div>
                                        <i class="mdi {{ $criteria->type == 'numeric' ? 'mdi-numeric' : 'mdi-format-list-bulleted' }} me-2"></i>
                                        {{ $criteria->name }}
                                        <br>
                                        <small class="text-muted" style="font-size: 10px;">
                                            {{ $criteria->type == 'numeric' ? 'Tipe: Angka' : 'Tipe: Kategori' }}
                                        </small>
                                    </div>

                                    <div class="d-flex">
                                        {{-- Tombol Hapus Kriteria --}}
                                        {{-- <form action="{{ route('criterias.destroy', $criteria->id) }}" method="POST" onsubmit="return confirm('Hapus kriteria ini beserta sub-kriterianya?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm text-danger p-0 ms-2">
                                                <i class="icon-trash"></i>
                                            </button>
                                        </form> --}}
                                    </div>
                                </a>
                            @empty
                                <div class="text-center py-4 text-muted">Belum ada kriteria</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN: SUB KRITERIA --}}
            <div class="col-md-8 grid-margin stretch-card">
                <div class="card card-rounded">
                    <div class="card-body">
                        @if($active_criteria)
                            <div class="d-flex justify-content-between align-items-center mb-4 pb-2" style="border-bottom: 1px solid #e3e3e3;">
                                <div>
                                    <h4 class="card-title pb-1 mb-0">Sub-Kriteria: <span class="text-primary">{{ $active_criteria->name }}</span></h4>
                                    <small class="text-muted">Atur range nilai dan bobot untuk kriteria ini.</small>
                                </div>
                                {{-- <button class="btn btn-sm btn-success text-white" data-bs-toggle="modal" data-bs-target="#modalCreateSub">
                                    <i class="icon-plus"></i> Tambah
                                </button> --}}
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>Nama Kategori</th>
                                            @if($active_criteria->type == 'numeric')
                                                <th>Range Nilai</th>
                                            @endif
                                            <th class="text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($active_criteria->sub_criterias as $sub)
                                        <tr>
                                            <td class="fw-bold">{{ $sub->name }}</td>

                                            @if($active_criteria->type == 'numeric')
                                                <td>
                                                    @if($sub->max_value)
                                                        <span class="badge badge-opacity-info">
                                                            {{ $sub->min_value }} - {{ $sub->max_value }}
                                                        </span>
                                                    @else
                                                        <span class="badge badge-opacity-warning">
                                                            > {{ $sub->min_value }}
                                                        </span>
                                                    @endif
                                                </td>
                                            @endif

                                            <td class="text-center">
                                                <button class="btn btn-warning btn-sm p-2"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#modalEditSub{{ $sub->id }}">
                                                    <i class="icon-pencil"></i>
                                                </button>
                                            </td>
                                        </tr>

                                        {{-- 🔥 MODAL EDIT (HARUS DI DALAM LOOP) --}}
                                        <div class="modal fade" id="modalEditSub{{ $sub->id }}" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">
                                                            Edit Sub: {{ $active_criteria->name }}
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>

                                                    <form action="{{ route('subcriterias.update', $sub->id) }}" method="POST">
                                                        @csrf
                                                        @method('PUT')

                                                        <div class="modal-body">
                                                            <div class="form-group">
                                                                <label>Label Kategori</label>
                                                                <input type="text"
                                                                    name="name"
                                                                    class="form-control"
                                                                    value="{{ $sub->name }}"
                                                                    required>
                                                            </div>

                                                            @if($active_criteria->type == 'numeric')
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <label>Nilai Minimal</label>
                                                                        <input type="number" step="0.01"
                                                                            name="min_value"
                                                                            class="form-control"
                                                                            value="{{ $sub->min_value }}">
                                                                    </div>
                                                                    <div class="col-6">
                                                                        <label>Nilai Maksimal</label>
                                                                        <input type="number" step="0.01"
                                                                            name="max_value"
                                                                            class="form-control"
                                                                            value="{{ $sub->max_value }}">
                                                                    </div>
                                                                </div>
                                                                <small class="text-danger d-block mt-1">
                                                                    * Kosongkan "Maksimal" jika artinya "Lebih dari X".
                                                                </small>
                                                            @endif
                                                        </div>

                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-primary">
                                                                <i class="ti-save"></i> Update
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-4">
                                                Belum ada sub-kriteria
                                            </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted">
                                <i class="ti-arrow-left mb-3" style="font-size: 3rem;"></i>
                                <h5>Silakan pilih Kriteria di sebelah kiri</h5>
                                <p>Klik salah satu kriteria untuk mengatur sub-kriterianya.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL 1: TAMBAH KRITERIA --}}
<div class="modal fade" id="modalCreateCriteria" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buat Kriteria Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('criterias.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Kriteria</label>
                        <input type="text" name="name" class="form-control" placeholder="Contoh: Tes IQ" required>
                    </div>
                    <div class="form-group">
                        <label>Tipe Data</label>
                        <select name="type" class="form-select">
                            <option value="numeric">Angka (Punya Range Min-Max)</option>
                            <option value="categorical">Kategori (Pilihan Teks)</option>
                        </select>
                        <small class="text-muted d-block mt-1">
                            * <b>Angka:</b> Untuk Gaji, Nilai IQ, Hafalan.<br>
                            * <b>Kategori:</b> Untuk Perilaku, Kondisi Keluarga.
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary"><i class="ti-save"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL 2: TAMBAH SUB-KRITERIA (Hanya muncul jika ada Active Criteria) --}}
@if($active_criteria)
<div class="modal fade" id="modalCreateSub" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Sub: {{ $active_criteria->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('subcriterias.store') }}" method="POST">
                @csrf
                <input type="hidden" name="criteria_id" value="{{ $active_criteria->id }}">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Label Kategori</label>
                        <input type="text" name="name" class="form-control" placeholder="Contoh: Lulus / Sangat Mampu" required>
                    </div>

                    @if($active_criteria->type == 'numeric')
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Nilai Minimal</label>
                                    <input type="number" step="0.01" name="min_value" class="form-control" placeholder="0">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Nilai Maksimal</label>
                                    <input type="number" step="0.01" name="max_value" class="form-control" placeholder="100">
                                </div>
                            </div>
                        </div>
                        <small class="text-danger mb-3 d-block">* Kosongkan "Maksimal" jika artinya "Lebih dari X".</small>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary"><i class="ti-save"></i> Tambahkan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection