@extends('layout.app')

@section('content')
    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Home</li>
            <li class="breadcrumb-item"><a href="{{ route('subkriteria.index') }}">Data Sub Kriteria</a></li>
            <li class="breadcrumb-item active">Edit Sub Kriteria</li>
        </ol>
    </div>

    <div class="row gutters">
        <!-- KOLOM KIRI: FORM EDIT -->
        <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
            <div class="card h-100 shadow-sm" style="border-radius: 12px; border: none;">
                <div class="card-header bg-white py-3">
                    <div class="card-title mb-0" style="font-weight: 600; color: #333;">
                        <i class="icon-edit1 text-primary me-2"></i> Edit Sub Kriteria: <span
                            class="text-success">{{ $subkriteria->kode }}</span>
                    </div>
                </div>
                <div class="card-body" style="padding: 1.5rem 2rem;">
                    <form action="{{ route('subkriteria.update', $subkriteria->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- Info Kriteria Induk (Disabled) -->
                        <div class="form-group mb-4">
                            <label class="font-weight-bold" style="color: #555;">Kriteria Induk</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light"><i class="icon-layers"></i></span>
                                </div>
                                <input type="text" class="form-control"
                                    value="{{ $kriteria->kode }} - {{ $kriteria->nama }}" disabled
                                    style="height: 45px; background-color: #f8f9fa; cursor: not-allowed; border-radius: 0 8px 8px 0;">
                            </div>
                            <small class="text-muted mt-2 d-block italic">Kriteria induk tidak dapat diubah untuk menjaga
                                integritas urutan kode.</small>
                        </div>

                        <hr class="my-4" style="opacity: 0.1;">

                        <!-- Edit Nama Sub -->
                        <div class="form-group mb-4">
                            <label class="font-weight-bold" style="color: #555;">Nama Sub Kriteria / Kondisi</label>
                            <input type="text" name="nama_sub"
                                class="form-control @error('nama_sub') is-invalid @enderror"
                                value="{{ old('nama_sub', $subkriteria->nama_sub) }}"
                                placeholder="Contoh: Menumpang / 500rb - 1jt" required
                                style="height: 45px; border-radius: 8px;">
                            @error('nama_sub')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Edit Nilai Acuan (Urutan Level) -->
                        <div class="form-group mb-4">
                            <label class="font-weight-bold" style="color: #555;">Nilai Acuan (Tingkatan Level)</label>
                            <input type="number" name="nilai_acuan"
                                class="form-control @error('nilai_acuan') is-invalid @enderror"
                                value="{{ old('nilai_acuan', $subkriteria->nilai_acuan) }}"
                                placeholder="Masukkan angka urutan" required style="height: 45px; border-radius: 8px;">
                            <small class="text-muted mt-2 d-block small">
                                <i class="icon-info-outline"></i> Mengubah angka ini akan mengatur ulang posisi
                                <strong>{{ $subkriteria->kode }}</strong> dalam daftar kriteria {{ $kriteria->nama }}.
                            </small>
                            @error('nilai_acuan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-end mt-5 border-top pt-4">
                            <a href="{{ route('subkriteria.index') }}" class="btn btn-outline-secondary me-2"
                                style="border-radius: 8px; padding: 0.6rem 1.5rem;">Batal</a>
                            <button type="submit" class="btn btn-primary"
                                style="border-radius: 8px; padding: 0.6rem 2rem; background: #4a90e2; border: none; font-weight: 600;">
                                <i class="icon-save"></i> Perbarui Data
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- KOLOM KANAN: PANDUAN PENGISIAN -->
        <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
            <div class="card h-100 shadow-sm" style="border-radius: 12px; border: none; background: #ffffff;">
                <div class="card-body p-4">

                    <div class="text-center mb-4">
                        <div class="bg-light-primary mb-3"
                            style="width: 60px; height: 60px; line-height: 60px; border-radius: 50%; margin: 0 auto;">
                            <i class="icon-help-with-circle text-primary" style="font-size: 24px;"></i>
                        </div>
                        <h5 class="font-weight-bold text-dark">Informasi Perubahan</h5>
                        <p class="text-muted small">Apa yang terjadi saat data disimpan?</p>
                    </div>

                    <!-- PENGINGAT ATURAN LEVEL -->
                    <div class="alert border-0 shadow-none mb-4"
                        style="border-radius: 10px; background-color: #ebf5ff; border-left: 4px solid #007bff !important;">
                        <h6 class="font-weight-bold mb-1" style="color: #0056b3; font-size: 13px;">
                            <i class="icon-layers"></i> Aturan Level (Nilai Acuan):
                        </h6>
                        <ul class="mb-0 text-dark" style="font-size: 11px; line-height: 1.6; padding-left: 15px;">
                            <li>Angka terkecil dianggap sebagai tingkatan terendah (default).</li>
                            <li>Semakin besar angka, semakin tinggi tingkatan kondisinya.</li>
                        </ul>
                    </div>

                    <!-- PENJELASAN OTOMATISASI KODE -->
                    <div class="bg-light p-3 mb-4" style="border-radius: 10px; border-left: 4px solid #2ecc71;">
                        <h6 class="font-weight-bold text-success" style="font-size: 14px;">
                            <i class="icon-shuffle"></i> Re-Coding Otomatis
                        </h6>
                        <p class="mb-0 text-muted" style="font-size: 12px; line-height: 1.6;">
                            Jika Anda mengubah <strong>Nilai Acuan</strong>, sistem akan secara otomatis menyusun ulang
                            nomor kode belakang (S.CX.<strong>X</strong>) untuk semua sub-kriteria di bawah kriteria
                            <strong>{{ $kriteria->nama }}</strong>.
                        </p>
                    </div>

                    <!-- TIPS -->
                    <div class="alert border-0 shadow-none"
                        style="border-radius: 10px; background-color: #fff9e6; border-left: 4px solid #ffc107 !important;">
                        <h6 class="font-weight-bold mb-1" style="color: #856404; font-size: 12px;">
                            <i class="icon-lightbulb"></i> Tips:
                        </h6>
                        <p class="mb-0" style="font-size: 11px; color: #856404; line-height: 1.5;">
                            Gunakan Nama Sub yang jelas dan singkat agar mudah dipahami saat proses penilaian alternatif
                            nanti.
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <style>
        .bg-light-primary {
            background-color: rgba(74, 144, 226, 0.1);
        }

        .text-primary {
            color: #4a90e2 !important;
        }

        .italic {
            font-style: italic;
        }

        .form-control:focus {
            border-color: #4a90e2;
            box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.1);
        }
    </style>
@endpush