@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('kriteria.index') }}">Data Kriteria</a></li>
        <li class="breadcrumb-item active">Edit Kriteria</li>
    </ol>
</div>

<div class="row gutters">
    <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" style="background: #ffffff; border-bottom: 1px solid #f0f0f0; padding: 1.5rem;">
                <div class="card-title mb-0" style="font-size: 1.2rem; font-weight: 600;">
                    <i class="icon-edit text-success me-2"></i> Edit Detail Kriteria
                </div>
            </div>
            <div class="card-body" style="padding: 2rem;">
                <form action="{{ route('kriteria.update', $kriteria->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="form-group mb-4">
                        <label class="form-label" style="font-weight: 500;">Kode Kriteria</label>
                        <input type="text" class="form-control bg-light" value="{{ $kriteria->kode }}" disabled
                               style="height: 45px; border-radius: 8px; font-weight: 600;">
                    </div>

                    <div class="form-group mb-4">
                        <label for="nama" class="form-label" style="font-weight: 500;">Nama Kriteria</label>
                        <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror"
                               id="nama" value="{{ old('nama', $kriteria->nama) }}"
                               placeholder="Masukkan nama kriteria..." required
                               style="height: 45px; border-radius: 8px;">
                        @error('nama')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group mb-4">
                        <label class="form-label" style="font-weight: 500;">Bobot Saat Ini</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white"><i class="icon-info"></i></span>
                            <input type="text" class="form-control bg-light" value="{{ number_format($kriteria->bobot, 4) }}" disabled
                                   style="height: 45px; border-radius: 0 8px 8px 0; font-weight: 600;">
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-5">
                        <a href="{{ route('kriteria.index') }}" class="btn btn-outline-secondary" style="padding: 0.6rem 2rem; border-radius: 8px;">Batal</a>
                        <button type="submit" class="btn btn-success" style="padding: 0.6rem 2.5rem; border-radius: 8px; background-color: #32be8f; border: none;">
                            <i class="icon-save"></i> Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);">
            <div class="card-body d-flex flex-column justify-content-center text-center p-5">
                <div class="mb-4">
                    <i class="icon-help-with-circle" style="font-size: 4rem; color: #32be8f; opacity: 0.2;"></i>
                </div>

                <h5 class="text-dark mb-3" style="font-weight: 600;">Petunjuk Pengisian</h5>
                <p class="text-muted mb-4" style="line-height: 1.6; font-size: 0.95rem;">
                    Gunakan kolom <strong>Nama Kriteria</strong> untuk memberikan label yang jelas pada variabel keputusan Anda.
                    Nama ini akan muncul pada laporan hasil seleksi.
                </p>

                <div class="p-3 mb-2" style="background: rgba(50, 190, 143, 0.05); border-radius: 10px; border-left: 4px solid #32be8f;">
                    <small class="text-start d-block" style="color: #2a8a68;">
                        <i class="icon-zap"></i> <strong>Catatan Bobot:</strong><br>
                        Bobot bersifat <em>read-only</em> di sini karena nilainya ditentukan secara matematis melalui proses <strong>Perbandingan Berpasangan</strong> pada menu Proses Seleksi.
                    </small>
                </div>

                <img src="{{ asset('path-to-your-logo.png') }}" style="position: absolute; bottom: 20px; right: 20px; width: 60px; opacity: 0.1; filter: grayscale(100%);">
            </div>
        </div>
    </div>
</div>
@endsection