<?php
$id = $pagina[1];
$seccion = $pagina[3];
$color = '';
$circulo = '';

if ($id % 2 == 0) {
    $color = "#a62b4e";
    $circulo = 'img_wd/circulo.png';
} else {
    $color = "#a62b4e";
    $circulo = 'img_wd/circulo.png';
}
?>

<style>
    body {
        background-size: cover;
        background-position: center;
        background-attachment: inherit;
        background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
    }
</style>



<div class="container" style="margin-bottom: 150px">

    <div class="row">

        <div class="col-md-12" align="center" style="padding-left: 50px; padding-right: 50px;">

            <div class="row" style="margin-top: 20px; margin-bottom: 20px">

                <div class="col-md-12 ">
                    <?php
                    if ($id == 1) {
                        echo '
                        <h2 class="ti_grupo">20 DE ABRIL</h2>
                        ';
                    }
                    if ($id == 2) {
                        echo '
                        <h2 class="ti_grupo">21 DE ABRIL</h2>
                        ';
                    }

                    if ($id == 3) {
                        echo '
                        <h2 class="ti_grupo">22 DE ABRIL</h2>
                        ';
                    }

                    if ($id == 4) {
                        echo '
                        <h2 class="ti_grupo">23 DE ABRIL</h2>
                        ';
                    }
                    ?>
                </div>

                <!-- INCIA LA AGENDA -->
                <?php
                $count = 0;
                $queryGroup = mysqli_query($connect, "select * from Agenda where dia='" . $id . "' and id_evento=" . $seccion . " and estado=1; ");
                /* while($dataG = mysqli_fetch_array($queryGroup)){
                        
                        $dia_tx = explode("-", $dataG["fecha"]);
                        $mes_tx = Mes_Text($dia_tx[1], $array_mes);
                        echo '
                        <div style=" width: 100%; display: none ">
                            <div class="ti_dia" style="color:'.$color.'">'.$dia_tx[2].' de '.$mes_tx.'</div>
                        </div>
                        ';
 */

                $query = mysqli_query($connect, "select * from Agenda where dia='" . $id . "' and id_evento=" . $seccion . " and estado=1; ");
                while ($data = mysqli_fetch_array($query)) {

                    $link = '';
                    if ($data["evidencias"] != "") {
                        $link = '
                                    <div style="text-align: right;">
                                        <a href="' . $data["evidencias"] . '" target="_blank">
                                            <button type="button" class="btn btn-warning btn-sm" style="font-size: 11px; margin-top: 5px; background-color: #fff500; border: 0px;" >
                                               Ir al Taller
                                            </button>
                                        </a>
                                    </div>
                                ';
                    }

                    $ficha_iz = '';
                    $ficha_dr = '';

                    if ($data["tipo"] == 1 || $data["tipo"] == 2) {
                        $ficha_iz = '
                                <div>
                                    <table width="100%" class="ficha_contenido" style="background-color: ' . $color . ';">
                                        <tr>
                                            <td style=" line-height: 16px; padding: 10px; padding-left: 30px;">
                                                <b>' . $data["actividad"] . '</b><br>
                                                <div>' . $data["exponentes"] . '</div><br>

                                                <!--<div style="color: #fff500;"><b>Encargado:</b> ' . ''/* $data["encargado"] */ . '</div> -->
                                                <div class="e_movil">
                                                    ' . $data["hora_inicia"] . ' - ' . $data["hora_termina"] . '
                                                </div>
                                                ' . $link . '
                                            </td>
                                        </tr>
                                    </table>
                                </div>	
                                ';
                        $ficha_dr = '
                                <div >
                                    <table width="100%" class="ficha_contenido" style="background-color: ' . $color . ';">
                                        <tr>
                                            <td style=" line-height: 16px; padding: 10px; padding-left: 30px;">
                                                <b>' . $data["actividad"] . '</b><br>
                                                <div>' . $data["exponentes"] . '</div><br>
                                                <!-- <div style="color: #fff500;"><b>Encargado:</b> ' . ''/* $data["participantes"] */ . '</div> -->
                                                <div class="e_movil">
                                                    ' . $data["hora_inicia"] . ' - ' . $data["hora_termina"] . '
                                                </div>
                                                ' . $link . '
                                            </td>
                                        </tr>
                                    </table>
                                </div>	
                                ';
                    }


                    if ($data["tipo"] == 3) {
                        $ficha_iz = '
                                <div>
                                    <table width="100%" class="ficha_contenido" style="background-color: #ffea00;">
                                        <tr>
                                            <td style=" line-height: 16px; padding: 10px; padding-left: 30px;">
                                                <div style="color: ' . $color . '; font-size: 20px; margin: 20px 10px;">
                                                    <b>' . $data["actividad"] . '</b>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>	
                                ';
                        $ficha_dr = '
                                <div >
                                    <table width="100%" class="ficha_contenido" style="background-color: #ffea00;">
                                        <tr>
                                            <td style=" line-height: 16px; padding: 10px; padding-left: 30px;">
                                                <div style="color: ' . $color . '; font-size: 27px; margin: 20px 10px;">
                                                    <b>' . $data["actividad"] . '</b>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>	
                                ';
                    }

                    $iz = '';
                    $dr = '';
                    if ($count == 0) {
                        $iz = '<img src="' . $url . '/img/linea_dotted.png" width="80" style="margin-top: 36px; margin-bottom: -50px; margin-left: -50px; position: relative;
                z-index: -1;">';
                        $iz .= $ficha_iz;
                    }
                    if ($count == 1) {
                        $dr = '<img src="' . $url . '/img/linea_dotted_iz.png" width="80" style="margin-top: 36px; margin-bottom: -50px; margin-right: -50px; position: relative; z-index: -1;">';
                        $dr .= $ficha_dr;
                    }


                    echo '
                                <div class="col-md-5 izquierda e_web" align="right" ">
                                    ' . $dr . '
                                </div>

                                <div class="col-md-2 e_web" align="center" >
                                    <div class="circulo">
                                        ' . $data["hora_inicia"] . '<br>
                                        ' . $data["hora_termina"] . '
                                    </div>	
                                </div>

                                <div class="col-md-5 derecha e_web" align="left" >
                                    ' . $iz . '
                                </div>

                                <div class="col-md-12 e_movil" align="center" style="margin-bottom: 10px;">
                                    ' . $dr . '
                                    ' . $iz . '
                                </div>	
                            ';

                    $count++;
                    if ($count > 1) {
                        $count = 0;
                    }
                }

                /* } */
                ?>


            </div>



























        </div>

    </div>

    <div class="row">
        <div class="col-6" align="right">
            <a href="<?php echo $url; ?>/agenda/<?php echo $seccion; ?>">
                <img src="<?php echo $url; ?>/img/img_wd/bt_back.png" style="width: 130px; z-index: 5;" class="e_web">
            </a>
        </div>
        <div class="col-6" align="left">
            <a href="<?php echo $url; ?>/secciones">
                <img src="<?php echo $url; ?>/img/img_wd/bt_back_section.png" style="width: 130px; z-index: 5;" class="e_web">
            </a>
        </div>


    </div>

</div>


<style>
    .ti_grupo {
        margin-top: 10px;
        color: #000;
        font-weight: bold;
    }

    .ti_dia {
        color: #000;
        background-color: #FFF500;
        display: inline-block;
        padding: 8px 30px;
        margin-bottom: 20px;
        margin-top: 20px;
        font-size: 22px;
        font-weight: bold;
    }



    .inputs {
        margin-bottom: 5px;
    }

    label {
        color: #006cc1;
        font-weight: bold;
        margin-bottom: 0px;
        margin-top: 5px;
    }

    .ficha_agenda {
        background-color: #fff;
        width: 150px;
        border-radius: 20px;
        overflow: hidden;
        text-align: center;
        margin-bottom: -5px;
        transform: scale(0.9);
        transition: 0.5s all;
        display: inline-table;
        color: #062a3c;
    }

    .ficha_agenda:hover {
        transform: scale(1);
    }

    .ti_ficha_agenda {
        background-color: #109CCE;
        color: #fff;
        padding: 6px;
        font-weight: bold;
        font-size: 18px;
        border-radius: 30px;

    }

    .ficha_evento {
        width: 100%;
        background-color: <?php echo $color; ?>;
        border-radius: 17px;
        padding: 2px;
    }

    .ficha_contenido {
        background-color: #00b08c;
        border-radius: 15px;
        font-size: 14px;
        color: #fff;
    }

    .circulo {
        text-align: center;
        font-size: 12px;
        width: 100px;
        height: 90px;
        color: #a62b4e;
        border-radius: 50px;
        display: table-cell;
        vertical-align: middle;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70%;
        background-image: url(<?php echo $url; ?>/img/<?php echo $circulo; ?>);
    }

    .actividad {
        padding: 10px 20px;
        line-height: 14px;
        padding-top: 0px;
        height: 50px;
    }

    .foto {
        width: 67px;
        height: 67px;
        background-size: cover;
        background-position: center;
        border-radius: 30px;
        margin: 10px;
        display: inline-table;
    }

    .dias_mod {
        margin-top: 45%;
    }

    @media (max-width: 780px) {
        .dias_mod {
            margin-top: 25px;
        }
    }
</style>

<script>
    $(document).ready(function() {
        if ($(window).width() < 800) {
            $(".ficha_evento").css("width", "100%");
        }
        if ($(window).width() > 800) {
            $(".ficha_evento").css("width", "100%");
        }

        $("#ficha_<?php echo $id; ?>").css("box-shadow", "0px 0px 26px #00BCD4");
    });

    $(document).ready(function() {
        if ($(window).width() < 800) {
            $(".ficha_evento").css("width", "100%");
        }
        if ($(window).width() > 800) {
            $(".ficha_evento").css("width", "100%");
        }
    });



    /*
    $( document ).ready(function() {	}
    	if( $(window).width() < 800  ){
    		$( ".ficha_evento" ).css( "width" , "100%" );
    	}
    	if( $( window ).width() > 800  ){
    		$( ".ficha_evento" ).css( "width" , "80%" );
    	}
    
    	if( $(window).width() < 800  ){
    		$(".izquierda").prop( "align", "center" );
    		$(".derecha").prop( "align", "center" );
    	}
    	if( $( window ).width() > 800  ){
    		$(".izquierda").prop( "align", "right" );
    		$(".derecha").prop( "align", "left" );
    	}
    });



    $( window ).resize(function() {
    	if( $( window ).width() < 800  ){
    		$(".izquierda").prop( "align", "center" );
    		$(".derecha").prop( "align", "center" );
    	}
    	if( $( window ).width() > 800  ){
    		$(".izquierda").prop( "align", "right" );
    		$(".derecha").prop( "align", "left" );
    	}
    });
    */
</script>