{{-- Bootstrap add --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('suppliers.update', ['supplier' => '__ID__']) }}" method="POST" id="editForm">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ubah User</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_edit"
                            value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" required>
                        @error('name')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

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



                    <div class="mb-3">
                        <label for="phone_number_edit" class="form-label">No Telepon</label>
                        <input type="text" name="phone_number" value="{{ old(key: 'phone_number') }}"
                            placeholder="Masukkan No Telepon" max="15" id="phone_number_edit"
                            class="form-control only-number phone-number @error('phone_number') is-invalid @enderror" required>
                        @error('phone_number')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="address_edit" class="form-label">Alamat</label>
                        <textarea type="text" name="address" placeholder="Masukkan Alamat"
                            value="{{ old(key: 'address') }}" id="address_edit"
                            class="form-control @error('address') is-invalid @enderror" required
                            rows="3">{{ old(key: 'address') }}</textarea>
                        @error('address')
                            <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>
<div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('suppliers.store') }}" id="addForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Suplier</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 class="mb-3">
                        <label for="person_responsible" class="form-label">Penanggung Jawab</label>
                        <input type="text" name="person_responsible" placeholder="Masukkan Penanggung Jawab"
                            id="person_responsible" value="{{ old(key: 'person_responsible') }}"
                            class="form-control @error('person_responsible') is-invalid @enderror" required>
                        @error('person_responsible')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>



                    <div class="mb-3">
                        <label for="phone_number" class="form-label">No Telepon</label>
                        <input type="text" name="phone_number" placeholder="Masukkan No Telepon" max="15"
                            id="phone_number"
                            class="form-control only-number phone-number @error('phone_number') is-invalid @enderror" required>
                        @error('phone_number')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="address" class="form-label">Alamat</label>
                        <textarea name="address" placeholder="Masukkan Alamat" id="address"
                            class="form-control @error('address') is-invalid @enderror" required
                            rows="3">{{ old(key: 'address') }}</textarea>
                        @error('address')
                            <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 --}}



@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();
                        form.find('.select2').val(null).trigger('change');
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: "Suplier berhasil ditambah",
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('.data-table').DataTable().ajax.reload();
                        $('.loading').hide();
                        // Tambahkan: reload table atau tampilkan notifikasi sukses
                    })
                    .fail(function (xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: "Suplier gagal ditambah",
                            timer: 2000,
                            showConfirmButton: false
                        });
                        handleValidationErrors(xhr, form);
                        $('.loading').hide();
                    });
            });

            // 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: "Suplier berhasil diubah",
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('.data-table').DataTable().ajax.reload();
                    $('.loading').hide();
                    // reload table or show success
                }).fail(function (xhr) {
                    console.log(xhr);
                    handleValidationErrors(xhr, form);
                    $('.loading').hide();

                });
            });

            // 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