@extends('layout.app')

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

                    <form id="AddUserForm" method="POST" action="{{ url('/makanan/storemakanan') }}">
                        @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-tag me-2"></i>Nama Makanan
                                    </label>
                                    <input type="text" 
                                           class="admin-form-control @error('nama') is-invalid @enderror" 
                                           name="nama" 
                                           value="{{ old('nama') }}"
                                           placeholder="Masukkan nama makanan"
                                           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-list me-2"></i>Kategori
                                    </label>
                                    <select class="admin-form-control @error('kategori_id') is-invalid @enderror" 
                                            name="kategori_id" 
                                            required>
                                        <option value="" selected disabled>Pilih Kategori</option>
                                        @foreach($kategoris as $kategori)
                                            <option value="{{ $kategori->id }}" {{ old('kategori_id') == $kategori->id ? 'selected' : '' }}>
                                                {{ $kategori->kategori }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('kategori_id')
                                        <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-cookie-bite me-2"></i>Jenis Makanan
                                    </label>
                                    <select class="admin-form-control @error('jenis_id') is-invalid @enderror" 
                                            name="jenis_id" 
                                            required>
                                        <option value="" selected disabled>Pilih Jenis Makanan</option>
                                        @foreach($jenis_makanans as $jenis)
                                            <option value="{{ $jenis->id }}" {{ old('jenis_id') == $jenis->id ? 'selected' : '' }}>
                                                {{ $jenis->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('jenis_id')
                                        <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-oil-can me-2"></i>Lemak (g)
                                    </label>
                                    <input type="number" 
                                           step="0.01"
                                           class="admin-form-control @error('lemak') is-invalid @enderror" 
                                           name="lemak" 
                                           value="{{ old('lemak') }}"
                                           placeholder="Masukkan kandungan lemak"
                                           required>
                                    @error('lemak')
                                        <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-salt-shaker me-2"></i>Natrium (mg)
                                    </label>
                                    <input type="number" 
                                           step="0.01"
                                           class="admin-form-control @error('natrium') is-invalid @enderror" 
                                           name="natrium" 
                                           value="{{ old('natrium') }}"
                                           placeholder="Masukkan kandungan natrium"
                                           required>
                                    @error('natrium')
                                        <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-bolt me-2"></i>Energi (kkal)
                                    </label>
                                    <input type="number" 
                                           step="0.01"
                                           class="admin-form-control @error('energi') is-invalid @enderror" 
                                           name="energi" 
                                           value="{{ old('energi') }}"
                                           placeholder="Masukkan kandungan energi"
                                           required>
                                    @error('energi')
                                        <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-bread-slice me-2"></i>Karbohidrat (g)
                                    </label>
                                    <input type="number" 
                                           step="0.01"
                                           class="admin-form-control @error('karbohidrat') is-invalid @enderror" 
                                           name="karbohidrat" 
                                           value="{{ old('karbohidrat') }}"
                                           placeholder="Masukkan kandungan karbohidrat"
                                           required>
                                    @error('karbohidrat')
                                        <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('makanan') }}" 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 Makanan',
        text: "Apakah Anda yakin ingin menyimpan makanan 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