@extends('layout.app')

@section('title', 'Tambah Kriteria')

@include('admin.shared.admin-styles')

@section('content')
<div class="admin-container container-fluid">
    <!-- Page Header -->
    <div class="page-header animate-fade-in">
        <div class="row align-items-center">
            <div class="col-12">
                <h3 class="mb-2 text-white">
                    <i class="fas fa-plus me-2"></i>Tambah Kriteria
                </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('admindash') }}" class="text-white-50">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('kriteria') }}" class="text-white-50">Kriteria</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">Tambah Kriteria</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="admin-card animate-fade-in">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="fas fa-list-check me-2"></i>Detail Kriteria
                    </h5>

                    <form id="AddUserForm" method="POST" action="{{ url('/kriteria/storekriteria') }}">
                        @csrf

                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-list-check me-2"></i>Nama Kriteria
                                    </label>
                                    <input type="text" 
                                           class="admin-form-control @error('nama') is-invalid @enderror" 
                                           name="nama" 
                                           value="{{ old('nama') }}"
                                           placeholder="Masukkan nama kriteria"
                                           required>
                                    @error('nama')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-ruler me-2"></i>Satuan Ukur
                                    </label>
                                    <input type="text" 
                                           class="admin-form-control @error('satuan') is-invalid @enderror" 
                                           name="satuan" 
                                           value="{{ old('satuan') }}"
                                           placeholder="Masukkan satuan ukur"
                                           required>
                                    @error('satuan')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="text-end mt-4">
                            <button type="reset" class="btn btn-secondary me-2">
                                <i class="fas fa-undo me-2"></i>Reset
                            </button>
                            <a href="{{ route('kriteria') }}" class="btn btn-secondary me-2">
                                <i class="fas fa-arrow-left me-2"></i>Kembali
                            </a>
                            <button type="button" class="btn btn-primary" onclick="confirmSave()">
                                <i class="fas fa-save me-2"></i>Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.admin-form-group {
    margin-bottom: 1.5rem;
}

.admin-form-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
}

.admin-form-label i {
    width: 20px;
    color: #2196f3;
}

.admin-form-control {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    width: 100%;
    transition: all 0.3s ease;
}

.admin-form-control:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.admin-form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .admin-form-control {
        padding: 0.625rem 0.875rem;
    }
}
</style>

@endsection

@push('scripts')
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function confirmSave() {
    Swal.fire({
        title: 'Simpan Kriteria',
        text: "Apakah Anda yakin ingin menyimpan kriteria ini?",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#2196f3',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="fas fa-save me-2"></i>Ya, simpan!',
        cancelButtonText: '<i class="fas fa-times me-2"></i>Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('AddUserForm').submit();
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const animateElements = document.querySelectorAll('.animate-fade-in');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = 1;
                entry.target.style.transform = 'translateY(0)';
            }
        });
    });

    animateElements.forEach(element => {
        element.style.opacity = 0;
        element.style.transform = 'translateY(20px)';
        observer.observe(element);
    });
});
</script>
@endpush