$(document).ready(function () {
    $('#clinic_select').on('change', function(){
            console.log('change')
            $('#answ_cards').append('<div class="col-xl-3 col-lg-4 col-md-6 clinic-card" data-clinic_id='+$(this).val()+'>' +
            '<div class="card mb-2">' +
              '<div class="modal-header px-3 py-2">' +
                '<p class="my-auto fw-bold">'+$("#clinic_select option:selected").text()+'</p>' +
                '<button type="button" data-bs-dismiss="modal" aria-label="Close" class="btn-close"></button>' +
              '</div>' +
              '<div class="card-body">' +
                '<p>Снимков за период: <span class="total fw-bold"></span></p>' +
                '<p>Изображения: <span class="images fw-bold"></span></p>' +
                '<p>Видео: <span class="videos fw-bold"></span></p>' +
                '<p>Другие: <span class="others fw-bold"></span></p>' +
                '<button class="btn btn-sm btn-primary" data-clinic_id='+$(this).val()+'>Просмотр</button>' +
              '</div>' +
            '</div>' +
          '</div>')
           $('.btn-close').click(function(){
                $(this).parent().parent().parent().remove()
           })
           update();
        }
    )

    function update(time_param){
        $.each($('.clinic-card'), function(e) {
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            $.ajax({
                type: "GET",
                url: '/project_report/' + $(this).attr('data-clinic_id') + '?time_param='+time_param +'&start_date='+start_date +'&end_date='+end_date,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: (data) => {
                    console.log(data)
                    $(this).find('.total').text(data['total']);
                    $(this).find('.images').text(data['images']);
                    $(this).find('.videos').text(data['videos']);
                    $(this).find('.others').text(data['others']);
                },
                error: function (jqXHR, exception) {
                    show_error('Не удалось загрузить данные',0);
                }
            })
        });
    }

    $('#today').on('click', function() {update('today')});
    $('#7days').on('click', function() {update('7days')});
    $('#30days').on('click', function() {update('30days')});
    $('#start_date').on('change', function() {update(null)});
    $('#end_date').on('change', function() {update(null)});
//    setInterval(() => update(), 1000);
});