jQuery(document).ready(function() {
    jQuery("table#tarjetas").each(function(e) {
	    if (this) {
			var numRepo = $("tr",this).length;
            jQuery(this).addClass("S-CARDS cards" + e);
            var itemRepo = "";
            var a = "", s = "", l = "", f = "",
            o = jQuery("<div class='row'></div>");
			i = jQuery(".cards" + e + " tr:lt("+numRepo+")"), jQuery(i).each(function(e) {
				jQuery("th, td", this).each(function(e) {
                    switch (e) {
                        case 0:
                            a = jQuery(this).text();
                            break;
                        case 1:
                            s = jQuery(this).text();
                            break;
                        case 2:
                            f = jQuery(this).text();
                            break;
                        case 3:
	                        l = jQuery("img", this).attr('src');
                            break;
                            
                    }
				});
				itemRepo = `<div class="col-md-4">
                                <a href="${s}" class="text-light text-decoration-none">
                                    <div class="card border-0">
                                        <div class="row position-relative">
                                            <div class="col-12">
                                                <figure class="m-0 position-relative rounded overflow-hidden">
                                                    <img src="${l}" class="card-img-top img-fluid rounded-0 w-100" alt="${a}">
                                                    <div class="figure-overlay position-absolute end-0 top-0 start-0 bottom-0" style="background-color: ${f};mix-blend-mode:soft-light"></div>
                                                </figure>
                                            </div>
                                            <div class="col-12 col-md-8 d-flex text-center align-items-center rounded position-relative top-100 start-50 translate-middle py-3 mb-3" style="background-color: ${f};z-index:1">
                                                <div class="card-body">
                                                    <h5 class="card-title mb-0 text-uppercase" style="white-space:pre-line">${a}</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>`;
                o.append(itemRepo);
			});
            var c = jQuery("<div id='cards-"+e+"'>");
            c.append(o), jQuery(".S-CARDS").replaceWith(c), jQuery(this).removeClass("S-CARDS");
        }
    });

    jQuery("table#documentos").each(function(e) {
	    if (this) {
			var numRepo = $("tr",this).length;
            jQuery(this).addClass("S-DOCUMENTS document" + e);
            var itemRepo = "";
            var a = "", s = "", l = "", f = "", icon = "", color = "",
            o = jQuery("<div class='row'></div>");
			i = jQuery(".document" + e + " tr:lt("+numRepo+")"), jQuery(i).each(function(e) {
				jQuery("th, td", this).each(function(e) {
                    switch (e) {
                        case 0:
                            a = jQuery(this).text();
                            break;
                        case 1:
                            s = jQuery(this).text();
                            f = s.split(".").pop();
                            break;
                    }

                    switch (f) {
                        case 'pdf':
                        case 'PDF':
                            icon = 'file-pdf';
                            color = '#CC4533';
                            break;
                        case 'doc':
                        case 'docx':
                        case 'DOC':
                        case 'DOCX':
                            icon = 'file-word';
                            color = '#2544B3';
                            break;
                        case 'xls':
                        case 'xlsx':
                        case 'XLS':
                        case 'XLSX':
                            icon = 'file-excel';
                            color = '#348030';
                            break;
                    }
				});
				itemRepo = `<div class="col-md-4 mb-5">
                                <a href="${s}" class="text-dark text-decoration-none">
                                    <div class="card border-0">
                                        <div class="d-flex align-items-center position-relative">
                                            <div class="position-absolute top-50 start-0 translate-middle rounded" style="height:120px;width:120px;justify-content:center;align-items:center;display:flex;left:60px!important;background-color:${color}">
                                                <figure class="m-0 position-relative rounded overflow-hidden">
                                                    <img src="/content/micrositios/334/image/${icon}.png" class="rounded-0" height="48" alt="${a}">
                                                </figure>
                                            </div>
                                            <div class="col-12 d-flex align-items-center rounded-end h-100" style="min-height:96px; background-color:#F0F0F0;padding-left:135px;padding-right:15px">
                                                <div class="card-body p-0">
                                                    <h5 class="card-title position-relative mb-0 pe-5" style="white-space:pre-line">
                                                        ${a} 
                                                        <img src="/content/micrositios/334/image/download.png" class="position-absolute top-50 end-0 translate-middle" height="24" alt="${a}">
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>`;
                o.append(itemRepo);
			});
            var c = jQuery("<div id='document-"+e+"'>");
            c.append(o), jQuery(".S-DOCUMENTS").replaceWith(c), jQuery(this).removeClass("S-DOCUMENTS");
        }
    });

    jQuery("table#recursos").each(function(e) {
	    if (this) {
			var numRepo = $("tr",this).length;
            jQuery(this).addClass("S-CARDS cards" + e);
            var itemRepo = "";
            var a = "", s = "", l = "",
            o = jQuery("<div class='row'></div>");
			i = jQuery(".cards" + e + " tr:lt("+numRepo+")"), jQuery(i).each(function(e) {
				jQuery("th, td", this).each(function(e) {
                    switch (e) {
                        case 0:
                            a = jQuery(this).text();
                            break;
                        case 1:
                            s = jQuery(this).text();
                            break;
                        case 2:
	                        l = jQuery("img", this).attr('src');
                            break;
                            
                    }
				});
				itemRepo = `<div class="col-md-6">
                                <a href="${s}" class="text-dark text-decoration-none">
                                    <div class="card border-0">
                                        <div class="row position-relative">
                                            <div class="col-12">
                                                <figure class="m-0 position-relative rounded overflow-hidden">
                                                    <img src="${l}" class="card-img-top img-fluid rounded-0 w-100" alt="${a}">
                                                </figure>
                                            </div>
                                            <div class="col-12 col-md-8 d-flex align-items-center position-relative top-100 start-50 translate-middle mb-3" style="z-index:1">
                                                <div class="card-body rounded py-0" style="margin-right:45px;background-color:#F0F0F0;">
                                                    <h5 class="card-title position-relative mb-0 text-uppercase d-flex flex-column justify-content-center" style="white-space:pre-line;padding-right:135px;min-height:95px">
                                                        ${a} 
                                                        <span class="position-absolute top-50 end-0 translate-middle rounded-pill d-flex justify-content-center align-items-center" style="height:120px;width:120px;margin-right:-120px;background-color:#56B9BF">
                                                            <img src="/content/micrositios/334/image/play.png" class="" height="48" alt="${a}">
                                                        </span>
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>`;
                o.append(itemRepo);
			});
            var c = jQuery("<div id='cards-"+e+"'>");
            c.append(o), jQuery(".S-CARDS").replaceWith(c), jQuery(this).removeClass("S-CARDS");
        }
    });

    jQuery("table#preguntas").each(function(e) {
	    if (this) {
			var numRepo = $("tr",this).length;
            jQuery(this).addClass("S-CARDS cards" + e);
            var itemRepo = "";
            var a = "", s = "", l = "",
            o = jQuery("<div class='row'></div>");
			i = jQuery(".cards" + e + " tr:lt("+numRepo+")"), jQuery(i).each(function(e) {
				jQuery("th, td", this).each(function(e) {
                    switch (e) {
                        case 0:
                            a = jQuery(this).text();
                            break;
                        case 1:
                            s = jQuery(this).text();
                            break;
                        case 2:
	                        l = jQuery("img", this).attr('src');
                            break;
                            
                    }
				});
				itemRepo = `<div class="col-md-6">
                                <div class="card p-3 border-0 mb-3" style="background-color:#F0F0F0;">
                                    <div class="row g-0">
                                        <div class="col-md-8">
                                            <div class="card-body">
                                                <h5 class="card-title">${a}</h5>
                                                <div class="card-text">${s}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 d-flex align-items-center justify-content-center p-3">
                                            <img src="${l}" class="img-fluid rounded" alt="${a}">
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                o.append(itemRepo);
			});
            var c = jQuery("<div id='cards-"+e+"'>");
            c.append(o), jQuery(".S-CARDS").replaceWith(c), jQuery(this).removeClass("S-CARDS");
        }
    });
});