@extends('menu/menu')


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

@section('content')


<div class="container table-responsive mb-5 p-sm-0" style="margin-top: 70px" >
  


  <div class="container mt-5"><div class="title-vista mt-4">Correos</div></div>
  {{-- <button class="btn btn-ter py-2 px-3 float-right" onclick="nuevo()" ><span class="material-icons-round icon-midle">note_add</span><strong>Crear registro</strong></button> --}}
  
  <div class="container mb-2 mt-5 p-sm-0">

   <div class="row" >
          <div class="col-md">
            <label for="proveedor" class="form-label">Proveedor:</label>
            <select name="proveedor" required class="custom-select mayuscula" id="proveedor">
                <option value="" selected>SELECCIONE</option>
                  @if(!empty($databases))
                  @foreach ($databases   as $los_datos)
                    <option value="{{$los_datos->Database}}" >{{$los_datos->Database }}  </option>
                  @endforeach
                  @endif
              </select>

          </div>
        
          <div class="col-md">
            <label for="proveedor" class="form-label">Proyecto:</label>
            <select name="proveedor" required class="custom-select mayuscula" id="proyectos">
              <option value="" selected></option>

            </select>

          </div>
   
   </div>
      


    
  </div>
  {{-- <button type="button" class="btn btn-prim  "onclick="nuevo()">NUEVO</button> --}}
  
  </div>

  <div class="container"> 

    <button class="btn btn-success " type="button"  onclick="abrirModalCorreo()" >Nuevo</button>

  
  </div>

  <div class="container">
    
    <table class="table table-striped table-hover" id="mitable">
      <thead class="color-head">
        <tr>
          <th colspan="1" class="">CORREO</th>
          <th colspan="1" class="">ESTADO</th>
          <th colspan="1" class="">EDITAR</th>

        </tr>
      </thead>
    <tbody id="datosTabla">
        

        
    </tbody>
    </table>
  </div>





<!--Modal------------------------------------------->
<div class="modal" id="modalCorreo">
  <div class="modal-dialog">
      <div class="modal-content">
      
          
          <div class="modal-header">
              <div class="seccion-modal">Regitrar Correo</div>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <hr class="separador ml-4 mr-4">

          <div class="modal-body">
              
            <div class="container">
            
            <div>
              <strong>Proveedor:</strong> <span id="proveedor_text"> Ar</span>  
            </div>
            <div>
              <strong>Proyecto:</strong> <span id="proyecto_text"> Xd</span>
            </div><br>
              <label for="">Correo</label>
                <input type="text" name="" id="correo_text" class="form-control" >
                  <!--Fin Carrusel---------------------------------------->
              </div>
          </div>
          <div class="container text-center my-4">
              <button type="button" class="btn btn-prim w-25" onclick="guardarCorreo()">Guardar</button>
          </div>
      </div>
  </div>
</div>
  @endsection
  <script>

var opcion = ""
var   idCorreo = "";

function editarCorreo(id_Correo, correo){
  opcion = "editar";
  idCorreo = id_Correo;
  proyectos_text =$("#proyectos option:selected").text();
          proveedor =$("#proveedor option:selected").val();
          proyectos =$("#proyectos option:selected").val();
       $("#correo_text").val(correo);

          
          $("#proyecto_text").text(proyectos_text);
          $("#proveedor_text").text(proveedor);

  $("#modalCorreo").modal('show');

}


function guardarCorreo(){
  proveedor =$("#proveedor option:selected").val();
  proyectos =$("#proyectos option:selected").val();
  correo_text =$("#correo_text").val();


  if (!validarCorreo(correo_text)) {
      alert('El formato del correo electrónico no es válido.');
    }else{

        if(proveedor == "" || proyectos == "" || correo_text == ""){
                  alert("debe de tener seleccionado, Proveedor y un Proyecto");
        }else{  

                $.ajax({

                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

                  type: 'POST',

                  url: "{{ route('go.guardarcorreo') }}",

                  data: { 'proyectos':proyectos,'proveedor':proveedor ,'correo_text':correo_text,'opcion':opcion,'id_correo':idCorreo},

                  success: function(data) {
                    console.log("data");
                    console.log(data);
                    $('#datosTabla').append(data)
                    $("#modalCorreo").modal('hide');

                    actualizarTabla();

                    // alert("Correo agregado con exito.");
                    //       console.log(data);
                    //       setTimeout(()=>{
                    //          location.reload();
                    //       }, 2000);

                                

                  },

                  error: function(xhr, status) {

                  alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

                  }

                  });
              }

      }
}

function abrirModalCorreo(){
  opcion = "crear";
  idCorreo ="";
  proyectos_text =$("#proyectos option:selected").text();
          proveedor =$("#proveedor option:selected").val();
          proyectos =$("#proyectos option:selected").val();
       $("#correo_text").val("");

          
          $("#proyecto_text").text(proyectos_text);
          $("#proveedor_text").text(proveedor);

  $("#modalCorreo").modal('show');

}

$(document).ready(function(){
        
        
    
          
     $('#proveedor').change(function() {    
        if($("#proveedor option:selected").val() != "" || $("#proveedor option:selected").val() != null){
            // $("#alertErrorDiv").css("display","none")
          // alert($("#proveedor option:selected").val());

          proveedor =$("#proveedor option:selected").val();
                  $.ajax({

                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

                    type: 'POST',

                    url: "{{ route('go.getproyectos') }}",

                    data: { 'proveedor':proveedor },

                    success: function(data) {

                      console.log("data");

                        console.log(data);
                        $('#proyectos').empty();
                        $('#datosTabla').empty();

                        // // // $("#modalHistorial").modal('show');
                        $('#proyectos').append(data)
                                      

                    },

                    error: function(xhr, status) {

                        alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

                    }

                    });

        } 
        // alert("hols");
     })
          
     
    //  proyectos
    $('#proyectos').change(function() {    
        if($("#proyectos option:selected").val() != "" || $("#proyectos option:selected").val() != null){
            // $("#alertErrorDiv").css("display","none")
          // alert($("#proyectos option:selected").val());

          proyectos =$("#proyectos option:selected").val();
          proveedor =$("#proveedor option:selected").val();

                  $.ajax({

                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

                    type: 'POST',

                    url: "{{ route('go.datacorreos') }}",

                    data: { 'proyectos':proyectos,'proveedor':proveedor },

                    success: function(data) {

                      console.log("data2");

                        console.log(data);

                        
                        $('#datosTabla').empty();
                        // // // $("#modalHistorial").modal('show');
                        $('#datosTabla').append(data)
                                      
                       
                    },

                    error: function(xhr, status) {

                        alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

                    }

                    });

        } 
        // alert("hols");
     })


  });

  function cambioCheck(id){
    proveedor =$("#proveedor option:selected").val();

                $.ajax({

            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

            type: 'POST',

            url: "{{ route('go.cambioestadocorreo') }}",

            data: { 'id':id,'proveedor':proveedor },

            success: function(data) {

              console.log("dataid");

                console.log(data);

                              
              
            },

            error: function(xhr, status) {

                alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

            }

            });
  }

  function validarCorreo(correo) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(correo);
}

  function actualizarTabla(){

    proyectos =$("#proyectos option:selected").val();
          proveedor =$("#proveedor option:selected").val();

                  $.ajax({

                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

                    type: 'POST',

                    url: "{{ route('go.datacorreos') }}",

                    data: { 'proyectos':proyectos,'proveedor':proveedor },

                    success: function(data) {

                      console.log("data2");

                        console.log(data);

                        
                        $('#datosTabla').empty();
                        // // // $("#modalHistorial").modal('show');
                        $('#datosTabla').append(data)
                                      
                       
                    },

                    error: function(xhr, status) {

                        alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

                    }

                    });
  }
</script>