Tul xxx Tul

Viewing: delivery_orders.php

<?php
include '../components/connect.php';
require_once '../components/admin_roles.php';

session_start();

$admin_id = $_SESSION['admin_id'];

if(!isset($admin_id)){
   header('location:admin_login.php');
}

ensureAdminRolesSchema($conn);
$currentRole = getRoleBySession($conn);
$canViewInsights = adminHasPermission($currentRole, 'orders_insights');

date_default_timezone_set('America/Bogota');

$today = new DateTime('today');
$tomorrow = (clone $today)->modify('+1 day');
$today_start = $today->format('Y-m-d H:i:s');
$tomorrow_start = $tomorrow->format('Y-m-d H:i:s');

// Obtener fechas de filtro
$fecha_desde = $canViewInsights && isset($_GET['fecha_desde']) ? $_GET['fecha_desde'] : $today->format('Y-m-01');
$fecha_hasta = $canViewInsights && isset($_GET['fecha_hasta']) ? $_GET['fecha_hasta'] : $today->format('Y-m-d');
if($fecha_desde > $fecha_hasta){
   $fecha_desde = $fecha_hasta;
}

// Obtener estadísticas del día
$select_stats_today = $conn->prepare("SELECT COUNT(*) as total_pedidos, COALESCE(SUM(total_amount), 0) as total_recaudado FROM `delivery_orders` WHERE created_at >= ? AND created_at < ?");
$select_stats_today->execute([$today_start, $tomorrow_start]);
$stats_today = $select_stats_today->fetch(PDO::FETCH_ASSOC) ?: ['total_pedidos' => 0, 'total_recaudado' => 0];

// Obtener estadísticas del rango de fechas
$select_stats_range = $conn->prepare("SELECT COUNT(*) as total_pedidos, COALESCE(SUM(total_amount), 0) as total_recaudado FROM `delivery_orders` WHERE DATE(created_at) BETWEEN ? AND ?");
$select_stats_range->execute([$fecha_desde, $fecha_hasta]);
$stats_range = $select_stats_range->fetch(PDO::FETCH_ASSOC) ?: ['total_pedidos' => 0, 'total_recaudado' => 0];

// Entregados del rango (por fecha de creación)
$deliveredRange = 0;
try {
   $delRangeStmt = $conn->prepare("SELECT COUNT(*) FROM `delivery_orders` WHERE status = 'entregado' AND DATE(created_at) BETWEEN ? AND ?");
   $delRangeStmt->execute([$fecha_desde, $fecha_hasta]);
   $deliveredRange = (int)$delRangeStmt->fetchColumn();
} catch (Throwable $e) {
   $deliveredRange = 0;
}

// Estado de pedidos de hoy
$todayStatusCounts = [
   'pendiente' => 0,
   'en_preparacion' => 0,
   'en_camino' => 0,
   'entregado' => 0,
   'cancelado' => 0,
];
try {
   $stmt = $conn->prepare("SELECT status, COUNT(*) AS total FROM `delivery_orders` WHERE created_at >= ? AND created_at < ? GROUP BY status");
   $stmt->execute([$today_start, $tomorrow_start]);
   foreach($stmt->fetchAll(PDO::FETCH_ASSOC) as $row){
      $key = (string)($row['status'] ?? '');
      if($key !== '' && array_key_exists($key, $todayStatusCounts)){
         $todayStatusCounts[$key] = (int)($row['total'] ?? 0);
      }
   }
} catch (Throwable $e) {
   
}

$inProgressToday = (int)$todayStatusCounts['pendiente'] + (int)$todayStatusCounts['en_preparacion'] + (int)$todayStatusCounts['en_camino'];
$deliveredToday = (int)$todayStatusCounts['entregado'];
$cancelledToday = (int)$todayStatusCounts['cancelado'];
$deliveryRateToday = ((int)$stats_today['total_pedidos'] > 0)
   ? round(((float)$deliveredToday / (float)$stats_today['total_pedidos']) * 100)
   : 0;
$avgTicketToday = ((int)$stats_today['total_pedidos'] > 0)
   ? ((float)$stats_today['total_recaudado'] / (float)$stats_today['total_pedidos'])
   : 0.0;

// Métodos de pago de hoy
$todayPaymentCounts = [
   'efectivo' => 0,
   'transferencia' => 0,
];
try {
   $payStmt = $conn->prepare("SELECT payment_method, COUNT(*) AS total FROM `delivery_orders` WHERE created_at >= ? AND created_at < ? GROUP BY payment_method");
   $payStmt->execute([$today_start, $tomorrow_start]);
   foreach($payStmt->fetchAll(PDO::FETCH_ASSOC) as $row){
      $key = (string)($row['payment_method'] ?? '');
      if($key !== '' && array_key_exists($key, $todayPaymentCounts)){
         $todayPaymentCounts[$key] = (int)($row['total'] ?? 0);
      }
   }
} catch (Throwable $e) {
   
}

// Estadísticas del mes actual
$monthStart = (clone $today)->modify('first day of this month')->format('Y-m-d H:i:s');
$select_stats_month = $conn->prepare("SELECT COUNT(*) as total_pedidos, COALESCE(SUM(total_amount), 0) as total_recaudado FROM `delivery_orders` WHERE created_at >= ? AND created_at < ?");
$select_stats_month->execute([$monthStart, $tomorrow_start]);
$stats_month = $select_stats_month->fetch(PDO::FETCH_ASSOC) ?: ['total_pedidos' => 0, 'total_recaudado' => 0];

// Obtener pedidos pendientes (no entregados) sin importar la fecha
$select_orders = $conn->prepare(
   "SELECT 
        o.*,
        (SELECT GROUP_CONCAT(DISTINCT pr.name ORDER BY pr.name SEPARATOR ', ')
            FROM delivery_order_preparers dop
            JOIN preparers pr ON pr.id = dop.preparer_id
            WHERE dop.order_id = o.id) AS preparer_names,
        (SELECT GROUP_CONCAT(DISTINCT dop2.preparer_id ORDER BY dop2.preparer_id SEPARATOR ',')
            FROM delivery_order_preparers dop2
            WHERE dop2.order_id = o.id) AS preparer_ids,
        p.name AS preparer_name
    FROM `delivery_orders` o
    LEFT JOIN `preparers` p ON o.preparer_id = p.id
    WHERE o.status <> 'entregado'
    ORDER BY o.created_at ASC"
);
$select_orders->execute();
$orders = $select_orders->fetchAll(PDO::FETCH_ASSOC);

$productPrepMap = [];
try {
   $productIds = [];
   foreach($orders as $o){
      $itemsRaw = json_decode($o['order_items'] ?? '[]', true);
      if(!is_array($itemsRaw)){
         continue;
      }
      foreach($itemsRaw as $it){
         $pid = (int)($it['id'] ?? 0);
         if($pid > 0){
            $productIds[$pid] = $pid;
         }
      }
   }
   if(!empty($productIds)){
      $placeholders = implode(',', array_fill(0, count($productIds), '?'));
      $ppStmt = $conn->prepare(
         "SELECT pp.product_id, GROUP_CONCAT(DISTINCT pr.name ORDER BY pr.name SEPARATOR ', ') AS names
            FROM product_preparers pp
            JOIN preparers pr ON pr.id = pp.preparer_id
           WHERE pp.product_id IN ($placeholders)
           GROUP BY pp.product_id"
      );
      $ppStmt->execute(array_values($productIds));
      foreach($ppStmt->fetchAll(PDO::FETCH_ASSOC) as $row){
         $productPrepMap[(int)$row['product_id']] = (string)($row['names'] ?? '');
      }
   }
} catch (Throwable $e) {
   $productPrepMap = [];
}

// Obtener categorías y productos
$select_categories = $conn->prepare("SELECT * FROM `categories` ORDER BY name ASC");
$select_categories->execute();
$categorias = $select_categories->fetchAll(PDO::FETCH_ASSOC);

$select_products = $conn->prepare(
   "SELECT p.*, c.name as category_name,
           (SELECT GROUP_CONCAT(DISTINCT pr.name ORDER BY pr.name SEPARATOR ', ')
              FROM product_preparers pp
              JOIN preparers pr ON pr.id = pp.preparer_id
             WHERE pp.product_id = p.id) AS preparer_names,
           (SELECT GROUP_CONCAT(DISTINCT pp2.preparer_id ORDER BY pp2.preparer_id SEPARATOR ',')
              FROM product_preparers pp2
             WHERE pp2.product_id = p.id) AS preparer_ids
      FROM `products` p
      LEFT JOIN `categories` c ON p.category = c.id
     ORDER BY c.name, p.name"
);
$select_products->execute();
$productos = $select_products->fetchAll(PDO::FETCH_ASSOC);

// Obtener preparadores activos
$select_preparers = $conn->prepare("SELECT id, name FROM `preparers` WHERE status = 'activo' ORDER BY name ASC");
$select_preparers->execute();
$preparers = $select_preparers->fetchAll(PDO::FETCH_ASSOC);

function normaliza_categoria($str){
   $str = mb_strtolower($str, 'UTF-8');
   $map = ['á'=>'a','à'=>'a','ä'=>'a','â'=>'a','Á'=>'a','À'=>'a','Â'=>'a','Ä'=>'a','é'=>'e','è'=>'e','ë'=>'e','ê'=>'e','É'=>'e','È'=>'e','Ê'=>'e','Ë'=>'e','í'=>'i','ì'=>'i','ï'=>'i','î'=>'i','Í'=>'i','Ì'=>'i','Î'=>'i','Ï'=>'i','ó'=>'o','ò'=>'o','ö'=>'o','ô'=>'o','Ó'=>'o','Ò'=>'o','Ô'=>'o','Ö'=>'o','ú'=>'u','ù'=>'u','ü'=>'u','û'=>'u','Ú'=>'u','Ù'=>'u','Û'=>'u','Ü'=>'u','ñ'=>'n','Ñ'=>'n','ç'=>'c','Ç'=>'c'];
   $str = strtr($str, $map);
   $str = preg_replace('/[^a-z0-9]+/','-',$str);
   $str = trim($str,'-');
   return $str;
}

$businessName = getBusinessName($conn);
$businessLogoVersion = getBusinessLogoVersion($conn);
$iconHref = '../icon.php?size=64' . ($businessLogoVersion !== '' ? '&v=' . rawurlencode($businessLogoVersion) : '');

$fecha_desde_safe = htmlspecialchars((string)$fecha_desde, ENT_QUOTES, 'UTF-8');
$fecha_hasta_safe = htmlspecialchars((string)$fecha_hasta, ENT_QUOTES, 'UTF-8');

?>

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pedidos a Domicilio | <?= htmlspecialchars($businessName); ?></title>
   <link rel="icon" href="<?= htmlspecialchars($iconHref); ?>" type="image/png">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
   <link rel="stylesheet" href="../css/admin_style.css">
   <style>
   :root {
      --color-primary: #b30000;
      --color-success: #28a745;
      --color-warning: #ffc107;
      --color-info: #17a2b8;
      --color-danger: #dc3545;
   }

   .stats-container {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.5rem;
      margin-bottom: 2.5rem;
      animation: fadeInUp 0.5s ease;
      align-items: start;
   }

   .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      align-items: stretch;
   }

   .stat-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
      backdrop-filter: blur(10px);
      border-radius: 18px;
      padding: 1.15rem 1.2rem;
      box-shadow: 0 8px 22px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      border: 1px solid rgba(255,255,255,0.28);
      position: relative;
      overflow: hidden;
   }

   .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(0,0,0,0.14);
   }

   .stat-card.today {
      background: #ffffff;
      color: #111;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 12px 30px rgba(0,0,0,0.1);
   }

   .stat-card.range {
      background: linear-gradient(135deg, #116f80 0%, #17a2b8 100%);
      color: white;
   }

   .stat-card.progress {
      background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
      color: #fff;
   }

   .stat-card.delivered {
      background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
      color: #fff;
   }

   .stat-card .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
   }

   .stat-card .stat-icon {
      font-size: 2.4rem;
      opacity: 0.9;
   }

   .stat-card .stat-label {
      font-size: 1.05rem;
      font-weight: 600;
      opacity: 0.95;
   }

   .stat-card .stat-content {
      display: flex;
      gap: 1.2rem;
      align-items: stretch;
      margin-top: 0.4rem;
   }

   .stat-card .stat-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
   }

   .stat-card .stat-value {
      font-size: 2rem;
      font-weight: 800;
      margin: 0.1rem 0;
   }

   .stat-card .stat-sublabel {
      font-size: 0.95rem;
      opacity: 0.85;
   }

   .stat-card .stat-right {
      min-width: 160px;
      background: rgba(255,255,255,0.12);
      border-radius: 14px;
      padding: 0.9rem 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.3rem;
      text-align: right;
      box-shadow: inset 0 0 18px rgba(255,255,255,0.12);
   }

   .stat-card.today .stat-right {
      background: #f8f9fa;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: none;
   }

   .stat-card.today .stat-label {
      color: #1e4f3a;
      font-weight: 700;
   }

   .stat-card.today .stat-right-label {
      color: #475a52;
      opacity: 0.85;
   }

   .stat-card.today .stat-right-amount {
      color: #1e7e34;
   }

   .stat-card.range .stat-right {
      background: rgba(255,255,255,0.16);
   }

   .stat-card .stat-right-label {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.78;
      font-weight: 700;
   }

   .stat-card .stat-right-amount {
      font-size: 1.45rem;
      font-weight: 900;
      line-height: 1.1;
   }

   .stat-card .stat-right-sub {
      display: block;
      margin-top: 0.35rem;
      font-size: 0.9rem;
      font-weight: 800;
      opacity: 0.9;
   }

   .actions-buttons {
      display: flex;
      gap: 1.2rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
   }

   @media (max-width: 900px) {
      .stats-container { grid-template-columns: 1fr; }
      .actions-buttons { justify-content: flex-start; }
   }

   @media (max-width: 600px) {
      .actions-buttons {
         display: grid;
         grid-template-columns: max-content max-content;
         justify-content: center;
         gap: 0.75rem;
      }
      .btn-add-inline,
      .btn-history {
         width: auto;
         padding: 1rem 1.25rem;
         font-size: 1rem;
      }
   }

   .filters-section {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 2rem;
      margin-bottom: 3rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
   }

   .filters-form {
      display: flex;
      gap: 1.2rem;
      align-items: end;
      flex-wrap: wrap;
   }

   .filter-group {
      flex: 1;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
   }

   .filter-group label {
      font-weight: 600;
      color: #111;
      font-size: 1.1rem;
   }

   .filter-group input {
      padding: 1rem;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-size: 1.1rem;
      transition: border-color 0.3s ease;
   }

   .filter-group input:focus {
      outline: none;
      border-color: var(--color-primary);
   }

   .filters-actions {
      display: flex;
      gap: 0.9rem;
      align-items: center;
      flex-wrap: wrap;
   }

   .btn-filter,
   .btn-reset,
   .btn-add-inline,
   .btn-history {
      padding: 1.25rem 2.6rem;
      border: none;
      border-radius: 10px;
      font-weight: 800;
      letter-spacing: 0.4px;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      justify-content: center;
      font-size: 1.1rem;
   }

   .btn-filter {
      background: linear-gradient(135deg, var(--color-primary) 0%, #7a0000 100%);
      color: white;
   }

   .btn-reset {
      background: #ffffff;
      color: var(--color-primary);
      border: 1px solid rgba(179,0,0,0.25);
   }

   .btn-filter:hover,
   .btn-reset:hover,
   .btn-add-inline:hover,
   .btn-history:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.15);
   }

   .btn-add-inline {
      background: linear-gradient(135deg, var(--color-success) 0%, #1e7e34 100%);
      color: #fff;
   }

   .btn-history {
      background: linear-gradient(135deg, var(--color-info) 0%, #117a8b 100%);
      color: #fff;
      text-decoration: none;
   }

   .orders-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
   }
   .orders-container.orders-empty {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 45vh;
   }

   .order-card {
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 1.5rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
   }

   .order-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
   }

   .order-status {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.5rem 1rem;
      border-radius: 0 20px 0 20px;
      font-weight: 600;
      font-size: 0.85rem;
      text-transform: uppercase;
   }

   .order-status.pendiente {
      background: var(--color-warning);
      color: #333;
   }

   .order-status.en_preparacion {
      background: var(--color-info);
      color: white;
   }

   .order-status.en_camino {
      background: #6f42c1;
      color: white;
   }

   .order-status.entregado {
      background: var(--color-success);
      color: white;
   }

   .order-status.cancelado {
      background: var(--color-danger);
      color: white;
   }

   .order-header {
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid #f0f0f0;
   }

   .order-number {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--color-primary);
      margin-bottom: 0.5rem;
   }

   .order-datetime {
      font-size: 0.9rem;
      color: #666;
      display: flex;
      align-items: center;
      gap: 0.5rem;
   }

   .customer-info {
      margin-bottom: 1rem;
   }

   .customer-name {
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
      color: #333;
   }

   .customer-detail {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.3rem;
      color: #666;
      font-size: 0.95rem;
   }

   .order-items {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
   }

   .order-items-title {
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #333;
   }

   .order-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.3rem;
      padding: 0.3rem 0;
      border-bottom: 1px solid #e0e0e0;
      font-size: 0.9rem;
   }

   .order-item:last-child {
      border-bottom: none;
   }

   .order-total {
      background: #f5f5f5;
      color: #222;
      padding: 1rem;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      border: 1px solid #e0e0e0;
   }

   .order-total span:last-child {
      color: #1e7e34;
   }

   .order-actions {
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
   }

   .btn-action {
      flex: 1;
      padding: 0.8rem;
      border: none;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
   }

   .btn-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
   }

   .btn-edit {
      background: linear-gradient(135deg, var(--color-info) 0%, #117a8b 100%);
      color: white;
   }

   .btn-delete {
      background: linear-gradient(135deg, var(--color-danger) 0%, #a71d2a 100%);
      color: white;
   }

   .btn-status {
      background: linear-gradient(135deg, #a8adb7 0%, #6f7682 100%);
      color: #fff;
   }

   .btn-print {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      color: #fff;
   }

   .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      background: rgba(255,255,255,0.95);
      border-radius: 20px;
      margin-top: 2rem;
   }

   .empty-state i {
      font-size: 5rem;
      color: #ddd;
      margin-bottom: 1rem;
   }

   .empty-state h3 {
      color: #666;
      font-size: 1.5rem;
      margin-bottom: 1rem;
   }

   .empty-state p {
      color: #999;
      margin-bottom: 2rem;
   }

   @keyframes fadeInUp {
      from {
         opacity: 0;
         transform: translateY(20px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }

   .section-title {
      font-size: 2.3rem;
      font-weight: 800;
      color: #111;
      margin-bottom: 2.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
   }
   
   .modal-overlay { 
      position: fixed; 
      inset: 0; 
      background: rgba(17,24,39,0.55); 
      backdrop-filter: blur(4px); 
      -webkit-backdrop-filter: blur(4px); 
      display: none; 
      align-items: center; 
      justify-content: center; 
      z-index: 2000; 
      padding: 24px; 
   }
   .modal-overlay.show { 
      display: flex; 
   }
   .modal-container {
      width: min(1280px, 95vw);
      max-height: 88vh;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
      border-radius: 20px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.35);
      overflow: hidden;
      transform: translateY(20px);
      opacity: 0;
      transition: transform .25s ease, opacity .25s ease;
      border: 1px solid rgba(0,0,0,0.06);
   }
   .modal-overlay.show .modal-container { 
      transform: translateY(0); 
      opacity: 1; 
   }
   .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.1rem 1.4rem;
      border-bottom: 1px solid #eee;
      background: linear-gradient(90deg, rgba(179,0,0,0.06), transparent);
   }
   .modal-title { 
      font-size: 1.4rem; 
      font-weight: 800; 
      color: var(--color-primary); 
      display:flex; 
      align-items:center; 
      gap:.6rem; 
   }
   .modal-close { 
      border: none; 
      background: #fff; 
      border-radius: 10px; 
      padding: .5rem .7rem; 
      cursor: pointer; 
      box-shadow: 0 4px 12px rgba(0,0,0,0.06); 
   }
   .modal-body { 
      padding: 1.1rem 1.4rem; 
      overflow: auto; 
      max-height: calc(88vh - 140px); 
   }
   .modal-footer { 
      padding: 1rem 1.4rem; 
      border-top: 1px solid #eee; 
      background: #fafafa; 
      display:flex; 
      gap:.8rem; 
      justify-content:flex-end; 
   }
   
   .grid-two { 
      display: grid; 
      grid-template-columns: 1fr 1fr; 
      gap: 1.2rem; 
   }
   @media (max-width: 992px) { 
      .grid-two { 
         grid-template-columns: 1fr; 
      } 
   }
   @media (max-width: 992px) { .grid-two { grid-template-columns: 1fr; } }

   .grid-three { display: grid; grid-template-columns: 0.9fr 1.4fr 0.9fr; gap: 1.2rem; align-items: start; }
   @media (max-width: 1200px) { .grid-three { grid-template-columns: 1fr; } }
   .cart-sticky { position: sticky; top: .25rem; }
   .form-group { margin-bottom: 1rem; }
   .form-label { display:block; font-weight:700; margin-bottom:.4rem; color:#333; }
   .form-control, .form-select { width:100%; padding: .9rem 1rem; border: 2px solid #e6e6e6; border-radius: 10px; font-size: 1rem; }
   .form-control:focus, .form-select:focus { outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(179,0,0,0.08); }
   .products-container { max-height: 58vh; overflow: auto; border: 2px solid #f0f0f0; border-radius: 12px; padding: 1rem; background: #f9fafb; }
   .category-block { display:none; margin-bottom: 1.1rem; background:#fff; border-radius:10px; padding: .9rem; border:1px solid #f1f1f1; }
   .category-placeholder { display:flex; align-items:center; justify-content:center; text-align:center; padding:1.4rem; border:2px dashed #d9d9d9; border-radius:12px; color:#777; font-weight:600; background:#fff; min-height:120px; margin-bottom:1rem; }
   .category-title { color: var(--color-primary); font-size:1.1rem; font-weight:800; margin:0 0 .7rem 0; }
   .products-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:.8rem; }
   .product-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:.7rem; display:flex; align-items:center; gap:.8rem; transition: box-shadow .2s ease; }
   .product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
   .product-image { width:56px; height:56px; object-fit:cover; border-radius:10px; }
   .product-name { font-weight:700; color:#222; }
   .product-price { color: #28a745; font-weight:700; font-size:.95rem; }
   .product-quantity { display:flex; align-items:center; gap:.45rem; }
   .btn-quantity { width:32px; height:32px; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer; font-weight:800; }
   .quantity-display { min-width: 28px; text-align:center; font-weight:800; }
   .cart-section { margin-top:1rem; padding:1.1rem; background:#fff; border:2px dashed #28a745; border-radius:12px; }
   .cart-title { font-size:1.1rem; font-weight:800; margin:0 0 .6rem 0; display:flex; justify-content:space-between; align-items:center; }
   .cart-items { max-height: 200px; overflow:auto; display:flex; flex-direction:column; gap:.45rem; }
   .cart-item { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.55rem .65rem; border:1px solid #e6f5ea; border-radius:10px; background:linear-gradient(90deg, rgba(232,255,239,0.7), rgba(255,255,255,0.9)); box-shadow:0 4px 10px rgba(40,167,69,0.08); transition: transform .2s ease, box-shadow .2s ease; }
   .cart-item:hover { transform: translateY(-2px); box-shadow:0 8px 18px rgba(40,167,69,0.12); }
   .cart-item-info { display:flex; flex-direction:column; color:#1f3d2c; font-weight:600; }
   .cart-item-actions { display:flex; align-items:center; gap:.4rem; }
   .cart-remove-btn { border:none; background:rgba(220,53,69,0.12); color:#dc3545; border-radius:999px; padding:.35rem .75rem; font-size:.85rem; font-weight:700; cursor:pointer; transition: background .2s ease, transform .2s ease; display:flex; align-items:center; gap:.35rem; }
   .cart-remove-btn:hover { background:rgba(220,53,69,0.22); transform: translateY(-1px); }
   .cart-item-subtotal { font-weight:800; color:#1e7e34; font-size:1rem; }
   .cart-total { text-align:right; font-size:1.2rem; font-weight:900; color:#28a745; margin-top:.8rem; }
   .cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; color:#6f7d6d; padding:1.2rem; background:#f6fff7; border-radius:12px; border:1px dashed rgba(40,167,69,0.25); }
   .cart-empty i { font-size:1.7rem; color:#28a745; }
   .cart-empty small { font-weight:500; color:#9aa0a6; }
   .preparer-group .preparer-control { display:flex; flex-direction:column; gap:0.65rem; }
   .preparer-checklist { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.5rem; border:1px dashed rgba(15,23,42,0.12); background:#fff; border-radius:14px; padding:0.75rem; max-height:220px; overflow:auto; }
   .check-item { display:flex; align-items:center; gap:0.55rem; border-radius:12px; border:1px solid rgba(15,23,42,0.08); padding:0.5rem 0.6rem; background:#f8fafc; transition:border .2s, background .2s; }
   .check-item.is-selected { border-color:#b30000; background:rgba(179,0,0,0.08); }
   .check-item.is-primary { box-shadow:0 0 0 2px rgba(179,0,0,0.25); }
   .checkbox-part { display:flex; align-items:center; gap:0.5rem; font-weight:600; color:#1f2937; }
   .checkbox-part input { width:18px; height:18px; accent-color:#b30000; }
   .preparer-hint { color:#6b7280; font-size:0.85rem; }
   .btn-primary { background: linear-gradient(135deg, var(--color-success), #1e7e34); color:#fff; border:none; border-radius:10px; padding:.9rem 1.2rem; font-weight:800; }
   .btn-secondary { background:#6c757d; color:#fff; border:none; border-radius:10px; padding:.9rem 1.2rem; font-weight:700; }
 
   body.delivery-page {
      --color-primary: #0ea5e9;
      --color-success: #22c55e;
      --color-warning: #f59e0b;
      --color-info: #0ea5e9;
      --color-danger: #ef4444;
      background: linear-gradient(135deg, #f5f9ff 0%, #fff7f3 100%);
      min-height: 100vh;
   }

   body.delivery-page .section-title {
      color: #0f172a;
      font-weight: 900;
      letter-spacing: .2px;
   }

   body.delivery-page .stats-container {
      margin-bottom: 2.2rem;
   }

   body.delivery-page .stat-card {
      border: 1px solid rgba(226, 232, 240, 0.85);
      box-shadow: 0 18px 42px rgba(17, 24, 39, 0.10);
   }

   body.delivery-page .stat-card.today {
      background: rgba(255, 255, 255, 0.90);
      backdrop-filter: blur(10px);
   }

   body.delivery-page .filters-section {
      background: rgba(255,255,255,0.86);
      border: 1px solid rgba(226, 232, 240, 0.85);
      box-shadow: 0 18px 42px rgba(17, 24, 39, 0.10);
      backdrop-filter: blur(10px);
   }

   body.delivery-page .btn-filter,
   body.delivery-page .btn-add-inline {
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      color: #fff;
      box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
   }

   body.delivery-page .btn-filter:hover,
   body.delivery-page .btn-add-inline:hover {
      filter: brightness(1.02);
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.26);
   }

   body.delivery-page .btn-reset,
   body.delivery-page .btn-history {
      background: rgba(255, 255, 255, 0.85);
      color: #0f172a;
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
      backdrop-filter: blur(6px);
      text-decoration: none;
   }

   body.delivery-page .btn-reset:hover,
   body.delivery-page .btn-history:hover {
      border-color: rgba(148, 163, 184, 0.75);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
   }

   body.delivery-page .order-card {
      border: 1px solid rgba(226, 232, 240, 0.85);
      box-shadow: 0 18px 42px rgba(17, 24, 39, 0.10);
   }

   body.delivery-page .order-card:hover {
      box-shadow: 0 22px 52px rgba(17, 24, 39, 0.14);
   }

   body.delivery-page .order-number {
      color: #0ea5e9;
   }

   body.delivery-page .btn-action {
      font-weight: 900;
      letter-spacing: .2px;
   }

   body.delivery-page .btn-status {
      background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(248,250,252,0.85));
      color: #0f172a;
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
   }

   body.delivery-page .btn-edit {
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
   }

   body.delivery-page .btn-print {
      background: linear-gradient(135deg, #f97316, #ea580c);
   }

   body.delivery-page .btn-delete {
      background: linear-gradient(135deg, #ef4444, #b91c1c);
   }

   body.delivery-page .modal-container {
      border: 1px solid rgba(226, 232, 240, 0.85);
   }

   body.delivery-page .modal-title {
      color: #0f172a;
   }

   body.delivery-page .btn-primary {
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      border-radius: 14px;
      box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
   }

   body.delivery-page .btn-secondary {
      background: rgba(255, 255, 255, 0.85);
      color: #0f172a;
      border: 1px solid rgba(148, 163, 184, 0.55);
      border-radius: 14px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
   }

   body.delivery-page {
      background: #f5f7fb;
   }

   body.delivery-page .page-title {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      font-size: 2.4rem;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: .2px;
      margin: 0;
   }

   body.delivery-page .page-title i {
      color: #0ea5e9;
   }

   body.delivery-page .delivery-top {
      display: flex;
      flex-direction: column;
   }

   @media (min-width: 769px){
      body.delivery-page .delivery-top .filters-card { order: -1; }
   }

   body.delivery-page .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.2rem;
      margin-bottom: 2rem;
   }

   body.delivery-page .stat-card {
      background: #fff;
      border-radius: 20px;
      padding: 1.4rem 1.6rem;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      border: 1px solid rgba(15, 23, 42, 0.06);
   }

   body.delivery-page .stat-card h3 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 700;
      color: #1f2937;
      display: flex;
      align-items: center;
      gap: 0.45rem;
   }

   body.delivery-page .stat-value {
      font-size: 2.1rem;
      font-weight: 800;
      color: #111827;
   }

   body.delivery-page .stat-meta {
      color: #6b7280;
      font-weight: 600;
      font-size: 0.92rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem;
   }

   body.delivery-page .filters-card {
      background: #fff;
      border-radius: 16px;
      padding: 1rem 1.2rem;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
      border: 1px solid rgba(15, 23, 42, 0.06);
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: flex-end;
      margin-bottom: 1.8rem;
   }

   body.delivery-page .filters-card label {
      font-weight: 700;
      color: #1f2937;
      font-size: 0.95rem;
      margin-bottom: 0.35rem;
      display: block;
   }

   body.delivery-page .filters-card input {
      border: 2px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      padding: 0.65rem 0.85rem;
      font-size: 1rem;
      min-width: 180px;
   }

   body.delivery-page .filters-card input:focus {
      border-color: #0ea5e9;
      outline: none;
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
   }

   body.delivery-page .btn {
      border: none;
      border-radius: 12px;
      padding: 0.85rem 1.4rem;
      font-size: 1rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      text-decoration: none;
      justify-content: center;
      white-space: nowrap;
   }

   body.delivery-page .btn.btn-primary {
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      color: #fff;
      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
   }

   body.delivery-page .btn.btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.26);
   }

   body.delivery-page .btn.btn-outline,
   body.delivery-page .btn.btn-history {
      background: rgba(255, 255, 255, 0.85);
      color: #0f172a;
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
      backdrop-filter: blur(6px);
   }

   body.delivery-page .btn.btn-outline:hover,
   body.delivery-page .btn.btn-history:hover {
      border-color: rgba(148, 163, 184, 0.75);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
      transform: none;
   }

   body.delivery-page .actions-group {
      display: flex;
      gap: 0.8rem;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
   }

   @media (max-width: 960px){
      body.delivery-page .page-title { font-size: 2rem; }
      body.delivery-page .stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
   }

   @media (max-width: 768px){
      body.delivery-page .filters-card { width: 100%; }
      body.delivery-page .filters-card input { min-width: unset; width: 100%; }
      body.delivery-page .actions-group { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
      body.delivery-page .actions-group .btn { flex: 1 1 0; min-width: 0; padding: 0.8rem 1.1rem; }
      body.delivery-page .stats-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
   }

   @media (max-width: 600px){
      body.delivery-page .page-title { font-size: 1.9rem; }
      body.delivery-page .dashboard > div:first-of-type { flex-direction: column; align-items: flex-start !important; }
      body.delivery-page .actions-group { width: 100%; gap: 0.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      body.delivery-page .actions-group .btn { width: 100%; justify-content: center; padding: 0.75rem 0.9rem; font-size: 0.95rem; }

      body.delivery-page .filters-card { gap: 0.8rem; padding: 0.9rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      body.delivery-page .filters-card .form-group { flex: unset; }
      body.delivery-page .filters-card .form-group:nth-child(1),
      body.delivery-page .filters-card .form-group:nth-child(2) { grid-column: 1 / -1; }
      body.delivery-page .filters-card .form-group:nth-child(3) { grid-column: 1; }
      body.delivery-page .filters-card .form-group:nth-child(4) { grid-column: 2; }
      body.delivery-page .filters-card button,
      body.delivery-page .filters-card a { width: 100%; }
   }

   @media (max-width: 420px){
      body.delivery-page .actions-group .btn { padding: 0.7rem 0.8rem; font-size: 0.9rem; }
   }
 </style>
</head>
<body class="delivery-page">

<?php include '../components/admin_header.php' ?>

 <section class="dashboard">
   <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1rem;">
      <h1 class="page-title"><i class="fas fa-truck"></i> Pedidos a Domicilio</h1>
      <div class="actions-group">
         <button class="btn btn-primary" type="button" onclick="mostrarModalAgregar()"><i class="fas fa-plus"></i> Agregar Pedido</button>
         <a class="btn btn-outline btn-history" href="delivery_history.php"><i class="fas fa-history"></i> Historial</a>
      </div>
   </div>

   <?php if ($canViewInsights): ?>
   <div class="delivery-top">
   <div class="stats-grid">
      <div class="stat-card">
         <h3><i class="fas fa-calendar-day"></i> Hoy</h3>
         <div class="stat-value"><?= htmlspecialchars(formatMoney((float)$stats_today['total_recaudado'], $conn)); ?></div>
         <div class="stat-meta"><span><i class="fas fa-receipt"></i> <?= (int)$stats_today['total_pedidos']; ?> pedidos</span><span><i class="fas fa-check-circle"></i> Entregados: <?= (int)$deliveredToday; ?></span></div>
      </div>
      <div class="stat-card">
         <h3><i class="fas fa-calendar-range"></i> Rango seleccionado</h3>
         <div class="stat-value"><?= htmlspecialchars(formatMoney((float)$stats_range['total_recaudado'], $conn)); ?></div>
         <div class="stat-meta"><span><?= $fecha_desde_safe; ?> → <?= $fecha_hasta_safe; ?></span><span><i class="fas fa-receipt"></i> <?= (int)$stats_range['total_pedidos']; ?> pedidos</span></div>
      </div>
      <div class="stat-card">
         <h3><i class="fas fa-check-circle"></i> Entregados</h3>
         <div class="stat-value"><?= number_format($deliveredRange, 0, ',', '.'); ?></div>
         <div class="stat-meta"><span><i class="fas fa-calendar-day"></i> Hoy: <?= number_format($deliveredToday, 0, ',', '.'); ?></span><span><i class="fas fa-history"></i> Rango: <?= number_format($deliveredRange, 0, ',', '.'); ?></span></div>
      </div>
      <div class="stat-card">
         <h3><i class="fas fa-bolt"></i> En curso</h3>
         <div class="stat-value"><?= number_format($inProgressToday, 0, ',', '.'); ?></div>
         <div class="stat-meta"><span><i class="fas fa-clock"></i> Pend: <?= (int)$todayStatusCounts['pendiente']; ?></span><span><i class="fas fa-spinner"></i> Prep: <?= (int)$todayStatusCounts['en_preparacion']; ?> · <i class="fas fa-truck"></i> Camino: <?= (int)$todayStatusCounts['en_camino']; ?></span></div>
      </div>
   </div>

   <form class="filters-card" method="GET">
      <div class="form-group">
         <label for="fecha_desde">Desde</label>
         <input type="date" id="fecha_desde" name="fecha_desde" value="<?= $fecha_desde_safe; ?>">
      </div>
      <div class="form-group">
         <label for="fecha_hasta">Hasta</label>
         <input type="date" id="fecha_hasta" name="fecha_hasta" value="<?= $fecha_hasta_safe; ?>">
      </div>
      <div class="form-group">
         <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i> Aplicar</button>
      </div>
      <div class="form-group">
         <a class="btn btn-outline" href="delivery_orders.php"><i class="fas fa-undo"></i> Restablecer</a>
      </div>
   </form>
   </div>

   <?php endif; ?>

   <!-- Lista de Pedidos -->
   <div class="orders-container<?= empty($orders) ? ' orders-empty' : '' ?>">
      <?php
      if(!empty($orders)) {
         foreach($orders as $index => $order){
           $items = json_decode($order['order_items'], true);
           $displayNumber = (isset($order['order_number']) && (int)$order['order_number'] > 0)
              ? (int)$order['order_number']
              : ($index + 1);
           $preparerNames = trim((string)($order['preparer_names'] ?? ''));
           if($preparerNames === '' && !empty($order['preparer_name'])){
              $preparerNames = (string)$order['preparer_name'];
           }
           $preparerIdsAttr = trim((string)($order['preparer_ids'] ?? ''));
           if($preparerIdsAttr === '' && isset($order['preparer_id']) && $order['preparer_id'] !== null){
              $preparerIdsAttr = (string)(int)$order['preparer_id'];
           }
      ?>
      <div class="order-card"
           data-order-id="<?= $order['id'] ?>"
           data-customer="<?= htmlspecialchars($order['customer_name'], ENT_QUOTES) ?>"
           data-phone="<?= htmlspecialchars($order['phone'], ENT_QUOTES) ?>"
           data-address="<?= htmlspecialchars($order['address'], ENT_QUOTES) ?>"
           data-payment="<?= htmlspecialchars($order['payment_method'], ENT_QUOTES) ?>"
           data-notes="<?= htmlspecialchars($order['notes'], ENT_QUOTES) ?>"
           data-status="<?= htmlspecialchars($order['status'], ENT_QUOTES) ?>"
           data-items="<?= htmlspecialchars(base64_encode($order['order_items']), ENT_QUOTES) ?>"
           data-total="<?= (float)$order['total_amount'] ?>"
          data-preparer-id="<?= isset($order['preparer_id']) ? (int)$order['preparer_id'] : '' ?>"
          data-preparer-ids="<?= htmlspecialchars($preparerIdsAttr, ENT_QUOTES, 'UTF-8'); ?>">
         <span class="order-status <?= $order['status'] ?>"><?= str_replace('_', ' ', $order['status']) ?></span>
         
         <div class="order-header">
            <div class="order-number">Pedido #<?= $displayNumber ?></div>
            <div class="order-datetime">
               <i class="far fa-clock"></i>
               <?= date('d/m/Y h:i A', strtotime($order['created_at'])) ?>
            </div>
         </div>

         <div class="customer-info">
            <div class="customer-name"><?= htmlspecialchars($order['customer_name']) ?></div>
            <div class="customer-detail">
               <i class="fas fa-phone"></i> <?= htmlspecialchars($order['phone']) ?>
            </div>
            <div class="customer-detail">
               <i class="fas fa-map-marker-alt"></i> <?= htmlspecialchars($order['address']) ?>
            </div>
            <div class="customer-detail">
               <i class="fas fa-money-bill-wave"></i> <?= ucfirst($order['payment_method']) ?>
            </div>
            <?php if($preparerNames !== ''): ?>
           <div class="customer-detail">
              <i class="fas fa-user-tie"></i> Preparadores: <?= htmlspecialchars($preparerNames) ?>
           </div>
           <?php endif; ?>
         </div>

         <div class="order-items">
            <div class="order-items-title">Productos:</div>
            <?php
            if(is_array($items)) {
               foreach($items as $item) {
                  $costo = isset($item['coste']) ? (float)$item['coste'] : null;
                  $pid = (int)($item['id'] ?? 0);
                  $prepForItem = $pid > 0 ? trim((string)($productPrepMap[$pid] ?? '')) : '';
                  if($prepForItem === ''){
                     $prepForItem = $preparerNames;
                  }
                  echo '<div class="order-item">';
                  echo '<span>' . $item['cantidad'] . 'x ' . htmlspecialchars($item['nombre']) .
                     ($prepForItem !== '' ? '<br><small style="display:block;color:#6b7280;font-weight:700;">Preparador: ' . htmlspecialchars($prepForItem) . '</small>' : '') .
                     '</span>';
                  echo '<span>';
                  echo htmlspecialchars(formatMoney((float)($item['precio'] * $item['cantidad']), $conn));
                  if($costo !== null) {
                     echo '<br><small style="display:block;color:#6b7280;">Costo unit: ' . htmlspecialchars(formatMoney((float)$costo, $conn)) . '</small>';
                  }
                  echo '</span>';
                  echo '</div>';
               }
            }
            ?>
         </div>

         <div class="order-total">
            <span>Total:</span>
            <span><?= htmlspecialchars(formatMoney((float)$order['total_amount'], $conn)); ?></span>
         </div>

         <?php if($order['notes']) { ?>
         <div class="customer-detail" style="background: #fff3cd; padding: 0.5rem; border-radius: 5px; margin-bottom: 1rem;">
            <i class="fas fa-sticky-note"></i> <?= htmlspecialchars($order['notes']) ?>
         </div>
         <?php } ?>

         <div class="order-actions">
            <button class="btn-action btn-status" onclick="cambiarEstado(<?= $order['id'] ?>, '<?= $order['status'] ?>')">
               <i class="fas fa-sync-alt"></i> Estado
            </button>
            <button class="btn-action btn-print" onclick="imprimirPedido(<?= $order['id'] ?>)">
               <i class="fas fa-print"></i> Imprimir
            </button>
            <button class="btn-action btn-edit" onclick="mostrarModalEditar(this)">
               <i class="fas fa-edit"></i> Editar
            </button>
            <button class="btn-action btn-delete" onclick="eliminarPedido(<?= $order['id'] ?>)">
               <i class="fas fa-trash"></i> Eliminar
            </button>
         </div>
      </div>
      <?php
         }
      } else {
      ?>
      <div class="empty-state">
         <i class="fas fa-box-open"></i>
         <h3>No hay pedidos en este período</h3>
         <p>Cambia el rango de fechas o agrega un nuevo pedido</p>
      </div>
      <?php } ?>
   </div>
</section>

<!-- Modal para editar pedido -->
<div class="modal-overlay" id="editOrderOverlay">
  <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="editOrderTitle">
    <div class="modal-header">
      <div class="modal-title" id="editOrderTitle"><i class="fas fa-edit"></i> Editar Pedido a Domicilio</div>
      <button class="modal-close" id="closeEditOrder" aria-label="Cerrar"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <form id="editOrderForm">
        <input type="hidden" name="order_id" id="editOrderId">
        <div class="grid-three">
          <div>
            <div class="form-group">
              <label class="form-label" for="editCustomerName">Nombre y Apellido</label>
              <input type="text" id="editCustomerName" name="customer_name" class="form-control" required>
            </div>
            <div class="form-group">
              <label class="form-label" for="editPhone">Teléfono Celular</label>
              <input type="tel" id="editPhone" name="phone" class="form-control" required>
            </div>
            <div class="form-group">
              <label class="form-label" for="editAddress">Dirección</label>
              <textarea id="editAddress" name="address" class="form-control" rows="3" required></textarea>
            </div>
            <div class="form-group">
              <label class="form-label" for="editPayment">Método de Pago</label>
              <select id="editPayment" name="payment_method" class="form-select" required>
                <option value="">Seleccione un método</option>
                <option value="efectivo">Efectivo</option>
                <option value="transferencia">Transferencia</option>
              </select>
            </div>
            <div class="form-group preparer-group">
              <label class="form-label">Preparadores</label>
              <div class="preparer-control" data-context="edit">
                <div class="preparer-checklist" id="editPreparerChecklist">
                  <?php foreach($preparers as $prep): ?>
                  <div class="check-item" data-preparer-id="<?= (int)$prep['id']; ?>">
                    <label class="checkbox-part">
                      <input type="checkbox" class="preparer-checkbox" value="<?= (int)$prep['id']; ?>">
                      <span><?= htmlspecialchars($prep['name']); ?></span>
                    </label>
                  </div>
                  <?php endforeach; ?>
                </div>
                <small class="preparer-hint">Selecciona a todos los preparadores que participaron (el primero será el principal).</small>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label" for="editStatus">Estado del Pedido</label>
              <select id="editStatus" name="status" class="form-select" required>
                <option value="pendiente">Pendiente</option>
                <option value="en_preparacion">En Preparación</option>
                <option value="en_camino">En Camino</option>
                <option value="entregado">Entregado</option>
                <option value="cancelado">Cancelado</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label" for="editNotes">Notas (Opcional)</label>
              <textarea id="editNotes" name="notes" class="form-control" rows="2"></textarea>
            </div>
          </div>
          <div>
            <div class="form-group">
              <label class="form-label" for="editModalCategoryFilter">Filtrar por Categoría</label>
              <select id="editModalCategoryFilter" class="form-select">
                <option value="">Seleccione una categoría</option>
                <?php foreach($categorias as $cat): ?>
                  <option value="<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <div class="products-container">
                <div id="editCategoryPlaceholder" class="category-placeholder">
                  Selecciona una categoría para ver los productos disponibles.
                </div>
                <?php
                  $productosPorCategoria = [];
                  foreach ($productos as $producto) {
                    $ck = normaliza_categoria($producto['category_name']);
                    if (!isset($productosPorCategoria[$ck])) $productosPorCategoria[$ck] = [];
                    $producto['sale_price'] = isset($producto['sale_price']) && $producto['sale_price'] > 0 ? $producto['sale_price'] : $producto['price'];
                    $productosPorCategoria[$ck][] = $producto;
                  }
                  foreach ($categorias as $cat):
                    $key = normaliza_categoria($cat['name']);
                    if (!isset($productosPorCategoria[$key])) continue;
                ?>
                  <div class="category-block categoria-<?= $key ?>" data-category="<?= $key ?>">
                    <h3 class="category-title"><?= htmlspecialchars($cat['name']) ?></h3>
                    <div class="products-grid">
                      <?php foreach ($productosPorCategoria[$key] as $p): ?>
                        <div class="product-card"
                             data-product-id="<?= (int)$p['id'] ?>"
                             data-cost="<?= (float)$p['price'] ?>"
                             data-sale="<?= (float)$p['sale_price'] ?>"
                             data-preparer-names="<?= htmlspecialchars((string)($p['preparer_names'] ?? ''), ENT_QUOTES, 'UTF-8') ?>"
                             data-preparer-ids="<?= htmlspecialchars((string)($p['preparer_ids'] ?? ''), ENT_QUOTES, 'UTF-8') ?>">
                          <img src="../uploaded_img/<?= htmlspecialchars($p['image']) ?>" alt="<?= htmlspecialchars($p['name']) ?>" class="product-image">
                          <div style="flex:1;">
                            <div class="product-name"><?= htmlspecialchars($p['name']) ?></div>
                            <div class="product-price">
                              <strong>Venta:</strong> <?= htmlspecialchars(formatMoney((float)$p['sale_price'], $conn)); ?><br>
                              <small style="color:#64748b;">Costo: <?= htmlspecialchars(formatMoney((float)$p['price'], $conn)); ?></small>
                            </div>
                          </div>
                          <div class="product-quantity">
                            <button type="button" class="btn-quantity" onclick="updateEditQuantity(<?= (int)$p['id'] ?>, -1, '<?= htmlspecialchars($p['name'], ENT_QUOTES) ?>', <?= (float)$p['sale_price'] ?>, <?= (float)$p['price'] ?>)">-</button>
                            <span class="quantity-display" id="edit-qty-<?= (int)$p['id'] ?>">0</span>
                            <button type="button" class="btn-quantity" onclick="updateEditQuantity(<?= (int)$p['id'] ?>, 1, '<?= htmlspecialchars($p['name'], ENT_QUOTES) ?>', <?= (float)$p['sale_price'] ?>, <?= (float)$p['price'] ?>)">+</button>
                          </div>
                        </div>
                      <?php endforeach; ?>
                    </div>
                  </div>
                <?php endforeach; ?>
              </div>
            </div>
          </div>
          <div class="cart-sticky">
            <div class="cart-section">
              <h3 class="cart-title"><span><i class="fas fa-shopping-cart"></i> Resumen del Pedido</span></h3>
              <div id="editModalCartItems" class="cart-items"></div>
              <div class="cart-total">Total: <span id="editModalTotalAmount">0</span></div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary" type="button" id="cancelEditOrder">Cancelar</button>
      <button class="btn-primary" type="submit" form="editOrderForm" id="saveEditOrder" disabled>Actualizar Pedido</button>
    </div>
  </div>
</div>

<!-- Modal para agregar pedido -->
<div class="modal-overlay" id="addOrderOverlay">
  <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="addOrderTitle">
    <div class="modal-header">
      <div class="modal-title" id="addOrderTitle"><i class="fas fa-plus-circle"></i> Nuevo Pedido a Domicilio</div>
      <button class="modal-close" id="closeAddOrder" aria-label="Cerrar"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
      <form id="addOrderForm">
        <div class="grid-three">
          <div>
            <div class="form-group">
              <label class="form-label">Nombre y Apellido</label>
              <input type="text" name="customer_name" class="form-control" required>
            </div>
            <div class="form-group">
              <label class="form-label">Teléfono Celular</label>
              <input type="tel" name="phone" class="form-control" required>
            </div>
            <div class="form-group">
              <label class="form-label">Dirección</label>
              <textarea name="address" class="form-control" rows="3" required></textarea>
            </div>
            <div class="form-group">
              <label class="form-label">Método de Pago</label>
              <select name="payment_method" class="form-select" required>
                <option value="">Seleccione un método</option>
                <option value="efectivo">Efectivo</option>
                <option value="transferencia">Transferencia</option>
              </select>
            </div>
            <div class="form-group preparer-group">
              <label class="form-label">Preparadores</label>
              <div class="preparer-control" data-context="add">
                <div class="preparer-checklist" id="addPreparerChecklist">
                  <?php foreach($preparers as $prep): ?>
                  <div class="check-item" data-preparer-id="<?= (int)$prep['id']; ?>">
                    <label class="checkbox-part">
                      <input type="checkbox" class="preparer-checkbox" value="<?= (int)$prep['id']; ?>">
                      <span><?= htmlspecialchars($prep['name']); ?></span>
                    </label>
                  </div>
                  <?php endforeach; ?>
                </div>
                <small class="preparer-hint">Marca a los preparadores que atenderán el pedido (el primero seleccionado será el principal).</small>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">Notas (Opcional)</label>
              <textarea name="notes" class="form-control" rows="2"></textarea>
            </div>
          </div>
          <div>
            <div class="form-group">
              <label class="form-label">Filtrar por Categoría</label>
              <select id="modalCategoryFilter" class="form-select">
                <option value="">Seleccione una categoría</option>
                <?php foreach($categorias as $cat): ?>
                  <option value="<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></option>
                <?php endforeach; ?>
              </select>
            </div>
            <div class="form-group">
              <div class="products-container">
                <div id="categoryPlaceholder" class="category-placeholder">
                  Selecciona una categoría para ver los productos disponibles.
                </div>
                <?php
                  $productosPorCategoria = [];
                  foreach ($productos as $producto) {
                    $ck = normaliza_categoria($producto['category_name']);
                    if (!isset($productosPorCategoria[$ck])) {
                      $productosPorCategoria[$ck] = [];
                    }
                    $salePrice = isset($producto['sale_price']) && (float)$producto['sale_price'] > 0
                      ? (float)$producto['sale_price']
                      : (float)$producto['price'];
                    $producto['sale_price'] = $salePrice;
                    $producto['price'] = (float)$producto['price'];
                    $productosPorCategoria[$ck][] = $producto;
                  }
                  foreach ($categorias as $cat):
                    $key = normaliza_categoria($cat['name']);
                    if (!isset($productosPorCategoria[$key])) continue;
                ?>
                  <div class="category-block categoria-<?= $key ?>" data-category="<?= $key ?>">
                    <h3 class="category-title"><?= htmlspecialchars($cat['name']) ?></h3>
                    <div class="products-grid">
                      <?php foreach ($productosPorCategoria[$key] as $p): ?>
                        <div class="product-card"
                             data-product-id="<?= (int)$p['id'] ?>"
                             data-cost="<?= (float)$p['price'] ?>"
                             data-sale="<?= (float)$p['sale_price'] ?>"
                             data-preparer-names="<?= htmlspecialchars((string)($p['preparer_names'] ?? ''), ENT_QUOTES, 'UTF-8') ?>"
                             data-preparer-ids="<?= htmlspecialchars((string)($p['preparer_ids'] ?? ''), ENT_QUOTES, 'UTF-8') ?>">
                          <img src="../uploaded_img/<?= htmlspecialchars($p['image']) ?>" alt="<?= htmlspecialchars($p['name']) ?>" class="product-image">
                          <div style="flex:1;">
                            <div class="product-name"><?= htmlspecialchars($p['name']) ?></div>
                            <div class="product-price">
                              <strong>Venta:</strong> <?= htmlspecialchars(formatMoney((float)$p['sale_price'], $conn)); ?><br>
                              <small style="color:#64748b;">Costo: <?= htmlspecialchars(formatMoney((float)$p['price'], $conn)); ?></small>
                            </div>
                          </div>
                          <div class="product-quantity">
                            <button type="button" class="btn-quantity" onclick="updateQuantity(<?= (int)$p['id'] ?>, -1, '<?= htmlspecialchars($p['name'], ENT_QUOTES) ?>', <?= (float)$p['sale_price'] ?>, <?= (float)$p['price'] ?>)">-</button>
                            <span class="quantity-display" id="qty-<?= (int)$p['id'] ?>">0</span>
                            <button type="button" class="btn-quantity" onclick="updateQuantity(<?= (int)$p['id'] ?>, 1, '<?= htmlspecialchars($p['name'], ENT_QUOTES) ?>', <?= (float)$p['sale_price'] ?>, <?= (float)$p['price'] ?>)">+</button>
                          </div>
                        </div>
                      <?php endforeach; ?>
                    </div>
                  </div>
                <?php endforeach; ?>
              </div>
            </div>
          </div>
          <div class="cart-sticky">
            <div class="cart-section">
              <h3 class="cart-title"><span><i class="fas fa-shopping-cart"></i> Resumen del Pedido</span></h3>
              <div id="modalCartItems" class="cart-items"></div>
              <div class="cart-total">Total: <span id="modalTotalAmount">0</span></div>
            </div>
          </div>
        </div>

      </form>
    </div>
    <div class="modal-footer">
      <button class="btn-secondary" type="button" id="cancelAddOrder">Cancelar</button>
      <button class="btn-primary" type="submit" form="addOrderForm" id="saveAddOrder" disabled>Guardar Pedido</button>
    </div>
  </div>
  
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let cart = {};
let total = 0;
let editCart = {};
let editTotal = 0;

function getPreparerChecklist(context){
  return document.getElementById(`${context}PreparerChecklist`);
}

function getPrimarySelection(context){
  const checklist = getPreparerChecklist(context);
  if(!checklist) return '';
  const checked = checklist.querySelector('.preparer-checkbox:checked');
  return checked ? checked.value : '';
}

function updatePreparerIndicators(context){
  const checklist = getPreparerChecklist(context);
  if(!checklist) return;
  const primaryId = getPrimarySelection(context);
  checklist.querySelectorAll('.check-item').forEach(row => {
    const checkbox = row.querySelector('.preparer-checkbox');
    const checked = !!checkbox?.checked;
    row.classList.toggle('is-selected', checked);
    row.classList.toggle('is-primary', checked && row.dataset.preparerId === primaryId);
  });
}

function handlePreparerCheckbox(context){
  updatePreparerIndicators(context);
}

function resetPreparerChecklist(context){
  const checklist = getPreparerChecklist(context);
  if(!checklist) return;
  checklist.querySelectorAll('.preparer-checkbox').forEach(cb => { cb.checked = false; });
  updatePreparerIndicators(context);
}

function populatePreparerChecklist(context, rawCsv){
  resetPreparerChecklist(context);
  const checklist = getPreparerChecklist(context);
  if(!checklist) return;
  const ids = (rawCsv || '').split(',').map(v => v.trim()).filter(Boolean);
  ids.forEach(id => {
    const checkbox = checklist.querySelector(`.preparer-checkbox[value="${id}"]`);
    if(checkbox){
      checkbox.checked = true;
    }
  });
  updatePreparerIndicators(context);
}

function getCombinedPreparerIds(context){
  const checklist = getPreparerChecklist(context);
  if(!checklist) return '';
  const ids = [];
  checklist.querySelectorAll('.preparer-checkbox').forEach(cb => {
    if(cb.checked && cb.value && !ids.includes(cb.value)){
      ids.push(cb.value);
    }
  });
  return ids.join(',');
}

function initPreparerChecklist(context){
  const checklist = getPreparerChecklist(context);
  if(!checklist) return;
  checklist.querySelectorAll('.preparer-checkbox').forEach(cb => {
    cb.addEventListener('change', () => handlePreparerCheckbox(context));
  });
  updatePreparerIndicators(context);
}

document.addEventListener('DOMContentLoaded', () => {
  ['add','edit'].forEach(context => initPreparerChecklist(context));
});

function mostrarModalAgregar() {
  const overlay = document.getElementById('addOrderOverlay');
  overlay.classList.add('show');
  document.body.style.overflow = 'hidden';
  // reset form
  document.getElementById('addOrderForm').reset();
  cart = {}; total = 0; updateCart();
  resetPreparerChecklist('add');
  document.querySelectorAll('.quantity-display').forEach(el => el.textContent = '0');
  const categorySelect = document.getElementById('modalCategoryFilter');
  if (categorySelect) {
    categorySelect.value = '';
  }
  resetModalCategories();
}

function mostrarModalEditar(button) {
  const card = button.closest('.order-card');
  if (!card) return;
  const overlay = document.getElementById('editOrderOverlay');
  overlay.classList.add('show');
  document.body.style.overflow = 'hidden';

  const orderId = card.dataset.orderId;
  const customer = card.dataset.customer || '';
  const phone = card.dataset.phone || '';
  const address = card.dataset.address || '';
  const payment = card.dataset.payment || '';
  const notes = card.dataset.notes || '';
  const status = card.dataset.status || 'pendiente';
  const encodedItems = card.dataset.items || '';
  let items = [];
  try {
    const decoded = encodedItems ? atob(encodedItems) : '[]';
    items = JSON.parse(decoded || '[]');
    if (!Array.isArray(items)) items = [];
  } catch (e) {
    items = [];
  }

  editCart = {};
  editTotal = 0;

  document.getElementById('editOrderId').value = orderId;
  document.getElementById('editCustomerName').value = customer;
  document.getElementById('editPhone').value = phone;
  document.getElementById('editAddress').value = address;
  document.getElementById('editPayment').value = payment;
  document.getElementById('editNotes').value = notes;
  document.getElementById('editStatus').value = status;
  populatePreparerChecklist('edit', card.dataset.preparerIds || card.dataset.preparerId || '');

  const categorySelect = document.getElementById('editModalCategoryFilter');
  if (categorySelect) categorySelect.value = '';

  document.querySelectorAll('[id^="edit-qty-"]').forEach(el => el.textContent = '0');

  items.forEach(item => {
    const id = parseInt(item.id);
    if (!id) return;
    const qtyDisplay = document.getElementById('edit-qty-' + id);
    if (qtyDisplay) qtyDisplay.textContent = item.cantidad;
    editCart[id] = {
      id,
      nombre: item.nombre,
      precio: parseFloat(item.precio),
      coste: item.coste !== undefined ? parseFloat(item.coste) : 0,
      cantidad: parseInt(item.cantidad)
    };
  });

  updateEditCart();
  resetEditModalCategories();
}

function cerrarModalAgregar() {
  const overlay = document.getElementById('addOrderOverlay');
  overlay.classList.remove('show');
  document.body.style.overflow = '';
}

function cerrarModalEditar() {
  const overlay = document.getElementById('editOrderOverlay');
  overlay.classList.remove('show');
  document.body.style.overflow = '';
  const categorySelect = document.getElementById('editModalCategoryFilter');
  if (categorySelect) categorySelect.value = '';
  resetPreparerChecklist('edit');
}

document.getElementById('closeAddOrder')?.addEventListener('click', cerrarModalAgregar);
document.getElementById('cancelAddOrder')?.addEventListener('click', cerrarModalAgregar);
document.getElementById('addOrderOverlay')?.addEventListener('click', (e) => {
  if (e.target.id === 'addOrderOverlay') cerrarModalAgregar();
});

document.getElementById('closeEditOrder')?.addEventListener('click', cerrarModalEditar);
document.getElementById('cancelEditOrder')?.addEventListener('click', cerrarModalEditar);
document.getElementById('editOrderOverlay')?.addEventListener('click', (e) => {
  if (e.target.id === 'editOrderOverlay') cerrarModalEditar();
});

function resetModalCategories(){
  filterModalCategory('');
}

function filterModalCategory(cat){
  const placeholder = document.getElementById('categoryPlaceholder');
  const blocks = document.querySelectorAll('#addOrderForm .category-block');
  const targetKey = (cat || '').toString().trim().toLowerCase();
  let anyVisible = false;
  blocks.forEach(b => {
    const blockKey = (b.dataset.category || '').toString().trim().toLowerCase();
    if (targetKey && blockKey === targetKey) {
      b.style.display = 'block';
      anyVisible = true;
    } else {
      b.style.display = 'none';
    }
  });
  if (placeholder) {
    placeholder.style.display = anyVisible ? 'none' : 'flex';
  }
  const productsContainer = document.querySelector('#addOrderForm .products-container');
  if (productsContainer) {
    productsContainer.scrollTop = 0;
  }
}

document.getElementById('modalCategoryFilter')?.addEventListener('change', function(){
  filterModalCategory(this.value);
});

function resetEditModalCategories(){
  filterEditModalCategory('');
}

function filterEditModalCategory(cat){
  const placeholder = document.getElementById('editCategoryPlaceholder');
  const blocks = document.querySelectorAll('#editOrderForm .category-block');
  const targetKey = (cat || '').toString().trim().toLowerCase();
  let anyVisible = false;
  blocks.forEach(b => {
    const blockKey = (b.dataset.category || '').toString().trim().toLowerCase();
    if (targetKey && blockKey === targetKey) {
      b.style.display = 'block';
      anyVisible = true;
    } else {
      b.style.display = 'none';
    }
  });
  if (placeholder) {
    placeholder.style.display = anyVisible ? 'none' : 'flex';
  }
  const productsContainer = document.querySelector('#editOrderForm .products-container');
  if (productsContainer) productsContainer.scrollTop = 0;
}

document.getElementById('editModalCategoryFilter')?.addEventListener('change', function(){
  filterEditModalCategory(this.value);
});

function updateQuantity(id, change, name, salePrice, costPrice){
  const qEl = document.getElementById('qty-' + id);
  let q = parseInt(qEl.textContent) || 0;
  q = Math.max(0, q + change);
  qEl.textContent = q;
  if (q === 0) {
    delete cart[id];
  } else {
    const prod = document.querySelector(`.product-card[data-product-id="${id}"]`);
    const prepNames = prod ? (prod.dataset.preparerNames || '') : '';
    const prepIds = prod ? (prod.dataset.preparerIds || '') : '';
    cart[id] = {
      id,
      nombre: name,
      precio: parseFloat(salePrice),
      coste: typeof costPrice !== 'undefined' ? parseFloat(costPrice) : 0,
      cantidad: q,
      preparer_names: prepNames,
      preparer_ids: prepIds
    };
  }
  updateCart();
}

function updateCart(){
  const list = document.getElementById('modalCartItems');
  const totalEl = document.getElementById('modalTotalAmount');
  const saveBtn = document.getElementById('saveAddOrder');
  if (!list || !totalEl) return;
  if (Object.keys(cart).length === 0){
    list.innerHTML = '<div class="cart-empty"><i class="fas fa-clipboard-list"></i><strong>No hay productos seleccionados</strong><small>Elige una categoría y agrega tus comidas favoritas</small></div>';
    total = 0; totalEl.textContent = '0'; saveBtn.disabled = true;
    return;
  }
  let html = '';
  total = 0;
  Object.values(cart).forEach(item => {
    const subtotal = item.precio * item.cantidad;
    const subtotalCost = (item.coste || 0) * item.cantidad;
    total += subtotal;
    html += `<div class="cart-item">
      <div class="cart-item-info"><span>${item.cantidad}x ${item.nombre}</span>
        <small class="cart-item-subtotal">
          Venta: ${(window.formatMoneyJs ? window.formatMoneyJs(subtotal) : subtotal.toLocaleString('es-CO'))}
          ${item.coste ? `<br><span style="color:#64748b;">Costo: ${(window.formatMoneyJs ? window.formatMoneyJs(subtotalCost) : subtotalCost.toLocaleString('es-CO'))}</span>` : ''}
          ${item.preparer_names ? `<br><span style="color:#64748b; font-weight:700;">Preparador: ${item.preparer_names}</span>` : ''}
        </small>
      </div>
      <div class="cart-item-actions">
        <button type="button" class="cart-remove-btn" onclick="removeFromCart(${item.id})"><i class="fas fa-times"></i> Quitar</button>
      </div>
    </div>`;
  });
  list.innerHTML = html;
  totalEl.textContent = window.formatMoneyJs ? window.formatMoneyJs(total) : total.toLocaleString('es-CO');
  saveBtn.disabled = false;

  autoPopulatePreparersFromCart('add');
}

function derivePreparerIdsFromCart(cartObj){
  const ids = [];
  Object.values(cartObj).forEach(item => {
    const csv = (item.preparer_ids || '').toString();
    csv.split(',').map(v => v.trim()).filter(Boolean).forEach(v => {
      if(!ids.includes(v)){
        ids.push(v);
      }
    });
  });
  return ids.join(',');
}

function autoPopulatePreparersFromCart(context){
  const current = getCombinedPreparerIds(context);
  if(current) return;
  const derived = (context === 'add') ? derivePreparerIdsFromCart(cart) : derivePreparerIdsFromCart(editCart);
  if(!derived) return;
  populatePreparerChecklist(context, derived);
}

function removeFromCart(id){
  if (cart[id]) {
    delete cart[id];
    const qtyDisplay = document.getElementById('qty-' + id);
    if (qtyDisplay) qtyDisplay.textContent = '0';
    updateCart();
  }
}

function updateEditQuantity(id, change, name, salePrice, costPrice){
  const qEl = document.getElementById('edit-qty-' + id);
  if (!qEl) return;
  let q = parseInt(qEl.textContent) || 0;
  q = Math.max(0, q + change);
  qEl.textContent = q;
  if (q === 0) {
    delete editCart[id];
  } else {
    const prod = document.querySelector(`#editOrderForm .product-card[data-product-id="${id}"]`);
    const prepNames = prod ? (prod.dataset.preparerNames || '') : '';
    const prepIds = prod ? (prod.dataset.preparerIds || '') : '';
    editCart[id] = {
      id,
      nombre: name,
      precio: parseFloat(salePrice),
      coste: typeof costPrice !== 'undefined' ? parseFloat(costPrice) : 0,
      cantidad: q,
      preparer_names: prepNames,
      preparer_ids: prepIds
    };
  }
  updateEditCart();
}

function updateEditCart(){
  const list = document.getElementById('editModalCartItems');
  const totalEl = document.getElementById('editModalTotalAmount');
  const saveBtn = document.getElementById('saveEditOrder');
  if (!list || !totalEl) return;
  if (Object.keys(editCart).length === 0){
    list.innerHTML = '<div class="cart-empty"><i class="fas fa-clipboard-list"></i><strong>No hay productos seleccionados</strong><small>Selecciona una categoría para editar el pedido</small></div>';
    editTotal = 0; totalEl.textContent = '0'; if (saveBtn) saveBtn.disabled = true;
    return;
  }
  let html = '';
  editTotal = 0;
  Object.values(editCart).forEach(item => {
    const subtotal = item.precio * item.cantidad;
    const subtotalCost = (item.coste || 0) * item.cantidad;
    editTotal += subtotal;
    html += `<div class="cart-item">
      <div class="cart-item-info"><span>${item.cantidad}x ${item.nombre}</span>
        <small class="cart-item-subtotal">
          Venta: ${(window.formatMoneyJs ? window.formatMoneyJs(subtotal) : subtotal.toLocaleString('es-CO'))}
          ${item.coste ? `<br><span style="color:#64748b;">Costo: ${(window.formatMoneyJs ? window.formatMoneyJs(subtotalCost) : subtotalCost.toLocaleString('es-CO'))}</span>` : ''}
          ${item.preparer_names ? `<br><span style="color:#64748b; font-weight:700;">Preparador: ${item.preparer_names}</span>` : ''}
        </small>
      </div>
      <div class="cart-item-actions">
        <button type="button" class="cart-remove-btn" onclick="removeFromEditCart(${item.id})"><i class="fas fa-times"></i> Quitar</button>
      </div>
    </div>`;
  });
  list.innerHTML = html;
  totalEl.textContent = window.formatMoneyJs ? window.formatMoneyJs(editTotal) : editTotal.toLocaleString('es-CO');
  if (saveBtn) saveBtn.disabled = false;

  autoPopulatePreparersFromCart('edit');
}

function removeFromEditCart(id){
  if (editCart[id]) {
    delete editCart[id];
    const qtyDisplay = document.getElementById('edit-qty-' + id);
    if (qtyDisplay) qtyDisplay.textContent = '0';
    updateEditCart();
  }
}

document.getElementById('addOrderForm')?.addEventListener('submit', function(e){
  e.preventDefault();
  if (Object.keys(cart).length === 0){
    Swal.fire('Aviso','Debes agregar al menos un producto','warning');
    return;
  }
  const form = e.target;
  const payload = new URLSearchParams();
  payload.set('customer_name', form.customer_name.value.trim());
  payload.set('phone', form.phone.value.trim());
  payload.set('address', form.address.value.trim());
  payload.set('payment_method', form.payment_method.value);
  payload.set('notes', form.notes.value.trim());
  const prepCsv = getCombinedPreparerIds('add');
  payload.set('preparer_ids', prepCsv);
  const primaryPrep = prepCsv.split(',').map(v => v.trim()).filter(Boolean)[0] || '';
  payload.set('preparer_id', primaryPrep);
  payload.set('order_items', JSON.stringify(Object.values(cart)));
  payload.set('total_amount', String(total));

  fetch('create_delivery.php', { method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'}, body: payload.toString() })
    .then(r => r.json())
    .then(data => {
      if (data.success){
        cerrarModalAgregar();
        Swal.fire('¡Guardado!','El pedido ha sido registrado','success').then(()=>{ location.reload(); });
      } else {
        Swal.fire('Error', data.message || 'No se pudo guardar', 'error');
      }
    })
    .catch(() => Swal.fire('Error','No se pudo guardar','error'));
});

document.getElementById('editOrderForm')?.addEventListener('submit', function(e){
  e.preventDefault();
  if (Object.keys(editCart).length === 0){
    Swal.fire('Aviso','Debes agregar al menos un producto','warning');
    return;
  }
  const form = e.target;
  const payload = new URLSearchParams();
  const orderId = form.order_id?.value;
  if (!orderId) {
    Swal.fire('Error','No se pudo identificar el pedido','error');
    return;
  }
  payload.set('order_id', orderId);
  payload.set('customer_name', form.customer_name.value.trim());
  payload.set('phone', form.phone.value.trim());
  payload.set('address', form.address.value.trim());
  payload.set('payment_method', form.payment_method.value);
  payload.set('notes', form.notes.value.trim());
  payload.set('status', form.status.value);
  payload.set('order_items', JSON.stringify(Object.values(editCart)));
  payload.set('total_amount', String(editTotal));
  const editPrepCsv = getCombinedPreparerIds('edit');
  payload.set('preparer_ids', editPrepCsv);
  const editPrimary = editPrepCsv.split(',').map(v => v.trim()).filter(Boolean)[0] || '';
  payload.set('preparer_id', editPrimary);

  (async () => {
    if(form.status.value === 'entregado'){
      const ok = await confirmInventoryPreviewDelivery({
        orderId,
        orderItemsJson: JSON.stringify(Object.values(editCart)),
        title: 'Confirmar entrega del pedido',
        confirmText: 'Sí, entregar',
        confirmColor: '#22c55e'
      });
      if(!ok){
        return;
      }
    }

    fetch('update_delivery.php', {
        method:'POST',
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
        body: payload.toString(),
        credentials: 'same-origin'
      })
      .then(r => {
        if (!r.ok) throw new Error('Respuesta no válida');
        return r.json();
      })
      .then(data => {
        if (data.success){
          cerrarModalEditar();
          Swal.fire('¡Actualizado!','El pedido ha sido modificado','success').then(()=>{ location.reload(); });
        } else {
          Swal.fire('Error', data.message || 'No se pudo actualizar','error');
        }
      })
      .catch((err) => {
        console.error('Error actualizando pedido', err);
        Swal.fire('Error','No se pudo actualizar','error');
      });
  })();
});

function restablecerFiltros(){
  const form = document.querySelector('.filters-form');
  if (!form) return;
  const today = new Date().toISOString().split('T')[0];
  const desde = form.querySelector('#fecha_desde');
  const hasta = form.querySelector('#fecha_hasta');
  if (desde) desde.value = today;
  if (hasta) hasta.value = today;
  form.submit();
}

function cambiarEstado(id, estadoActual) {
   const estados = {
      'pendiente': 'Pendiente',
      'en_preparacion': 'En Preparación',
      'en_camino': 'En Camino',
      'entregado': 'Entregado',
      'cancelado': 'Cancelado'
   };

   const cardEl = document.querySelector(`.order-card[data-order-id="${id}"]`);
   if(cardEl){
      const domStatus = cardEl.getAttribute('data-status');
      if(domStatus){
         estadoActual = domStatus;
      }
   }

   function ensureEmptyState(){
      const container = document.querySelector('.orders-container');
      if(!container) return;
      const cards = container.querySelectorAll('.order-card');
      if(cards.length > 0) return;
      if(container.querySelector('.empty-state')) return;
      container.classList.add('orders-empty');
      const empty = document.createElement('div');
      empty.className = 'empty-state';
      empty.innerHTML = '<i class="fas fa-box-open"></i><h3>No hay pedidos en este período</h3><p>Cambia el rango de fechas o agrega un nuevo pedido</p>';
      container.appendChild(empty);
   }

   function removeOrderCard(orderId){
      const card = document.querySelector(`.order-card[data-order-id="${orderId}"]`);
      if(!card){
         ensureEmptyState();
         return;
      }
      card.style.transition = 'opacity 180ms ease, transform 180ms ease';
      card.style.opacity = '0';
      card.style.transform = 'translateY(-6px)';
      window.setTimeout(() => {
         try { card.remove(); } catch (e) { }
         ensureEmptyState();
      }, 190);
   }

   function updateOrderCardStatus(orderId, newStatus){
      const card = document.querySelector(`.order-card[data-order-id="${orderId}"]`);
      if(!card) return;
      const statusEl = card.querySelector('.order-status');
      if(statusEl){
         statusEl.className = `order-status ${newStatus}`;
         statusEl.textContent = String(newStatus).replace(/_/g, ' ');
      }
      card.setAttribute('data-status', newStatus);
   }
   
   Swal.fire({
      title: 'Cambiar Estado del Pedido',
      input: 'select',
      inputOptions: estados,
      inputValue: estadoActual,
      showCancelButton: true,
      confirmButtonText: 'Cambiar',
      cancelButtonText: 'Cancelar',
      confirmButtonColor: '#28a745',
      cancelButtonColor: '#6c757d',
      inputValidator: (value) => {
         if (!value) {
            return 'Debes seleccionar un estado';
         }
      }
   }).then((result) => {
      if (!result.isConfirmed) return;

      (async () => {
         if(result.value === 'entregado'){
            const ok = await confirmInventoryPreviewDelivery({
               orderId: id,
               orderItemsJson: '',
               title: 'Confirmar entrega del pedido',
               confirmText: 'Sí, entregar',
               confirmColor: '#22c55e'
            });
            if(!ok){
               return;
            }
         }

         const newStatus = result.value;
         const payload = new URLSearchParams();
         payload.set('id', String(id));
         payload.set('status', String(newStatus));

         fetch('update_delivery_status.php', {
            method: 'POST',
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: payload.toString(),
            credentials: 'same-origin'
         })
         .then(response => response.json())
         .then(data => {
            if(!data || !data.success) {
               Swal.fire('Error', (data && data.message) ? data.message : 'No se pudo actualizar el estado.', 'error');
               return;
            }

            if(newStatus === 'entregado'){
               removeOrderCard(id);
               Swal.fire('¡Entregado!', 'El pedido se movió al historial.', 'success');
               return;
            }

            updateOrderCardStatus(id, newStatus);
            Swal.fire('¡Actualizado!', 'El estado del pedido ha sido actualizado.', 'success');
         })
         .catch((err) => {
            console.error('Error actualizando estado del pedido', err);
            Swal.fire('Error', 'No se pudo actualizar el estado.', 'error');
         });
      })();
   });
}

function escapeHtml(value){
  return String(value ?? '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

function formatQty(value){
  const n = Number(value);
  if(!isFinite(n)) return '0';
  return n.toLocaleString('es-CO', { minimumFractionDigits: 0, maximumFractionDigits: 3 });
}

function buildInventoryPreviewHtml(data){
  const items = Array.isArray(data?.items) ? data.items : [];
  const summary = data?.summary || {};
  const alreadyDeducted = !!data?.already_deducted;

  if(items.length === 0){
    const msg = escapeHtml(data?.message || 'No hay insumos para descontar.');
    return `<div style="text-align:left;">
      ${alreadyDeducted ? '<div style="margin-bottom:.5rem;font-weight:800;color:#0f766e;">Inventario ya descontado para este pedido.</div>' : ''}
      <div style="color:#374151;">${msg}</div>
    </div>`;
  }

  let header = '';
  if(alreadyDeducted){
    header += '<div style="margin-bottom:.6rem;font-weight:800;color:#0f766e;">Inventario ya descontado para este pedido. No se volverá a descontar.</div>';
  }
  if((summary.negatives || 0) > 0){
    header += `<div style="margin-bottom:.35rem;font-weight:800;color:#b91c1c;">Atención: ${summary.negatives} insumo(s) quedarían en negativo.</div>`;
  }
  if((summary.lows || 0) > 0){
    header += `<div style="margin-bottom:.35rem;font-weight:800;color:#b45309;">Alerta: ${summary.lows} insumo(s) quedarían por debajo del mínimo.</div>`;
  }

  const rows = items.map(it => {
    const negative = !!it.is_negative;
    const low = !!it.is_low;
    const bg = negative ? 'rgba(185,28,28,0.08)' : (low ? 'rgba(180,83,9,0.08)' : 'transparent');
    return `<tr style="background:${bg};">
      <td style="padding:.55rem .6rem;border-bottom:1px solid #eee;font-weight:800;color:#111827;">${escapeHtml(it.name)}</td>
      <td style="padding:.55rem .6rem;border-bottom:1px solid #eee;text-align:right;font-weight:800;">${formatQty(it.needed)}</td>
      <td style="padding:.55rem .6rem;border-bottom:1px solid #eee;text-align:right;">${formatQty(it.stock)}</td>
      <td style="padding:.55rem .6rem;border-bottom:1px solid #eee;text-align:right;font-weight:900;${negative ? 'color:#b91c1c;' : (low ? 'color:#b45309;' : 'color:#0f766e;')}">${formatQty(it.after)}</td>
      <td style="padding:.55rem .6rem;border-bottom:1px solid #eee;text-align:center;color:#6b7280;font-weight:800;">${escapeHtml(it.unit || 'u')}</td>
    </tr>`;
  }).join('');

  return `<div style="text-align:left;">
    ${header}
    <div style="overflow:auto;border:1px solid #eee;border-radius:12px;">
      <table style="width:100%;border-collapse:collapse;min-width:720px;">
        <thead>
          <tr style="background:#f9fafb;">
            <th style="text-align:left;padding:.6rem .6rem;border-bottom:1px solid #eee;">Insumo</th>
            <th style="text-align:right;padding:.6rem .6rem;border-bottom:1px solid #eee;">Se descuenta</th>
            <th style="text-align:right;padding:.6rem .6rem;border-bottom:1px solid #eee;">Stock actual</th>
            <th style="text-align:right;padding:.6rem .6rem;border-bottom:1px solid #eee;">Stock después</th>
            <th style="text-align:center;padding:.6rem .6rem;border-bottom:1px solid #eee;">Unidad</th>
          </tr>
        </thead>
        <tbody>${rows}</tbody>
      </table>
    </div>
  </div>`;
}

async function confirmInventoryPreviewDelivery({ orderId, orderItemsJson, title, confirmText, confirmColor }){
  const payload = new URLSearchParams();
  payload.set('context', 'delivery');
  if(orderId) payload.set('order_id', String(orderId));
  if(orderItemsJson) payload.set('order_items', orderItemsJson);

  const res = await fetch('preview_inventory_deduction.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: payload.toString(),
    credentials: 'same-origin'
  });

  const data = await res.json().catch(() => null);
  if(!data || !data.success){
    await Swal.fire('Error', (data && data.message) ? data.message : 'No se pudo generar el preview de inventario.', 'error');
    return false;
  }

  const html = buildInventoryPreviewHtml(data);
  const icon = (data.summary && data.summary.negatives > 0) ? 'warning' : 'info';

  const result = await Swal.fire({
    title: title || 'Confirmar descuento de inventario',
    html,
    icon,
    showCancelButton: true,
    confirmButtonText: confirmText || 'Confirmar',
    cancelButtonText: 'Cancelar',
    confirmButtonColor: confirmColor || '#22c55e',
    cancelButtonColor: '#6b7280',
    width: '980px'
  });

  return !!result.isConfirmed;
}

function eliminarPedido(id) {
   Swal.fire({
      title: '¿Estás seguro?',
      text: "Esta acción no se puede deshacer",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar',
      confirmButtonColor: '#dc3545',
      cancelButtonColor: '#6c757d',
   }).then((result) => {
      if (result.isConfirmed) {
         window.location.href = 'delete_delivery.php?id=' + id;
      }
   });
}

function imprimirPedido(id) {
   if(!id){
      Swal.fire('Error', 'No se pudo identificar el pedido para imprimir.', 'error');
      return;
   }
   const url = `delivery_order_ticket.php?id=${encodeURIComponent(id)}&print=1`;
   window.open(url, '_blank');
}
</script>

</body>
</html>
User / IP	: 216.73.217.21
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64