templates/reports/working-hours.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %} 
  4.     {{ 'Horarios Laborales'|trans }}
  5. {% endblock %}
  7. {% block pageContent %}
  8.     <style>
  9.         .uv-action-bar {
  10.             border-bottom: 2px solid #e9ecef;
  11.             padding-bottom: 20px;
  12.             margin-bottom: 30px;
  13.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  14.             margin: -20px -20px 30px -20px;
  15.             padding: 30px 20px 20px 20px;
  16.             border-radius: 0 0 15px 15px;
  17.             box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  18.         }
  19.         
  20.         .uv-action-bar h1 {
  21.             color: white;
  22.             margin: 0;
  23.             font-size: 28px;
  24.             font-weight: 600;
  25.             text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  26.         }
  27.         
  28.         .uv-working-hours-container {
  29.             padding: 20px;
  30.             background: #f8f9fa;
  31.             min-height: calc(100vh - 200px);
  32.         }
  33.         
  34.         /* Nuevo layout con dashboard y sidebar */
  35.         .uv-countries-dashboard {
  36.             display: grid;
  37.             grid-template-columns: 2fr 1fr;
  38.             gap: 30px;
  39.             margin-bottom: 30px;
  40.         }
  41.         
  42.         .uv-countries-grid {
  43.             display: grid;
  44.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  45.             gap: 20px;
  46.         }
  47.         
  48.         .uv-country-card-expanded {
  49.             background: white;
  50.             border-radius: 15px;
  51.             padding: 20px;
  52.             box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  53.             border-top: 4px solid #28a745;
  54.             position: relative;
  55.             transition: all 0.3s ease;
  56.         }
  57.         
  58.         .uv-country-card-expanded.closed {
  59.             border-top-color: #dc3545;
  60.         }
  61.         
  62.         .uv-country-card-expanded:hover {
  63.             transform: translateY(-2px);
  64.             box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  65.         }
  66.         
  67.         /* Sidebar de estadísticas */
  68.         .uv-sidebar-stats {
  69.             background: white;
  70.             border-radius: 15px;
  71.             padding: 20px;
  72.             box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  73.             height: fit-content;
  74.             position: sticky;
  75.             top: 20px;
  76.         }
  77.         
  78.         .uv-sidebar-title {
  79.             font-size: 18px;
  80.             font-weight: 700;
  81.             color: #2c3e50;
  82.             margin-bottom: 20px;
  83.             padding-bottom: 10px;
  84.             border-bottom: 2px solid #e9ecef;
  85.             display: flex;
  86.             align-items: center;
  87.             gap: 8px;
  88.         }
  89.         
  90.         .uv-stat-item {
  91.             display: flex;
  92.             align-items: center;
  93.             justify-content: space-between;
  94.             padding: 12px 0;
  95.             border-bottom: 1px solid #f1f3f4;
  96.         }
  97.         
  98.         .uv-stat-item:last-child {
  99.             border-bottom: none;
  100.         }
  101.         
  102.         .uv-stat-label {
  103.             font-size: 13px;
  104.             color: #6c757d;
  105.             font-weight: 500;
  106.             display: flex;
  107.             align-items: center;
  108.             gap: 6px;
  109.         }
  110.         
  111.         .uv-stat-value {
  112.             font-size: 16px;
  113.             font-weight: 700;
  114.             color: #2c3e50;
  115.         }
  116.         
  117.         .uv-stat-icon {
  118.             font-size: 16px;
  119.         }
  120.         
  121.         /* Información principal del país */
  122.         .uv-country-main-info {
  123.             display: flex;
  124.             align-items: center;
  125.             justify-content: space-between;
  126.             margin-bottom: 15px;
  127.             padding-bottom: 10px;
  128.             border-bottom: 1px solid #e9ecef;
  129.         }
  130.         
  131.         .uv-country-name {
  132.             font-size: 18px;
  133.             font-weight: 700;
  134.             color: #2c3e50;
  135.             display: flex;
  136.             align-items: center;
  137.             gap: 10px;
  138.         }
  139.         
  140.         .uv-country-flag {
  141.             font-size: 24px;
  142.         }
  143.         
  144.         .uv-country-status {
  145.             padding: 6px 12px;
  146.             border-radius: 15px;
  147.             font-size: 11px;
  148.             font-weight: 600;
  149.             text-transform: uppercase;
  150.             letter-spacing: 0.5px;
  151.         }
  152.         
  153.         .uv-country-status.open {
  154.             background: rgba(40, 167, 69, 0.1);
  155.             color: #28a745;
  156.             border: 1px solid rgba(40, 167, 69, 0.3);
  157.         }
  158.         
  159.         .uv-country-status.closed {
  160.             background: rgba(220, 53, 69, 0.1);
  161.             color: #dc3545;
  162.             border: 1px solid rgba(220, 53, 69, 0.3);
  163.         }
  164.         
  165.         /* Detalles del país */
  166.         .uv-country-details {
  167.             display: grid;
  168.             grid-template-columns: 1fr 1fr;
  169.             gap: 15px;
  170.             margin-bottom: 15px;
  171.         }
  172.         
  173.         .uv-detail-section {
  174.             background: #f8f9fa;
  175.             padding: 12px;
  176.             border-radius: 8px;
  177.             border-left: 3px solid #667eea;
  178.         }
  179.         
  180.         .uv-detail-title {
  181.             font-size: 11px;
  182.             font-weight: 600;
  183.             color: #495057;
  184.             text-transform: uppercase;
  185.             letter-spacing: 0.5px;
  186.             margin-bottom: 6px;
  187.         }
  188.         
  189.         .uv-detail-content {
  190.             font-size: 13px;
  191.             color: #2c3e50;
  192.             font-weight: 500;
  193.         }
  194.         
  195.         .uv-time-display {
  196.             font-family: 'Courier New', monospace;
  197.             font-size: 14px;
  198.             font-weight: 700;
  199.             color: #667eea;
  200.         }
  201.         
  202.         /* Agentes del país */
  203.         .uv-agents-section {
  204.             background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  205.             padding: 12px;
  206.             border-radius: 8px;
  207.             border: 1px solid #ffcc02;
  208.             margin-top: 10px;
  209.         }
  210.         
  211.         .uv-agents-title {
  212.             font-size: 12px;
  213.             font-weight: 600;
  214.             color: #e65100;
  215.             text-transform: uppercase;
  216.             letter-spacing: 0.5px;
  217.             margin-bottom: 8px;
  218.             display: flex;
  219.             align-items: center;
  220.             gap: 6px;
  221.         }
  222.         
  223.         .uv-agents-preview {
  224.             display: flex;
  225.             flex-wrap: wrap;
  226.             gap: 8px;
  227.             align-items: flex-start;
  228.         }
  229.         
  230.         .uv-agent-chip {
  231.             display: flex;
  232.             align-items: center;
  233.             gap: 6px;
  234.             background: rgba(255, 255, 255, 0.9);
  235.             padding: 6px 10px;
  236.             border-radius: 15px;
  237.             font-size: 11px;
  238.             color: #2c3e50;
  239.             font-weight: 500;
  240.             border: 1px solid rgba(102, 126, 234, 0.2);
  241.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  242.             min-width: fit-content;
  243.             max-width: 200px;
  244.         }
  245.         
  246.         .uv-agent-avatar-small {
  247.             width: 18px;
  248.             height: 18px;
  249.             background: linear-gradient(135deg, #667eea, #764ba2);
  250.             border-radius: 50%;
  251.             display: flex;
  252.             align-items: center;
  253.             justify-content: center;
  254.             color: white;
  255.             font-size: 9px;
  256.             font-weight: bold;
  257.             flex-shrink: 0;
  258.         }
  259.         
  260.         .uv-no-agents {
  261.             text-align: center;
  262.             padding: 10px;
  263.             color: #6c757d;
  264.             font-size: 11px;
  265.             font-style: italic;
  266.             background: rgba(255, 255, 255, 0.5);
  267.             border-radius: 6px;
  268.         }
  269.         
  270.         /* Botón de edición */
  271.         .uv-edit-hours-btn {
  272.             background: linear-gradient(135deg, #ffc107, #ff9800);
  273.             color: #212529;
  274.             border: none;
  275.             padding: 8px 12px;
  276.             border-radius: 8px;
  277.             font-size: 11px;
  278.             font-weight: 600;
  279.             cursor: pointer;
  280.             transition: all 0.3s ease;
  281.             text-transform: uppercase;
  282.             letter-spacing: 0.5px;
  283.             display: flex;
  284.             align-items: center;
  285.             gap: 4px;
  286.         }
  287.         
  288.         .uv-edit-hours-btn:hover {
  289.             background: linear-gradient(135deg, #e0a800, #f57c00);
  290.             transform: translateY(-1px);
  291.             box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
  292.         }
  293.         
  294.         /* Responsive para el nuevo layout */
  295.         @media (max-width: 768px) {
  296.             .uv-countries-dashboard {
  297.                 grid-template-columns: 1fr;
  298.                 gap: 20px;
  299.             }
  300.             
  301.             .uv-countries-grid {
  302.                 grid-template-columns: 1fr;
  303.                 gap: 15px;
  304.             }
  305.             
  306.             .uv-country-details {
  307.                 grid-template-columns: 1fr;
  308.                 gap: 10px;
  309.             }
  310.             
  311.             .uv-sidebar-stats {
  312.                 position: static;
  313.                 order: -1;
  314.             }
  315.         }
  316.         
  317.         /* Estilos eliminados - ya no necesarios con el nuevo diseño */
  318.         
  319.         @keyframes pulse-green {
  320.             0% { box-shadow: 0 0 12px rgba(40, 167, 69, 0.4); }
  321.             50% { box-shadow: 0 0 20px rgba(40, 167, 69, 0.6); }
  322.             100% { box-shadow: 0 0 12px rgba(40, 167, 69, 0.4); }
  323.         }
  324.         
  325.         @keyframes pulse-red {
  326.             0% { box-shadow: 0 0 12px rgba(220, 53, 69, 0.4); }
  327.             50% { box-shadow: 0 0 20px rgba(220, 53, 69, 0.6); }
  328.             100% { box-shadow: 0 0 12px rgba(220, 53, 69, 0.4); }
  329.         }
  330.         
  331.         .uv-refresh-button {
  332.             background: linear-gradient(135deg, #007bff, #0056b3);
  333.             color: white;
  334.             border: none;
  335.             padding: 12px 24px;
  336.             border-radius: 25px;
  337.             cursor: pointer;
  338.             margin-left: 15px;
  339.             font-weight: 600;
  340.             font-size: 14px;
  341.             transition: all 0.3s ease;
  342.             box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  343.         }
  344.         
  345.         .uv-refresh-button:hover {
  346.             background: linear-gradient(135deg, #0056b3, #004085);
  347.             transform: translateY(-2px);
  348.             box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  349.         }
  350.         
  351.         .uv-refresh-button i {
  352.             margin-right: 8px;
  353.         }
  354.         
  355.         .uv-loading {
  356.             text-align: center;
  357.             padding: 40px 20px;
  358.             color: #6c757d;
  359.             font-size: 16px;
  360.         }
  361.         
  362.         .uv-loading i {
  363.             font-size: 24px;
  364.             margin-bottom: 15px;
  365.             display: block;
  366.             color: #667eea;
  367.         }
  368.         
  369.         .uv-error {
  370.             background: linear-gradient(135deg, #f8d7da, #f5c6cb);
  371.             color: #721c24;
  372.             padding: 20px;
  373.             border-radius: 15px;
  374.             margin: 20px 0;
  375.             border: 1px solid #f5c6cb;
  376.             text-align: center;
  377.             font-weight: 500;
  378.         }
  379.         
  380.         .uv-status-badge {
  381.             display: inline-block;
  382.             padding: 2px 5px;
  383.             border-radius: 10px;
  384.             font-size: 8px;
  385.             font-weight: 600;
  386.             text-transform: uppercase;
  387.             letter-spacing: 0.5px;
  388.             margin-left: 5px;
  389.         }
  390.         
  391.         .uv-status-badge.open {
  392.             background: rgba(40, 167, 69, 0.1);
  393.             color: #28a745;
  394.             border: 1px solid rgba(40, 167, 69, 0.3);
  395.         }
  396.         
  397.         .uv-status-badge.closed {
  398.             background: rgba(220, 53, 69, 0.1);
  399.             color: #dc3545;
  400.             border: 1px solid rgba(220, 53, 69, 0.3);
  401.         }
  402.         
  403.         /* Estilos para la sección de tickets */
  404.         .uv-tickets-section {
  405.             background: white;
  406.             border-radius: 20px;
  407.             padding: 20px;
  408.             box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  409.             margin-bottom: 30px;
  410.         }
  411.         
  412.         .uv-tickets-section h2 {
  413.             color: #2c3e50;
  414.             font-size: 20px;
  415.             font-weight: 700;
  416.             margin-bottom: 15px;
  417.             padding-bottom: 10px;
  418.             border-bottom: 2px solid #e9ecef;
  419.             display: flex;
  420.             align-items: center;
  421.             gap: 8px;
  422.         }
  423.         
  424.         .uv-tickets-table {
  425.             width: 100%;
  426.             border-collapse: collapse;
  427.             margin-top: 15px;
  428.         }
  429.         
  430.         .uv-tickets-table th {
  431.             background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  432.             color: #495057;
  433.             font-weight: 600;
  434.             padding: 10px 8px;
  435.             text-align: left;
  436.             border-bottom: 2px solid #dee2e6;
  437.             font-size: 12px;
  438.             text-transform: uppercase;
  439.             letter-spacing: 0.5px;
  440.         }
  441.         
  442.         .uv-tickets-table td {
  443.             padding: 10px 8px;
  444.             border-bottom: 1px solid #f1f3f4;
  445.             color: #6c757d;
  446.             font-size: 12px;
  447.         }
  448.         
  449.         .uv-tickets-table tr:hover {
  450.             background-color: #f8f9fa;
  451.         }
  452.         
  453.         .uv-ticket-id {
  454.             font-weight: 600;
  455.             color: #667eea;
  456.             font-family: 'Courier New', monospace;
  457.             font-size: 11px;
  458.         }
  459.         
  460.         .uv-ticket-id-link {
  461.             color: #667eea;
  462.             text-decoration: none;
  463.             font-weight: 600;
  464.             font-family: 'Courier New', monospace;
  465.             font-size: 11px;
  466.             transition: all 0.3s ease;
  467.             padding: 2px 6px;
  468.             border-radius: 4px;
  469.             background: rgba(102, 126, 234, 0.1);
  470.             border: 1px solid rgba(102, 126, 234, 0.2);
  471.         }
  472.         
  473.         .uv-ticket-id-link:hover {
  474.             text-decoration: none;
  475.             background: rgba(102, 126, 234, 0.2);
  476.             border-color: rgba(102, 126, 234, 0.4);
  477.             transform: translateY(-1px);
  478.             box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  479.         }
  480.         
  481.         .uv-ticket-id-link:active {
  482.             transform: translateY(0);
  483.         }
  484.         
  485.         .uv-ticket-subject {
  486.             font-weight: 500;
  487.             color: #2c3e50;
  488.             max-width: 180px;
  489.             overflow: hidden;
  490.             text-overflow: ellipsis;
  491.             white-space: nowrap;
  492.             font-size: 11px;
  493.         }
  494.         
  495.         .uv-customer-info {
  496.             display: flex;
  497.             flex-direction: column;
  498.             gap: 2px;
  499.         }
  500.         
  501.         .uv-customer-name {
  502.             font-weight: 600;
  503.             color: #2c3e50;
  504.             font-size: 11px;
  505.         }
  506.         
  507.         .uv-customer-email {
  508.             font-size: 10px;
  509.             color: #6c757d;
  510.         }
  511.         
  512.         .uv-region-info {
  513.             display: flex;
  514.             flex-direction: column;
  515.             gap: 2px;
  516.         }
  517.         
  518.         .uv-region-name {
  519.             font-weight: 600;
  520.             color: #28a745;
  521.             font-size: 11px;
  522.         }
  523.         
  524.         .uv-region-description {
  525.             font-size: 9px;
  526.             color: #6c757d;
  527.             font-style: italic;
  528.         }
  529.         
  530.         .uv-agent-assigned {
  531.             display: flex;
  532.             flex-direction: column;
  533.             gap: 2px;
  534.         }
  535.         
  536.         .uv-agent-assigned-name {
  537.             font-weight: 600;
  538.             color: #667eea;
  539.             font-size: 11px;
  540.         }
  541.         
  542.         .uv-agent-assigned-email {
  543.             font-size: 9px;
  544.             color: #6c757d;
  545.         }
  546.         
  547.         .uv-agent-assigned-none {
  548.             color: #6c757d;
  549.             font-style: italic;
  550.             font-size: 10px;
  551.         }
  552.         
  553.         .uv-priority-badge {
  554.             padding: 2px 5px;
  555.             border-radius: 8px;
  556.             font-size: 9px;
  557.             font-weight: 600;
  558.             text-transform: uppercase;
  559.             letter-spacing: 0.5px;
  560.         }
  561.         
  562.         .uv-priority-badge.low {
  563.             background: rgba(40, 167, 69, 0.1);
  564.             color: #28a745;
  565.             border: 1px solid rgba(40, 167, 69, 0.3);
  566.         }
  567.         
  568.         .uv-priority-badge.medium {
  569.             background: rgba(255, 193, 7, 0.1);
  570.             color: #ffc107;
  571.             border: 1px solid rgba(255, 193, 7, 0.3);
  572.         }
  573.         
  574.         .uv-priority-badge.high {
  575.             background: rgba(220, 53, 69, 0.1);
  576.             color: #dc3545;
  577.             border: 1px solid rgba(220, 53, 69, 0.3);
  578.         }
  579.         
  580.         .uv-status-badge-ticket {
  581.             padding: 2px 5px;
  582.             border-radius: 8px;
  583.             font-size: 9px;
  584.             font-weight: 600;
  585.             text-transform: uppercase;
  586.             letter-spacing: 0.5px;
  587.         }
  588.         
  589.         .uv-status-badge-ticket.open {
  590.             background: rgba(40, 167, 69, 0.1);
  591.             color: #28a745;
  592.             border: 1px solid rgba(40, 167, 69, 0.3);
  593.         }
  594.         
  595.         .uv-status-badge-ticket.pending {
  596.             background: rgba(255, 193, 7, 0.1);
  597.             color: #ffc107;
  598.             border: 1px solid rgba(255, 193, 7, 0.3);
  599.         }
  600.         
  601.         .uv-status-badge-ticket.closed {
  602.             background: rgba(108, 117, 125, 0.1);
  603.             color: #6c757d;
  604.             border: 1px solid rgba(108, 117, 125, 0.3);
  605.         }
  606.         
  607.         .uv-card-header-icon {
  608.             width: 25px;
  609.             height: 25px;
  610.             background: linear-gradient(135deg, #667eea, #764ba2);
  611.             border-radius: 50%;
  612.             display: flex;
  613.             align-items: center;
  614.             justify-content: center;
  615.             color: white;
  616.             font-size: 12px;
  617.             font-weight: bold;
  618.         }
  619.         
  620.         /* Estilos para la sección de agentes */
  621.         .uv-agents-section {
  622.             background: white;
  623.             border-radius: 20px;
  624.             padding: 20px;
  625.             box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  626.         }
  627.         
  628.         .uv-agents-section h2 {
  629.             color: #2c3e50;
  630.             font-size: 20px;
  631.             font-weight: 700;
  632.             margin-bottom: 15px;
  633.             padding-bottom: 10px;
  634.             border-bottom: 2px solid #e9ecef;
  635.             display: flex;
  636.             align-items: center;
  637.             gap: 8px;
  638.         }
  639.         
  640.         .uv-agents-table {
  641.             width: 100%;
  642.             border-collapse: collapse;
  643.             margin-top: 15px;
  644.         }
  645.         
  646.         .uv-agents-table th {
  647.             background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  648.             color: #495057;
  649.             font-weight: 600;
  650.             padding: 10px 8px;
  651.             text-align: left;
  652.             border-bottom: 2px solid #dee2e6;
  653.             font-size: 12px;
  654.             text-transform: uppercase;
  655.             letter-spacing: 0.5px;
  656.         }
  657.         
  658.         .uv-agents-table td {
  659.             padding: 10px 8px;
  660.             border-bottom: 1px solid #f1f3f4;
  661.             color: #6c757d;
  662.             font-size: 12px;
  663.         }
  664.         
  665.         .uv-agents-table tr:hover {
  666.             background-color: #f8f9fa;
  667.         }
  668.         
  669.         .uv-agent-id {
  670.             font-weight: 600;
  671.             color: #667eea;
  672.             font-family: 'Courier New', monospace;
  673.             font-size: 11px;
  674.         }
  675.         
  676.         .uv-agent-name {
  677.             font-weight: 600;
  678.             color: #2c3e50;
  679.             font-size: 12px;
  680.         }
  681.         
  682.         .uv-agent-email {
  683.             font-size: 10px;
  684.             color: #6c757d;
  685.         }
  686.         
  687.         .uv-agent-idor {
  688.             font-size: 10px;
  689.             color: #6c757d;
  690.             font-family: 'Courier New', monospace;
  691.         }
  692.         
  693.         .uv-agent-role {
  694.             font-size: 10px;
  695.             color: #6c757d;
  696.             font-weight: 600;
  697.             text-transform: uppercase;
  698.             letter-spacing: 0.5px;
  699.         }
  700.         
  701.         .uv-agent-region {
  702.             font-weight: 600;
  703.             color: #28a745;
  704.             font-size: 11px;
  705.         }
  706.         
  707.         .uv-agent-region-description {
  708.             font-size: 9px;
  709.             color: #6c757d;
  710.             font-style: italic;
  711.         }
  712.         
  713.         .uv-agent-status {
  714.             padding: 3px 6px;
  715.             border-radius: 10px;
  716.             font-size: 9px;
  717.             font-weight: 600;
  718.             text-transform: uppercase;
  719.             letter-spacing: 0.5px;
  720.         }
  721.         
  722.         .uv-agent-status.active {
  723.             background: rgba(40, 167, 69, 0.1);
  724.             color: #28a745;
  725.             border: 1px solid rgba(40, 167, 69, 0.3);
  726.         }
  727.         
  728.         .uv-agent-status.inactive {
  729.             background: rgba(108, 117, 125, 0.1);
  730.             color: #6c757d;
  731.             border: 1px solid rgba(108, 117, 125, 0.3);
  732.         }
  733.         
  734.         .uv-agent-last-activity {
  735.             font-size: 10px;
  736.             color: #6c757d;
  737.             font-style: italic;
  738.             font-family: 'Courier New', monospace;
  739.         }
  740.         
  741.         /* Estilos para el modal de asignación de agentes */
  742.         .uv-modal-overlay {
  743.             position: fixed;
  744.             top: 0;
  745.             left: 0;
  746.             width: 100%;
  747.             height: 100%;
  748.             background: rgba(0, 0, 0, 0.5);
  749.             z-index: 10000;
  750.             display: none;
  751.             align-items: center;
  752.             justify-content: center;
  753.         }
  754.         
  755.         .uv-modal-overlay.show {
  756.             display: flex;
  757.         }
  758.         
  759.         .uv-modal {
  760.             background: white;
  761.             border-radius: 20px;
  762.             padding: 30px;
  763.             max-width: 700px;
  764.             width: 90%;
  765.             max-height: 80vh;
  766.             overflow-y: auto;
  767.             box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  768.             position: relative;
  769.             border: 1px solid rgba(255, 255, 255, 0.2);
  770.         }
  771.         
  772.         .uv-modal-header {
  773.             display: flex;
  774.             justify-content: space-between;
  775.             align-items: center;
  776.             margin-bottom: 25px;
  777.             padding-bottom: 20px;
  778.             border-bottom: 3px solid #e9ecef;
  779.             background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  780.             margin: -30px -30px 25px -30px;
  781.             padding: 25px 30px 20px 30px;
  782.             border-radius: 20px 20px 0 0;
  783.         }
  784.         
  785.         .uv-modal-title {
  786.             font-size: 20px;
  787.             font-weight: 700;
  788.             color: #2c3e50;
  789.             margin: 0;
  790.         }
  791.         
  792.         .uv-modal-close {
  793.             background: none;
  794.             border: none;
  795.             font-size: 24px;
  796.             color: #6c757d;
  797.             cursor: pointer;
  798.             padding: 0;
  799.             width: 30px;
  800.             height: 30px;
  801.             display: flex;
  802.             align-items: center;
  803.             justify-content: center;
  804.             border-radius: 50%;
  805.             transition: all 0.3s ease;
  806.         }
  807.         
  808.         .uv-modal-close:hover {
  809.             background: #f8f9fa;
  810.             color: #495057;
  811.         }
  812.         
  813.         .uv-modal-content {
  814.             margin-bottom: 20px;
  815.         }
  816.         
  817.         .uv-modal-description {
  818.             color: #6c757d;
  819.             margin-bottom: 20px;
  820.             line-height: 1.5;
  821.         }
  822.         
  823.         .uv-agents-grid {
  824.             display: grid;
  825.             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  826.             gap: 12px;
  827.             margin-bottom: 20px;
  828.         }
  829.         
  830.         .uv-agent-option {
  831.             background: #f8f9fa;
  832.             border: 2px solid #e9ecef;
  833.             border-radius: 10px;
  834.             padding: 15px;
  835.             cursor: pointer;
  836.             transition: all 0.3s ease;
  837.             text-align: center;
  838.         }
  839.         
  840.         .uv-agent-option:hover {
  841.             border-color: #667eea;
  842.             background: #f0f2ff;
  843.             transform: translateY(-2px);
  844.         }
  845.         
  846.         .uv-agent-option.selected {
  847.             border-color: #28a745;
  848.             background: #f8fff9;
  849.         }
  850.         
  851.         .uv-agent-option-avatar {
  852.             width: 50px;
  853.             height: 50px;
  854.             background: linear-gradient(135deg, #667eea, #764ba2);
  855.             border-radius: 50%;
  856.             display: flex;
  857.             align-items: center;
  858.             justify-content: center;
  859.             color: white;
  860.             font-size: 18px;
  861.             font-weight: bold;
  862.             margin: 0 auto 10px auto;
  863.         }
  864.         
  865.         .uv-agent-option-name {
  866.             font-weight: 600;
  867.             color: #2c3e50;
  868.             margin-bottom: 5px;
  869.             font-size: 14px;
  870.         }
  871.         
  872.         .uv-agent-option-email {
  873.             color: #6c757d;
  874.             font-size: 12px;
  875.             margin-bottom: 8px;
  876.         }
  877.         
  878.         .uv-agent-option-status {
  879.             display: inline-block;
  880.             padding: 4px 8px;
  881.             border-radius: 15px;
  882.             font-size: 10px;
  883.             font-weight: 600;
  884.             text-transform: uppercase;
  885.             background: rgba(40, 167, 69, 0.1);
  886.             color: #28a745;
  887.             border: 1px solid rgba(40, 167, 69, 0.3);
  888.         }
  889.         
  890.         .uv-modal-footer {
  891.             display: flex;
  892.             gap: 10px;
  893.             justify-content: flex-end;
  894.         }
  895.         
  896.         .uv-btn {
  897.             padding: 10px 20px;
  898.             border: none;
  899.             border-radius: 8px;
  900.             font-weight: 600;
  901.             cursor: pointer;
  902.             transition: all 0.3s ease;
  903.             font-size: 14px;
  904.         }
  905.         
  906.         .uv-btn-secondary {
  907.             background: #6c757d;
  908.             color: white;
  909.             border: 2px solid #6c757d;
  910.         }
  911.         
  912.         .uv-btn-secondary:hover {
  913.             background: #5a6268;
  914.             border-color: #5a6268;
  915.             transform: translateY(-2px);
  916.             box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
  917.         }
  918.         
  919.         .uv-btn-primary {
  920.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  921.             color: white;
  922.             border: 2px solid transparent;
  923.         }
  924.         
  925.         .uv-btn-primary:hover {
  926.             background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  927.             transform: translateY(-2px);
  928.             box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  929.         }
  930.         
  931.         .uv-btn:disabled {
  932.             opacity: 0.6;
  933.             cursor: not-allowed;
  934.         }
  935.         
  936.         .uv-confirmation-message {
  937.             background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  938.             border: 1px solid #ffc107;
  939.             border-radius: 10px;
  940.             padding: 15px;
  941.             margin-bottom: 20px;
  942.             text-align: center;
  943.             color: #856404;
  944.             font-weight: 500;
  945.         }
  946.         
  947.         .uv-ticket-assign-btn {
  948.             background: linear-gradient(135deg, #007bff, #0056b3);
  949.             color: white;
  950.             border: none;
  951.             padding: 6px 12px;
  952.             border-radius: 6px;
  953.             font-size: 10px;
  954.             font-weight: 600;
  955.             cursor: pointer;
  956.             transition: all 0.3s ease;
  957.             text-transform: uppercase;
  958.             letter-spacing: 0.5px;
  959.         }
  960.         
  961.         .uv-ticket-assign-btn:hover {
  962.             background: linear-gradient(135deg, #0056b3, #004085);
  963.             transform: translateY(-1px);
  964.         }
  965.         
  966.         .uv-ticket-assign-btn:disabled {
  967.             opacity: 0.6;
  968.             cursor: not-allowed;
  969.             background: #6c757d;
  970.         }
  971.         
  972.         @media (max-width: 768px) {
  973.             .uv-working-hours-grid {
  974.                 grid-template-columns: 1fr;
  975.                 gap: 15px;
  976.             }
  977.             
  978.             .uv-action-bar {
  979.                 padding: 20px 15px 15px 15px;
  980.                 margin: -20px -15px 20px -15px;
  981.             }
  982.             
  983.             .uv-action-bar h1 {
  984.                 font-size: 24px;
  985.             }
  986.             
  987.             .uv-working-hours-container {
  988.                 padding: 15px;
  989.             }
  990.             
  991.             .uv-card-content {
  992.                 left: -15px;
  993.                 right: -15px;
  994.                 border-radius: 8px;
  995.             }
  996.             
  997.             .uv-card-content.expanded {
  998.                 padding: 12px;
  999.             }
  1000.             
  1001.             .uv-card-content.expanded::before,
  1002.             .uv-card-content.expanded::after {
  1003.                 left: 35px;
  1004.             }
  1005.             
  1006.             .uv-modal {
  1007.                 margin: 20px;
  1008.                 padding: 20px;
  1009.                 max-height: 90vh;
  1010.             }
  1011.             
  1012.             .uv-agents-grid {
  1013.                 grid-template-columns: 1fr;
  1014.                 gap: 10px;
  1015.             }
  1016.             
  1017.             .uv-agent-option {
  1018.                 padding: 12px;
  1019.             }
  1020.             
  1021.             .uv-modal-footer {
  1022.                 flex-direction: column;
  1023.             }
  1024.             
  1025.             .uv-btn {
  1026.                 width: 100%;
  1027.                 text-align: center;
  1028.             }
  1029.             
  1030.             .uv-time-info {
  1031.                 flex-direction: column;
  1032.                 align-items: flex-start;
  1033.             }
  1034.             
  1035.             .uv-time-label {
  1036.                 margin-bottom: 3px;
  1037.                 min-width: auto;
  1038.             }
  1039.             
  1040.             .uv-agents-count {
  1041.                 padding: 3px 6px;
  1042.                 gap: 3px;
  1043.             }
  1044.             
  1045.             .uv-agents-count-number {
  1046.                 font-size: 11px;
  1047.                 min-width: 14px;
  1048.             }
  1049.             
  1050.             .uv-agents-count-total {
  1051.                 font-size: 9px;
  1052.             }
  1053.             
  1054.             .uv-agents-section-card {
  1055.                 padding: 8px;
  1056.             }
  1057.             
  1058.             .uv-agent-item {
  1059.                 padding: 5px;
  1060.                 gap: 6px;
  1061.             }
  1062.             
  1063.             .uv-agent-avatar {
  1064.                 width: 20px;
  1065.                 height: 20px;
  1066.                 font-size: 8px;
  1067.             }
  1068.             
  1069.             .uv-tickets-table {
  1070.                 font-size: 11px;
  1071.             }
  1072.             
  1073.             .uv-tickets-table th,
  1074.             .uv-tickets-table td {
  1075.                 padding: 8px 6px;
  1076.             }
  1077.             
  1078.             .uv-agent-assigned {
  1079.                 gap: 1px;
  1080.             }
  1081.             
  1082.             .uv-agent-assigned-name {
  1083.                 font-size: 10px;
  1084.             }
  1085.             
  1086.             .uv-agent-assigned-email {
  1087.                 font-size: 8px;
  1088.             }
  1089.             
  1090.             .uv-agent-assigned-none {
  1091.                 font-size: 9px;
  1092.             }
  1093.             
  1094.             .uv-agents-table {
  1095.                 font-size: 11px;
  1096.             }
  1097.             
  1098.             .uv-agents-table th,
  1099.             .uv-agents-table td {
  1100.                 padding: 8px 6px;
  1101.             }
  1102.             .uv-ticket-id-link {
  1103.                 font-size: 10px;
  1104.                 padding: 1px 4px;
  1105.             }
  1106.             
  1107.             .uv-ticket-id-link:hover {
  1108.                 transform: none;
  1109.                 box-shadow: 0 1px 4px rgba(102, 126, 234, 0.3);
  1110.             }
  1111.             
  1112.             /* Estilos para el botón de edición de horarios */
  1113.             .uv-edit-hours-btn {
  1114.                 background: linear-gradient(135deg, #ffc107, #ff9800);
  1115.                 color: #212529;
  1116.                 border: none;
  1117.                 padding: 6px 8px;
  1118.                 border-radius: 6px;
  1119.                 font-size: 10px;
  1120.                 font-weight: 600;
  1121.                 cursor: pointer;
  1122.                 transition: all 0.3s ease;
  1123.                 text-transform: uppercase;
  1124.                 letter-spacing: 0.5px;
  1125.                 margin-left: 8px;
  1126.                 display: flex;
  1127.                 align-items: center;
  1128.                 justify-content: center;
  1129.                 min-width: 28px;
  1130.                 height: 28px;
  1131.             }
  1132.             
  1133.             .uv-edit-hours-btn:hover {
  1134.                 background: linear-gradient(135deg, #e0a800, #f57c00);
  1135.                 transform: translateY(-1px);
  1136.                 box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
  1137.             }
  1138.             
  1139.             .uv-edit-icon {
  1140.                 font-size: 12px;
  1141.             }
  1142.             
  1143.             /* Estilos para el modal de edición de horarios */
  1144.             .uv-modal-large {
  1145.                 max-width: 800px;
  1146.                 width: 95%;
  1147.                 padding: 35px;
  1148.             }
  1149.             
  1150.             .uv-edit-hours-form {
  1151.                 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  1152.                 border-radius: 15px;
  1153.                 padding: 25px;
  1154.                 margin-top: 20px;
  1155.                 border: 1px solid #dee2e6;
  1156.                 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  1157.             }
  1158.             
  1159.             .uv-form-group {
  1160.                 margin-bottom: 25px;
  1161.             }
  1162.             
  1163.             .uv-form-group label {
  1164.                 display: block;
  1165.                 font-weight: 600;
  1166.                 color: #2c3e50;
  1167.                 margin-bottom: 8px;
  1168.                 font-size: 14px;
  1169.             }
  1170.             
  1171.             .uv-form-group label {
  1172.                 display: block;
  1173.                 margin-bottom: 8px;
  1174.                 font-weight: 600;
  1175.                 color: #2c3e50;
  1176.                 font-size: 14px;
  1177.             }
  1178.             
  1179.             .uv-form-control {
  1180.                 width: 100%;
  1181.                 padding: 12px 16px;
  1182.                 border: 2px solid #e9ecef;
  1183.                 border-radius: 10px;
  1184.                 font-size: 14px;
  1185.                 transition: all 0.3s ease;
  1186.                 background: white;
  1187.                 font-weight: 500;
  1188.             }
  1189.             
  1190.             .uv-form-control:focus {
  1191.                 outline: none;
  1192.                 border-color: #667eea;
  1193.                 box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  1194.                 transform: translateY(-1px);
  1195.             }
  1196.             
  1197.             .uv-form-control:hover {
  1198.                 border-color: #ced4da;
  1199.             }
  1200.             
  1201.             .uv-form-row {
  1202.                 display: grid;
  1203.                 grid-template-columns: 1fr 1fr;
  1204.                 gap: 15px;
  1205.             }
  1206.             
  1207.             .uv-working-days-grid {
  1208.                 display: grid;
  1209.                 grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  1210.                 gap: 12px;
  1211.                 margin-top: 12px;
  1212.             }
  1213.             
  1214.             .uv-day-checkbox {
  1215.                 display: flex;
  1216.                 align-items: center;
  1217.                 gap: 10px;
  1218.                 padding: 12px 16px;
  1219.                 background: white;
  1220.                 border: 2px solid #e9ecef;
  1221.                 border-radius: 10px;
  1222.                 cursor: pointer;
  1223.                 transition: all 0.3s ease;
  1224.                 font-size: 14px;
  1225.                 font-weight: 500;
  1226.                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  1227.             }
  1228.             
  1229.             .uv-day-checkbox:hover {
  1230.                 border-color: #667eea;
  1231.                 background: #f8f9fa;
  1232.                 transform: translateY(-2px);
  1233.                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  1234.             }
  1235.             
  1236.             .uv-day-checkbox input[type="checkbox"] {
  1237.                 margin: 0;
  1238.                 width: 18px;
  1239.                 height: 18px;
  1240.                 accent-color: #667eea;
  1241.                 cursor: pointer;
  1242.             }
  1243.             
  1244.             .uv-day-checkbox input[type="checkbox"]:checked + span {
  1245.                 color: #667eea;
  1246.                 font-weight: 700;
  1247.             }
  1248.             
  1249.             .uv-day-checkbox:has(input[type="checkbox"]:checked) {
  1250.                 border-color: #667eea;
  1251.                 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  1252.                 color: white;
  1253.             }
  1254.             
  1255.             .uv-day-checkbox:has(input[type="checkbox"]:checked) span {
  1256.                 color: white;
  1257.             }
  1258.             
  1259.             /* Responsive para el modal de edición */
  1260.             @media (max-width: 768px) {
  1261.                 .uv-form-row {
  1262.                     grid-template-columns: 1fr;
  1263.                     gap: 10px;
  1264.                 }
  1265.                 
  1266.                 .uv-working-days-grid {
  1267.                     grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  1268.                     gap: 8px;
  1269.                 }
  1270.                 
  1271.                 .uv-day-checkbox {
  1272.                     padding: 6px 8px;
  1273.                     font-size: 12px;
  1274.                 }
  1275.                 
  1276.                 .uv-edit-hours-btn {
  1277.                     margin-left: 4px;
  1278.                     padding: 4px 6px;
  1279.                     min-width: 24px;
  1280.                     height: 24px;
  1281.                 }
  1282.                 
  1283.                 .uv-edit-icon {
  1284.                     font-size: 10px;
  1285.                 }
  1286.             }
  1287.         }
  1288.     </style>
  1290.     <div class="uv-working-hours-container">
  1291.         <div class="uv-action-bar">
  1292.             <h1>{{ 'Horarios Laborales'|trans }}</h1>
  1293.             <button class="uv-refresh-button" onclick="refreshAll()">
  1294.                 <i class="fa fa-refresh"></i> Actualizar Todo
  1295.             </button>
  1296.         </div>
  1298.         <!-- Sección de Horarios Laborales -->
  1299.         <div id="working-hours-content">
  1300.             <div class="uv-loading">
  1301.                 <i class="fa fa-spinner fa-spin"></i>
  1302.                 Cargando horarios laborales...
  1303.             </div>
  1304.         </div>
  1306.         <!-- Sección de Tickets Recientes -->
  1307.         <div class="uv-tickets-section">
  1308.             <h2>📋 Últimos 5 Tickets Ingresados</h2>
  1309.             <div id="tickets-content">
  1310.                 <div class="uv-loading">
  1311.                     <i class="fa fa-spinner fa-spin"></i>
  1312.                     Cargando tickets recientes...
  1313.                 </div>
  1314.             </div>
  1315.         </div>
  1317.         <!-- Sección de Agentes -->
  1318.         <div class="uv-agents-section">
  1319.             <h2>👥 Agentes </h2>
  1320.             <div id="agents-content">
  1321.                 <div class="uv-loading">
  1322.                     <i class="fa fa-spinner fa-spin"></i>
  1323.                     Cargando agentes...
  1324.                 </div>
  1325.             </div>
  1326.         </div>
  1327.     </div>
  1329.     <!-- Modal para asignar agentes -->
  1330.     <div id="assignAgentModal" class="uv-modal-overlay">
  1331.         <div class="uv-modal">
  1332.             <div class="uv-modal-header">
  1333.                 <h3 class="uv-modal-title">🔄 Asignar Agente al Ticket</h3>
  1334.                 <button class="uv-modal-close" onclick="closeAssignAgentModal()">&times;</button>
  1335.             </div>
  1336.             
  1337.             <div class="uv-modal-content">
  1338.                 <div class="uv-modal-description">
  1339.                     Selecciona un agente de una oficina abierta para asignar al ticket <strong id="modalTicketId"></strong>
  1340.                     <div style="margin-top: 8px; padding: 8px; background: rgba(102, 126, 234, 0.1); border-radius: 6px; font-size: 12px; color: #667eea;">
  1341.                         <strong>ℹ️ Solo se muestran agentes de oficinas que están abiertas actualmente</strong>
  1342.                     </div>
  1343.                 </div>
  1344.                 
  1345.                 <div id="confirmationMessage" class="uv-confirmation-message" style="display: none;">
  1346.                     Se le va a asignar el ticket actual a este agente, ¿desea continuar?
  1347.                 </div>
  1348.                 
  1349.                 <div id="agentsGrid" class="uv-agents-grid">
  1350.                     <!-- Los agentes se cargarán dinámicamente aquí -->
  1351.                 </div>
  1352.             </div>
  1353.             
  1354.             <div class="uv-modal-footer">
  1355.                 <button class="uv-btn uv-btn-secondary" onclick="closeAssignAgentModal()">Cancelar</button>
  1356.                 <button id="confirmAssignBtn" class="uv-btn uv-btn-primary" onclick="confirmAssignAgent()" disabled>
  1357.                     Confirmar Asignación
  1358.                 </button>
  1359.             </div>
  1360.         </div>
  1361.     </div>
  1363.     <!-- Modal para editar horarios laborales -->
  1364.     <div id="editHoursModal" class="uv-modal-overlay">
  1365.         <div class="uv-modal uv-modal-large">
  1366.             <div class="uv-modal-header">
  1367.                 <h3 class="uv-modal-title">🕐 Editar Horarios Laborales</h3>
  1368.                 <button class="uv-modal-close" onclick="closeEditHoursModal()">&times;</button>
  1369.             </div>
  1370.             
  1371.             <div class="uv-modal-content">
  1372.                 <div class="uv-modal-description">
  1373.                     Configura los horarios laborales para <strong id="editCountryName"></strong>
  1374.                 </div>
  1375.                 
  1376.                 <div class="uv-edit-hours-form">
  1377.                     <div class="uv-form-group">
  1378.                         <label for="editTimezone">🌍 Zona Horaria:</label>
  1379.                         <select id="editTimezone" class="uv-form-control">
  1380.                             <option value="America/Argentina/Buenos_Aires">Argentina (Buenos Aires)</option>
  1381.                             <option value="America/Bogota">Colombia (Bogotá)</option>
  1382.                             <option value="America/Mexico_City">México (Ciudad de México)</option>
  1383.                             <option value="America/Sao_Paulo">Brasil (São Paulo)</option>
  1384.                             <option value="Europe/Madrid">España (Madrid)</option>
  1385.                             <option value="America/Lima">Perú (Lima)</option>
  1386.                             <option value="America/Santiago">Chile (Santiago)</option>
  1387.                             <option value="America/Caracas">Venezuela (Caracas)</option>
  1388.                             <option value="America/Costa_Rica">Costa Rica (San José)</option>
  1389.                             <option value="America/New_York">Estados Unidos (Nueva York)</option>
  1390.                             <option value="Europe/London">Reino Unido (Londres)</option>
  1391.                             <option value="Asia/Tokyo">Japón (Tokio)</option>
  1392.                             <option value="Australia/Sydney">Australia (Sídney)</option>
  1393.                         </select>
  1394.                     </div>
  1395.                     
  1396.                     <div class="uv-form-row">
  1397.                         <div class="uv-form-group">
  1398.                             <label for="editStartTime">🕐 Hora de Inicio:</label>
  1399.                             <input type="time" id="editStartTime" class="uv-form-control" value="09:00">
  1400.                         </div>
  1401.                         
  1402.                         <div class="uv-form-group">
  1403.                             <label for="editEndTime">🕐 Hora de Fin:</label>
  1404.                             <input type="time" id="editEndTime" class="uv-form-control" value="18:00">
  1405.                         </div>
  1406.                     </div>
  1407.                     
  1408.                     <div class="uv-form-group">
  1409.                         <label>📅 Días Laborales:</label>
  1410.                         <div class="uv-working-days-grid">
  1411.                             <label class="uv-day-checkbox">
  1412.                                 <input type="checkbox" id="editMonday" checked>
  1413.                                 <span>Lunes</span>
  1414.                             </label>
  1415.                             <label class="uv-day-checkbox">
  1416.                                 <input type="checkbox" id="editTuesday" checked>
  1417.                                 <span>Martes</span>
  1418.                             </label>
  1419.                             <label class="uv-day-checkbox">
  1420.                                 <input type="checkbox" id="editWednesday" checked>
  1421.                                 <span>Miércoles</span>
  1422.                             </label>
  1423.                             <label class="uv-day-checkbox">
  1424.                                 <input type="checkbox" id="editThursday" checked>
  1425.                                 <span>Jueves</span>
  1426.                             </label>
  1427.                             <label class="uv-day-checkbox">
  1428.                                 <input type="checkbox" id="editFriday" checked>
  1429.                                 <span>Viernes</span>
  1430.                             </label>
  1431.                             <label class="uv-day-checkbox">
  1432.                                 <input type="checkbox" id="editSaturday">
  1433.                                 <span>Sábado</span>
  1434.                             </label>
  1435.                             <label class="uv-day-checkbox">
  1436.                                 <input type="checkbox" id="editSunday">
  1437.                                 <span>Domingo</span>
  1438.                             </label>
  1439.                         </div>
  1440.                     </div>
  1441.                 </div>
  1442.             </div>
  1443.             
  1444.             <div class="uv-modal-footer">
  1445.                 <button class="uv-btn uv-btn-secondary" onclick="closeEditHoursModal()">Cancelar</button>
  1446.                 <button id="saveWorkingHoursBtn" class="uv-btn uv-btn-primary" onclick="saveWorkingHours()">
  1447.                     Guardar Cambios
  1448.                 </button>
  1449.             </div>
  1450.         </div>
  1451.     </div>
  1453.     <script>
  1454.         function loadWorkingHours() {
  1455.             fetch('{{ path("helpdesk_report_working_hours_status") }}')
  1456.                 .then(response => response.json())
  1457.                 .then(data => {
  1458.                     displayWorkingHours(data);
  1459.                 })
  1460.                 .catch(error => {
  1461.                     console.error('Error loading working hours:', error);
  1462.                     document.getElementById('working-hours-content').innerHTML = 
  1463.                         '<div class="uv-error">Error al cargar los horarios laborales. Por favor, intente nuevamente.</div>';
  1464.                 });
  1465.         }
  1467.         function loadRecentTickets() {
  1468.             fetch('{{ path("helpdesk_report_working_hours_tickets") }}')
  1469.                 .then(response => response.json())
  1470.                 .then(data => {
  1471.                     // Limitar a solo los últimos 5 tickets
  1472.                     const limitedTickets = data.slice(0, 5);
  1473.                     displayRecentTickets(limitedTickets);
  1474.                 })
  1475.                 .catch(error => {
  1476.                     console.error('Error loading recent tickets:', error);
  1477.                     document.getElementById('tickets-content').innerHTML = 
  1478.                         '<div class="uv-error">Error al cargar los tickets recientes. Por favor, intente nuevamente.</div>';
  1479.                 });
  1480.         }
  1482.         function loadAgents() {
  1483.             fetch('{{ path("helpdesk_report_working_hours_agents") }}')
  1484.                 .then(response => response.json())
  1485.                 .then(data => {
  1486.                     displayAgents(data);
  1487.                 })
  1488.                 .catch(error => {
  1489.                     console.error('Error loading agents:', error);
  1490.                     document.getElementById('agents-content').innerHTML = 
  1491.                         '<div class="uv-error">Error al cargar los agentes. Por favor, intente nuevamente.</div>';
  1492.                 });
  1493.         }
  1495.         function displayWorkingHours(data) {
  1496.             const container = document.getElementById('working-hours-content');
  1497.             
  1498.             // Calcular estadísticas globales
  1499.             const countries = Object.values(data);
  1500.             const totalCountries = countries.length;
  1501.             const openCountries = countries.filter(c => c.status === 'open').length;
  1502.             const totalAgents = countries.reduce((sum, c) => sum + (c.agents ? c.agents.length : 0), 0);
  1503.             const activeAgents = countries.reduce((sum, c) => sum + (c.agents ? c.agents.filter(a => a.isEnabled).length : 0), 0);
  1504.             
  1505.             let html = `
  1506.                 <div class="uv-countries-dashboard">
  1507.                     <div class="uv-countries-grid">
  1508.             `;
  1510.             // Mostrar cada país con información expandida
  1511.             countries.forEach(country => {
  1512.                 const statusClass = country.status === 'open' ? 'open' : 'closed';
  1513.                 const statusText = country.status === 'open' ? 'Abierto' : 'Cerrado';
  1514.                 const countryFlag = getCountryFlag(country.country);
  1515.                 
  1516.                 // Contar agentes activos
  1517.                 const activeAgentsCount = country.agents ? country.agents.filter(agent => agent.isEnabled).length : 0;
  1518.                 const totalAgentsCount = country.agents ? country.agents.length : 0;
  1519.                 
  1520.                 html += `
  1521.                     <div class="uv-country-card-expanded ${statusClass}">
  1522.                         <div class="uv-country-main-info">
  1523.                             <div class="uv-country-name">
  1524.                                 <span class="uv-country-flag">${countryFlag}</span>
  1525.                                 ${country.country}
  1526.                             </div>
  1527.                             <div class="uv-country-status ${statusClass}">${statusText}</div>
  1528.                         </div>
  1529.                         
  1530.                         <div class="uv-country-details">
  1531.                             <div class="uv-detail-section">
  1532.                                 <div class="uv-detail-title">🕐 Hora Local</div>
  1533.                                 <div class="uv-detail-content">
  1534.                                     <div class="uv-time-display">${country.localTime}</div>
  1535.                                     <div style="font-size: 11px; color: #6c757d; margin-top: 2px;">${country.dayOfWeek}</div>
  1536.                             </div>
  1537.                             </div>
  1538.                             
  1539.                             <div class="uv-detail-section">
  1540.                                 <div class="uv-detail-title">📅 Horario Laboral</div>
  1541.                                 <div class="uv-detail-content">
  1542.                                     <div style="font-weight: 600;">${country.workingHours}</div>
  1543.                                     <div style="font-size: 11px; color: #6c757d; margin-top: 2px;">${country.workingDaysText}</div>
  1544.                             </div>
  1545.                             </div>
  1546.                             
  1547.                             <div class="uv-detail-section">
  1548.                                 <div class="uv-detail-title">🌍 Zona Horaria</div>
  1549.                                 <div class="uv-detail-content">${country.timezone}</div>
  1550.                             </div>
  1551.                             
  1552.                             <div class="uv-detail-section">
  1553.                                 <div class="uv-detail-title">👥 Agentes</div>
  1554.                                 <div class="uv-detail-content">
  1555.                                     <div style="font-weight: 600; color: #28a745;">${activeAgentsCount}/${totalAgentsCount} Activos</div>
  1556.                 </div>
  1557.                                                 </div>
  1558.                         </div>
  1559.                         
  1560.                         <div class="uv-agents-section">
  1561.                             <div class="uv-agents-title">
  1562.                                 👥 Agentes Asignados (${totalAgentsCount})
  1563.                             </div>
  1564.                             ${country.agents && country.agents.length > 0 ? 
  1565.                                 `<div class="uv-agents-preview">
  1566.                                     ${country.agents.slice(0, 4).map(agent => `
  1567.                                         <div class="uv-agent-chip">
  1568.                                             <div class="uv-agent-avatar-small">${getInitials(agent.name)}</div>
  1569.                                             <span>${agent.name}</span>
  1570.                                             <span style="color: ${agent.isEnabled ? '#28a745' : '#dc3545'};">${agent.isEnabled ? '🟢' : '🔴'}</span>
  1571.                                             </div>
  1572.                                         `).join('')}
  1573.                                     ${country.agents.length > 4 ? `<div class="uv-agent-chip" style="background: rgba(102, 126, 234, 0.1); color: #667eea;">+${country.agents.length - 4} más</div>` : ''}
  1574.                                     </div>` : 
  1575.                                     `<div class="uv-no-agents">No hay agentes asignados a esta región</div>`
  1576.                                 }
  1577.                             </div>
  1578.                         
  1579.                         <div style="margin-top: 15px; text-align: right;">
  1580.                             <button class="uv-edit-hours-btn" onclick="openEditHoursModal('${country.country}', ${JSON.stringify(country).replace(/"/g, '&quot;')})" title="Editar horarios">
  1581.                                 <span>✏️</span> Editar Horarios
  1582.                             </button>
  1583.                         </div>
  1584.                     </div>
  1585.                 `;
  1586.             });
  1588.             html += `
  1589.                     </div>
  1590.                     
  1591.                     <div class="uv-sidebar-stats">
  1592.                         <div class="uv-sidebar-title">
  1593.                             📊 Estadísticas Globales
  1594.                         </div>
  1595.                         
  1596.                         <div class="uv-stat-item">
  1597.                             <div class="uv-stat-label">
  1598.                                 <span class="uv-stat-icon">🌍</span>
  1599.                                 Países Totales
  1600.                             </div>
  1601.                             <div class="uv-stat-value">${totalCountries}</div>
  1602.                         </div>
  1603.                         
  1604.                         <div class="uv-stat-item">
  1605.                             <div class="uv-stat-label">
  1606.                                 <span class="uv-stat-icon">🟢</span>
  1607.                                 Oficinas Abiertas
  1608.                             </div>
  1609.                             <div class="uv-stat-value" style="color: #28a745;">${openCountries}</div>
  1610.                         </div>
  1611.                         
  1612.                         <div class="uv-stat-item">
  1613.                             <div class="uv-stat-label">
  1614.                                 <span class="uv-stat-icon">🔴</span>
  1615.                                 Oficinas Cerradas
  1616.                             </div>
  1617.                             <div class="uv-stat-value" style="color: #dc3545;">${totalCountries - openCountries}</div>
  1618.                         </div>
  1619.                         
  1620.                         <div class="uv-stat-item">
  1621.                             <div class="uv-stat-label">
  1622.                                 <span class="uv-stat-icon">👥</span>
  1623.                                 Agentes Totales
  1624.                             </div>
  1625.                             <div class="uv-stat-value">${totalAgents}</div>
  1626.                         </div>
  1627.                         
  1628.                         <div class="uv-stat-item">
  1629.                             <div class="uv-stat-label">
  1630.                                 <span class="uv-stat-icon">✅</span>
  1631.                                 Agentes Activos
  1632.                             </div>
  1633.                             <div class="uv-stat-value" style="color: #28a745;">${activeAgents}</div>
  1634.                         </div>
  1635.                         
  1636.                         <div class="uv-stat-item">
  1637.                             <div class="uv-stat-label">
  1638.                                 <span class="uv-stat-icon">⏰</span>
  1639.                                 Zonas Horarias
  1640.                             </div>
  1641.                             <div class="uv-stat-value">${new Set(countries.map(c => c.timezone)).size}</div>
  1642.                         </div>
  1643.                     </div>
  1644.                 </div>
  1645.             `;
  1646.             
  1647.             container.innerHTML = html;
  1648.         }
  1650.         function displayRecentTickets(tickets) {
  1651.             const container = document.getElementById('tickets-content');
  1652.             
  1653.             if (!tickets || tickets.length === 0) {
  1654.                 container.innerHTML = '<div class="uv-error">No se encontraron tickets recientes.</div>';
  1655.                 return;
  1656.             }
  1658.             let html = `
  1659.                 <table class="uv-tickets-table">
  1660.                     <thead>
  1661.                         <tr>
  1662.                             <th>Ticket ID</th>
  1663.                             <th>Asunto</th>
  1664.                             <th>Cliente</th>
  1665.                             <th>Región</th>
  1666.                             <th>Estado</th>
  1667.                             <th>Prioridad</th>
  1668.                             <th>Agente Asignado</th>
  1669.                             <th>Fecha Creación</th>
  1670.                             <th>Acciones</th>
  1671.                         </tr>
  1672.                     </thead>
  1673.                     <tbody>
  1674.             `;
  1676.             tickets.forEach(ticket => {
  1677.                 const priorityClass = getPriorityClass(ticket.priority);
  1678.                 const statusClass = getStatusClass(ticket.status);
  1679.                 
  1680.                 html += `
  1681.                     <tr>
  1682.                         <td><a href="/en/member/ticket/view/${ticket.ticketId}" class="uv-ticket-id-link" target="_blank">#${ticket.ticketId}</a></td>
  1683.                         <td><div class="uv-ticket-subject" title="${ticket.subject}">${ticket.subject}</div></td>
  1684.                         <td>
  1685.                             <div class="uv-customer-info">
  1686.                                 <div class="uv-customer-name">${ticket.customer.name}</div>
  1687.                                 <div class="uv-customer-email">${ticket.customer.email}</div>
  1688.                                 <small>IDOR: ${ticket.customer.idor || 'N/A'}</small>
  1689.                             </div>
  1690.                         </td>
  1691.                         <td>
  1692.                             <div class="uv-region-info">
  1693.                                 <div class="uv-region-name">${ticket.region.name}</div>
  1694.                                 <div class="uv-region-description">${ticket.region.description}</div>
  1695.                             </div>
  1696.                         </td>
  1697.                         <td><span class="uv-status-badge-ticket ${statusClass}">${ticket.status}</span></td>
  1698.                         <td><span class="uv-priority-badge ${priorityClass}">${ticket.priority}</span></td>
  1699.                         <td>
  1700.                             ${ticket.agent ? 
  1701.                                 `<div class="uv-agent-assigned">
  1702.                                     <div class="uv-agent-assigned-name">${ticket.agent.name}</div>
  1703.                                     <div class="uv-agent-assigned-email">${ticket.agent.email}</div>
  1704.                                 </div>` : 
  1705.                                 `<div class="uv-agent-assigned-none">Sin asignar</div>`
  1706.                             }
  1707.                         </td>
  1708.                         <td>${formatDate(ticket.createdAt)}</td>
  1709.                         <td>
  1710.                             <button class="uv-ticket-assign-btn" onclick="openAssignAgentModal(${ticket.ticketId})">
  1711.                                 Asignar Agente
  1712.                             </button>
  1713.                         </td>
  1714.                     </tr>
  1715.                 `;
  1716.             });
  1718.             html += '</tbody></table>';
  1719.             container.innerHTML = html;
  1720.         }
  1722.         function displayAgents(agents) {
  1723.             const container = document.getElementById('agents-content');
  1724.             let html = '<table class="uv-agents-table">';
  1726.             if (!agents || agents.length === 0) {
  1727.                 html += '<tr><td colspan="9" class="uv-error">No se encontraron agentes asignados.</td></tr>';
  1728.             } else {
  1729.                 html += `
  1730.                     <thead>
  1731.                         <tr>
  1732.                             <th>ID</th>
  1733.                             <th>Nombre</th>
  1734.                             <th>Email</th>
  1735.                             <th>IDOR</th>
  1736.                             <th>Rol</th>
  1737.                             <th>Región</th>
  1738.                             <th>Estado</th>
  1739.                             <th>Última Actividad</th>
  1740.                         </tr>
  1741.                     </thead>
  1742.                     <tbody>
  1743.                 `;
  1745.                 agents.forEach(agent => {
  1746.                     html += `
  1747.                         <tr>
  1748.                             <td><span class="uv-agent-id">#${agent.id}</span></td>
  1749.                             <td><span class="uv-agent-name">${agent.name}</span></td>
  1750.                             <td><span class="uv-agent-email">${agent.email}</span></td>
  1751.                             <td><span class="uv-agent-idor">${agent.idor || 'N/A'}</span></td>
  1752.                             <td><span class="uv-agent-role">${agent.role}</span></td>
  1753.                             <td>
  1754.                                 <div class="uv-agent-region-info">
  1755.                                     <div class="uv-agent-region">${agent.region.name}</div>
  1756.                                     <div class="uv-agent-region-description">${agent.region.description}</div>
  1757.                                 </div>
  1758.                             </td>
  1759.                             <td><span class="uv-agent-status ${agent.isEnabled ? 'active' : 'inactive'}">${agent.isEnabled ? 'Activo' : 'Inactivo'}</span></td>
  1760.                             <td><span class="uv-agent-last-activity">${agent.lastActivity}</span></td>
  1761.                         </tr>
  1762.                     `;
  1763.                 });
  1764.             }
  1765.             html += '</tbody></table>';
  1766.             container.innerHTML = html;
  1767.         }
  1769.         function getPriorityClass(priority) {
  1770.             const priorityMap = {
  1771.                 'low': 'low',
  1772.                 'medium': 'medium',
  1773.                 'high': 'high'
  1774.             };
  1775.             return priorityMap[priority.toLowerCase()] || 'low';
  1776.         }
  1778.         function getStatusClass(status) {
  1779.             const statusMap = {
  1780.                 'open': 'open',
  1781.                 'pending': 'pending',
  1782.                 'closed': 'closed'
  1783.             };
  1784.             return statusMap[status.toLowerCase()] || 'open';
  1785.         }
  1787.         function formatDate(dateString) {
  1788.             const date = new Date(dateString);
  1789.             return date.toLocaleDateString('es-ES', {
  1790.                 year: 'numeric',
  1791.                 month: 'short',
  1792.                 day: 'numeric',
  1793.                 hour: '2-digit',
  1794.                 minute: '2-digit'
  1795.             });
  1796.         }
  1798.         function getCountryFlag(country) {
  1799.             const flags = {
  1800.                 'Casa Central': '🏢',
  1801.                 'Colombia': '🇨🇴',
  1802.                 'Mexico': '🇲🇽',
  1803.                 'Brasil': '🇧🇷',
  1804.                 'España': '🇪🇸',
  1805.                 'Peru': '🇵🇪',
  1806.                 'Chile': '🇨🇱',
  1807.                 'Venezuela': '🇻🇪',
  1808.                 'Costa Rica': '🇨🇷'
  1809.             };
  1810.             return flags[country] || '🌍';
  1811.         }
  1812.         
  1813.         function getInitials(name) {
  1814.             return name.split(' ').map(word => word.charAt(0)).join('').toUpperCase().substring(0, 2);
  1815.         }
  1816.         
  1817.         // Función eliminada - ya no necesaria con el nuevo diseño expandido
  1819.         function refreshAll() {
  1820.             // Actualizar horarios laborales
  1821.             document.getElementById('working-hours-content').innerHTML = 
  1822.                 '<div class="uv-loading"><i class="fa fa-spinner fa-spin"></i> Actualizando horarios...</div>';
  1823.             
  1824.             // Actualizar tickets
  1825.             document.getElementById('tickets-content').innerHTML = 
  1826.                 '<div class="uv-loading"><i class="fa fa-spinner fa-spin"></i> Actualizando tickets...</div>';
  1827.             
  1828.             // Actualizar agentes
  1829.             document.getElementById('agents-content').innerHTML = 
  1830.                 '<div class="uv-loading"><i class="fa fa-spinner fa-spin"></i> Actualizando agentes...</div>';
  1831.             
  1832.             loadWorkingHours();
  1833.             loadRecentTickets();
  1834.             loadAgents();
  1835.         }
  1837.         // Load all data when page loads
  1838.         document.addEventListener('DOMContentLoaded', function() {
  1839.             loadWorkingHours();
  1840.             loadRecentTickets();
  1841.             loadAgents();
  1842.             
  1843.             // Auto-refresh every 5 minutes
  1844.             setInterval(function() {
  1845.                 loadWorkingHours();
  1846.                 loadRecentTickets();
  1847.                 loadAgents();
  1848.             }, 5 * 60 * 1000);
  1849.         });
  1850.         
  1851.         // Variables globales para el modal
  1852.         let currentTicketId = null;
  1853.         let selectedAgentId = null;
  1854.         let allAgents = [];
  1855.         
  1856.         // Función para abrir el modal de asignación de agentes
  1857.         function openAssignAgentModal(ticketId) {
  1858.             currentTicketId = ticketId;
  1859.             selectedAgentId = null;
  1860.             
  1861.             // Mostrar el modal
  1862.             document.getElementById('assignAgentModal').classList.add('show');
  1863.             document.getElementById('modalTicketId').textContent = '#' + ticketId;
  1864.             
  1865.             // Ocultar mensaje de confirmación
  1866.             document.getElementById('confirmationMessage').style.display = 'none';
  1867.             
  1868.             // Deshabilitar botón de confirmación
  1869.             document.getElementById('confirmAssignBtn').disabled = true;
  1870.             
  1871.             // Cargar agentes activos
  1872.             loadActiveAgentsForModal();
  1873.         }
  1874.         
  1875.         // Función para cerrar el modal
  1876.         function closeAssignAgentModal() {
  1877.             document.getElementById('assignAgentModal').classList.remove('show');
  1878.             currentTicketId = null;
  1879.             selectedAgentId = null;
  1880.         }
  1881.         
  1882.         // Función para cargar agentes activos en el modal (solo de oficinas abiertas)
  1883.         function loadActiveAgentsForModal() {
  1884.             // Siempre cargar agentes de oficinas abiertas en tiempo real
  1885.             fetch('{{ path("helpdesk_report_working_hours_active_office_agents") }}')
  1886.                     .then(response => response.json())
  1887.                     .then(data => {
  1888.                         allAgents = data;
  1889.                         displayAgentsInModal();
  1890.                     })
  1891.                     .catch(error => {
  1892.                     console.error('Error loading active office agents for modal:', error);
  1893.                         document.getElementById('agentsGrid').innerHTML = 
  1894.                         '<div class="uv-error">Error al cargar los agentes de oficinas abiertas. Por favor, intente nuevamente.</div>';
  1895.                     });
  1896.         }
  1897.         
  1898.         // Función para mostrar agentes en el modal
  1899.         function displayAgentsInModal() {
  1900.             const agentsGrid = document.getElementById('agentsGrid');
  1901.             const activeAgents = allAgents.filter(agent => agent.isEnabled);
  1902.             
  1903.             if (allAgents.length === 0) {
  1904.                 agentsGrid.innerHTML = `
  1905.                     <div class="uv-error">
  1906.                         <div style="text-align: center; padding: 20px;">
  1907.                             <div style="font-size: 24px; margin-bottom: 10px;">🏢</div>
  1908.                             <div style="font-weight: 600; margin-bottom: 5px;">No hay oficinas abiertas</div>
  1909.                             <div style="font-size: 12px; color: #6c757d;">
  1910.                                 Todas las oficinas están cerradas en este momento.<br>
  1911.                                 Los agentes estarán disponibles cuando sus oficinas abran.
  1912.                             </div>
  1913.                         </div>
  1914.                     </div>
  1915.                 `;
  1916.                 return;
  1917.             }
  1918.             
  1919.             if (activeAgents.length === 0) {
  1920.                 agentsGrid.innerHTML = '<div class="uv-error">No hay agentes activos disponibles en las oficinas abiertas.</div>';
  1921.                 return;
  1922.             }
  1923.             
  1924.             let html = '';
  1925.             activeAgents.forEach(agent => {
  1926.                 const regionName = agent.region.name || 'Sin región';
  1927.                 const regionFlag = getCountryFlag(regionName.replace('OR ', ''));
  1928.                 
  1929.                 html += `
  1930.                     <div class="uv-agent-option" onclick="selectAgent(${agent.id})" data-agent-id="${agent.id}">
  1931.                         <div class="uv-agent-option-avatar">${getInitials(agent.name)}</div>
  1932.                         <div class="uv-agent-option-name">${agent.name}</div>
  1933.                         <div class="uv-agent-option-email">${agent.email}</div>
  1934.                         <div class="uv-agent-option-region" style="display: flex; align-items: center; gap: 4px; margin: 4px 0; font-size: 10px; color: #667eea;">
  1935.                             <span>${regionFlag}</span>
  1936.                             <span>${regionName}</span>
  1937.                         </div>
  1938.                         <div class="uv-agent-option-status">🟢 Activo</div>
  1939.                     </div>
  1940.                 `;
  1941.             });
  1942.             
  1943.             agentsGrid.innerHTML = html;
  1944.         }
  1945.         
  1946.         // Función para seleccionar un agente
  1947.         function selectAgent(agentId) {
  1948.             // Remover selección anterior
  1949.             document.querySelectorAll('.uv-agent-option').forEach(option => {
  1950.                 option.classList.remove('selected');
  1951.             });
  1952.             
  1953.             // Seleccionar el nuevo agente
  1954.             const selectedOption = document.querySelector(`[data-agent-id="${agentId}"]`);
  1955.             if (selectedOption) {
  1956.                 selectedOption.classList.add('selected');
  1957.             }
  1958.             
  1959.             selectedAgentId = agentId;
  1960.             
  1961.             // Mostrar mensaje de confirmación
  1962.             document.getElementById('confirmationMessage').style.display = 'block';
  1963.             
  1964.             // Habilitar botón de confirmación
  1965.             document.getElementById('confirmAssignBtn').disabled = false;
  1966.         }
  1967.         
  1968.         // Función para confirmar la asignación
  1969.         function confirmAssignAgent() {
  1970.             if (!currentTicketId || !selectedAgentId) {
  1971.                 alert('Por favor, selecciona un agente primero.');
  1972.                 return;
  1973.             }
  1974.             
  1975.             // Deshabilitar botón durante la operación
  1976.             document.getElementById('confirmAssignBtn').disabled = true;
  1977.             document.getElementById('confirmAssignBtn').textContent = 'Asignando...';
  1978.             
  1979.             // Realizar la asignación
  1980.             assignTicketToAgent(currentTicketId, selectedAgentId);
  1981.         }
  1982.         
  1983.         // Función para asignar el ticket al agente
  1984.         function assignTicketToAgent(ticketId, agentId) {
  1985.             fetch('{{ path("helpdesk_report_working_hours_assign_agent") }}', {
  1986.                 method: 'POST',
  1987.                 headers: {
  1988.                     'Content-Type': 'application/json',
  1989.                 },
  1990.                 body: JSON.stringify({
  1991.                     ticketId: ticketId,
  1992.                     agentId: agentId
  1993.                 })
  1994.             })
  1995.             .then(response => response.json())
  1996.             .then(data => {
  1997.                 if (data.success) {
  1998.                     // Mostrar mensaje de éxito
  1999.                     alert('✅ Ticket asignado exitosamente al agente.');
  2000.                     
  2001.                     // Cerrar modal
  2002.                     closeAssignAgentModal();
  2003.                     
  2004.                     // Actualizar la lista de tickets
  2005.                     loadRecentTickets();
  2006.                 } else {
  2007.                     alert('❌ Error al asignar el ticket: ' + (data.message || 'Error desconocido'));
  2008.                 }
  2009.             })
  2010.             .catch(error => {
  2011.                 console.error('Error assigning ticket:', error);
  2012.                 alert('❌ Error al asignar el ticket. Por favor, intente nuevamente.');
  2013.             })
  2014.             .finally(() => {
  2015.                 // Restaurar botón
  2016.                 document.getElementById('confirmAssignBtn').disabled = false;
  2017.                 document.getElementById('confirmAssignBtn').textContent = 'Confirmar Asignación';
  2018.             });
  2019.         }
  2020.         
  2021.         // Cerrar modal al hacer clic fuera de él
  2022.         document.addEventListener('click', function(event) {
  2023.             const modal = document.getElementById('assignAgentModal');
  2024.             if (event.target === modal) {
  2025.                 closeAssignAgentModal();
  2026.             }
  2027.         });
  2028.         
  2029.         // Cerrar modal con tecla Escape
  2030.         document.addEventListener('keydown', function(event) {
  2031.             if (event.key === 'Escape') {
  2032.                 closeAssignAgentModal();
  2033.             }
  2034.         });
  2035.         
  2036.         // ===== FUNCIONES PARA EDITAR HORARIOS =====
  2037.         
  2038.         let currentEditingCountry = null;
  2039.         
  2040.         // Función para abrir el modal de edición de horarios
  2041.         function openEditHoursModal(countryName, countryData) {
  2042.             currentEditingCountry = countryData;
  2043.             
  2044.             // Llenar el formulario con los datos actuales
  2045.             document.getElementById('editCountryName').textContent = countryName;
  2046.             document.getElementById('editTimezone').value = countryData.timezone;
  2047.             document.getElementById('editStartTime').value = countryData.workingHours.split(' - ')[0];
  2048.             document.getElementById('editEndTime').value = countryData.workingHours.split(' - ')[1];
  2049.             
  2050.             // Configurar días laborales
  2051.             const workingDays = countryData.workingDays;
  2052.             document.getElementById('editMonday').checked = workingDays.includes('Lunes');
  2053.             document.getElementById('editTuesday').checked = workingDays.includes('Martes');
  2054.             document.getElementById('editWednesday').checked = workingDays.includes('Miércoles');
  2055.             document.getElementById('editThursday').checked = workingDays.includes('Jueves');
  2056.             document.getElementById('editFriday').checked = workingDays.includes('Viernes');
  2057.             document.getElementById('editSaturday').checked = workingDays.includes('Sábado');
  2058.             document.getElementById('editSunday').checked = workingDays.includes('Domingo');
  2059.             
  2060.             // Mostrar el modal
  2061.             document.getElementById('editHoursModal').style.display = 'flex';
  2062.         }
  2063.         
  2064.         // Función para cerrar el modal de edición
  2065.         function closeEditHoursModal() {
  2066.             document.getElementById('editHoursModal').style.display = 'none';
  2067.             currentEditingCountry = null;
  2068.         }
  2069.         
  2070.         // Función para guardar los cambios de horarios
  2071.         function saveWorkingHours() {
  2072.             if (!currentEditingCountry) {
  2073.                 alert('No hay país seleccionado para editar.');
  2074.                 return;
  2075.             }
  2076.             
  2077.             // Recopilar datos del formulario
  2078.             const formData = {
  2079.                 countryName: currentEditingCountry.country,
  2080.                 supportGroupId: currentEditingCountry.supportGroupId,
  2081.                 timezone: document.getElementById('editTimezone').value,
  2082.                 startTime: document.getElementById('editStartTime').value,
  2083.                 endTime: document.getElementById('editEndTime').value,
  2084.                 monday: document.getElementById('editMonday').checked ? 1 : 0,
  2085.                 tuesday: document.getElementById('editTuesday').checked ? 1 : 0,
  2086.                 wednesday: document.getElementById('editWednesday').checked ? 1 : 0,
  2087.                 thursday: document.getElementById('editThursday').checked ? 1 : 0,
  2088.                 friday: document.getElementById('editFriday').checked ? 1 : 0,
  2089.                 saturday: document.getElementById('editSaturday').checked ? 1 : 0,
  2090.                 sunday: document.getElementById('editSunday').checked ? 1 : 0
  2091.             };
  2092.             
  2093.             // Validar datos
  2094.             if (!formData.timezone || !formData.startTime || !formData.endTime) {
  2095.                 alert('Por favor, complete todos los campos obligatorios.');
  2096.                 return;
  2097.             }
  2098.             
  2099.             // Deshabilitar botón durante la operación
  2100.             const saveBtn = document.getElementById('saveWorkingHoursBtn');
  2101.             saveBtn.disabled = true;
  2102.             saveBtn.textContent = 'Guardando...';
  2103.             
  2104.             // Enviar datos al servidor
  2105.             fetch('{{ path("helpdesk_report_working_hours_update_hours") }}', {
  2106.                 method: 'POST',
  2107.                 headers: {
  2108.                     'Content-Type': 'application/json',
  2109.                 },
  2110.                 body: JSON.stringify(formData)
  2111.             })
  2112.             .then(response => response.json())
  2113.             .then(data => {
  2114.                 if (data.success) {
  2115.                     alert('✅ Horarios actualizados exitosamente.');
  2116.                     closeEditHoursModal();
  2117.                     
  2118.                     // Actualizar la vista
  2119.                     loadWorkingHours();
  2120.                 } else {
  2121.                     alert('❌ Error al actualizar horarios: ' + (data.message || 'Error desconocido'));
  2122.                 }
  2123.             })
  2124.             .catch(error => {
  2125.                 console.error('Error updating working hours:', error);
  2126.                 alert('❌ Error al actualizar horarios. Por favor, intente nuevamente.');
  2127.             })
  2128.             .finally(() => {
  2129.                 // Restaurar botón
  2130.                 saveBtn.disabled = false;
  2131.                 saveBtn.textContent = 'Guardar Cambios';
  2132.             });
  2133.         }
  2134.         
  2135.         // Cerrar modal de edición al hacer clic fuera de él
  2136.         document.addEventListener('click', function(event) {
  2137.             const modal = document.getElementById('editHoursModal');
  2138.             if (event.target === modal) {
  2139.                 closeEditHoursModal();
  2140.             }
  2141.         });
  2142.     </script>
  2143. {% endblock %}