var $collectionHolder1 = $('#frsr_list');
var $collectionHolder2 = $('#anneescolaire_list');

var $addNewItem1 = $('<a href="#" class="btn btn-info">Ajouter frères et soeurs</a>');
var $addNewItem2 = $('<a href="#" class="btn btn-info">Ajouter année scolaire</a>');



$(document).ready(function() {
    $collectionHolder1.append($addNewItem1);
    $collectionHolder2.append($addNewItem2);

    $collectionHolder1.data('index', $collectionHolder1.find('.panel').length);
    $collectionHolder2.data('index', $collectionHolder2.find('.panel').length);

    $collectionHolder1.find('.panel').each(function() {
        addRemoveButton1($(this));
    });
    $collectionHolder2.find('.panel').each(function() {
        addRemoveButton2($(this));
    });

    $addNewItem1.click(function(e) {
        e.preventDefault();
        addNewForm();
    });
    $addNewItem2.click(function(e) {
        e.preventDefault();
        addNewForm2();
    });
    
});

function addNewForm() {
    var prototype = $collectionHolder1.data('prototype');
    var index = $collectionHolder1.data('index');
    console.log(index);
    var newForm = prototype;
    newForm = newForm.replace(/__name__/g, index);
    $collectionHolder1.data('index', ++index);
    var $panel = $('<div class="panel panel-warning"><div class="panel-heading"></div></div>');
    var $panelBody = $('<div class="panel-body"></div>').append(newForm);
    $panel.append($panelBody);
    addRemoveButton1($panel);
    $addNewItem1.before($panel);

    for (var id = 0; id <= 100; id++) {
        var myDiv = document.getElementById('MembreType_freressoeurs_'+id);
        myDiv.classList.add("d-flex");
        myDiv.classList.add("flex-column");
        myDiv.classList.add("flex-md-row");
        myDiv.classList.add("gap-5");
   }
   //d-flex flex-column flex-md-row gap-5
   
}

function addRemoveButton1($panel) {
    var $removeButton = $('<a href="#" class="btn btn-danger">Supprimer</a><br></br>');
    var $panelFooter = $('<div class="panel-footer"></div>').append($removeButton);
    $removeButton.click(function(e) {
        e.preventDefault();
        $(e.target).parents('.panel').slideUp(1000, function() {
            $(this).remove();
        })
    });
    $panel.append($panelFooter);
}

function addNewForm2() {
    var prototype = $collectionHolder2.data('prototype');
    var index = $collectionHolder2.data('index');
    console.log(index);
    var newForm = prototype;
    newForm = newForm.replace(/__name__/g, index);
    $collectionHolder2.data('index', ++index);
    var $panel = $('<div class="panel panel-warning"><div class="panel-heading"></div></div>');
    var $panelBody = $('<div class="panel-body"></div>').append(newForm);
    $panel.append($panelBody);
    addRemoveButton2($panel);
    $addNewItem2.before($panel);

    for (var id = 0; id <= 100; id++) {
        var myDiv = document.getElementById('MembreType_AnneesScolaires_'+id);
        myDiv.classList.add("d-flex");
        myDiv.classList.add("flex-column");
        myDiv.classList.add("flex-md-row");
        myDiv.classList.add("gap-5");
    }
}

function addRemoveButton2($panel) {
    var $removeButton = $('<a href="#" class="btn btn-danger">Supprimer</a><br></br>');
    var $panelFooter = $('<div class="panel-footer"></div>').append($removeButton);
    $removeButton.click(function(e) {
        e.preventDefault();
        $(e.target).parents('.panel').slideUp(1000, function() {
            $(this).remove();
        })
    });
    $panel.append($panelFooter);
}

/*function addNewForm3() {
    var prototype = $collectionHolder3.data('prototype');
    var index = $collectionHolder3.data('index');
    console.log(index);
    var newForm = prototype;
    newForm = newForm.replace(/__name__/g, index);
    $collectionHolder3.data('index', ++index);
    var $panel = $('<div class="panel panel-warning"><div class="panel-heading"></div></div>');
    var $panelBody = $('<div class="panel-body"></div>').append(newForm);
    $panel.append($panelBody);
    addRemoveButton3($panel);
    $addNewItem3.before($panel);

    for (var id = 0; id <= 20; id++) {
        var myDiv = document.getElementById('parents_jeunesparent_'+id);
        myDiv.classList.add("d-flex");
        myDiv.classList.add("flex-column");
        myDiv.classList.add("flex-md-row");
        myDiv.classList.add("gap-5");
    }
}*/

/*function addRemoveButton3($panel) {
    var $removeButton = $('<a href="#" class="btn btn-danger">Supprimer</a><br></br>');
    var $panelFooter = $('<div class="panel-footer"></div>').append($removeButton);
    $removeButton.click(function(e) {
        e.preventDefault();
        $(e.target).parents('.panel').slideUp(1000, function() {
            $(this).remove();
        })
    });
    $panel.append($panelFooter);
}*/

/*function addNewForm4() {
    var prototype = $collectionHolder4.data('prototype');
    var index = $collectionHolder4.data('index');
    //console.log(prototype);
    var newForm = prototype;
    newForm = newForm.replace(/__name__/g, index);
    $collectionHolder4.data('index', ++index);
    var $panel = $('<div class="panel panel-warning"><div class="panel-heading"></div></div>');
    var $panelBody = $('<div class="panel-body"></div>').append(newForm);
    $panel.append($panelBody);
    addRemoveButton4($panel);
    $addNewItem4.before($panel);

   /* for (var id = 0; id <= 10; id++) {
        var myDiv = document.getElementById('parents_jeunesparent_'+id);
        myDiv.classList.add("d-flex");
        myDiv.classList.add("flex-column");
        myDiv.classList.add("flex-md-row");
        myDiv.classList.add("gap-5");
    }*/
//}

/*function addRemoveButton4($panel) {
    var $removeButton = $('<a href="#" class="btn btn-danger">Supprimer</a><br></br>');
    var $panelFooter = $('<div class="panel-footer"></div>').append($removeButton);
    $removeButton.click(function(e) {
        e.preventDefault();
        $(e.target).parents('.panel').slideUp(1000, function() {
            $(this).remove();
        })
    });
    $panel.append($panelFooter);
}*/

