@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">Tambah Sub Kriteria</li>
        </ol>
    </div>

    <div class="row gutters">
        <!-- KOLOM KIRI: FORM INPUT DINAMIS -->
        <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-plus text-primary me-2"></i> Form Input Sub Kriteria
                    </div>
                </div>
                <div class="card-body" style="padding: 1.5rem 2rem;">
                    <form action="{{ route('subkriteria.store') }}" method="POST">
                        @csrf

                        <!-- Pilih Kriteria Induk -->
                        <div class="form-group mb-4">
                            <label class="font-weight-bold" style="color: #555;">Pilih Kriteria Induk</label>
                            <select name="kriteria_id" id="kriteria_select" class="form-control select2" required
                                style="height: 45px; border-radius: 8px; border: 1px solid #ddd;">
                                <option value="">-- Pilih Kriteria Utama --</option>
                                @foreach ($kriterias as $k)
                                    <option value="{{ $k->id }}">{{ $k->kode }} - {{ $k->nama }}</option>
                                @endforeach
                            </select>
                            <small class="text-muted mt-2 d-block small italic">Sub-kriteria yang diinput akan dikelompokkan
                                ke dalam kriteria ini.</small>
                        </div>

                        <!-- AREA LIST SUB KRITERIA YANG SUDAH ADA -->
                        <div id="existing-subs-container" class="mb-4" style="display: none;">
                            <label class="small font-weight-bold text-primary">
                                <i class="icon-list"></i> Sub-Kriteria Terdaftar Saat Ini (Referensi Urutan):
                            </label>
                            <div id="existing-subs-list" class="p-3 bg-light"
                                style="border-radius: 8px; border: 1px dashed #4a90e2; max-height: 200px; overflow-y: auto;">
                                <!-- Data diisi via AJAX -->
                            </div>
                        </div>

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

                        <!-- Input Dinamis Sub Kriteria -->
                        <div class="form-group">
                            <label class="font-weight-bold" style="color: #555;">Daftar Nama Sub & Urutan
                                (Otomatis)</label>
                            <div id="dynamic-inputs">
                                <div class="input-group mb-3 dynamic-row">
                                    <input type="text" name="nama_sub[]" class="form-control"
                                        placeholder="Nama Kondisi (Contoh: Menumpang / 500rb - 1jt)" required
                                        style="height: 45px; border-radius: 8px 0 0 8px;">

                                    <!-- Nilai Acuan dibuat Readonly agar urutan konsisten -->
                                    <input type="number" name="nilai_acuan[]" class="form-control next-urutan"
                                        placeholder="Urutan" required readonly
                                        style="height: 45px; max-width: 120px; border-left: none; background-color: #f8f9fa;">

                                    <button class="btn btn-success add-btn px-3" type="button"
                                        style="border-radius: 0 8px 8px 0;">
                                        <i class="icon-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </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> Simpan & Urutkan Kode
                            </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">Panduan Pengisian</h5>
                        <p class="text-muted small">Memahami alur input Nama & Urutan</p>
                    </div>

                    <!-- 1. PENJELASAN NAMA SUB -->
                    <div class="mb-4">
                        <h6 class="font-weight-bold text-dark" style="font-size: 14px;">
                            <i class="icon-tag text-primary me-2"></i> 1. Nama Sub Kriteria
                        </h6>
                        <p class="text-muted ps-4" style="font-size: 12px; line-height: 1.6;">
                            Berfungsi sebagai <strong>Label</strong>. Masukkan teks kondisi yang ingin ditampilkan.
                            <br><em>Contoh: Menumpang, Milik Sendiri, atau Rentang "500rb - 1jt".</em>
                        </p>
                    </div>

                    <!-- TAMBAHAN: ATURAN TINGKATAN (HIERARKI) -->
                    <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 Tingkatan Kondisi:
                        </h6>
                        <p class="mb-0 text-dark" style="font-size: 11px; line-height: 1.6;">
                            Urutan angka menentukan <strong>Level Kondisi</strong> dalam perhitungan:
                            <br>• <strong>Urutan Terendah (1):</strong> Adalah kondisi <em>Default</em> atau Tingkat Paling
                            Rendah.
                            <br>• <strong>Urutan Selanjutnya (2, 3, dst):</strong> Melambangkan kenaikan level atau kondisi
                            yang lebih tinggi.
                        </p>
                    </div>

                    <!-- 2. PENJELASAN NILAI ACUAN -->
                    <div class="bg-light p-3 mb-4" style="border-radius: 10px; border-left: 4px solid #4a90e2;">
                        <h6 class="font-weight-bold" style="font-size: 14px; color: #4a90e2;">
                            <i class="icon-info"></i> 2. Fungsi Urutan
                        </h6>
                        <p class="mb-0 text-muted" style="font-size: 12px; line-height: 1.6;">
                            Sistem mengunci angka urutan ini secara **otomatis** untuk memastikan nomor kode (S.C1.1, S.C1.2, dst)
                            urut dan tidak ganda sesuai tingkatannya.
                        </p>
                    </div>

                    <!-- 3. STRATEGI INPUT -->
                    <div class="mb-4 px-2">
                        <h6 class="font-weight-bold text-dark" style="font-size: 13px;">
                            <i class="icon-edit text-success me-2"></i> Strategi Input Urutan:
                        </h6>
                        <p class="text-muted mb-2" style="font-size: 12px;">Data disimpan berdasarkan urutan baris:</p>
                        <div class="p-2 border mb-3" style="border-radius: 8px; background: #fafafa;">
                            <p class="small font-weight-bold mb-1 text-dark">Sistem Otomatis:</p>
                            <ul class="mb-0 text-muted" style="font-size: 11px; list-style: none; padding-left: 5px;">
                                <li class="mb-1">🔹 Baris Pertama <i class="icon-arrow-right"></i> Level awal
                                    (melanjutkan data terakhir)</li>
                                <li class="mb-1">🔹 Klik Tombol (+) <i class="icon-arrow-right"></i> Menambah Level yang
                                    lebih tinggi</li>
                            </ul>
                        </div>
                    </div>

                    <!-- TIPS MENYISIPKAN DATA -->
                    <div class="alert border-0 shadow-none mb-4"
                        style="border-radius: 10px; background-color: #f4f7f6; border-left: 4px solid #2ecc71 !important;">
                        <h6 class="font-weight-bold mb-1" style="color: #27ae60; font-size: 12px;">
                            <i class="icon-shuffle"></i> Tips Mengubah Urutan:
                        </h6>
                        <p class="mb-0" style="font-size: 11px; color: #27ae60; line-height: 1.5;">
                            Jika ingin menyisipkan level di tengah, disarankan untuk **mengedit label** pada data lama agar
                            hierarki kode tetap konsisten.
                        </p>
                    </div>

                    <!-- 4. PERINGATAN BUKAN BOBOT -->
                    <div class="alert border-0 shadow-none mb-4"
                        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-warning"></i> Penting: Ini Bukan Perbandingan!
                        </h6>
                        <p class="mb-0" style="font-size: 11px; color: #856404; line-height: 1.5;">
                            Angka urutan ini menentukan **posisi tingkatan**. Nilai kepentingan absolut/bobot antar level akan
                            dihitung melalui matriks F-AHP nanti.
                        </p>
                    </div>

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

@push('scripts')
    <script>
        let currentLastUrutan = 0;

        $('#kriteria_select').on('change', function() {
            let kriteriaId = $(this).val();
            let container = $('#existing-subs-container');
            let list = $('#existing-subs-list');

            if (kriteriaId) {
                $.ajax({
                    url: "{{ url('subkriteria/get-by-kriteria') }}/" + kriteriaId,
                    type: "GET",
                    success: function(response) {
                        list.empty();
                        if (response.length > 0) {
                            currentLastUrutan = Math.max(...response.map(item => parseInt(item
                                .nilai_acuan)));

                            response.forEach(function(item) {
                                list.append(`
                                    <div class="d-flex justify-content-between align-items-center mb-2 border-bottom pb-1">
                                        <span class="small text-dark font-weight-bold">${item.kode} - ${item.nama_sub}</span>
                                        <span class="badge badge-info" style="font-size: 10px;">Urutan: ${item.nilai_acuan}</span>
                                    </div>
                                `);
                            });
                        } else {
                            currentLastUrutan = 0;
                            list.append(
                                '<div class="text-center small text-muted">Belum ada data sub-kriteria.</div>'
                                );
                        }
                        container.slideDown();
                        updateAllUrutan();
                    },
                    error: function() {
                        container.hide();
                    }
                });
            } else {
                container.hide();
            }
        });

        function updateAllUrutan() {
            let start = currentLastUrutan;
            $('.next-urutan').each(function(index) {
                $(this).val(start + index + 1);
            });
        }

        $(document).on('click', '.add-btn', function() {
            $('#dynamic-inputs').append(`
                <div class="input-group mb-3 dynamic-row slide-in">
                    <input type="text" name="nama_sub[]" class="form-control" placeholder="Nama Sub" required style="height: 45px; border-radius: 8px 0 0 8px;">
                    <input type="number" name="nilai_acuan[]" class="form-control next-urutan" readonly style="height: 45px; max-width: 120px; border-left: none; background-color: #f8f9fa;">
                    <button class="btn btn-danger remove-btn px-3" type="button" style="border-radius: 0 8px 8px 0;">
                        <i class="icon-minus"></i>
                    </button>
                </div>
            `);
            updateAllUrutan();
        });

        $(document).on('click', '.remove-btn', function() {
            $(this).closest('.dynamic-row').fadeOut(200, function() {
                $(this).remove();
                updateAllUrutan();
            });
        });
    </script>

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

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

        .badge-info {
            background-color: #eef7ff;
            color: #4a90e2;
            border: 1px solid #4a90e2;
            padding: 3px 10px;
            border-radius: 20px;
        }

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

        .slide-in {
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ps-4 {
            padding-left: 1.5rem;
        }

        .italic {
            font-style: italic;
        }
    </style>
@endpush