<div class="row">
	<div class="col-lg-12">
		<div id="alert-modal-info" class="alert alert-secondary hidden text-dark">
			<div class="alert-body">
				<div id="alert-modal-info-message"></div>
			</div>
		</div>
        <div id="alert-modal" class="alert alert-danger hidden text-dark">
            <div class="alert-body">
                <div id="alert-modal-message"></div>
            </div>
        </div>
	</div>
</div>
<form method="post" action="{{ request()->url() }}" id="main_form">
@csrf
<div class="row">
    {{-- <div class="form-group col-lg-4">
        <label>Kategori <text class="text-danger">*</text></label>
        <select class="form-control" name="category_id" data-toggle="select2">
            <option value="" selected>Pilih...</option>
            @foreach($categories as $item)
                <option value="{{ $item->id }}" {{ old('category_id') ? (old('category_id') == $item->id ? 'selected' : '') : ($target->category_id == $item->id ? 'selected' : '')  }}>{{ $item->name }}</option>
            @endforeach
        </select>
        <small class="text-danger category_id_error"></small>
    </div> --}}
    <div class="form-group col-lg-12">
        <label>Penyedia <text class="text-danger">*</text></label>
        <select class="form-control" name="provider_id" data-toggle="select2">
            <option value="" selected>Pilih...</option>
            @foreach($providers as $item)
                <option value="{{ $item->id }}" {{ old('provider_id') ? (old('provider_id') == $item->id ? 'selected' : '') : ($target->provider_id == $item->id ? 'selected' : '')  }}>{{ $item->name }}</option>
            @endforeach
        </select>
        <small class="text-danger provider_id_error"></small>
    </div>
    <div class="form-group col-lg-12">
        <label>ID Layanan Penyedia <text class="text-danger">*</text></label>
        <textarea type="text" class="form-control" rows="5" name="provider_service_id"></textarea>
        <small class="text-danger provider_service_id_error"></small>
    </div>
</div>
<div class="text-right">
    <button type="reset" id="reset-button" class="btn btn-danger"><i class="fa fa-redo"></i> Reset</button>
    <button type="submit" id="submit-button" class="btn btn-success"><i class="fa fa-check"></i> Submit</button>
</div>
</form>
<script>
    $('input[name="update_service"]').on('change', (event) => {
        if($(event.currentTarget).is(':checked')) {
            $('#service_settings').removeClass('hidden');
        } else {
            $('#service_settings').addClass('hidden');
        }
    });
    $(document).ready(function() {
        $('.autonumeric-currency').autoNumeric('init', {
            mDec  : '0',
            aSep  : '.',
            aDec  : ',',
            aSign : 'Rp ',
        });
        $('.autonumeric-quantity').autoNumeric('init', {
            mDec  : '0',
            aSep  : '.',
            aDec  : ',',
            aSign : '# ',
        });
    });
    function reset_button(value = 0) {
        if (value == 0) {
            $('button[id="submit-button"]').attr('disabled', 'true');
            $('button[id="submit-button"]').text('');
            $('button[id="submit-button"]').append('<span class=\"spinner-grow spinner-grow-sm mb-1\"></span> Mohon tunggu...');
            $('button[id="reset-button"]').hide();
        } else {
            $('button[id="submit-button"]').removeAttr('disabled');
            $('button[id="submit-button"]').removeAttr('span');
            $('button[id="submit-button"]').text('');
            $('button[id="submit-button"]').append('<i class=\"fa fa-check\"></i> Submit');
            $('button[id="reset-button"]').show();
        }
    }
    $(function() {
        $("#main_form").on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: $(this).attr('action'),
                method: $(this).attr('method'),
                data: new FormData(this),
                processData: false,
                dataType: 'json',
                contentType: false,
                beforeSend: function() {
                    reset_button(0);
                    $(document).find('small.text-danger').text('');
                    $(document).find('input').removeClass('is-invalid');
                },
                success: function(data) {
                    reset_button(1);
                    if (data.status == false) {
                        if (data.type == 'validation') {
                            $.each(data.message, function(prefix, val) {
                                $("input[name="+prefix+"]").addClass('is-invalid');
                                $('small.'+prefix+'_error').text(val[0]);
                            });
                        }
                        if (data.type == 'alert') {
                            $('.modal').animate({ scrollTop: 0 }, 'slow');
                            $('#alert-modal-message').html("<b><i class=\"fa fa-times-circle\"></i> Gagal:</b> "+data.message);
                            $('#alert-modal').removeClass('hidden');
                            setTimeout(() => {
                                $('#alert-modal').addClass('hidden');
                            }, 5000);
                            // swal.fire("Gagal!", data.message, "error");
                        } else if (data.type == 'info') {
                            $('.modal').animate({ scrollTop: 0 }, 'slow');
                            $('#alert-modal-info-message').html("<b><i class=\"fa fa-info-circle\"></i> Informasi:</b> "+data.message);
                            $('#alert-modal-info').removeClass('hidden');
                            window.LaravelDataTables["data-table"].draw();
                            setTimeout(() => {
                                $('#alert-modal-info').addClass('hidden');
                            }, 15000);
                            // swal.fire("Gagal!", data.message, "error");
                        }
                    } else {
                        $('html,body').animate({
                            scrollTop: $("#alert-success").offset().top
                        }, 'slow');
                        $('#alert-success-message').html("<b><i class=\"fa fa-check-circle\"></i> Berhasil:</b> "+data.message);
                        $('#alert-success').removeClass('hidden');
                        $("#modal").modal('hide');
                        window.LaravelDataTables["data-table"].draw();
                        setTimeout(() => {
                            $('#alert-success').addClass('hidden');
                        }, 15000);
                    }
                },
                error:function() {
                    console.log('123')
                    $('html,body').animate({
                        scrollTop: $("#alert-danger").offset().top
                    }, 'slow');
                    $('#alert-danger-message').html("<b><i class=\"fa fa-times-circle\"></i> Gagal:</b> Terjadi kesalahan.");
                    $('#alert-danger').removeClass('hidden');
                    $("#modal").modal('hide');
                    setTimeout(() => {
                        $('#alert-danger').addClass('hidden');
                    }, 10000);
                },
            });
        });
    });
</script>