@push('css')
<link href="{{ asset('assets/plugins/parsleyjs/dist/parsley.css') }}" rel="stylesheet" />
@endpush

<form id="RefVendorForm" class="form-horizontal form-bordered" data-parsley-validate="true">
    @csrf
    <input type="hidden" id="id_vendor" name="id_vendor">
    <input type="hidden" id="_method" name="_method" value="POST">

    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="nama_vendor">Nama Vendor <span class="text-danger">*</span></label>
        <div class="col-md-8">
            <input type="text" id="nama_vendor" name="nama_vendor" class="form-control" required data-parsley-maxlength="150" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="nama_pimpinan">Nama Pimpinan</label>
        <div class="col-md-8">
            <input type="text" id="nama_pimpinan" name="nama_pimpinan" class="form-control" data-parsley-maxlength="150" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="jenis_usaha">Jenis Usaha</label>
        <div class="col-md-8">
            <input type="text" id="jenis_usaha" name="jenis_usaha" class="form-control" data-parsley-maxlength="100" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="alamat">Alamat</label>
        <div class="col-md-8">
            <textarea id="alamat" name="alamat" class="form-control" rows="3"></textarea>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="telepon">Telepon</label>
        <div class="col-md-8">
            <input type="text" id="telepon" name="telepon" class="form-control" data-parsley-maxlength="30" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="email">Email</label>
        <div class="col-md-8">
            <input type="email" id="email" name="email" class="form-control" data-parsley-maxlength="100" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="npwp">NPWP</label>
        <div class="col-md-8">
            <input type="text" id="npwp" name="npwp" class="form-control" data-parsley-maxlength="50" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="nib">NIB</label>
        <div class="col-md-8">
            <input type="text" id="nib" name="nib" class="form-control" data-parsley-maxlength="50" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label" for="status">Status <span class="text-danger">*</span></label>
        <div class="col-md-8">
            <select id="status" name="status" class="form-control" required>
                <option value="Aktif">Aktif</option>
                <option value="Nonaktif">Nonaktif</option>
            </select>
        </div>
    </div>

    <div class="modal-footer">
        <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> <span id="btnSave-title">Simpan</span></button>
        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
    </div>
</form>

@push('scripts')
<script src="{{ asset('assets/plugins/parsleyjs/dist/parsley.min.js') }}"></script>
<script>
    $('#RefVendorForm').submit(function(e) {
        e.preventDefault();
        let form = $(this);
        if (form.parsley().isValid()) {
            let id = $('#id_vendor').val();
            let url = id ? `{{ url('ref-vendor') }}/${id}` : `{{ route('ref-vendor.store') }}`;
            
            let $btn = form.find('button[type="submit"]');
            $btn.prop('disabled', true);
            let btnOriginalText = $('#btnSave-title').html();
            $('#btnSave-title').html('<i class="fa fa-spinner fa-spin"></i> Sending...');

            Swal.fire({
                title: 'Menyimpan Data...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });
            
            $.ajax({
                url: url,
                type: 'POST',
                data: form.serialize(),
                success: function(res) {
                    if(res.status) {
                        $('#modal-form').modal('hide');
                        $('#data-table-buttons').DataTable().ajax.reload();
                        Swal.fire('Sukses', res.message, 'success');
                    } else {
                        Swal.fire('Gagal', res.error, 'error');
                    }
                },
                error: function(xhr) {
                    let msg = xhr.responseJSON?.message || 'Terjadi kesalahan sistem';
                    Swal.fire('Error', msg, 'error');
                },
                complete: function() {
                    $btn.prop('disabled', false);
                    $('#btnSave-title').html(btnOriginalText);
                }
            });
        }
    });
</script>
@endpush