<?php
    include '../config.php';  
    $lang = $_GET['lang'];
?>


<p style="background: #e8ebff; padding: 15px;border: 2px solid #2b4365; border-radius: 10px; margin-bottom: 10px!important; display: inline-block; width: 99%; color: #2b4365; font-weight: bold; font-size: 12px;">Nota: No olvide adjuntar el archivo en ambas versiones del archivo (Una para cada lenguaje).</p>
<div class="formgroup desc">
    <label for="fecha_<?php echo $lang;?>">Fecha*</label>
    <input name="fecha_<?php echo $lang;?>" type="text" id="fecha_<?php echo $lang;?>" placeholder="DD/MM/AAAA" value="<?php echo date('d/m/Y')?>"/>
</div>
    

<div class="formgroup desc">
    <label for="titulo_<?php echo $lang;?>">Título*</label>
    <input name="titulo_<?php echo $lang;?>" type="text" id="titulo_<?php echo $lang;?>" maxlength="500" placeholder="Al menos 4 caracteres."/>
</div>


        

<div class="formgroup desc">
    <label for="texto">Resumen</label>
    <textarea name="resumen_<?php echo $lang;?>" type="text" id="resumen_<?php echo $lang;?>" maxlength="500" placeholder="Al menos 5 caracteres."><?php echo $texto;?></textarea>
</div>
        
        
<div class="formgroup imgcont filecont">
    <label for="archivo_<?php echo $lang;?>">Archivo</label><br>
    
    <div class="imagendiv">

            <img src="/admin2/img/upload.svg" class="imgprod camera" id="iconfilearchivo_<?php echo $lang;?>">
            <div class="image-upload">
            <label for="archivo_<?php echo $lang;?>" aria-label="Elegir archivo" data-balloon-pos="up">
                <img src="/admin2/img/file2.svg"/>
            </label>

            <input name="archivo_<?php echo $lang;?>" type="file" id="archivo_<?php echo $lang;?>" accept=".doc, .pdf, .zip, .xls, .xlsx, .docx" value="" onchange="PreviewArchivo('archivo_<?php echo $lang;?>');">

        </div>  
    </div>
    <p class="discimg">Sólo archivos .doc, .pdf, .zip, .xls, .xlsx, .docx  / Peso máximo: 15 Mb</p>
</div>

<script>
<?php

function rules($l) {
    echo 
    'fecha'.$l.': {
    required: true,
    fecha: true
    },
    titulo'.$l.': {
    required: true,
    minlength: 4
    },
    company'.$l.': {
    required: true,
    minlength: 2
    },
    archivo'.$l.': {
    required: true
    }';
    if($l == '_es'){
        echo ',';
    }
} 

function mensajes($l) {
    echo 
    'fecha'.$l.': "Ingresa la fecha en el formato DD/MM/AAAA",
    titulo'.$l.': "Ingresa el título",
    company'.$l.': "Ingresa la compañía",
    archivo'.$l.': "Elige un archivo"';
    if($l == '_es'){
        echo ',';
    }
} 
if($lang == 'es'){
?>
    function saveNew(enviado){
        $("#guardarnew").css("pointer-events", "none");
        $("#guardarnew").css("opacity", ".4");
        $("#tabes").removeClass('redbg');
        $("#taben").removeClass('redbg');
        $("#respuestanew").html('');

        var $form = $("#formnew"),
        $successMsg = $(".alert");
        $.validator.addMethod("letters", function(value, element) {
            return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
        });
        $.validator.addMethod(
            "fecha",
            function(value, element) {
                // put your own logic here, this is just a (crappy) example
                return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
            },
            "Ingresa una fecha en el formato dd/mm/yyyy."
        );
        $form.validate({
        rules: {
            <?php rules('_es'); //rules('_en');?>
        },
        messages: {
            <?php mensajes('_es'); //mensajes('_en');?>
        },
        submitHandler: function() {
            //alert('Enviado');
            var form=$("#formnew");
            var data=new FormData($("#formnew")[0]);
            for(var pair of data.entries()) {
            //console.log(pair[0]+ ', '+ pair[1]); 
            }
            
            var resumen_es = encodeURIComponent($("#resumen_es").val());
            var titulo_es = encodeURIComponent($("#titulo_es").val());

            
            var resumen_en = encodeURIComponent($("#resumen_en").val());
            var titulo_en = encodeURIComponent($("#titulo_en").val());
            $.ajax({
                url: "/admin2/new/addDividendo.php?titulo_es="+titulo_es+"&resumen_es="+resumen_es+"&titulo_en="+titulo_en+"&resumen_en="+resumen_en+"&enviado="+enviado,
                type:"POST",
                data:data,
                processData: false,
                contentType: false,
                success:function(data){
                    $('#respuestanew').html(data);

                    setTimeout(() => {
                        $("#guardarnew").css("pointer-events", "inherit");
                        $("#guardarnew").css("opacity", "1");
                    }, 2000);
                }

            });
        }
        });
        setTimeout(() => {
            var errores = false;
            if ($("#loadnewes").find(".error:visible").length > 0){ 
                $("#tabes").addClass('redbg');
                $("#respuestanew").append('<p class="errormensaje">Revisa los campos con error en la pestaña "Español"</p>');
                errores = true;

            }
            else{
                $("#tabes").removeClass('redbg');
            }
            if ($("#loadnewen").find(".error:visible").length > 0){ 
                $("#taben").addClass('redbg');
                $("#respuestanew").append('<p class="errormensaje">Revisa los campos con error en la pestaña "Inglés"</p>');
                errores = true;
            }
            else{
                $("#taben").removeClass('redbg');
            } 
            if(errores == false){
                $("#guardarnew").css("pointer-events", "none");
                $("#guardarnew").css("opacity", ".4");
            }
            else{
                $("#guardarnew").css("pointer-events", "inherit");
                $("#guardarnew").css("opacity", "1");
            } 
        }, 1000);
 
    }

    function PreviewImage(id) {
        if(document.getElementById(id).files[0].size > 500000000){
            //alert("El peso de la imagen excede 500 Kb. Comprime la imagen o selecciona una diferente.");
            $("#imagenprod").val("");
        };

        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById(id).files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview"+id).src = oFREvent.target.result;
            //$("#newimg"+id).val("1");
        };
    };
	
	function PreviewArchivo(id) {
		//alert(file);
		var icon = "#iconfile" + id;
		//var news = "#newfile" + id;
        if(document.getElementById(id).files[0].size > 1500000){
            //alert("El peso del archivo excede 15 Mb. Comprime el archivo o selecciona uno diferente.");
            //$(id).val("");
        };

        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById(id).files[0]);

        oFReader.onload = function (oFREvent) {
			document.getElementById("iconfile"+id).src = '/admin2/img/file2.svg';
            //$(news).val("1");
        };
    };

    	// The function you currently have
	$('#slug').keypress(function (e) {
		var allowedChars = new RegExp("^[a-zA-Z0-9\-]+$");
		var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
		if (allowedChars.test(str)) {
			return true;
		}
		e.preventDefault();
		return false;
	}).keyup(function() {
		// the addition, which whill check the value after a keyup (triggered by Ctrl+V)
		// We take the same regex as for allowedChars, but we add ^ after the first bracket : it means "all character BUT these"
		var forbiddenChars = new RegExp("[^a-zA-Z0-9\-]", 'g');
		if (forbiddenChars.test($(this).val())) {
			$(this).val($(this).val().replace(forbiddenChars, ''));
		}
	});

    setTimeout(() => {
        //$("#tipo").find("option[value='<?php echo $tipo;?>']").attr("selected", true);  
    }, 100);

<?php

    }
?>
    
    setTimeout(() => {
        //$("#columen").find("option[value='<?php echo $columes;?>']").attr("selected", true);
        $('#resumen_<?php echo $lang;?>').summernote({
            tabsize: 2,
            toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });  
    }, 100); 
        
    </script>

    <style>
    
    .formnew {
        width: 100%;
        float: left;
    }
    .formnew input, .formnew textarea {
        width: 100%;
        float: left;
        margin: 0;
        min-height: 38px;
        border-radius: 8px;
        border: 1px solid #ccc;
        font-size: 12px;
        padding: 5px 5px 0;
    }
    .imgprod {
        width: 130px;
        padding-top:15px;
    }
    
    #guardarnew, #guardarhorarios, #guardarmod {
        background: #94b300;
        color: #fff;
        float: none;
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        margin: 10px 0;
        font-weight: bold;
        max-width: 100%;
        display: inline-block;
        cursor: pointer;
        transition:.35s all ease;
        font-size:16px;
    }
    #guardarmeta:hover {
        background: #333;
        transition:.35s all ease;
        color: #fff;
    }
    .imagendiv {
        float: none;
        width: 190px;
        position: relative;
        padding: 0 5%;
        margin-bottom: 2.5px;
        margin-top: 10px;
    }
    .image-upload>input {
      height:0;
      opacity:0;
      overflow:hidden;
    }
    .image-upload {
        width: auto;
        display: inline-block;
        position: absolute;
        left: 120px;
        top: -10px;
    }
    #descprod {
        height: 100px;
    }
    .image-upload img {
        width: 30px;
        cursor: pointer;
        transition: .35s all ease;
    }
    .image-upload img:hover {
        transition:.35s all ease;
        transform: scale(1.1);
    }
    
    .formgroup {
        width: 100%;
        float: left;
        text-align: left;
        font-weight: 500;
        color: #222;
        font-size: 12px;
        padding: 5px;
        margin-bottom: 15px;
    }
    .formgroup.peq {
        width: 33%;
        float: right;
    }
    .formnew select {
        height: 40px;
        font-size: 13px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }
    .formgroup.imgcont label {
        width: auto;
        position: relative;
        z-index: 1;
    }
    .addnew {
        float: right;
        margin-top: 20px;
        text-align: left;
        font-size: 14px;
        background: #72af00;
        background: linear-gradient(-45deg, #72af00, #72af00);
        border-radius: 10px;
        color: #fff;
        line-height: 1.2;
        padding-top: 0;
        cursor: pointer;
        padding: 0 20px 15px 10px;
        transition:.35s all ease;
    }
    .addnew:hover {
        background: linear-gradient(-45deg, #fd9827, #ffc56b);
        transition:.35s all ease;
    }
    #btneadd {
        padding: 10px;
        height: 30px;
        display: inline-block;
        font-size: 20px;
    }
    .formgroup.imgcont {
        padding: 5px 10px;
    }
    p.discimg {
        font-size: 9px;
        text-align: left;
        color: #ccc;
        padding: 0 !important;
        width: 100%;
        float: left;
        margin: 0 !important;
    }
    .imagendiv .image-upload label {
        background: #dae6ea;
        border-radius: 50%;
        padding: 7.5px;
        box-shadow: 1px 3px 10px #ccc;
        border: 3px solid #00b594;
        max-width: 50px;
        height: 50px;
    }
    .waiterror {
        color: red;
        font-weight: bold;
    }
    .formnew .inputerror {
        border: 2px solid #fd9797;
        border-radius: 8px;
    }
    #formhorarios .formgroup h4 {
        margin: 0;
        padding: 0;
        font-weight: bold;
        font-size: 15px;
        padding-top: 10px;
        text-align: left;
        width: 50%;
        padding-left: 10px;
        float: left;
    }
    .inicio, .fin {
        width: 50%;
        float: left;
        padding: 0 7.55px 20px;
    }
    #formhorarios .formgroup {
        width: 30%;
        float: left;
        text-align: left;
        font-weight: 500;
        color: #222;
        font-size: 12px;
        padding: 5px;
        border-radius: 16px;
        background: #eaeaea;
        margin: 1.33%;
    }
    .switch_box {
        display: inline-block;
        max-width: 50px;
        min-width: 50px;
        height: auto;
        float: none;
        display: inline-block;
    }
    /* Switch 1 Specific Styles Start */
    
    .disableday {
        background: #f5e0e0 !important;
    }
    .disableday .inicio, .disableday .fin {
        pointer-events: none;
        opacity: .6;
    }
    
    input[type="checkbox"].switch_1 {
        font-size: 22px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 50px;
        height: 25px;
        background: #ddd;
        border-radius: 20px;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        min-height: 20px;
    }
      input[type="checkbox"].switch_1:checked{
        background: #72ac42;
      }
      input[type="checkbox"].switch_1::after {
        position: absolute;
        content: "";
        width: 33px;
        height: 33px;
        border-radius: 50%;
        background: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
        box-shadow: 0 0 .25em rgba(0,0,0,.3);
        -webkit-transform: scale(.7);
        transform: scale(.7);
        left: -4.5px;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        top: -5px;
    }
    input[type="checkbox"].switch_1:checked::after {
        left: 20px;
    }
        
    /* Switch 1 Specific Style End */
    
    
    .switch {
        width: 50%;
        float: left;
        padding-top: 10px;
        text-align: right;
        padding-right: 10px;
        font-weight: 500;
        font-size: 11px;
    }
    .switch p {
        font-weight: 500;
        font-size: 11px;
        width: auto;
        float: none;
        /* text-align: right; */
        display: inline-block;
        padding: 5px;
        padding-right: 10px;
        transform: translateY(-7.5px);
    }
    .popUpHorarios .pocont {
        max-width: 1200px;
    }
    .fullcont {
        width: 100%;
        float: left;
        padding: 10px;
    }
    .fullcont #guardarmeta {
        max-width: 500px;
    }
    .timeselector {
        width: 120px;
    }
    .timeselector-item {
        width: 53.50px;
    }
    .timeselector-button {
        background: #fff;
        padding: 7px 7px;
    }
    #respuestadelete {
        width: 100%;
        position: fixed;
        bottom: -250px;
        left: 0;
        text-align: center;
        background: rgba(4, 64, 61, 0.9);
        padding: 20px 20px 10px;
        z-index: 9999;
        box-shadow: 1px 3px 14px #ccc;
        transition: 1s all ease;
    }
    #respuestadelete.openresp {
        bottom: 0px;
        transition:1s all ease;
    }
    #listamods {
        width: 100%;
        float: left;
        padding: 15px;
        border-radius: 16px;
        background: #f8f8f8;
        margin-top: 20px;
    }
    #listamods .platillo {
        width: 22%;
        float: left;
        border-radius: 8px;
        background: #e3e3e3;
        margin: 0 1.5% 30px;
        padding: 10px 10px 15px;
        color: #000;
        font-weight: bold;
        font-size: 15px;
        box-shadow: 1px 2px 8px #d2d2d2;
        border: 1px solid #e2e2e2;
    }
    .borrabtn {
        cursor: pointer;
    }
    #listamods .platillo p {
        font-weight: 500;
        font-size: 12px;
        padding: 10px;
        margin: 0;
        padding-top: 0;
        padding: 10px;
    }
    #addmodcont {
        width: 100%;
        float: left;
        padding: 10px;
        color: #222;
        font-weight: 500;
    }
    #listamods .borrabtn {
        position: absolute;
        right: 0;
        background: #fff;
        padding: 2.5px;
        border-radius: 50%;
        box-shadow: 1px 2px 6px #ccc;
        bottom: -8px;
        width: 30px;
        height: 30px;
    }
    #listamods .platillo {
        position: relative;
    }
	.filecont .imgprod {
		padding-top: 0;
		width: 60px;
		margin-bottom: 15px;
	} 
    .image-upload > input {
        display: block;
    }
    .imagendiv .image-upload label.error {
        border: 0;
        border-radius: 0;
        /* left: 0; */
        position: absolute;
        margin-top: 15px;
        width: 300px !important;
        max-width: 300px;
        box-shadow: none;
        overflow: auto;
        height: auto;
        line-height: 0;
    } 


    </style>