<?php require 'inicioscript.php'; ?>
<!-- Page Content -->
<style>
  /* Fix for loader blocking the view */
  .loader { display: none !important; }
  
  .tablex thead th {
    font-size: 10px;
    padding: 2px;
    /* text-align: center !important; */
  }

  /* .tablex thead td {
    padding: 6px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
  } */

  .tablex tbody td,
  .tablex tbody th,
  .tablex tfoot td,
  .tablex tfoot th {
    font-size: 11px;
    padding: 2px;
    text-align: justify;
  }

  .fuentex {
    font-size: 10px;
    font-weight: bold;
  }
</style>
<style>
  #comprobante {
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9999;
  }

  .no-drop {
    cursor: no-drop !important;
  }



  .ui-helper-hidden-accessible {
    z-index: 50000 !important;
  }


  .opacar_div {
    cursor: no-drop;
    opacity: .3
  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    z-index: 99999;
    left: 40%;
  }

  /* Safari */
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .productoIsSelected {
    background: rgb(63, 94, 251);
    background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(170, 123, 158, 1) 100%);
  }

  /* Estilos de tas nuevos */
  .Contenedortab {
    border: none;
    padding-top: 2px;
    padding-bottom: 5px;
    cursor: pointer;
    border-radius: 0;
    color: #333 !important;
    line-height: 40px;
    background-color: transparent;
    text-align: center;
  }

  /* Style the buttons that are used to open the tab content */
  .Contenedortab button {
    display: inline-block;
    color: #FFF;
    background: #33b86c;
    padding: 0px 18px;
    font-family: 'Fredoka One', sans-serif;
    border-radius: 20px;
    box-shadow: 0 8px 0 0 #4aa185;
    text-shadow: -1px 1px 2px rgb(0 0 0 / 50%);
    transition: background 0.2s ease-in-out, top 0.3s ease-in-out, box-shadow 0.1s ease-in-out;
  }

  /* Change background color of buttons on hover */
  .Contenedortab button:hover {
    background: rgb(161, 229, 108);
    box-shadow: 0 8px 0 0 #60a14a;
  }

  /* Create an active/current tablink class */
  .Contenedortab button.active {
    background-color: rgb(161, 229, 108);
  }

  /* Modern POS Design System - 2026 Style */
  .order-view-container {
    display: flex;
    gap: 0;
    margin-top: 0;
    height: 100vh;
    overflow: hidden;
    background: #f1f5f9;
  }

  .order-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
  }

  .order-sidebar {
    width: 400px;
    background: white;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.03);
    z-index: 10;
  }

  /* Grid System for Products */
  .pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
    width: 100%;
  }

  .grid-item {
    width: 100% !important;
    min-width: 0;
  }

  .carta-modern {
    background: white;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 240px;
  }

  .carta-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 30px -10px rgba(0, 0, 0, 0.1);
    border-color: #2563eb;
  }

  .carta-modern .img-container {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #f8fafc;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carta-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
  }

  .carta-modern:hover img {
    transform: scale(1.1);
  }

  .carta-modern .content {
    padding: 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }

  .carta-modern .title {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .carta-modern .subtitle {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Digital Receipt Sidebar */
  .receipt-header {
    padding: 25px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
  }

  .receipt-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .order-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

  .seleccion-modern {
    background: #f8fafc;
    border-radius: 18px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    padding: 15px;
    transition: all 0.2s ease;
  }

  .seleccion-modern:hover {
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
    border-color: #3b82f6;
  }

  .sel-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .sel-title {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
  }

  .sel-total {
    font-weight: 800;
    color: #2563eb;
  }

  .sel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .quantity-pill {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 2px;
  }

  .qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }

  .qty-btn:hover:not(:disabled) {
    background: #eff6ff;
    color: #2563eb;
  }

  .qty-input {
    width: 30px;
    text-align: center;
    border: none;
    font-weight: 800;
    font-size: 13px;
    background: transparent;
  }

  .footer-summary {
    padding: 25px;
    background: white;
    border-top: 2px dashed #e2e8f0;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.02);
  }

  .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .summary-label {
    color: #64748b;
    font-weight: 600;
  }

  .summary-value {
    font-weight: 800;
    color: #1e293b;
  }

  .total-row {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .total-label {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
  }

  .total-value {
    font-size: 32px;
    font-weight: 900;
    color: #2563eb;
  }

  .btn-primary-pos {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    font-weight: 800;
    font-size: 18px;
    border: none;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .btn-primary-pos:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.5);
  }

  .btn-primary-pos:active { transform: translateY(0); }

  .btn-primary-pos:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
  }

  /* Category & Product Modern Design */
  /* Removed redundant carta-modern styles to avoid conflicts */

  .carta-modern .content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .carta-modern .title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.2;
  }

  .carta-modern .subtitle {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
  }

  .carta-modern .price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(37, 99, 235, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    backdrop-filter: blur(4px);
    z-index: 2;
  }

  .carta-modern .status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 10px;
    z-index: 2;
  }

  .carta-modern.is-combo {
    border: 2px solid #10b981;
  }

  .carta-modern.is-combo::after {
    content: 'COMBO';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #10b981;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px;
  }

  /* Cart Selection Modern Design */
  .seleccion-modern {
    background: white;
    border-radius: 16px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }

  .seleccion-modern:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }

  .sel-header {
    display: flex;
    padding: 12px 15px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
  }

  .sel-info {
    flex: 1;
  }

  .sel-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
    display: block;
  }

  .sel-price {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
  }

  .sel-total {
    font-size: 15px;
    font-weight: 800;
    color: #2563eb;
  }

  .sel-controls {
    display: flex;
    padding: 8px 15px;
    background: #f8fafc;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .quantity-control {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
  }

  .qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
  }

  .qty-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: #2563eb;
  }

  .qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .qty-input {
    width: 35px;
    text-align: center;
    border: none;
    border-left: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    background: transparent;
  }

  .sel-actions {
    display: flex;
    gap: 8px;
  }

  .btn-opt {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-opt:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
  }

  .btn-del {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-del:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.05);
  }

  .sel-options-text {
    padding: 6px 15px;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    background: white;
    border-top: 1px dashed #f1f5f9;
  }

  .agotado {
    color: #E92525;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: 60px;
    left: 15px;
    cursor: no-drop;
    z-index: 400;
    transform: rotate(35deg)
  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    z-index: 99999;
    left: 40%;
  }

  /*//? nuevo de la seleccion del producto*/
  :root {
    --sizebody: 13px;
  }

  /*//? Estilos antiguos eliminados o reemplazados por .seleccion-modern */

  .partecenter {
    height: 58vh;
    overflow-y: auto;
    overflow-x: hidden
  }

  .partecenter::-webkit-scrollbar {
    width: 10px;
    background: rgb(214, 219, 223);
  }

  .partecenter::-webkit-scrollbar-thumb {
    background-color: rgb(178, 186, 187);
    border-radius: 4px;
  }

  .partecenter::-webkit-scrollbar-thumb:hover {
    background-color: rgb(127, 140, 141);
  }


  .scrollestilos::-webkit-scrollbar {
    width: 10px;
    background: rgb(214, 219, 223);
  }

  .scrollestilos::-webkit-scrollbar-thumb {
    background-color: rgb(178, 186, 187);
    border-radius: 4px;
  }

  .scrollestilos::-webkit-scrollbar-thumb:hover {
    background-color: rgb(127, 140, 141);
  }

  /* Para que el autocomplete este siempre arriba*/
  .ui-autocomplete {
    position: absolute !important;
    z-index: 20000 !important;
    overflow: auto !important;
  }



  .CategriaSeleccionar::-webkit-scrollbar {
    width: 10px;
    background: rgb(214, 219, 223);
  }

  .CategriaSeleccionar::-webkit-scrollbar-thumb {
    background-color: rgb(178, 186, 187);
    border-radius: 4px;
  }

  .CategriaSeleccionar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(127, 140, 141);
  }

  #Categoriaproducto::-webkit-scrollbar {

    width: 10px;
    background: rgb(214, 219, 223);
  }

  #Categoriaproducto::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(178, 186, 187);
  }

  #Categoriaproducto::-webkit-scrollbar-thumb:hover {
    background-color: rgb(127, 140, 141);
  }

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

  .store-selection-wrapper {
    font-family: 'Outfit', sans-serif;
    padding: 60px 20px;
    background: #f8fafc;
    min-height: 90vh;
    border-radius: 20px;
  }

  .store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .store-card {
    background: white;
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    border: none;
    width: 100%;
  }

  .store-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  }

  .store-icon-bg {
    width: 110px;
    height: 110px;
    background: #eff6ff;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    transform: rotate(-5deg);
  }

  .store-card:hover .store-icon-bg {
    background: #2563eb;
    transform: rotate(0deg) scale(1.1);
  }

  .store-icon-bg i {
    font-size: 45px;
    color: #2563eb;
    transition: all 0.3s ease;
  }

  .store-card:hover .store-icon-bg i {
    color: white;
  }

  .store-name {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
  }

  .store-info-list {
    margin-bottom: 25px;
    width: 100%;
  }

  .store-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .store-info-item i {
    font-size: 14px;
    color: #94a3b8;
    width: 18px;
  }

  .store-badge {
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-top: auto;
  }

  .badge-open {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
  }

  .badge-closed {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  .page-header {
    text-align: center;
    margin-bottom: 50px;
  }

  .page-title {
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .page-subtitle {
    font-size: 18px;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
  }

  .store-card.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
  }
</style>
<?php if (!$this->caja) { ?>
  <div class="store-selection-wrapper">
    <div class="page-header">
      <h1 class="page-title">Bienvenido</h1>
      <p class="page-subtitle">Selecciona una sucursal para comenzar a trabajar</p>
    </div>

    <div class="store-grid">
      <?php foreach ($tiendas as $key => $store) { ?>
        <?php
        $apertura = $this->Controlador_model->cajabierta('0', $store->id);
        $estado = $apertura ? 0 : 1;
        $disabled_class = '';

        if (!$apertura) {
          $maximo = $this->Controlador_model->cajabierta('1', $store->id);
          if (!($maximo && $maximo->created == date('Y-m-d'))) {
            if (!($this->perfil == 1 || $this->perfil == 2 || $this->perfil == 3)) {
              $disabled_class = 'is-disabled';
            }
          }
        }
        ?>

        <button class="store-card <?= $disabled_class ?>" onclick="OpenRegister('<?= $estado ?>', <?= $store->id ?>)">
          <div class="store-icon-bg">
            <i class="fas fa-store"></i>
          </div>
          
          <h2 class="store-name"><?= $store->tipo == 0 ? $store->nombre : $store->razonsocial ?></h2>
          
          <div class="store-info-list">
            <div class="store-info-item">
              <i class="fas fa-id-card"></i>
              <span>RUC: <?= $store->ruc ?></span>
            </div>
            <div class="store-info-item">
              <i class="fas fa-phone"></i>
              <span><?= $store->telefono ?></span>
            </div>
            <div class="store-info-item">
              <i class="fas fa-map-marker-alt"></i>
              <span><?= $store->direccion ?></span>
            </div>
          </div>

          <div class="store-badge <?= $estado == 0 ? 'badge-open' : 'badge-closed' ?>">
            <i class="fas <?= $estado == 0 ? 'fa-door-open' : 'fa-door-closed' ?> mr-2"></i>
            <?= $estado == 0 ? 'Abierto' : 'Cerrado' ?>
          </div>
        </button>
      <?php } ?>
    </div>
  </div>
<?php } else { ?>
<style>
  .tables-view-container {
    background: #f8fafc;
    padding: 40px;
    border-radius: 30px;
    margin-top: 20px;
  }

  .status-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: white;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    color: #475569;
  }

  .legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }

  .dot-free { background: #10b981; box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
  .dot-reserved { background: #f43f5e; box-shadow: 0 0 12px rgba(244, 63, 94, 0.4); }
  .dot-order { background: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
  .dot-attended { background: #0ea5e9; box-shadow: 0 0 12px rgba(14, 165, 233, 0.4); }

  .zone-section {
    margin-bottom: 60px;
  }

  .zone-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
  }

  .zone-icon {
    width: 50px;
    height: 50px;
    background: #2563eb;
    color: white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
  }

  .zone-title {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
  }

  .table-card {
    background: white;
    border-radius: 24px;
    padding: 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
  }

  .table-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .table-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
  }

  .table-name {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 5px;
  }

  .table-meta {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
  }

  /* Status Themes */
  .status-free { border-color: rgba(16, 185, 129, 0.1); }
  .status-free .table-icon-box { background: #f0fdf4; color: #10b981; }
  .status-free:hover { border-color: #10b981; }

  .status-reserved { border-color: rgba(244, 63, 94, 0.1); background: #fff1f2; }
  .status-reserved .table-icon-box { background: #ffe4e6; color: #f43f5e; }
  .status-reserved:hover { border-color: #f43f5e; }

  .status-order { border-color: rgba(245, 158, 11, 0.1); background: #fffbeb; }
  .status-order .table-icon-box { background: #fef3c7; color: #f59e0b; }
  .status-order:hover { border-color: #f59e0b; }

  .status-attended { border-color: rgba(14, 165, 233, 0.1); background: #f0f9ff; }
  .status-attended .table-icon-box { background: #e0f2fe; color: #0ea5e9; }
  .status-attended:hover { border-color: #0ea5e9; }

  .table-details {
    margin-top: 15px;
    width: 100%;
    padding-top: 15px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .detail-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
  }

  .debt-value { color: #f43f5e; }
  .waiter-name { color: #64748b; }

  .table-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
  }

  .action-btn {
    flex: 1;
    padding: 8px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .action-btn:hover { transform: scale(1.05); }
  .btn-print { background: #0ea5e9; }
  .btn-pay { background: #10b981; }
  .btn-comanda { background: #f59e0b; }

  .add-card {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
  }

  .add-card:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
  }
</style>

<?php if (!$this->venta) { ?>
  <?php $caja = $this->Controlador_model->get($this->caja, 'caja'); ?>
  
  <div class="tables-view-container">
    <div class="status-legend">
      <div class="legend-item"><div class="legend-dot dot-free"></div> Libre</div>
      <div class="legend-item"><div class="legend-dot dot-reserved"></div> Reservado</div>
      <div class="legend-item"><div class="legend-dot dot-order"></div> Pedido Realizado</div>
      <div class="legend-item"><div class="legend-dot dot-attended"></div> Atendido</div>
    </div>

    <?php foreach ($zonasa as $key => $value) { ?>
      <?php
      // Filter mesas in PHP memory instead of executing database query inside the loop
      $mesasas = array_filter($mesotas, function($m) use ($value) {
        return $m->zona == $value->id;
      });
      ?>
      
      <div class="zone-section">
        <div class="zone-header">
          <div class="zone-icon"><i class="<?= $value->icono ?>"></i></div>
          <h2 class="zone-title"><?= $value->nombre ?></h2>
        </div>

        <div class="tables-grid">
          <?php if ($value->is_dynamic) { ?>
            <div class="table-card add-card" onclick="modalMesa(<?= $value->id ?>)">
              <div class="table-icon-box"><i class="fas fa-plus"></i></div>
              <h3 class="table-name">Agregar</h3>
              <p class="table-meta"><?= date('H:i:s') ?></p>
            </div>
          <?php } ?>

          <?php foreach ($mesasas as $key => $table) { ?>
            <?php if ($table->estado == 0) { ?>
              <a class="table-card status-free" href="<?= $this->url . '/crearpedido/' . $table->id ?>">
                <div class="table-icon-box"><i class="fas fa-chair"></i></div>
                <h3 class="table-name"><?= $table->nombre ?></h3>
                <p class="table-meta"><?= $table->time ?></p>
              </a>
            <?php } else { ?>
              <?php
              // Memory-indexed lookups (0 database queries executed inside loop!)
              $venta = isset($active_sales[$table->id]) ? $active_sales[$table->id] : null;
              $usuario = ($venta && isset($usuarios[$table->open_by])) ? $usuarios[$table->open_by] : null;

              $status_class = 'status-reserved';
              if ($table->estado == 2)
                $status_class = 'status-order';
              if ($table->estado == 3)
                $status_class = 'status-attended';
              ?>

              <?php if ($venta) { ?>
                <div class="table-card <?= $status_class ?>">
                  <a href="<?= $this->url . '/seleccionarpedido/' . $venta->id ?>" style="text-decoration:none; color:inherit; width:100%">
                    <div class="table-icon-box"><i class="fas fa-user-friends"></i></div>
                    <h3 class="table-name"><?= $table->nombre ?></h3>
                    <p class="table-meta"><?= date('h:i A', strtotime($table->time)) ?></p>
                    
                    <div class="table-details">
                      <div class="detail-row">
                        <i class="fas fa-money-bill-wave"></i>
                        <span class="debt-value">S/ <?= $venta->montoactual ?></span>
                      </div>
                      <div class="detail-row">
                        <i class="fas fa-user-tag"></i>
                        <span class="waiter-name"><?= $usuario ? $usuario->nombre : 'Sin asignar' ?></span>
                      </div>
                    </div>
                  </a>

                  <?php $contador = ($venta && isset($item_counts[$venta->id])) ? $item_counts[$venta->id] : 0; ?>
                  <div class="table-actions">
                    <?php if ($contador) { ?>
                      <button title="Comanda" class="action-btn btn-comanda" onclick="imprimircomandaINICIO(<?= $venta->id ?>)">
                        <i class="fas fa-file-invoice"></i>
                      </button>
                      <button title="Precuenta" class="action-btn btn-print" onclick="imprimirprecuenta(<?= $venta->id . ', ' . $empresa->tipoimpresora ?>)">
                        <i class="fas fa-print"></i>
                      </button>
                      <?php if ($this->perfil != 4) { ?>
                        <button title="Cobrar" class="action-btn btn-pay" onclick="pagorapido(<?= $venta->id ?>)">
                          <i class="fas fa-cash-register"></i>
                        </button>
                      <?php } ?>
                    <?php } else { ?>
                      <a href="<?= ($table->is_temporal) ? $this->url . '/eliminar/' . $venta->id : $this->url . '/limpiar/' . $venta->id ?>" class="action-btn btn-pay" style="text-decoration:none">
                        LIMPIAR
                      </a>
                    <?php } ?>
                  </div>
                </div>
              <?php } ?>
            <?php } ?>
          <?php } ?>
        </div>
      </div>
    <?php } ?>

<style>
  .admin-actions-sidebar {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10000;
  }

  .fab-button {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #64748b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
  }

  .fab-button:hover {
    transform: scale(1.12) translateX(-5px);
    color: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .fab-close-caja:hover { background: #ef4444; border-color: #ef4444; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3); }
  .fab-switch-tienda:hover { background: #f59e0b; border-color: #f59e0b; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3); }
  .fab-cocina:hover { background: #10b981; border-color: #10b981; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3); }
  .fab-refresh:hover { background: #2563eb; border-color: #2563eb; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); }

  /* Premium Tooltips */
  .fab-button::before {
    content: attr(data-label);
    position: absolute;
    right: 70px;
    background: #1e293b;
    color: white;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    transform: translateX(15px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .fab-button:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Decorative line in tooltip */
  .fab-button::after {
    content: '';
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    border: 6px solid transparent;
    border-left-color: #1e293b;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
  }

  .fab-button:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
</style>

<div class="admin-actions-sidebar">
  <a href="javascript:void(0)" class="fab-button fab-close-caja" data-label="Cerrar Caja" onclick="CloseRegister()">
    <i class="fas fa-times"></i>
  </a>
  <a href="<?= $this->url ?>/switshregister" class="fab-button fab-switch-tienda" data-label="Cambiar Tienda">
    <i class="fas fa-random"></i>
  </a>
  <a href="cocina" class="fab-button fab-cocina" data-label="Ir a Cocina">
    <i class="fas fa-utensils"></i>
  </a>
  <a href="javascript:void(0)" class="fab-button fab-refresh" data-label="Recargar Página" onclick="location.reload()">
    <i class="fas fa-sync-alt"></i>
  </a>
</div>
  </div>
<?php } else { ?>

<style>
  /* Order View Modernization Styles */
  .order-view-container {
    display: flex;
    gap: 25px;
    margin-top: 20px;
    height: calc(100vh - 100px);
    overflow: hidden;
  }

  .order-main-content {
    flex: 2.5;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .order-sidebar {
    width: 380px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    height: 100%;
    position: relative;
    box-shadow: -10px 0 25px rgba(0,0,0,0.03);
    z-index: 10;
  }

  .order-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  #opcionmenu {
    display: flex;
    gap: 8px;
    list-style: none !important;
    padding: 0;
    margin: 0;
  }
  
  #opcionmenu li {
    list-style: none !important;
  }
  
  #opcionmenu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #94a3b8;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  #opcionmenu li a:hover {
    background: rgba(37, 99, 235, 0.2);
    color: #3b82f6;
    border-color: #3b82f6;
    transform: translateY(-1px);
  }
  
  #opcionmenu li a i {
    font-size: 14px;
  }

  /* Map legacy FontAwesome classes to FA5 */
  .fa-refresh:before { content: "\f021"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
  .fa-cutlery:before { content: "\f2e7"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
  .fa-reply:before { content: "\f3e5"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
  .fa-lock:before { content: "\f023"; font-family: "Font Awesome 5 Free"; font-weight: 900; }

  /* Premium Breadcrumb Header */
  .order-breadcrumb {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 15px 25px;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 5px;
  }

  .breadcrumb-item {
    display: flex;
    flex-direction: column;
  }

  .breadcrumb-label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
  }

  .breadcrumb-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .breadcrumb-separator {
    color: #cbd5e1;
    font-size: 14px;
  }

  /* Search & Navigation Bar */
  .order-nav-bar {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .search-container-modern {
    flex: 1;
    position: relative;
  }

  .search-input-modern {
    width: 100%;
    padding: 14px 20px 14px 50px;
    border-radius: 100px;
    border: 2px solid transparent;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-size: 15px;
    transition: all 0.3s ease;
    outline: none;
  }

  .search-input-modern:focus {
    border-color: #2563eb;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
  }

  .search-icon-modern {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
  }

  .btn-regresar-modern {
    padding: 14px 30px;
    border-radius: 100px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .btn-regresar-modern:hover {
    background: #e2e8f0;
    transform: translateX(-5px);
  }

  /* Category & Product Cards styling for AJAX content */
  #CategriaSeleccionar, #Categoriaproducto, #CategoriaproductoTodos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 10px 5px;
  }

  /* Overriding AJAX generated styles to be modern */
  .tap, .carta { text-decoration: none !important; }
  .card-wrap, .product {
    background: white !important;
    border-radius: 20px !important;
    padding: 20px !important;
    border: 2px solid #f1f5f9 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
  }

  .card-wrap:hover, .product:hover {
    transform: translateY(-8px) !important;
    border-color: #2563eb !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1) !important;
  }

  .card-info h1, .product h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 15px 0 5px 0 !important;
  }

  .card-info p, .product p {
    font-size: 13px !important;
    color: #64748b !important;
  }

  .card-bg, .product img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
  }

  /* Sidebar Tabs */
  .Contenedortab {
    display: flex;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 16px;
    margin: 15px;
  }

  .tablinks {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    background: transparent;
    color: #64748b;
    transition: all 0.3s ease;
  }

  .tablinks.active {
    background: white;
    color: #2563eb;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  }

  .order-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    min-height: 0; /* Crucial for flex scrolling */
  }

  .footer-summary {
    background: #f8fafc;
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0; /* Prevent the footer from shrinking */
  }

  .tabcontent2 {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .tabcontent2.active-tab {
    display: flex;
  }

  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .total-label { font-size: 13px; color: #64748b; font-weight: 600; }
  .total-value { font-size: 18px; color: #1e293b; font-weight: 800; }
  
  .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed #e2e8f0;
    margin-bottom: 20px;
  }

  /* Billing Summary Styles */
  .billing-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: white;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }

  .summary-item {
    display: flex;
    flex-direction: column;
  }

  .summary-item .label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  /* Utility Classes for Modals */
  .bg-light-blue { background: #eff6ff !important; }
  .text-2xl { font-size: 1.5rem !important; }
  .flex-grow-1 { flex-grow: 1 !important; }
  .highlight-success { border-color: #10b981 !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important; }
  .gap-3 { gap: 1rem !important; }
  .gap-2 { gap: 0.5rem !important; }
  .border-primary { border-color: #2563eb !important; }

  /* Modern Modal Styles (AddSale) */
  .modal-modern-pos .modal-content {
    border-radius: 24px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .modal-modern-pos .modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 20px 25px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between title and close */
    border-radius: 24px 24px 0 0;
  }

  .modal-modern-pos .modal-title {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .modal-modern-pos .modal-header .close {
    color: white;
    opacity: 0.8;
    text-shadow: none;
    font-size: 24px;
    transition: all 0.2s ease;
    margin: 0;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: none;
  }

  .modal-modern-pos .modal-header .close:hover {
    opacity: 1;
    transform: scale(1.1);
  }

  /* Info Cards Fix */
  .modal-info-card .info-card-value {
    display: block;
    margin-top: 5px;
  }

  /* Custom Input Groups for Modal */
  .modal-input-wrapper {
    display: flex;
    align-items: stretch;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .modal-input-wrapper:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  .modal-input-icon {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 45px !important;
    height: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border-right: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
  }

  .modal-input-wrapper.highlight-success .modal-input-icon {
    color: #22c55e !important;
    background: #f0fdf4 !important;
    border-right-color: #86efac !important;
  }

  .modal-input-wrapper .modal-input-modern {
    border: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
    padding-left: 12px !important;
  }

  /* Specific ID overrides to prevent AdminLTE/Bootstrap input/select overrides */
  #AddSale input.modal-input-modern {
    padding-left: 12px !important;
  }

  #AddSale select.modal-input-modern {
    padding-left: 12px !important;
    text-indent: 0px !important;
  }

  .modal-modern-pos .dataTables_wrapper .dataTables_length select,
  .modal-modern-pos .dataTables_wrapper .dataTables_filter input {
    border: 2px solid #f1f5f9;
    border-radius: 10px;
    padding: 8px 12px;
    outline: none;
    transition: all 0.3s ease;
  }

  .modal-modern-pos .btn-danger {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    border-radius: 10px;
    padding: 8px;
    transition: all 0.2s ease;
  }

  .modal-modern-pos .btn-danger:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
  }

  .modal-modern-pos .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: none !important;
    padding: 8px 14px !important;
    margin: 0 2px !important;
    font-weight: 700 !important;
  }

  .modal-modern-pos .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
  }

  .modal-modern-pos table tbody tr {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
  }

  .modal-modern-pos table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background: #f8fafc !important;
  }

  .modal-modern-pos table tbody td {
    padding: 15px !important;
    vertical-align: middle !important;
    border: none !important;
  }

  .btn-delete-item {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  /* Print Options Buttons */
  .btn-print-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px;
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    text-align: left;
    cursor: pointer;
  }

  .btn-print-option:hover {
    border-color: #2563eb;
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
  }

  .print-option-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
    flex-shrink: 0;
  }

  .print-option-icon.secondary {
    background: #fdf2f8;
    color: #db2777;
  }

  .print-option-text .title {
    display: block;
    font-weight: 800;
    color: #1e293b;
    font-size: 16px;
  }

  .print-option-text .subtitle {
    display: block;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
  }

  .modal-input-wrapper .modal-input-modern:focus {
    box-shadow: none;
  }

  .modal-modern-pos .modal-body {
    padding: 30px;
    background: #f8fafc;
  }

  /* Info Cards in Modal */
  .modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
  }

  .modal-info-card {
    background: white;
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  }

  .modal-info-card.full-width {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #eff6ff;
    border-color: #bfdbfe;
  }

  .info-card-label {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
  }

  .info-card-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .info-card-value.primary { color: #2563eb; }
  .info-card-value.large { font-size: 24px; }

  /* Form Elements in Modal */
  .modal-form-group {
    margin-bottom: 20px;
  }

  .modal-form-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
    display: block;
  }

  .modal-input-modern {
    width: 100%;
    height: 52px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: white;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.3s ease;
  }

  .modal-input-modern:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    outline: none;
  }

  /* Change Display */
  .change-display-container {
    background: #1e293b;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  }

  .change-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
  }

  .change-value {
    font-size: 32px;
    font-weight: 800;
    color: #10b981;
    display: block;
  }

  /* Modal Footer Styles */
  .modal-modern-pos .modal-footer {
    padding: 20px 30px 30px;
    border: none;
    background: #f8fafc;
    display: flex;
    gap: 12px;
  }

  .btn-modal-dismiss {
    flex: 1;
    height: 55px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    border: none;
    transition: all 0.2s ease;
  }

  .btn-modal-action {
    flex: 2;
    height: 55px;
    border-radius: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-weight: 700;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .btn-modal-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -5px rgba(16, 185, 129, 0.4);
  }

  .summary-item .value {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .summary-item.highlight .value {
    color: #2563eb;
    font-size: 20px;
  }

  /* Modern Form Controls */
  .form-control-modern {
    height: 50px;
    border-radius: 12px;
    border: 2px solid #f1f5f9;
    padding: 0 15px;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.3s ease;
    width: 100%;
    background: white;
  }

  .form-control-modern:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  .input-group-modern {
    background: white;
    border-radius: 12px;
    border: 2px solid #f1f5f9;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .input-group-modern:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  }

  .input-group-modern .form-control {
    border: none !important;
    height: 50px;
    box-shadow: none !important;
    padding-left: 15px;
    font-weight: 600;
  }

  .btn-add-client {
    background: #eff6ff;
    color: #2563eb;
    border: none;
    width: 50px;
    height: 50px;
    transition: all 0.2s ease;
  }

  .btn-add-client:hover {
    background: #2563eb;
    color: white;
  }

  .btn-secondary-pos {
    background: #f1f5f9;
    color: #475569;
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-secondary-pos:hover {
    background: #e2e8f0;
    color: #1e293b;
  }

  .btn-primary-pos {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    font-weight: 700;
    border: none;
    font-size: 16px;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .btn-primary-pos:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -5px rgba(37, 99, 235, 0.4);
    color: white;
  }

  .receipt-header {
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid #f1f5f9;
  }

  .receipt-title {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
  }

  /* Processed Products (ENVIADOS) Modern Styles */
  .sent-product-item {
    background: white;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
  }

  .sent-product-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  }

  .sent-product-item.alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
  }

  .spi-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .spi-check-container {
    flex-shrink: 0;
  }

  .spi-info {
    flex: 1;
    min-width: 0;
  }

  .spi-name {
    font-weight: 700;
    color: #1e293b;
    font-size: 14px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
  }

  .spi-time {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
  }

  .spi-options {
    font-size: 11px;
    color: #2563eb;
    background: #eff6ff;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
  }

  .spi-stats {
    text-align: right;
    flex-shrink: 0;
  }

  .spi-qty-price {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
  }

  .spi-total {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
  }

  /* Custom Checkbox for SPI */
  .custom-control-label::before, .custom-control-label::after {
    width: 20px;
    height: 20px;
    top: 0;
  }
  
  .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #2563eb;
    border-color: #2563eb;
  }
</style>



<div class="order-view-container">
  <div class="order-main-content">
    <div class="order-breadcrumb">
      <div class="breadcrumb-item">
        <span class="breadcrumb-label">ZONA</span>
        <span class="breadcrumb-value"><?= is_object($header) ? $header->nombrezona : '-' ?></span>
      </div>
      <div class="breadcrumb-separator"><i class="fas fa-chevron-right"></i></div>
      <div class="breadcrumb-item">
        <span class="breadcrumb-label">MESA</span>
        <span class="breadcrumb-value"><?= is_object($header) ? $header->nombremesa : '-' ?></span>
      </div>
    </div>

    <div class="order-nav-bar">
      <div class="search-container-modern">
        <i class="fas fa-search search-icon-modern"></i>
        <input type="text" id="searchProd" class="search-input-modern" placeholder="¿Qué desea el cliente hoy?" autocomplete="off">
      </div>
      <button class="btn-regresar-modern" onclick="retroceder()">
        <i class="fas fa-arrow-left mr-2"></i> Regresar
      </button>
    </div>

    <div id="CategriaSeleccionar" class="pos-grid"></div>
    <div id="Categoriaproducto" class="pos-grid"></div>
    <div id="CategoriaproductoTodos" class="pos-grid" style="display:none"></div>

    <div id="VentaGenerada" class="messageVide" style="display:none; margin-top:20px; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 25px; border-radius: 24px; text-align: center; color: #166534; font-weight: 700; font-size: 18px;">
      <i class="fas fa-check-circle fa-2x mb-2 d-block"></i>
      VENTA COMPLETADA
      <small class="d-block mt-1 font-weight-normal text-muted">La mesa se cerrará al finalizar el proceso.</small>
    </div>
  </div>

  <div class="order-sidebar">
    <div class="receipt-header">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="receipt-title"><i class="fas fa-receipt text-primary"></i> Pedido Actual</h2>
        <ul id="opcionmenu"></ul>
      </div>
      
      <div class="Contenedortab-receipt">
        <button class="tab-pill active" id="PedidoMenuNav" onclick="openDatos(event, 'SeleccionPedido')">EN CURSO</button>
        <button class="tab-pill" id="VentaMenuNav" onclick="openDatos(event, 'VentaEnviadas'); ventasEnviadas()">ENVIADOS</button>
      </div>
    </div>

    <div id="SeleccionPedido" class="tabcontent2 active-tab">
      <div class="order-list-container">
        <div id="msjNohayPro" class="text-center" style="padding: 60px 20px; color: #94a3b8;">
          <div class="empty-cart-icon mb-4">
            <i class="fas fa-utensils fa-4x" style="opacity: 0.1;"></i>
          </div>
          <h4 class="font-weight-bold">Carrito Vacío</h4>
          <p class="small">Selecciona productos para iniciar el pedido</p>
        </div>
        <div id="pedidosventa"></div>
      </div>

      <div class="footer-summary">
        <div class="summary-row">
          <span class="total-label">Items Seleccionados</span>
          <span class="total-value" id="CantidadItemGenerar">0</span>
        </div>
        <div class="total-row">
          <span class="total-label">Total Pedido</span>
          <span class="total-value">S/ <span id="SubTotalGenerar">0.00</span></span>
        </div>
        
        <button class="btn-primary-pos" id="generarpedido" onclick="EnviarPedido()">
          <i class="fas fa-paper-plane"></i> ENVIAR A COCINA
        </button>
      </div>
    </div>

    <!-- Tab Content: VentaEnviadas (Moved inside sidebar) -->
    <div id="VentaEnviadas" class="tabcontent2">
      <input type="hidden" id="TotalItemVentaDetalle">
      <div class="order-list-container">
        <div id="msjNoHayVentasEnviadas" class="text-center" style="padding: 40px 20px; color: #94a3b8; display: none;">
          <i class="fas fa-check-circle fa-4x mb-3" style="opacity: 0.2;"></i>
          <p>No hay ventas registradas</p>
        </div>
        <div id="VentasEnviadas"></div>
        <div id="VentaGenerada2" class="text-center" style="display:none; padding: 20px; color: #10b981;">
          <i class="fas fa-check-circle fa-2x mb-2"></i>
          <p>VENTA GENERADA</p>
        </div>
      </div>

      <div class="footer-summary" style="background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 15px 20px;">
        <div class="billing-summary-grid mb-3">
          <div class="summary-item">
            <span class="label">Items</span>
            <span class="value"><span id="ItemsNumVenta"><span>0</span> Items</span></span>
          </div>
          <div class="summary-item">
            <span class="label">Subtotal</span>
            <span class="value">S/ <span id="SubtotVenta">0.00</span></span>
          </div>
          <div class="summary-item highlight">
            <span class="label">Total</span>
            <span class="value">S/ <span id="totalVenta">0.00</span></span>
          </div>
        </div>

        <div id="divChechek" class="billing-form-container">
          <div class="d-flex justify-content-between align-items-center mb-3 p-2 bg-white rounded-lg border">
            <span style="font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase;">Por consumo</span>
            <div class="material-switch">
              <input id="chkConsumo" name="chkConsumo" type="checkbox" />
              <label for="chkConsumo" class="label-success"></label>
            </div>
          </div>

          <form id="form_principal" class="mb-3">
            <div class="form-group mb-2">
              <select id="tipoventa" name="tipoventa" class="form-control-modern" onchange="save()">
                <option value="OTROS">TICKET</option>
                <option value="BOLETA">BOLETA</option>
                <option value="FACTURA">FACTURA</option>
              </select>
            </div>
            <div class="form-group mb-0">
              <div class="input-group input-group-modern">
                <input type="hidden" name="cliente" id="cliente">
                <input type="text" class="form-control" name="clientes" id="clientes" placeholder="Buscar cliente...">
                <div class="input-group-append">
                  <button type="button" class="btn btn-add-client" onclick="grabarcliente()">
                    <i class="fas fa-user-plus"></i>
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
        
        <div id="botonestop" class="d-flex gap-2">
          <button class="btn-primary-pos flex-grow-1" onclick="grabar()" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); margin: 0;">
            <i class="fas fa-check-double mr-2"></i> PROCESAR VENTA
          </button>
          <div class="dropdown">
            <button class="btn-secondary-pos dropdown-toggle" type="button" data-toggle="dropdown" style="width: 50px; height: 55px; border-radius: 16px;">
              <i class="fas fa-ellipsis-v"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" style="border-radius: 16px; border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 8px;">
              <li><a href="javascript:void(0)" class="dropdown-item py-2" onclick="imprimircomanda()"><i class="fas fa-print mr-2 text-primary"></i> Ver Comanda</a></li>
              <li><a href="javascript:void(0)" class="dropdown-item py-2" onclick="location.reload()"><i class="fas fa-sync mr-2 text-success"></i> Actualizar</a></li>
              <li class="dropdown-divider"></li>
              <li><a href="javascript:void(0)" class="dropdown-item py-2" onclick="cambiarmesa()"><i class="fas fa-exchange-alt mr-2 text-primary"></i> Cambiar Mesa</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <input id="ventaseleccionada" type="hidden" value="<?= $this->venta ?>">
  </div>
</div>

<style>
  .Contenedortab-receipt {
    display: flex;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 16px;
    gap: 6px;
  }
  
  .tab-pill {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  
  .tab-pill.active {
    background: white;
    color: #2563eb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .tab-pill:hover:not(.active) {
    background: rgba(255,255,255,0.5);
    color: #1e293b;
  }
</style>

  </div>
</div>

<?php } ?>
<?php } ?>
<!-- Modal Cash in Hand -->
<div class="modal fade" id="CashinHand" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">ABRIR CAJA</h4>
      </div>
      <form id="cachIH" autocomplete="off">
        <div class="modal-body">
          <div class="form-group">
            <label for="CashinHand">Fecha</label>
            <input type="date" class="form-control" value="<?= date('Y-m-d') ?>" readonly>
          </div>
          <div class="form-group">
            <label for="CashinHand">Saldo Inicial</label>
            <input type="text" class="form-control money" name="saldoinicial" id="saldoinicial" value="<?= $cajachica ?>">
            <input type="hidden" name="empresaIH" id="empresaIH">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">CERRAR</button>
          <button id="aperturar" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" type="submit" class="btn btn-primary">ABRIR</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!--
<div class="modal fade" id="ticket" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index:100000">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <div class="form-body table-responsive" id="printSection"></div>
      </div>
      <div class="col-sm-3 pull-right" id="SendWP">


        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="sizing-addon3">+51</span>
          <input type="text" id="telefonoWP" class="form-control" placeholder="999999999">
          <span class="input-group-btn" id="span-print">

            <button class="btn btn-success" onclick="sentTicketWA()" type="button">
              <i class="fa fa-whatsapp" aria-hidden="true"></i>
            </button>

          </span>
        </div>
      </div>
      <br><br>
      <div class="modal-footer" id="fotter-cerrar">
        ESto tambien se coomenta
        <a href="./inicio/switshtable" class="btn btn-default hiddenpr">Cerrar</a>
        <button type="submit" class="btn btn-add" onclick="imprimirprecuenta(<?= $this->venta . ', ' . $empresa->tipoimpresora ?>)" id="btnprecuenta">Imprimir</button>
        <button type="submit" class="btn btn-add" onclick="imprimircomprobante(<?= $empresa->tipoimpresora ?>)" id="btncomprobante">Imprimir</button>
        
      </div>
    </div>
  </div>
</div>
-->


<div class="modal fade modal-modern-pos" id="comprobante" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-xl" role="document" style="width: 900px; max-width: 95%;">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fas fa-file-invoice"></i> COMPROBANTE</h4>
        <button type="button" class="close" data-dismiss="modal" onclick="location.reload()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="printSection" class="p-3"></div>

        <div id="SendWP" style="width: 100%;">
        </div>

        <br><br>

      <div class="modal-footer" id="fotter-cerrar">
        <button type="button" class="btn-modal-dismiss" data-dismiss="modal">CERRAR</button>
        <button type="submit" class="btn-modal-action" onclick="imprimircomprobante(<?= $empresa->tipoimpresora ?>, <?= $this->venta ?>)" id="btncomprobante">
          <i class="fas fa-print"></i> IMPRIMIR
        </button>
      </div>
      </div>

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

<div class="modal fade modal-modern-pos" id="precuenta" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fas fa-file-invoice-dollar"></i> PRECUENTA</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="printSectionprecuenta" class="p-3"></div>

        <!-- <div class="col-sm-3 pull-right" id="SendWPprecuenta">

        </div> -->

        <br><br>

      <div class="modal-footer" id="fotter-cerrar-precuenta">
        <button type="button" class="btn-modal-dismiss" data-dismiss="modal">CERRAR</button>
        <button type="submit" class="btn-modal-action" onclick="imprimirprecuenta(<?= $this->venta . ', ' . $empresa->tipoimpresora ?>)" id="btnprecuenta">
          <i class="fas fa-print"></i> IMPRIMIR
        </button>
      </div>
      </div>

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



<!-- Modal options -->

<!-- <div class="modal fade" id="opt-ions--anterior" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" id="ticketModal">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body" id="modal-body">
        <form action="#" role="form" id="form_options" autocomplete="off">
          <div class="col-md-12">
            <input type="hidden" class="form-control" name="indiceactualizar" id="indiceactualizar">
            <input type="hidden" class="form-control" name="VentaModalOpcion" id="VentaModalOpcion">

            <textarea class="form-control" name="opcion" id="opcion"></textarea>
            <span class="help-block"></span>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default hiddenpr" data-dismiss="modal">CERRAR</button>
        <button type="submit" class="btn btn-add" onclick="addPoptions()">GRABAR</button>
      </div>
    </div>
  </div>
</div> -->
<!-- /.Modal -->

<div class="modal fade" id="options" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" id="ticketModal">
    <div class="modal-content" style="border-radius: 20px; border: none; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);">
      <div class="modal-header" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 20px 20px 0 0; padding: 18px 25px; border: none;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 0.8; color: #ffffff; text-shadow: none; float: right; font-size: 24px; background: none; border: none; margin-top: -2px;"><span aria-hidden="true" style="color: #ffffff;">&times;</span></button>
        <h4 class="modal-title font-weight-bold" style="margin: 0; font-weight: bold; font-size: 18px; color: #ffffff; display: flex; align-items: center; gap: 10px;"><i class="fas fa-sliders-h"></i> AGREGAR OPCION</h4>
      </div>
      <div class="modal-body" id="modal-body" style="padding: 25px;">
        <form action="#" role="form" id="form_options" autocomplete="off">
          <div class="col-md-12" style="margin-bottom: 15px; padding: 0;">
            <input type="hidden" class="form-control" name="indiceactualizar" id="indiceactualizar">
            <input type="hidden" class="form-control" name="VentaModalOpcion" id="VentaModalOpcion">
            <label style="font-weight: 700; color: #64748b; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">Escribe una opción manual / instrucción especial</label>
            <input type="text" name="opcion" id="opcion" class="form-control" placeholder="Ej: Sin sal, bien cocido, etc..." style="height: 50px; border-radius: 12px; border: 2px solid #f1f5f9; padding: 12px 18px; font-weight: 600; color: #1e293b; transition: all 0.3s ease; box-shadow: none;">
            <span class="help-block"></span>
          </div>
          <div class="col-md-12" style="padding: 0;">
            <label style="font-weight: 700; color: #64748b; margin-top: 10px; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; display: block;">Selecciona opciones disponibles</label>
            <div id="checkboxes" style="min-height: 40px;"></div>
          </div>
        </form>
      </div>
      <div class="modal-footer" style="background: #f8fafc; border-radius: 0 0 20px 20px; padding: 15px 25px; border-top: 1px solid #e2e8f0; display: flex; gap: 12px; justify-content: flex-end; align-items: center; width: 100%; box-sizing: border-box;">
        <button type="button" class="btn btn-default hiddenpr" data-dismiss="modal" style="flex: 1; height: 45px; border-radius: 10px; font-weight: 700; background: white; border: 1.5px solid #e2e8f0; color: #64748b; transition: all 0.2s;">CERRAR</button>
        <button type="submit" class="btn btn-add" onclick="addPoptions()" style="flex: 2; height: 45px; border-radius: 10px; font-weight: 700; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border: none; color: white; box-shadow: 0 8px 12px -3px rgba(59, 130, 246, 0.3); transition: all 0.2s;">GRABAR</button>
      </div>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal -->
<div class="modal fade modal-modern-pos" id="AddSale" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fas fa-cash-register"></i> PROCESAR VENTA</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="form_vender" action="" method="post" role="form" autocomplete="off">
        <div class="modal-body">
          <!-- Info Grid -->
          <div class="modal-info-grid mb-4">
            <div class="modal-info-card full-width bg-light-blue">
              <div class="info-card-icon">
                <i class="fas fa-user-circle fa-2x text-primary"></i>
              </div>
              <div class="flex-grow-1">
                <span class="info-card-label">Cliente</span>
                <div id="customerName" class="info-card-value large"><span>-</span></div>
              </div>
            </div>
            
            <div class="modal-info-card border-primary">
              <span class="info-card-label text-primary">Total a Pagar</span>
              <div id="MontoPagar2" class="info-card-value primary text-2xl">S/ <span>0.00</span></div>
            </div>
            
            <div class="modal-info-card">
              <span class="info-card-label">Items</span>
              <div id="ItemsNum2" class="info-card-value"><span>0</span> Items</div>
            </div>
          </div>

          <!-- Form Fields -->
          <div class="row">
            <div class="col-md-6 mb-3">
              <div class="modal-form-group mb-0">
                <label class="modal-form-label">Forma de Pago</label>
                <div class="modal-input-wrapper">
                  <div class="modal-input-icon"><i class="fas fa-wallet"></i></div>
                  <select class="modal-input-modern" name="formapago" id="formapago">
                    <option value="CONTADO">CONTADO</option>
                    <option value="CREDITO">CREDITO</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="modal-form-group mb-0" id="metodo">
                <label class="modal-form-label">Método de Pago</label>
                <div class="modal-input-wrapper">
                  <div class="modal-input-icon"><i class="fas fa-credit-card"></i></div>
                  <select class="modal-input-modern" name="metodopago" id="metodopago">
                    <option value="EFECTIVO">EFECTIVO</option>
                    <option value="TARJETA">TARJETA</option>
                    <option value="YAPE">YAPE</option>
                    <option value="PLIN">PLIN</option>
                    <option value="TRANSFERENCIA">TRANSFERENCIA</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <div class="modal-form-group mb-0" id="descontado">
                <label class="modal-form-label">Descuento</label>
                <div class="modal-input-wrapper">
                  <div class="modal-input-icon"><i class="fas fa-tag"></i></div>
                  <input type="text" class="modal-input-modern money" id="descuento" name="descuento" value="0">
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div class="modal-form-group mb-0" id="pagado">
                <label class="modal-form-label">Monto Recibido</label>
                <div class="modal-input-wrapper highlight-success">
                  <div class="modal-input-icon"><i class="fas fa-money-bill-wave"></i></div>
                  <input type="text" value="0" name="pago" class="modal-input-modern money" id="pago">
                </div>
              </div>
            </div>
          </div>

          <div class="modal-form-group mb-3" id="tipocard" style="display:none">
            <label class="modal-form-label">Tipo de Tarjeta</label>
            <div class="d-flex gap-3 mb-2 p-2 bg-white rounded border">
              <i class="fab fa-cc-visa fa-2x text-primary" id="visa"></i>
              <i class="fab fa-cc-mastercard fa-2x text-danger" id="mastercard"></i>
              <i class="fab fa-cc-amex fa-2x text-info" id="amex"></i>
            </div>
            <div class="modal-input-wrapper">
              <div class="modal-input-icon"><i class="fas fa-university"></i></div>
              <select class="modal-input-modern" name="tipotarjeta" id="tipotarjeta">
                <option value="VISA">VISA</option>
                <option value="DISCOVER">DISCOVER</option>
                <option value="MASTERCARD">MASTERCARD</option>
                <option value="DINERS CLUB">DINERS CLUB</option>
                <option value="AMERICAN EXPRESS">AMERICAN EXPRESS</option>
              </select>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="modal-form-group" id="vencimiento" style="display:none">
                <label class="modal-form-label">Vencimiento</label>
                <input type="date" class="modal-input-modern" id="vence" name="vence" value="<?= date('Y-m-d') ?>">
              </div>
            </div>
            <div class="col-md-6">
              <div class="modal-form-group">
                <label class="modal-form-label">Fecha de Venta</label>
                <input type="date" class="modal-input-modern" id="fecha" name="fecha" value="<?= date('Y-m-d') ?>" readonly style="background-color: #f1f5f9;">
              </div>
            </div>
          </div>

          <div class="change-display-container ReturnChange">
            <span class="change-label">Vuelto para el cliente</span>
            <div id="ReturnChange" class="change-value">S/ <span>0.00</span></div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn-modal-dismiss" data-dismiss="modal">CANCELAR</button>
          <button type="button" id="vendiendo" class="btn-modal-action" onclick="saleBtn()">
            <i class="fas fa-check-circle"></i> COMPLETAR VENTA
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- //todo; venta rapida -->
<!-- Modal -->
<div class="modal fade modal-modern-pos" id="ventarapida" role="dialog" style="overflow: auto;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><i class="fas fa-bolt mr-2"></i> VENTA RÁPIDA</h4>
      </div>


      <form id="form_vender_rapido" action="" method="post" role="form" autocomplete="off">
        <input type="hidden" id="ventaapagar" name="ventaapagar">
        <div class="modal-body">
          <!-- Info Grid -->
          <div class="modal-info-grid">
            <div class="modal-info-card">
              <span class="info-card-label">Total a Pagar</span>
              <div id="MontoPagar2rapido" class="info-card-value primary">S/ <span></span></div>
            </div>
            
            <div class="modal-info-card">
              <span class="info-card-label">Items</span>
              <div id="ItemsNum2rapido" class="info-card-value"><span></span> Items</div>
            </div>

            <div class="modal-info-card full-width" id="contenedorcliente">
              <div class="info-card-icon">
                <i class="fas fa-user-tag fa-2x text-primary"></i>
              </div>
              <div class="flex-grow-1">
                <span class="info-card-label">Cliente</span>
                <div class="input-group">
                  <input type="hidden" class="form-control" name="clienterapido" id="clienterapido">
                  <input type="text" class="modal-input-modern limpiar" name="clientesrapido" id="clientesrapido" placeholder="BUSCAR CLIENTE" style="height: 45px;">
                  <div class="input-group-append">
                    <button type="button" class="btn btn-add-client" onclick="grabarclienterapido()" style="border-radius: 0 14px 14px 0; height: 45px;">
                      <i class="fa fa-user-plus"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Form Fields -->
          <div class="row">
            <div class="col-md-6">
              <div class="modal-form-group">
                <label class="modal-form-label">Forma de Pago</label>
                <select class="modal-input-modern" name="formapagorapido" id="formapagorapido">
                  <option value="CONTADO">CONTADO</option>
                  <option value="CREDITO">CREDITO</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="modal-form-group">
                <label class="modal-form-label">Tipo de Comprobante</label>
                <select id="tipoventarapida" name="tipoventarapida" class="modal-input-modern" onchange="saverapido()">
                  <option value="OTROS">TICKET</option>
                  <option value="BOLETA">BOLETA</option>
                  <option value="FACTURA">FACTURA</option>
                </select>
              </div>
            </div>
          </div>

          <div class="modal-form-group" id="metodorapido">
            <label class="modal-form-label">Método de Pago</label>
            <select class="modal-input-modern" name="metodopagorapido" id="metodopagorapido">
              <option value="EFECTIVO">EFECTIVO</option>
              <option value="TARJETA">TARJETA</option>
              <option value="YAPE">YAPE</option>
              <option value="PLIN">PLIN</option>
              <option value="TRANSFERENCIA">TRANSFERENCIA</option>
            </select>
          </div>

          <div class="modal-form-group">
            <label class="modal-form-label">Descuento</label>
            <div class="modal-input-wrapper">
              <div class="modal-input-icon"><i class="fas fa-tag"></i></div>
              <input type="text" class="modal-input-modern money" id="descuentorapido" name="descuentorapido" value="0">
            </div>
          </div>

          <div class="modal-form-group" id="pagadorapido">
            <label class="modal-form-label">Monto Recibido</label>
            <div class="modal-input-wrapper highlight-success">
              <div class="modal-input-icon"><i class="fas fa-hand-holding-usd"></i></div>
              <input type="text" value="0" name="pagorapido" class="modal-input-modern money" id="pagorapido">
            </div>
          </div>

          <div class="modal-form-group" id="tipocardrapido" style="display:none">
            <label class="modal-form-label">Tipo de Tarjeta</label>
            <div class="d-flex gap-2 mb-2">
              <i class="fab fa-cc-visa fa-2x text-primary"></i>
              <i class="fab fa-cc-mastercard fa-2x text-danger"></i>
              <i class="fab fa-cc-amex fa-2x text-info"></i>
            </div>
            <select class="modal-input-modern" name="tipotarjetarapido" id="tipotarjetarapido">
              <option value="VISA">VISA</option>
              <option value="DISCOVER">DISCOVER</option>
              <option value="MASTERCARD">MASTERCARD</option>
              <option value="DINERS CLUB">DINERS CLUB</option>
              <option value="AMERICAN EXPRESS">AMERICAN EXPRESS</option>
            </select>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="modal-form-group" id="vencimientorapido" style="display:none">
                <label class="modal-form-label">Vencimiento</label>
                <input type="date" class="modal-input-modern" id="vencerapido" name="vencerapido" value="<?= date('Y-m-d') ?>">
              </div>
            </div>
            <div class="col-md-6">
              <div class="modal-form-group">
                <label class="modal-form-label">Fecha</label>
                <input type="date" class="modal-input-modern" id="fecharapido" name="fecharapido" value="<?= date('Y-m-d') ?>" readonly style="background-color: #f1f5f9;">
              </div>
            </div>
          </div>

          <div class="change-display-container ReturnChangeContent">
            <span class="change-label">Vuelto para el cliente</span>
            <div id="ReturnChangerapido" class="change-value">S/ <span>0.00</span></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-modal-dismiss" data-dismiss="modal">CANCELAR</button>
          <button type="button" id="vendiendorapido" class="btn-modal-action" onclick="pagarsolounorapido()">
            <i class="fas fa-check-circle"></i> COMPLETAR VENTA
          </button>
        </div>
      </form>


    </div>
  </div>
</div>
<!-- /.Modal -->



<!-- Modal add user -->
<div class="modal fade" id="cliente_form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <form action="" autocomplete="off" method="POST" id="form_cliente" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="tipo">Tipo<span class="required">*</span></label>
            <select id="tipo" name="tipo" class="form-control">
              <option value="DNI">DNI</option>
              <option value="RUC">RUC</option>
            </select>
          </div>
          <div class="form-group">
            <label for="documento">Documento<span class="required">*</span></label>
            <div class="input-group">
              <input class="form-control" id="documento" type="text" name="documento" placeholder="BUSCAR POR RENIEC">
              <span class="help-block"></span>
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" id="botoncito">
                  <span class="fa fa-search"></span>
                </button>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="nombre">Nombre<span class="required">*</span></label>
            <input class="form-control" id="nombre" type="text" name="nombre">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="apellido">Apellido</label>
            <input class="form-control" id="apellido" type="text" name="apellido">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="direccion">Direccion</label>
            <input class="form-control" id="direccion" type="text" name="direccion">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="telefono">Telefono</label>
            <input class="form-control" id="telefono" type="text" name="telefono">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="telefono">Nacimiento</label>
            <input class="form-control" id="nacimiento" type="date" name="nacimiento">
            <span class="help-block"></span>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnSavecliente" onclick="savecliente()" class="btn btn-primary">GRABAR</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">CERRAR</button>
        </div>
      </form>
    </div>
  </div>
</div>


<!-- Modal add user -->
<div class="modal fade" id="cliente_form_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">CREAR CLIENTE</h4>
      </div>
      <form action="" autocomplete="off" method="POST" id="form_clienterapido" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="tipo3">Tipo<span class="required">*</span></label>
            <select id="tipo3" name="tipo3" class="form-control">
              <option value="DNI">DNI</option>
              <option value="RUC">RUC</option>
            </select>
          </div>
          <div class="form-group">
            <label for="documento">Documento<span class="required">*</span></label>
            <div class="input-group">
              <input class="form-control" id="documento3" type="text" name="documento3" placeholder="BUSCAR POR RENIEC">
              <span class="help-block"></span>
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" id="botoncito3">
                  <span class="fa fa-search"></span>
                </button>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="nombre3">Nombre<span class="required">*</span></label>
            <input class="form-control" id="nombre3" type="text" name="nombre3">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="apellido">Apellido</label>
            <input class="form-control" id="apellido3" type="text" name="apellido3">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="direccion">Direccion</label>
            <input class="form-control" id="direccion3" type="text" name="direccion3">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="telefono">Telefono</label>
            <input class="form-control" id="telefono3" type="text" name="telefono3">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="telefono">Nacimiento</label>
            <input class="form-control" id="nacimiento3" type="date" name="nacimiento3">
            <span class="help-block"></span>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnSaveclienteRapido" onclick="saveclienterapido()" class="btn btn-primary">GRABAR</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">CERRAR</button>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="modal fade" id="cliente_form2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <form action="" autocomplete="off" method="POST" id="form_cliente2" role="form">
        <div class="modal-body">
          <div class="form-group">
            <label for="tipo2">Tipo<span class="required">*</span></label>
            <select id="tipo2" name="tipo2" class="form-control">
              <option value="DNI">DNI</option>
              <option value="RUC">RUC</option>
            </select>
          </div>
          <div class="form-group">
            <label for="documento2">Documento<span class="required">*</span></label>
            <div class="input-group">
              <input class="form-control" id="documento2" type="text" name="documento2" placeholder="BUSCAR POR RENIEC">
              <span class="help-block"></span>
              <span class="input-group-btn">
                <button type="button" class="btn btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" id="botoncito2">
                  <span class="fa fa-search"></span>
                </button>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="nombre2">Nombre<span class="required">*</span></label>
            <input class="form-control" id="nombre2" type="text" name="nombre2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="apellido2">Apellido</label>
            <input class="form-control" id="apellido2" type="text" name="apellido2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="direccion2">Direccion</label>
            <input class="form-control" id="direccion2" type="text" name="direccion2">
            <span class="help-block"></span>
          </div>
          <div class="form-group">
            <label for="telefono2">Telefono</label>
            <input class="form-control" id="telefono2" type="text" name="telefono2">
            <span class="help-block"></span>
          </div>
        </div>
        <div class="modal-footer" id="divfooter">

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

<!-- Modal close register -->
<div class="modal fade" id="CloseRegister" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Cerrar&nbsp;registrarse</h4>
      </div>
      <div class="modal-body">
        <form action="#" role="form" id="form_cierre" autocomplete="off">
          <div id="closeregsection"></div>
        </form>
      </div>
      <div class="modal-footer">
        <a id="cerrarcaja" data-loading-text="<i class='fa fa-spinner fa-spin'></i>" onclick="SubmitRegister()" class="btn btn-red col-xs-12 col-md-12 flat-box-btn">Cerrar&nbsp;registrarse</a>
      </div>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal Cambiar Mesa -->
<div class="modal fade modal-modern-pos" id="CambiarMesa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fas fa-exchange-alt mr-2"></i> CAMBIAR MESA</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <form action="inicio/cambiarmesa" method="post" role="form" autocomplete="off">
        <div class="modal-body p-4">
          <div class="modal-form-group">
            <label class="modal-form-label">Seleccionar Mesa Destino</label>
            <div class="modal-input-wrapper">
              <i class="fas fa-chair input-icon"></i>
              <select id="mesa" name="mesa" class="modal-input-modern" required>
                <option value="">SELECCIONAR MESA</option>
                <?php foreach ($mesotas as $value) { ?>
                  <option value="<?= $value->id ?>"><?= $value->nombre ?></option>
                <?php } ?>
              </select>
            </div>
            <small class="text-muted mt-2 d-block">Solo se muestran mesas disponibles.</small>
          </div>
        </div>
        <div class="modal-footer" style="padding: 20px; background: #f8fafc; border-top: 1px solid #e2e8f0; border-radius: 0 0 24px 24px;">
          <button type="button" class="btn btn-secondary-pos" data-dismiss="modal" style="height: 50px; border-radius: 14px; font-weight: 700; flex: 1;">CANCELAR</button>
          <button type="submit" class="btn-primary-pos" style="flex: 2; margin: 0; height: 50px;">
            <i class="fas fa-check mr-2"></i> CONFIRMAR CAMBIO
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal Add Mesa -->
<style>
  #addMesa input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    outline: none !important;
  }
  #addMesa .btn-default:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
    transform: translateY(-1px);
  }
  #addMesa .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.25) !important;
  }
</style>
<div class="modal fade" id="addMesa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-md" role="document" style="max-width: 500px; margin: 80px auto;">
    <div class="modal-content" style="border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); overflow: hidden; background: #ffffff;">
      <div class="modal-header" style="background: linear-gradient(135deg, #10b981, #059669); padding: 20px; border-bottom: none; position: relative;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 0.9; color: #ffffff; text-shadow: none; font-size: 24px; position: absolute; right: 20px; top: 18px; outline: none;"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel" style="margin: 0; font-weight: 700; font-size: 20px; color: #ffffff; display: flex; align-items: center; gap: 10px; font-family: 'Outfit', 'Inter', sans-serif;">
          <i class="fas fa-plus-circle"></i> Añadir Nueva Mesa / Pedido
        </h4>
      </div>
      <form action="<?= $this->url ?>/addmesa" method="POST" role="form" autocomplete="off" style="margin: 0;">
        <div class="modal-body" style="padding: 25px 30px; background: #f9fafb;">
          <div class="form-group" style="margin-bottom: 0;">
            <label for="nombre" style="font-weight: 600; color: #374151; font-size: 14px; margin-bottom: 8px; display: block; font-family: 'Inter', sans-serif;">Nombre de la Mesa o Identificador</label>
            <div style="position: relative;">
              <span style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 16px;">
                <i class="fas fa-chair"></i>
              </span>
              <input type="text" class="form-control" required name="nombre" id="nombre" placeholder="Ej: Mesa 25, Mozo 3, Para llevar..." style="width: 100%; padding: 12px 12px 12px 40px; border-radius: 8px; border: 1.5px solid #d1d5db; font-size: 15px; font-family: 'Inter', sans-serif; transition: all 0.2s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); color: #1f2937;">
            </div>
            <p style="margin: 8px 0 0 0; font-size: 12px; color: #6b7280; font-family: 'Inter', sans-serif;">Este nombre identificará la comanda en la grilla principal.</p>
            <input type="hidden" name="zonaT" id="zonaT">
          </div>
        </div>
        <div class="modal-footer" style="padding: 15px 30px 25px 30px; background: #f9fafb; border-top: none; display: flex; justify-content: flex-end; gap: 12px;">
          <button type="button" class="btn btn-default" data-dismiss="modal" style="padding: 10px 20px; border-radius: 8px; font-weight: 600; border: 1.5px solid #d1d5db; background: #ffffff; color: #4b5563; font-size: 14px; cursor: pointer; transition: all 0.2s ease; font-family: 'Inter', sans-serif; outline: none; box-shadow: none;">Cancelar</button>
          <button type="submit" class="btn btn-success" style="padding: 10px 24px; border-radius: 8px; font-weight: 600; border: none; background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; font-size: 14px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2); font-family: 'Inter', sans-serif; outline: none; display: flex; align-items: center; gap: 6px;">
            <i class="fas fa-check"></i> Añadir Mesa
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal Variante -->
<div class="modal fade" id="addProcesoVE" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <div class="modal-header" style="border-top-left-radius: 5px; border-top-right-radius: 5px; background: linear-gradient(135deg, #1e3a8a, #3b82f6); padding: 15px 20px;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 0.8; color: #ffffff; text-shadow: none;"><span aria-hidden="true" style="color: #ffffff;">&times;</span></button>
        <h4 class="modal-title" style="margin: 0; font-weight: bold; font-size: 18px; color: #ffffff; display: flex; align-items: center; gap: 8px;"><i class="fas fa-sliders-h"></i> Personalizar Opciones y Extras</h4>
      </div>

      <div class="modal-body">
        <input type="hidden" id="varianteseleccionada">
        <div class="row">
          <div class="col-lg-6" id="ColumnaVariante">

            <div class="alert alert-danger alert-dismissable text-center" style="padding:5px; margin:5px; display:none" id="MensajeVariante">
              <button type="button" class="close" aria-hidden="true" style="right:0px" onclick="varianteMSG()">×</button>
              Tienes que escoger una <span class="alert-link">Variante</span>.
            </div>

            <div class='panel panel-border panel-info' style='margin-bottom:5px'>
              <div class='panel-heading'>
                <h3 class='panel-title'>Variantes</h3>
              </div>
              <div class='panel-body scrollestilos' id="listaVariante" style="height: 50vh; overflow-y:auto; text-align:center; padding:0px">

              </div>
            </div>


          </div>
          <div class="col-lg-6" id="ColumnaExtra">

            <div class='panel panel-border panel-success' style='margin-bottom:5px'>
              <div class='panel-heading'>
                <h3 class='panel-title'>Extras</h3>
              </div>
              <div class='panel-body scrollestilos' id="listExtras" style="height: 50vh; overflow-y:auto; text-align:center; padding:0px">
              </div>
            </div>

          </div>
        </div>
        <div class="row" style="margin-top: 10px;">
          <div class="col-lg-12">
            <div class='panel panel-border panel-warning' style='margin-bottom:10px'>
              <div class='panel-heading' style="padding: 8px 15px;">
                <h3 class='panel-title' style="font-size: 16px;"><i class="fas fa-edit mr-2 text-warning"></i>Instrucciones Especiales / Notas Adicionales</h3>
              </div>
              <div class='panel-body' style="padding: 10px">
                <textarea id="notas-especiales" class="form-control" rows="2" placeholder="Ej. bien cocido, sin ensalada, cambiar papas por chaufa, cremas aparte, etc..." style="resize: none; font-size: 15px; border-radius: 5px;"></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 text-right" id="ProcesoAddVE">

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

    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal Producto Libre -->
<div class="modal fade" id="addproductolibre" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="border-radius: 24px; border: none; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);">
      <div class="modal-header" style="background: #f8fafc; border-radius: 24px 24px 0 0; padding: 25px; border-bottom: 1px solid #e2e8f0;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 0.5;"><span aria-hidden="true" style="font-size: 24px;">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel" style="font-weight: 800; color: #1e293b; display: flex; align-items: center; gap: 12px;">
          <div style="width: 40px; height: 40px; background: #eff6ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #2563eb;">
            <i class="fas fa-shopping-basket"></i>
          </div>
          Crear producto libre
        </h4>
      </div>
      <form action="" autocomplete="off" method="POST" id="form_libre" role="form">
        <div class="modal-body" style="padding: 30px;">
          <div class="form-group" style="margin-bottom: 25px;">
            <label for="nombre" style="font-weight: 700; color: #64748b; margin-bottom: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;">Nombre del Producto <span class="text-danger">*</span></label>
            <div style="position: relative;">
              <input class="form-control libre" id="nombre" type="text" name="nombre" required placeholder="Ej: Plato especial personalizado" style="height: 55px; border-radius: 16px; border: 2px solid #f1f5f9; padding: 15px 20px; font-weight: 600; color: #1e293b; transition: all 0.3s ease; box-shadow: none;">
            </div>
            <span class="help-block" style="font-size: 12px; margin-top: 5px;"></span>
          </div>
          <div class="form-group" style="margin-bottom: 10px;">
            <label for="precioventa" style="font-weight: 700; color: #64748b; margin-bottom: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;">Precio de Venta (S/)</label>
            <div style="position: relative;">
              <div style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-weight: 800; color: #2563eb; font-size: 18px;">S/</div>
              <input class="form-control" id="precioventa" type="number" step="0.01" name="precioventa" required placeholder="0.00" style="height: 55px; border-radius: 16px; border: 2px solid #f1f5f9; padding: 15px 20px 15px 50px; font-weight: 800; color: #1e293b; font-size: 20px; transition: all 0.3s ease; box-shadow: none;">
            </div>
            <span class="help-block" style="font-size: 12px; margin-top: 5px;"></span>
          </div>
        </div>
        <div class="modal-footer" style="background: #f8fafc; border-radius: 0 0 24px 24px; padding: 20px 30px; border-top: 1px solid #e2e8f0; display: flex; gap: 12px;">
          <button type="button" class="btn" data-dismiss="modal" style="flex: 1; height: 50px; border-radius: 14px; font-weight: 700; background: white; border: 1px solid #e2e8f0; color: #64748b; transition: all 0.3s ease;">CERRAR</button>
          <button type="button" id="btnSaveLibre" onclick="saveLibre()" class="btn" style="flex: 2; height: 50px; border-radius: 14px; font-weight: 700; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); border: none; color: white; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); transition: all 0.3s ease;">GRABAR PRODUCTO</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal Editar Pedido -->
<div class="modal fade modal-modern-pos" id="modal_editarpedido" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fas fa-edit"></i> EDITAR PEDIDO</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="javascript:location.reload()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <div class="p-4">
          <div class="table-responsive">
            <table id="tabla_editarproducto" class="table table-hover" style="width:100%; border-collapse: separate; border-spacing: 0 8px;">
              <thead>
                <tr style="background: #f8fafc;">
                  <th style="border-radius: 12px 0 0 12px; border: none; padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 11px; color: #64748b; letter-spacing: 0.5px;">#</th>
                  <th style="border: none; padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 11px; color: #64748b; letter-spacing: 0.5px;">Can</th>
                  <th style="border: none; padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 11px; color: #64748b; letter-spacing: 0.5px;">Producto</th>
                  <th style="border: none; padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 11px; color: #64748b; letter-spacing: 0.5px;">Precio</th>
                  <th style="border: none; padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 11px; color: #64748b; letter-spacing: 0.5px;">Importe</th>
                  <th style="border-radius: 0 12px 12px 0; border: none; padding: 15px; font-weight: 800; text-transform: uppercase; font-size: 11px; color: #64748b; letter-spacing: 0.5px; text-align: center;">Accion</th>
                </tr>
              </thead>
              <tbody style="background: transparent;"></tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-modal-dismiss btn-block" data-dismiss="modal" onclick="javascript:location.reload()">CERRAR</button>
      </div>
    </div>
  </div>
</div>
<!-- /.Modal -->

<!-- Modal Cash in Hand -->
<!-- Modal Comanda -->
<div class="modal fade modal-modern-pos" id="modal_comanda" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="fas fa-print"></i> OPCIONES DE IMPRESIÓN</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-4">
        <div class="d-flex flex-column gap-3">
          <button type="button" class="btn-print-option" id="comandacocina" onclick="imprimir2('cocina')">
            <div class="print-option-icon"><i class="fas fa-utensils"></i></div>
            <div class="print-option-text">
              <span class="title">Comanda Cocina</span>
              <span class="subtitle">Enviar pedido completo a preparación</span>
            </div>
          </button>
          
          <button type="button" class="btn-print-option" id="comandaBar" onclick="imprimir2('bar')">
            <div class="print-option-icon secondary"><i class="fas fa-cocktail"></i></div>
            <div class="print-option-text">
              <span class="title">Comanda Bar</span>
              <span class="subtitle">Enviar bebidas al área de despacho</span>
            </div>
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-modal-dismiss btn-block" data-dismiss="modal">CERRAR</button>
      </div>
    </div>
  </div>
</div>
<!-- /.Modal -->
