{{-- Bootstrap add --}}
    <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('racks.store') }}" id="addForm" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Tambah Rak</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="name" class="form-label">Nama</label>
                            <input type="text" name="name" placeholder="Masukkan nama" id="name" value="{{ old('name') }}"
                                class="form-control @error('name') is-invalid @enderror" required>
                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </form>

        </div>
    </div>



    {{-- Bootstrap add --}}
   <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('racks.update', ['rack' => '__ID__']) }}" method="POST" id="editForm">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ubah Rak</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-3">
                        <label for="name_edit" class="form-label">Nama</label>
                        <input type="text" name="name" id="name_edit" placeholder="Masukkan nama" value="{{ old('name') }}"
                            class="form-control @error('name') is-invalid @enderror" required>
                        @error('name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

    @push("extraJS")

<script>
$(document).ready(function () {


    // Handle Add Form Submission
    $('#addForm').on('submit', function (e) {
        e.preventDefault();
        let form = $(this);
        let url = form.attr('action');
        let data = form.serialize();

        clearErrors(form);

        $.post(url, data)
            .done(function () {
                $('#addModal').modal('hide');
                form[0].reset();
                  Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: "Rak berhasil ditambah",
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('.data-table').DataTable().ajax.reload();
                // Tambahkan: reload table atau tampilkan notifikasi sukses
            })
            .fail(function (xhr) {
                console.log(xhr);
                Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: "Rak gagal ditambah",
                        timer: 2000,
                        showConfirmButton: false
                    });
                handleValidationErrors(xhr, form);
            });
    });

    // Handle Edit Form Submission
    $('#editForm').on('submit', function (e) {
        e.preventDefault();
        let form = $(this);
        let userId = form.attr('action').replace('__ID__', form.data('id'));
        let data = form.serialize();

        clearErrors(form);

        $.ajax({
            url: userId,
            method: 'PUT',
            data: data,
        }).done(function () {
            $('#editModal').modal('hide');
              Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: "Rak berhasil diubah",
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('.data-table').DataTable().ajax.reload();
            // reload table or show success
        }).fail(function (xhr) {
            console.log(xhr);
            handleValidationErrors(xhr, form);
        });
    });

    // Utility: Clear old validation
    function clearErrors(form) {
        form.find('.is-invalid').removeClass('is-invalid');
        form.find('.invalid-feedback').remove();
    }

    // Utility: Handle validation from API
    function handleValidationErrors(xhr, form) {
        if (xhr.status === 422) {
            let errors = xhr.responseJSON.errors;
            console.log(errors);
            for (let field in errors) {
                let input = form.find(`[name="${field}"]`);
                if (input.length === 0 && field.includes('.')) {
                    // For array fields like roles[0]
                    let nameAttr = field.replace(/\.\d+/, '[]');
                    input = form.find(`[name="${nameAttr}"]`);
                }
                input.addClass('is-invalid');
                input.after(`<div class="invalid-feedback d-block">${errors[field][0]}</div>`);
            }
        }
    }
});
</script>


    @endpush