@extends('template.admin')

@section('content')
<div class="max-w-4xl mx-auto p-6 bg-white shadow rounded">

    <h1 class="text-lg font-semibold mb-4 text-gray-700">Tambah Kriteria</h1>

    <form action="{{ route('kriteria.store') }}" method="POST" class="space-y-3">
        @csrf

        <div>
            <label for="nama_kriteria" class="block mb-1 text-gray-600 text-sm">Nama Kriteria</label>
            <input type="text" id="nama_kriteria" name="nama_kriteria"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[#1e3a8a]"
                value="{{ old('nama_kriteria') }}" required>
            @error('nama_kriteria')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        {{-- <div>
            <label for="bobot" class="block mb-1 text-gray-600 text-sm">Bobot</label>
            <input type="number" step="0.01" id="bobot" name="bobot"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[#1e3a8a]"
                value="{{ old('bobot') }}" required>
            @error('bobot')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div> --}}

        <div>
            <label for="tipe" class="block mb-1 text-gray-600 text-sm">Tipe</label>
            <select id="tipe" name="tipe"
                class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[#1e3a8a]"
                required>
                <option value="" disabled selected>-- Pilih Tipe --</option>
                <option value="benefit" {{ old('tipe') == 'benefit' ? 'selected' : '' }}>Benefit</option>
                <option value="cost" {{ old('tipe') == 'cost' ? 'selected' : '' }}>Cost</option>
            </select>
            @error('tipe')
            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex justify-end gap-4 mt-4">
            <a href="{{ route('kriteria.index') }}"
                class="flex items-center gap-1 text-gray-500 hover:text-[#1e3a8a] transition" title="Batal" aria-label="Batal">
                <!-- Icon silang -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 stroke-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span class="text-sm">Batal</span>
            </a>

            <button type="submit" title="Simpan" aria-label="Simpan"
                class="flex items-center gap-2 text-[#1e3a8a] hover:text-[#163570] transition font-medium">
                <!-- Icon tambah/simpan -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                </svg>
                <span class="text-sm">Simpan</span>
            </button>
        </div>

    </form>
</div>
@endsection