@extends('layout.app')

@section('content')
    <div class="pagetitle">
        <h1>Edit Data Jenis 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('jenismakanan') }}">Jenis Makanan</a></li>
                <li class="breadcrumb-item active"><a href="{{ route('editjenismakanan', $jenis->id) }}">Edit Jenis Makanan</a></li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Edit Jenis Makanan</h5>
            <!-- General Form Elements -->
            <form id="editUserForm" method="POST" action="{{ url("/jenismakanan/{$jenis->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="name" value="{{ $jenis->name }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-12 text-center">
                        <a href="{{ route('jenismakanan') }}" 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