<?php $__env->startSection('title', 'CRUD con Laravel 10'); ?>

<?php $__env->startSection('content_header'); ?>
  <h1>Panel de Control</h1>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box">
                  <span class="info-box-icon bg-info elevation-1"><i class="fas fa-envelope"></i></span>
                  <div class="info-box-content">
                      <span class="info-box-text">Mensajes de Hoy</span>
                      <span class="info-box-number">
                          <?php echo e($total_mensajes); ?>

                      </span>
                      <small class="text-muted">Total histórico: <?php echo e($total_historico_mensajes); ?></small>
                  </div>
                  <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-comments"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Comentarios de Hoy</span>
                <span class="info-box-number"><?php echo e($total_comentarios); ?></span>
                <small class="text-muted">Total histórico: <?php echo e($total_historico_comentarios); ?></small>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->

          <!-- fix for small devices only -->
          <div class="clearfix hidden-md-up"></div>

          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-success elevation-1"><i class="fas fa-eye"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Visitas de Hoy</span>
                <span class="info-box-number"><?php echo e($total_visitas_hoy); ?></span>
                <small class="text-muted">Total histórico: <?php echo e($total_visitas); ?></small>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-user-check text-white"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Retención de Hoy</span>
                <span class="info-box-number">% <?php echo e(number_format($retencion_hoy, 1)); ?></span>
                <small class="text-muted">Total histórico: % <?php echo e(number_format($retencion_historica, 1)); ?></small>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->

        <!-- Main row -->
        <div class="row">
          <!-- Left col -->
          <div class="col-md-8">
            <!-- MAP & BOX PANE -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Ubicaciones geográficas principales</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body p-0">
                <div class="d-md-flex">
                  <div class="p-1 flex-fill" style="overflow: hidden">
                    <!-- Map will be created here -->
                    <div id="world-map-markers" style="height: 325px; overflow: hidden">
                      <div class="map"></div>
                    </div>
                  </div>
                  <div class="card-pane-right bg-success pt-2 pb-2 pl-4 pr-4">
                    <?php $__empty_1 = true; $__currentLoopData = $paisesData; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $pais): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                      <div class="description-block">
                        <h5 class="description-header">%<?php echo e($pais['porcentaje']); ?></h5>
                        <span class="description-text"><?php echo e(strtoupper($pais['name'])); ?></span>
                      </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                      <div class="description-block">
                        <span class="description-text">Sin datos registrados</span>
                      </div>
                    <?php endif; ?>
                  </div><!-- /.card-pane-right -->
                </div><!-- /.d-md-flex -->
              </div>
              <!-- /.card-body -->
            </div>
             <!-- /.row -->


            <!-- TABLE: LATEST ORDERS -->
            <div class="card">
              <div class="card-header border-transparent">
                <h3 class="card-title">Latest Orders</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table class="table m-0">
                    <thead>
                    <tr>
                      <th>ID</th>
                      <th>Codigo</th>
                      <th>Titulo</th>
                      <th>Img</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php $__currentLoopData = $headers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $header): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                    <td><?php echo e($header->id); ?></td>
                    <td><?php echo e($header->codigo); ?></td>
                    <td><?php echo e($header->titulo); ?></td>
                    <td>
                        <img src="<?php echo e(asset($header->img)); ?>" alt="Imagen de <?php echo e($header->titulo); ?>" style="width: 100px;">
                    </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                  </table>
                </div>
                <!-- /.table-responsive -->
              </div>
              <!-- /.card-body -->
              <div class="card-footer clearfix">
                <a href="<?php echo e(route('Headers.index')); ?>" class="btn btn-sm btn-info float-left">Ver todo</a>
              </div>
              <!-- /.card-footer -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->

          <div class="col-md-4">
            
            <!-- /.card -->
            <!-- DIRECT CHAT -->
            <div class="card direct-chat direct-chat-warning">
                  <div class="card-header">
                    <h3 class="card-title">Mensajes</h3>

                    <div class="card-tools">
                      <span title="3 New Messages" class="badge badge-warning">3</span>
                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                      </button>
                      <button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
                        <i class="fas fa-comments"></i>
                      </button>
                      <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                  </div>
                  <!-- /.card-header -->
                  <div class="card-body">
                    <!-- Conversations are loaded here -->
                    <div class="direct-chat-messages">
                      <!-- Message. Default to the left -->
                      <div class="messages-container">
                      <?php $__currentLoopData = $mensajes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $mensaje): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                          <div class="direct-chat-msg">
                              <div class="direct-chat-infos clearfix">
                                  <span class="direct-chat-name float-left"><?php echo e($mensaje->nombre); ?> <?php echo e($mensaje->apellido); ?></span>
                                  <span class="direct-chat-timestamp float-right"><?php echo e($mensaje->created_at->diffForHumans()); ?></span>
                              </div>
                              <!-- /.direct-chat-infos -->
                              <i class="fas fa-envelope direct-chat-img" title="message user icon" alt="message user image"></i>
                              <!-- /.direct-chat-img -->
                              <div class="direct-chat-text">
                                  <?php echo e($mensaje->mensaje); ?>

                              </div>
                              <!-- /.direct-chat-text -->
                          </div>
                      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                      </div>
                      <!-- /.direct-chat-msg -->
                    </div>
                    <!--/.direct-chat-messages-->

                    <!-- Contacts are loaded here -->
                    <div class="direct-chat-contacts">
                    </div>
                    <!-- /.direct-chat-pane -->
                  </div>
                  <!-- /.card-body -->
                  <div class="card-footer">
                  </div>
                  <!-- /.card-footer-->
                </div>
                <!--/.direct-chat -->
                <!-- USERS LIST -->
                <!-- <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Equipo</h3>

                    <div class="card-tools">
                      <span class="badge badge-danger"><?php echo e($total_teams); ?> <?php echo e($ctd); ?></span>
                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                      </button>
                      <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                  </div> -->
                  <!-- /.card-header -->
                  <!-- <div class="card-body p-0">
                    <?php $__currentLoopData = $teams; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $team): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <ul class="users-list clearfix">
                      <li>
                        <img src="<?php echo e(asset($team->img)); ?>" alt="User Image">
                        <a class="users-list-name" href="#"><?php echo e($team->nombre); ?> <?php echo e($team->apellido); ?></a>
                        <span class="users-list-date"><?php echo e($team->trabajo); ?></span>
                      </li>
                    </ul>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> -->
                    <!-- /.users-list -->
                  <!-- </div> -->
                  <!-- /.card-body -->
                  <!-- <div class="card-footer text-center">
                    <a href="<?php echo e(route('Teams.index')); ?>">Ver todo el equipo</a>
                  </div> -->
                  <!-- /.card-footer -->
                <!-- </div> -->
                <!--/.card -->
              </div>          
        </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div><!--/. container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
        
<?php $__env->stopSection(); ?>
<?php $__env->startSection('css'); ?>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.6/jquery-jvectormap.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    .direct-chat-img {
    font-size: 24px; /* Tamaño del ícono */
    color: #ff0000;  /* Color del ícono */
    padding-top: 10px;
    padding-left: 10px; /* Ajusta el valor según sea necesario */
    }

    /* Asegúrate de que el contenedor de todos los mensajes tenga display flex y flex-direction column */
  .messages-container {
      display: flex;
      flex-direction: column-reverse; /* Orden inverso para que los nuevos mensajes aparezcan arriba */
  }

  /* Asegúrate de que cada mensaje tenga espacio entre sí */
  .direct-chat-msg {
      margin-bottom: 10px; /* Ajusta el espacio entre los mensajes según sea necesario */
  }

  </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
    <!-- CSS de JQVMap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.min.css">

    <style>
        #world-map-markers {
            position: relative !important;
        }

        /* Estilos limpios para los botones de Zoom */
        .jqvmap-zoomin, .jqvmap-zoomout,
        .jqvmap-zoomIn, .jqvmap-zoomOut {
            position: absolute !important;
            left: 12px !important;
            background-color: #343a40 !important;
            color: #ffffff !important;
            width: 28px !important;
            height: 28px !important;
            line-height: 24px !important;
            text-align: center !important;
            border-radius: 4px !important;
            font-weight: bold !important;
            font-size: 18px !important;
            cursor: pointer !important;
            z-index: 999 !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
            user-select: none !important;
            display: block !important;
        }

        .jqvmap-zoomin, .jqvmap-zoomIn {
            top: 12px !important;
        }

        .jqvmap-zoomout, .jqvmap-zoomOut {
            top: 46px !important;
        }

        .jqvmap-zoomin:hover, .jqvmap-zoomout:hover,
        .jqvmap-zoomIn:hover, .jqvmap-zoomOut:hover {
            background-color: #28a745 !important;
        }
    </style>

    <!-- JS de JQVMap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script>

    <script>
        $(document).ready(function() {
            if ($('#world-map-markers').length) {
                var paisesData = <?php echo json_encode($paisesData ?? [], 15, 512) ?>;
                var colorsData = {};
                var paisesMap = {};

                var palette = ['#28a745', '#007bff', '#ffc107', '#dc3545', '#17a2b8', '#6f42c1', '#fd7e14'];

                if (paisesData.length > 0) {
                    paisesData.forEach(function(item, index) {
                        if (item.code) {
                            var codeLower = item.code.toLowerCase();
                            colorsData[codeLower] = palette[index % palette.length];
                            paisesMap[codeLower] = item;
                        }
                    });
                } else {
                    colorsData['pe'] = '#28a745';
                }

                $('#world-map-markers').empty().vectorMap({
                    map: 'world_en',
                    backgroundColor: '#f8f9fa',
                    borderColor: '#ffffff',
                    borderOpacity: 0.8,
                    borderWidth: 1,
                    color: '#cbd5e1',
                    colors: colorsData,
                    enableZoom: true,
                    hoverOpacity: 0.8,
                    showTooltip: true,
                    selectedColor: '#155724',
                    onLabelShow: function(event, label, code) {
                        var countryInfo = paisesMap[code];
                        if (countryInfo) {
                            label.html(
                                '<strong>' + countryInfo.name + '</strong><br>' +
                                'Visitas: ' + countryInfo.visitas + '<br>' +
                                'Porcentaje: ' + countryInfo.porcentaje + '%'
                            );
                        } else {
                            label.html('<strong>' + label.text() + '</strong><br>Sin visitas registradas');
                        }
                    },
                    onRegionClick: function(element, code, region) {
                        var countryInfo = paisesMap[code];
                        if (countryInfo) {
                            window.location.href = "<?php echo e(url('/dashboard')); ?>?country=" + code;
                        } else {
                            alert('El país ' + region + ' aún no registra visitas.');
                        }
                    }
                });
            }
        });
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('adminlte::page', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\laravel10crudx\resources\views/dashboard.blade.php ENDPATH**/ ?>