@extends('layout.app')

@section('title', 'Tambah Jenis Makanan')

@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 Jenis Makanan
                </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('jenismakanan') }}" class="text-white-50">Jenis Makanan</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">Tambah Jenis Makanan</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-utensils me-2"></i>Informasi Jenis Makanan
                    </h5>

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

                        <div class="row g-4">
                            <div class="col-md-12">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-tag me-2"></i>Nama Jenis Makanan
                                    </label>
                                    <input type="text" 
                                           class="admin-form-control @error('name') is-invalid @enderror" 
                                           name="name" 
                                           value="{{ old('name') }}"
                                           placeholder="Masukkan nama jenis makanan"
                                           required>
                                    @error('name')
                                        <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('jenismakanan') }}" 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);
}

/* 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 Data',
        text: "Apakah Anda yakin ingin menyimpan data 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