@extends('layouts.app', ['activePage' => 'correosenviados', 'menuParent' => 'consultas', 'titlePage' => __('Correos Enviados')])

@section('content')
@include('includes.tailwind')
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-primary card-header-icon">
            <div class="card-icon ">
              <i class="material-icons">forward_to_inbox</i>
            </div>
            <h4 class="card-title">Correos Enviados</h4>

          </div>
          <div class="card-body">
            <div class="row ">
              <div class="col-md-3" id="content_cliente">
                <div class="form-group">
                  <label>Mes:</label>
                  <select id="mes" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                    <option value="01">Enero</option>
                    <option value="02">Febrero</option>
                    <option value="03">Marzo</option>
                    <option value="04">Abril</option>
                    <option value="05">Mayo</option>
                    <option value="06">Junio</option>
                    <option value="07">Julio</option>
                    <option value="08">Agosto</option>
                    <option value="09">Septiembre</option>
                    <option value="10">Octubre</option>
                    <option value="11">Noviembre</option>
                    <option value="12">Diciembre</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3" id="content_cliente">
                <div class="form-group">
                  <label>Año:</label>
                  <select id="anio" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                    <option value="2024">2024</option>
                    <option value="2025">2025</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3" id="content_cliente">
                <div class="form-group">
                  <label>Estatus:</label>
                  <select id="estatus" class="selectpicker" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                    <option value="x">Todos</option>
                    <option value="1">Enviado</option>
                    <option value="0">Error</option>
                  </select>
                </div>
              </div>
               <div class="col-2 ">
                <button class="btn btn-primary btn-sm" onclick="loadGrid();">Buscar</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12 gap-4 mb-4 " id="content-filters-auditoria-comprobantes-pago">
                <div class="mb-4 px-2 md:px-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8" id="content-cards-auditoria-complementos">
                        <!-- Card Error -->
                        <div class="bg-gradient-to-br from-red-100 to-red-200 border border-red-300 text-red-800 p-3 rounded-xl shadow flex flex-col items-center hover:scale-105 transition-transform duration-200 min-w-0">
                            <div class="flex items-center mb-1">
                                <span class="material-icons text-2xl mr-1 text-red-500">error</span>
                                <span class="text-lg font-extrabold" id="totalError">0</span>
                            </div>
                            <div class="text-center">
                                <div class="text-sm font-bold mb-0.5">Errores</div>
                                <div class="text-xs font-medium leading-tight">No se encontró ninguna error de envio</div>
                            </div>
                        </div>
                        <!-- Card Correcto -->
                        <div class="bg-gradient-to-br from-green-100 to-green-200 border border-green-300 text-green-900 p-3 rounded-xl shadow flex flex-col items-center hover:scale-105 transition-transform duration-200 min-w-0">
                            <div class="flex items-center mb-1">
                                <span class="material-icons text-2xl mr-1 text-green-500">check_circle</span>
                                <span class="text-lg font-extrabold" id="totalExito">0</span>
                            </div>
                            <div class="text-center">
                                <div class="text-sm font-bold mb-0.5">Correctos</div>
                                <div class="text-xs font-medium leading-tight">Correos Enviados</div>
                            </div>
                        </div>
                   
                    </div>
                </div>
              </div>
            </div>  
            <div class="material-datatables">
              <table class="table table-striped table-bordered table-sm table-hover display nowrap" cellspacing="0" width="100%" style="width:100%" id="gridFacturas">
                <thead>
                
                  <tr>
                    <th>Cliente</th>
                    <th>Correo</th>
                    <th>Asunto</th>
                    <th>CC</th>
                    <th>Tipo</th>
                    <th>Serie/Folio</th>
                    <th>Estatus</th>
                    <th>Error</th>
                    <th>Fecha</th>
                  </tr>

                </thead>

                <tbody>

                </tbody>
                <tfoot>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                  	<td></td>
                  	<td></td>
                  	<td></td>
                  	<td></td>
                  	<td></td>
                    <td></td>
                  </tr>

                </tfoot>
              </table>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>






<style>
  td {
    font-size: .8em !important;
  }

  table>thead>tr>th {
    font-size: .95em !important;
  }

  #gridFacturas {
    display: block;
    overflow: scroll;
  }

  #gridFacturasPendientes {
    display: block;
    height: 400px;
    overflow: scroll;
  }

  #tableDeposito {
    display: block;
    height: 200px;
    overflow: scroll;
  }

  #swal2-content {
    color: red;
  }
</style>

@endsection

@push('js')
<script>
  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    

    /*$('#gridFacturas').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      dom: 'Blfrtip',
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      order: [
        [0, "desc"]
      ],
      columnDefs: [{
          orderable: false,
          targets: 0,
          className: "text-center"
        }

      ],
      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ]
    });*/
        const fecha = new Date();

       const mes = String(fecha.getMonth() + 1).padStart(2, '0');; // Los meses van de 0 (enero) a 11 (diciembre)
        const anio = fecha.getFullYear();
        const estatus = 'x';

        $('#mes').val(mes).selectpicker("refresh");
        $('#anio').val(anio).selectpicker("refresh");
         cargaTotales(estatus,mes,anio)
    loadGrid();
        var date = new Date();
    $('#fecha').datetimepicker({
      "defaultDate": new Date(),
      format: 'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    });

    $('#desde').datetimepicker({
      "defaultDate": new Date(),
      format: 'DD/MM/YYYY',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('#hasta').datetimepicker({
      "defaultDate": new Date(),
      format: 'DD/MM/YYYY',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('#fecha_cons').datetimepicker({
      "defaultDate": new Date(),
      format: 'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('#fecha_deposito').datetimepicker({
      "defaultDate": new Date(),
      format: 'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
      }
    })
    $('.daterange').daterangepicker({
      startDate: moment().startOf('hour'),
      endDate: moment().startOf('hour').add(32, 'hour'),
      locale: {
        format: 'DD/MM/YYYY',
        applyLabel: "Aplicar",
        cancelLabel: "Cancelar",
      }
    });


  });
  $("input[type=radio][name=radioFecha]").change(function(e) {

    daysOfWeekDisabled = [];
    if (this.value == 'to') {

      $('#fecha_cons_ran').show()
      $('#fecha_cons').hide()
      // $('#fecha_cons_ran').daterangepicker('destroy')
      $('#fecha_cons_ran').daterangepicker({
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'YYYY-MM-DD',
          applyLabel: "Aplicar",
          cancelLabel: "Cancelar",
        }
      });
      // $('#fecha_cons_ran').daterangepicker('refresh')

    } else {
      $('#fecha_cons').datetimepicker('destroy')
      $('#fecha_cons').show()
      $('#fecha_cons_ran').hide()

      if (this.value == 'm') {
        format = 'YYYY-MM';
      } else if (this.value == 'W') {
        format = 'YYYY-MM-DD';
        daysOfWeekDisabled = [1, 2, 3, 4, 5, 6];
      } else if (this.value == 'd') {
        format = 'YYYY-MM-DD';
      }
      $('#fecha_cons').datetimepicker({
        defaultDate: new Date(),
        format: format,
        daysOfWeekDisabled: daysOfWeekDisabled,
        icons: {
          time: "fa fa-clock-o",
          date: "fa fa-calendar",
          up: "fa fa-chevron-up",
          down: "fa fa-chevron-down",
          previous: 'fa fa-chevron-left',
          next: 'fa fa-chevron-right',
          today: 'fa fa-screenshot',
          clear: 'fa fa-trash',
          close: 'fa fa-remove'
        }
      })
      // $('#fecha_cons').datetimepicker('refresh')
    }

  });

  function loadGrid() {
    var estatus = $('#estatus').val();
    var mes = $('#mes').val();
    var anio = $('#anio').val();


    cargaTotales(estatus,mes,anio)
    
    $('#gridFacturas').dataTable().fnDestroy();
    var table = $('#gridFacturas').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      // processing: true,
      dom: 'Blfrtip',
      // scrollX: true,
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{url('reportes/get_correos_enviados')}}",
        type: "POST",
        data: {
          estatus: estatus,
          mes: mes,
          anio: anio,        },
      },
      columns: [
        {
          data: "tipo",render: function(data, type, row){
              if(row.tipo=='1'){
                return row.venta.cliente.razon_social
              }else if(row.tipo == '2'){
                return row.factura.cliente.razon_social
              }else{
                return ''
              }
          }
        },
        {
          data: "para"
        },
        {
          data: "asunto"
        },
        {
          data: "cc"
        },
        {
          data: "tipo",render: function(data, type, row ){
              if(row.tipo=='1'){
                return 'Venta'
              }else if(row.tipo == '2'){
                return 'Factura'
              }else{
                return 'Recordatorios'
              }
          }
        },
        {
          data: "tipo",render: function(data, type, row){
              if(row.tipo=='1'){
                return row.venta.serie+'-'+row.venta.folio
              }else if(row.tipo == '2'){
                return row.factura.serie+'-'+row.factura.folio
              }else{
                return ''
              }
          }
        },
        {
          data: "estatus",render: function ( data, type, row ) {
                    if(row.estatus=='1'){
                  return '<div align="center"><span class="badge badge-success">Enviado</span></div>'
               }else if(row.estatus=='2'){
                  return '<div align="center"><span class="badge badge-primary">Terminado</span></div>'
                }else if(row.estatus=='3'){
                  return '<div align="center"><span class="badge badge-warning">Pausada</span></div>'
               
               }else{
                 return '<div align="center"><span class="badge badge-danger">Error</span></div>'
               }
               
            },className: "text-center"
        },
        {
          data: "error"
        },
        {
          data: "created_at",render: function(data, type, row){
            const fecha = new Date(row.created_at);

            // Formatear en formato local (ej. México)
            const formatoMX = fecha.toLocaleString("es-MX", {
              dateStyle: "short",
              timeStyle: "short"
            });
            return formatoMX
          }
        },    

      ],
      order: [
        [0, "desc"]
      ],
      columnDefs: [{
          orderable: false,
          targets: 5,
          className: "text-center"
        }
      ],
      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ],

    });

  }


function  cargaTotales(estatus,mes,anio){
  $.ajax({
    url: "{{ url('reportes/get_correos_enviados_totales') }}",
    type: 'POST',
    dataType: 'json',
    data: {
          estatus: estatus,
          mes: mes,
          anio: anio,   
    },
  })
  .done(function(resp) {
    console.log(resp);
    $('#totalError').html(resp.error)
    $('#totalExito').html(resp.exito)
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
  
}



 



</script>
@endpush