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