<!-- Creado: Félix Ricardo Oliva Alonso, 13/09/2016. Se crea la la vista para la administración del CSS por  parte del usuario root -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 14/09/2016. Se crea la la vista para la administración del CSS por  parte del usuario root -->
<!-- Modificado: Jorge Antonio Mendoza Salazar, 10/11/2016. -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 15/11/2016. -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 05/12/2016. Se agrega la funcionalidad de editar -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 07/12/2016. Se corrigien errores en las rutas (Falta la función de Seleccionar) -->
<!-- Modificado: LI Juan Pablo Sánchez Bracamontes, 09/02/2017. Se cambió la función de Activo/Baja -->
<!-- Modificado: Félix Ricardo Oliva Alonso, 08/03/2017. Se terminó la funcionalidad de listar-->

<?php
  use App\Libraries\ejLib;
  $var = ejLib::getInstance();
  $soapclient = $var->getWs();
  $wsClave = $var->get_wsClave();

  $r_vCat_EstilosCSS = $soapclient->vCat_EstilosCSS($wsClave);
  $RS_vCat_EstilosCSS = new SimpleXMLElement(utf8_encode($r_vCat_EstilosCSS));
?>

@extends('layouts.master')
@section('titulo')
  {{ 'Agregar - Editar CSS' }}
@endsection

@section('navegacion_admin')
  @include('layouts.navegacion_admin')
@endsection

@section('titulo_pagina')
  <div class="titulo_pagina">
    <h2>ADMINISTRAR ESTILOS CSS</h2>
  </div>
@endsection

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/admingeneral.css">
<link rel="stylesheet" href="css/usuariogeneral.css">
<link rel="stylesheet" href="css/usuariocm.css">

<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/agregarcss.js"></script>
<script src="js/jqv/dist/jquery.validate.js"></script>
<script src="js/validar/root.js"></script>

<script type="text/javascript">

    ///////////////////////////////////////////////////////////////////////////////////////
    //                                    Editar Estilo
    ///////////////////////////////////////////////////////////////////////////////////////
    $(document).on("click", ".editar_css_cae", function(){
      var currentRow = $(this).closest("tr");
      var data = currentRow.find("#idestilo").html();
      $('#css_agregar_cae2').hide();
      $('#css_agregar_cae3').show();
      //alert(data);

      $.ajax({
        url:   'jq/estilosCss',
        type:  'POST',
        data:  {"idestilo" : data},

        success:  function (response) {
          // alert(response);
          xmlDoc = $.parseXML( response ),
          $xml = $( xmlDoc );
          $($xml).each(function(){
            var url = ($(this).find("Respuesta>url").text());
            var descripcion = ($(this).find("Respuesta>descripcion").text());
            var titulo = ($(this).find("Respuesta>titulo").text());
            var idestilo = ($(this).find("Respuesta>id_estilo").text());

            $('#url_2').val(url);
            $('#descripcion_2').val(descripcion);
            $('#titulo_2').val(titulo);
            $('#id_estilo_2').val(idestilo);

            $('#url_3:file').val(url);
          });
        },
        error : function(xhr, status) {
          alert('Disculpe, existió un problema');
        },
      });
    });

    ///////////////////////////////////////////////////////////////////////////////////////
    //                                    Cambiar Estado
    ///////////////////////////////////////////////////////////////////////////////////////
    $(document).on("click", "#status", function(){
      var currentRow = $(this).closest("tr");
      //var status = currentRow.find("#status").html();
      var status = currentRow.find("#h_Status").val();
      var control = currentRow.find("#control").html();
      var idestilo = currentRow.find("#idestilo").html();

      $.post({
        url:   'root-css-agregar-up_statusEstilo',
        data:  {'status':status,'idestilo':idestilo,'control':control},
        success:  function (response) {

          //Convertimos la respuesta en objeto para recuperar la respuesta
          var xml = response,
          xmlDoc = $.parseXML( xml ),
          $xml = $( xmlDoc ),
          $error = $xml.find( "error" ),
          $titulo = $xml.find( "titulo" ),
          $descripcion = $xml.find( "descripcion" );

          if ($error.text() == "0" && status == 1){
            $( "td" ).find( "#cmdStatus" ).eq( control-1 ).prop('title', 'Establecer en activo el elemento');
            $( "td" ).find( "#cmdStatus" ).eq( control-1 ).attr('src', 'Img/Baja.png');
            $( "td" ).find( "#h_Status" ).eq( control-1 ).val("0");
          }

          if ($error.text() == "0" && status == 0){
            $( "td" ).find( "#cmdStatus" ).eq( control-1 ).prop('title', 'Establecer en baja el elemento');
            $( "td" ).find( "#cmdStatus" ).eq( control-1 ).attr('src', 'Img/Activar.png');
            $( "td" ).find( "#h_Status" ).eq( control-1 ).val("1");
          }

          if($error.text() == "1")
            $.notify($titulo.text()+', '+$descripcion.text(), "error");
          else
            $.notify("Cambio de estado exitoso", "success");
        },
        error : function(xhr, status) {
          alert('Disculpe, existió un problema');
        },
      });
    });



    ////////////////////////////////////////////////
    //             Listar
    ////////////////////////////////////////////////
    $(document).on("click", "#btn_listar_cae", function(){

      $.ajax({
        type: "POST",
        url: 'root-css-agregar-AdministrarEstilosCSS_getLstEstilos',
        data: $("#css_agregar_cae").serialize(),
        success: function(data) {
          //alert(data);
          $('#contenedor_tabla tr').remove();
          xmlDoc = $.parseXML(data),
          $xml = $( xmlDoc );

          var tabla = '<table border="1" class="table table-bordered" id="contenedorjquery">';
              tabla += '<tr>';
              tabla += '<th class="col-sm-1" style="text-align: center;">N°</th><th class="col-sm-2">Título</th><th class="col-sm-5">Descripción</th><th class="col-sm-2" style="text-align: center;">Subido desde</th><th class="col-sm-1" style="text-align: center;">Opciones</th>';
              tabla += '</tr>';
              tr = '';

          var activo='<a href="#" id="status"><input type="hidden" value="0" id="h_Status" name="h_Status"><img id="cmdStatus" src="Img/Baja.png" width="20px" height="20px" title="Establecer en Activo el elemento" style="cursor: pointer;"/> </a>';
          var baja='<a href="#" id="status"><input type="hidden" value="1" id="h_Status" name="h_Status"><img id="cmdStatus" src="Img/Activar.png" width="20px" height="20px" title="Establecer en baja el elemento" style="cursor: pointer;"/> </a>';
          var editar='<img class="editar_css_cae" src="Img/Editar.png" width="20px" height="20px" title="Editar Acceso" style="cursor: pointer;"/> ';


          var existe = 0;
          var con = 1;
          $($xml).find("respuesta").each(function() {
            for (i = 1; i < 2; i++) {
              var id_estilo = ($(this).find("Respuesta>id_estilo").text());

              var titulo = ($(this).find("Respuesta>titulo").text());
              var descripcion = ($(this).find("Respuesta>descripcion").text());
              var momento_alta = ($(this).find("Respuesta>momento_alta").text());
              var subido = momento_alta.slice(0, 10);

              var baja_log = ($(this).find("Respuesta>baja_log").text());

                if (baja_log==1) {
                  tr += '<tr>';
                  tr += '<td id="idestilo" style="display:none">'+id_estilo+'</td><td id="control" style="text-align: center;">'+con+'</td><td>'+titulo+'</td><td>'+descripcion+'</td><td style="text-align: center;">'+subido+'</td><td style="text-align:center;">'+activo+editar+'</td>';
                  tr += '</tr>';
                  con++; existe++;
                } else {
                  tr += '<tr>';
                  tr += '<td id="idestilo" style="display:none">'+id_estilo+'</td><td id="control" style="text-align: center;">'+con+'</td><td>'+titulo+'</td><td>'+descripcion+'</td><td style="text-align: center;">'+subido+'</td><td style="text-align:center;">'+baja+editar+'</td>';
                  tr += '</tr>';
                  con++; existe++;
                }

            }
          });

          if (existe==0) { // Se removieron las llaves de mas
            $.notify("Esta búsqueda no arrojo ningún resultado", "info");
          }

          tabla += tr;
          tabla += '</table>';
          $('#contenedor_tabla').html( tabla );
        },

        error : function(xhr, status) {
          alert("error");
        },
      });
      return false;
    });
</script>

<style media="screen">
  div.error {
    height: 15px;
    padding: 3px;
    background-color:rgba(0, 0, 0, 0.7);
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    font-size: 9pt;

    -webkit-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.75);

    position: absolute;

    text-align:left;
    color: #ffffff;
    animation: fadein 0.8s;
  }

  @keyframes fadein {
    from { opacity: 0}
    to   { opacity: 1}
  }

  .upper{text-transform:uppercase; font-size: 9pt; text-align:center;};
</style>

@section('content')
  <div id="contenedor">
    <form id="css_agregar_cae">
      <input type="hidden" name="_token" value="{{csrf_token()}}">
      <div class="row">
        <div class="input-group-sm col-md-1">
          <button type="button" id="btn_seleccionar_cae">Seleccionar</button>
        </div>

        <div class="input-group-sm col-md-offset-3 col-md-1">
          <button type="button" id="btn_agregar_cae"  href="#css_agregar_cae2">Agregar</button>
        </div>

        <div class="col-sm-3">
          <div class="input-group input-group-sm">
            <span class="input-group-addon" id="sizing-addon3">Estilo:</span>
            <input type="text" id="listar_c" name="listar_c" class="form-control" placeholder="Máximo 200 caracteres" >
          </div>
        </div>

        <div class="col-sm-1">
          <div class="input-group input-group-sm">
            <span class="input-group-addon">
              <input type="checkbox" aria-label="Checkbox for following text input" id="activo_c" name="activo_c">
            </span>
            <span class="input-group-addon">Activo</span>
          </div>
        </div>

        <div class="input-group-sm  col-md-1">
          <button type="submit"  id="btn_listar_cae">Listar</button>
        </div>
      </div>
    </form>


    <div id="contenedor_tabla">
    </div>



    {{-- ////////////////////////////////////////// Agregar Estilo ////////////////////////////////////////// --}}
    <form id="css_agregar_cae2"  method="post" action="{{url('root-css-agregar-AdministrarEstilosCSS_add_Estilo')}}"  >
      <input type="hidden" name="_token" value="{{csrf_token()}}">

      <div class="row">
        <div class="titulo_fondo">
          <a href="#h_logo"><img src="Img/close.png" height="20"  class="cerrar_form" /></a>
          <div class="titulo_pagina2">AGREGAR NUEVO ESTILO</div>
        </div>
      </div>

      <div class="row">
        <div class="form-group-sm input-group-sm col-md-5">
          URL:
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" name="url" id="url">
            <span class="input-group-btn">
              <input class="btn btn-secondary" type="file" class="form-control" name="urlf" id="urlf" >
            </span>
          </div>
          <br>
          Título: <input type="text" class="form-control" name="titulo" id="titulo"  placeholder="Máximo 200 caracteres" />
        </div>

        <div class="form-group-sm col-md-offset-1 col-md-4">
          <pre>         Descripción:</pre>
          <textarea id="descripcion" name="descripcion" class="col-md-offset-1" rows="5" cols="60"></textarea><br />
        </div>
      </div>

      <br>
      <div class="sombra_cm">
        <div class="col1"><button type="submit" id="btn_guardar_cae2">Guardar</button></div>
      </div>
    </form>

    {{-- ////////////////////////////////////////// Editar Estilo ////////////////////////////////////////// --}}
    <form id="css_agregar_cae3"  method="post" action="{{url('root-css-agregar-AdministrarEstilosCSS_up_Estilo')}}">
      <div class="row">
        <div class="titulo_fondo">
          <div class="titulo_pagina2">EDITAR ESTILO</div>
          <a href="#h_logo"><img src="Img/close.png" height="20"  class="cerrar_form" /></a>
        </div>
      </div>

      <div class="row">
        <div class="form-group-sm input-group-sm col-md-5">
          URL:
          <div class="input-group input-group-sm">
            <input type="text" class="form-control" name="url_2" id="url_2">
            <span class="input-group-btn">
              <input class="btn btn-secondary" type="file" class="form-control" name="url_3" id="url_3" >
            </span>
          </div>
          <br>
          Título: <input type="text" class="form-control" name="titulo_2" id="titulo_2"  placeholder="Máximo 200 caracteres" />
        </div>

        <div class="form-group-sm col-md-offset-1 col-md-4">
          <pre>         Descripción:</pre>
          <textarea id="descripcion_2" name="descripcion_2" class="col-md-offset-1" rows="5" cols="60"></textarea><br />
        </div>

        <div class=" form-group-sm  col-md-2"  style="display: none">
          <input type="text" class="form-control" name="id_estilo_2" id="id_estilo_2"   value=""/>
        </div>
      </div>

      <br>
      <div class="sombra_cm">
        <div class="col1"><button type="submit" id="btn_guardar_cae3">Guardar</button></div>
      </div>
    </form>
  </div>
@endsection

<script src="js/notify.js"></script>
