@extends('layout.app')

@section('content')
    <div class="pagetitle">
        <h1>Edit Data Makanan</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admindash') }}">Home</a></li>
                <li class="breadcrumb-item active"><a href="{{ route('makanan') }}">User</a></li>
                <li class="breadcrumb-item active"><a href="{{ route('editmakanan', $makanan->id) }}">Edit User</a></li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Edit Makanan</h5>

            <!-- General Form Elements -->
            <form id="editUserForm" method="POST" action="{{ url("/makanan/{$makanan->id}") }}">
                @method('PUT')
                @csrf

                <div class="row mb-3">
                    <label for="inputText" class="col-sm-2 col-form-label">Name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="nama" value="{{ $makanan->nama }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="role" class="col-sm-2 col-form-label">Kategori</label>
                    <div class="col-sm-10">
                        <select id="role" class="form-select" name="kategori_id">
                            @foreach ($kategoris as $id => $kategori)
                                <option value="{{ $id }}" {{ $makanan->kategori_id == $id ? 'selected' : '' }}>{{ $kategori }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>                
                <div class="row mb-3">
                    <label for="inputText" class="col-sm-2 col-form-label">Kalori</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="kalori" value="{{ $makanan->lemak_jenuh }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="inputText" class="col-sm-2 col-form-label">Protein</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="protein" value="{{ $makanan->natrium }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="inputText" class="col-sm-2 col-form-label">Lemak</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="lemak" value="{{ $makanan->kolesterol }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="inputText" class="col-sm-2 col-form-label">Karbohidrat</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="karbohidrat" value="{{ $makanan->kalori }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-12 text-center">
                        <a href="{{ route('makanan') }}" class="btn btn-secondary mx-3">Back</a>
                        <button type="button" class="btn btn-primary mx-3" onclick="confirmSave()">Save</button>
                        <!-- Reset button to reset form fields -->
                        <button type="reset" class="btn btn-secondary">Reset</button>
                    </div>
                </div>
            </form><!-- End General Form Elements -->

        </div>
    </div>

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

    <!-- Confirmation Dialog Script -->
    <script>
        function togglePasswordVisibility() {
            var passwordField = document.getElementById("passwordField");
            if (passwordField.type === "password") {
                passwordField.type = "text";
                document.querySelector('button[onclick="togglePasswordVisibility()"]').textContent = "Hide";
            } else {
                passwordField.type = "password";
                document.querySelector('button[onclick="togglePasswordVisibility()"]').textContent = "Show";
            }
        }

        function confirmSave() {
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to save the changes?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, save it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('editUserForm').submit();
                }
            });
        }
    </script>
@endsection