@extends('layouts.app')

@section('title', 'Tambah Subkriteria Baru')

@section('content')
<div class="container-fluid py-4">
    <div class="card shadow-lg border-0" style="border-radius: 15px;">
        <div class="card-header bg-white d-flex justify-content-between align-items-center border-bottom-0">
            <h4 class="mb-0 font-weight-bold" style="color: rgb(0,122,153);">
                <i class="fas fa-plus-circle mr-2"></i>Tambah Sub Kriteria Baru
            </h4>
            <a href="{{ isset($selectedKriteria) ? route('kriteria.subkriteria.index', $selectedKriteria) : route('kriteria.index') }}" 
               class="btn btn-outline-secondary rounded-pill px-4">
                <i class="fas fa-arrow-left mr-2"></i>Kembali
            </a>
        </div>
        
        <div class="card-body p-5">
            <form action="{{ route('subkriteria.store') }}" method="POST">
                @csrf
                
                <!-- Kriteria Selection -->
                <div class="form-group mb-4">
                    <label class="form-label font-weight-bold mb-3" style="color: rgb(0,122,153);">
                        <i class="fas fa-list-ul mr-2"></i>Kriteria
                    </label>
                    
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill py-3 px-4 shadow-sm border-0" 
                               id="kriteriaDisplay" 
                               value="{{ isset($selectedKriteria) ? ($kriterias->firstWhere('id', $selectedKriteria)->nama_kriteria ?? 'Pilih Kriteria') : 'Pilih Kriteria' }}" 
                               readonly
                               style="background-color: rgba(0,122,153,0.05); border-top-right-radius: 0; border-bottom-right-radius: 0;">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary rounded-pill" type="button" 
                                    style="border-top-left-radius: 0; border-bottom-left-radius: 0;"
                                    onclick="document.getElementById('kriteriaSelect').style.display = 'block'">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Hidden input for form submission -->
                    <input type="hidden" name="kriteria_id" id="kriteria_id" value="{{ $selectedKriteria ?? '' }}">
                    
                    <!-- Visible dropdown (initially hidden) -->
                    <div id="kriteriaSelect" class="mt-2" style="display: none;">
                        <select class="form-control rounded-pill py-3 px-4 shadow-sm border-0" 
                                style="background-color: rgba(0,122,153,0.05);"
                                onchange="updateKriteria(this)">
                            <option value="">-- Pilih Kriteria --</option>
                            @foreach($kriterias as $krit)
                                <option value="{{ $krit->id }}" 
                                        {{ (isset($selectedKriteria) && $selectedKriteria == $krit->id) ? 'selected' : '' }}>
                                    {{ $krit->nama_kriteria }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <!-- Nama Sub Kriteria -->
                <div class="form-group mb-4">
                    <label for="nama_subkriteria" class="form-label font-weight-bold mb-3" style="color: rgb(0,122,153);">
                        <i class="fas fa-tag mr-2"></i>Nama Sub Kriteria
                    </label>
                    <input type="text" class="form-control rounded-pill py-3 px-4 shadow-sm border-0" 
                           id="nama_subkriteria" name="nama_subkriteria" required
                           style="background-color: rgba(0,122,153,0.05);"
                           value="{{ old('nama_subkriteria') }}"
                           placeholder="Masukkan nama sub kriteria">
                    @error('nama_subkriteria')
                        <div class="text-danger ml-3 mt-2">{{ $message }}</div>
                    @enderror
                </div>
                
                <!-- Nilai -->
                <div class="form-group mb-4">
                    <label for="nilai" class="form-label font-weight-bold mb-3" style="color: rgb(0,122,153);">
                        <i class="fas fa-star-half-alt mr-2"></i>Nilai
                    </label>
                    <input type="number" step="1" min="0" max="100"
                           class="form-control rounded-pill py-3 px-4 shadow-sm border-0" 
                           id="nilai" name="nilai" required
                           style="background-color: rgba(0,122,153,0.05);"
                           value="{{ old('nilai') }}"
                           placeholder="Masukkan nilai (0 - 100)">
                    <small class="form-text text-muted ml-3">Harus berupa bilangan bulat (contoh: 25, 50, 75)</small>
                    @error('nilai')
                        <div class="text-danger ml-3 mt-2">{{ $message }}</div>
                    @enderror
                </div>
                
                <!-- Action Buttons -->
                <div class="d-flex justify-content-end mt-5 pt-3">
                    <button type="reset" class="btn btn-outline-secondary rounded-pill px-4 mr-3 py-2">
                        <i class="fas fa-redo mr-2"></i>Reset
                    </button>
                    <button type="submit" class="btn rounded-pill px-4 py-2 shadow-sm"
                            style="background-color: rgb(0,122,153); color: white;">
                        <i class="fas fa-save mr-2"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    body {
        background-color: #f8f9fa;
    }
    .card {
        border: none;
        overflow: hidden;
    }
    .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(0,122,153,0.25);
        border-color: rgba(0,122,153,0.5);
    }
    .btn-outline-secondary {
        border-color: rgb(0,122,153);
        color: rgb(0,122,153);
    }
    .btn-outline-secondary:hover {
        background-color: rgb(0,122,153);
        color: white;
    }
    .input-group-append .btn {
        height: 100%;
        border-left: 0;
    }
</style>

<script>
    function updateKriteria(select) {
        const selectedOption = select.options[select.selectedIndex];
        if (selectedOption.value) {
            // Update visible field
            document.getElementById('kriteriaDisplay').value = selectedOption.text;
            // Update hidden field for form submission
            document.getElementById('kriteria_id').value = selectedOption.value;
        } else {
            document.getElementById('kriteriaDisplay').value = 'Pilih Kriteria';
            document.getElementById('kriteria_id').value = '';
        }
        // Hide dropdown after selection
        document.getElementById('kriteriaSelect').style.display = 'none';
    }

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('kriteriaSelect');
        const trigger = document.querySelector('[onclick*="kriteriaSelect"]');
        
        if (!dropdown.contains(event.target) && event.target !== trigger && !trigger.contains(event.target)) {
            dropdown.style.display = 'none';
        }
    });
</script>
@endsection