How to take modal bootstrap data and send it to PHP

Question

I need to get the data from the Modal form via Ajax My code:

var url = 'fotovisita.php';
var data = $('#foto').serialize();
var type = "POST";

$(document).on('click', '#save-foto', function () {
    $.ajax({
        url: url,
        method: 'POST',
        data: data,
        contentType: 'application/json',

        beforeSend: function () {
            $('#save-foto').val("Saving");
        },
        success: function (data) {
            $('#foto')[0].reset();
            $('#cadastraFoto').modal('hide');
            console.log(data)
            //$('#call sucess message').html(data); 
        }
    });
});

Meu Modal

<div class="container">
<!-- MODAL FOTO -->

<div id="cadastraFoto" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="cadastraFotoLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-xs-center" id="cadastraFotoLabel">Cadastro de Fotos Visitas</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body"> <!-- FORM -->
                <form name="foto" id="foto" data-async data-target="#rating-modal" method="POST" action="/sistema/instancias/agendavisita/fotovisita.php" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="">
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="datavisita">Data Vísita</label>
                        </div>
                        <div class="col col-lg-6">    
                            <input type="date" name="datavisita" class="form-control  form-control-sm form-group small" />
                        </div>
                    </div>

                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="idvisita">Visíta</label>
                        </div>
                        <div class='col col-md-6'>    
                            <select>
                                <option value="1">Arquiteto</option>
                                <option value="2">Engenheiroo</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="percentandamento">Porcentagem Andamento</label>
                        </div>
                        <div class="col col-md-6 slidecontainer">
                            <input type="range" name="percentandamento" id="range_weight" min="1" max="100" value="1" class="form-control-range slider" oninput="range_weight_disp.value = range_weight.value">
                            <output  id="range_weight_disp"></output>
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="caminhofoto">Foto</label>
                        </div>
                        <div>   
                            <input type="file" class="form-control-file form-control-sm form-group small" name='caminhofoto' id="caminhofoto" multiple="multiple" />
                            <span id="hidden_img_show"></span>
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" class="control-label" for="descricaofoto">Descrição Foto</label>
                        </div>
                        <div class='col-md-auto'>                
                            <textarea name="descricaofoto" cols="25" rows="3" class="form-control  form-control-sm form-group small" ></textarea>
                        </div>
                    </div>  
                    <div class="modal-footer">
                        <div>

                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="button"  name="save-foto" id="save-foto" class="btn btn-primary">
                                <span class="fas fa-plus"></span>
                                Salvar</button> 
                        </div>
                    </div>

                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- fim modal foto -->

My goal is to get all typed fields and send to the PHP page editacli.php that already has the methods to receive the $_POST[''']; of each form element and do the processing saving in the database and then want to close the Modal and display a message on the Modal screen, "Data saved successfully".

However this Ajax code is not working, when I click on the button on the page that receives the data via $_POST, it is not returning the form data.

NOTE: I have tried my PHP Internet page without the modal and it is saving normal, I’m just not sure how to solve with Modal.