@extends('layouts.admin')

@section('page-title') Tableau de bord du personnel @endsection
@section('page-subtitle') Vue d'ensemble des performances et statistiques @endsection

@section('styles')
<link href="{{ asset('css/pages/admin/base.css') }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/workers/notifications.css') }}" rel="stylesheet">
<link href="{{ asset('css/components/client-logo.css') }}" rel="stylesheet">
<link href="{{ asset('css/components/modals.css') }}" rel="stylesheet">
<link href="{{ asset('css/components/badges.css') }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/workers/workers-kpi.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/components/dispatch-slider.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/components/dispatch-modal.css') }}?v={{ time() }}" rel="stylesheet">
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js" integrity="sha384-Sse/HDqcypGpyTDpvZOJNnG0TT3feGQUkF9H+mnRvic+LjR+K1NhTt8f51KIQ3v3" crossorigin="anonymous"></script>
<script src="{{ asset('js/components/dispatch-manager.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/admin/workers/kpi/index.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/admin/workers/notifications.js') }}"></script>
@endsection

@section('content')
<div class="kpi-page">
  <div class="kpi-header-card">
    <div class="kpi-header-row">
      <div class="kpi-calendar-wrapper">
        <button id="prev-month" class="kpi-calendar-btn">
          <i class="fa-solid fa-chevron-left"></i>
        </button>
        <button type="button" id="current-month-display" class="kpi-calendar-current" data-modal-open="month-year-modal">{{ ucfirst(trans('months.'.date('F'))).' '.date('Y') }}</button>
        <button id="next-month" class="kpi-calendar-btn" {{ date('Y-m') >= date('Y-m') ? 'disabled' : '' }}>
          <i class="fa-solid fa-chevron-right"></i>
        </button>
      </div>
      
      @php
        $currentDate = \Carbon\Carbon::now();
        
        // Récupérer ou créer la config du mois actuel
        $dispatchConfig = \App\Models\DispatchConfiguration::firstOrCreate(
          ['year' => $currentDate->year, 'month' => $currentDate->month],
          ['sentier_percentage' => 50, 'klam_percentage' => 50]
        );
      @endphp
      
      <div class="kpi-dispatch-wrapper kpi-dispatch-hidden" id="kpiDispatchWrapper" data-dispatch-details="{{ $dispatchDetails ?? '{}' }}">
        <span class="kpi-dispatch-percentage" id="kpiSentierPercentage">{{ $dispatchConfig->sentier_percentage }}%</span>
        <div class="kpi-dispatch-logo">
          <img src="{{ asset('images/logos/Sentier_Services.png') }}" alt="Sentier Services">
        </div>
        <input type="range" class="kpi-dispatch-slider" id="kpiDispatchSlider" min="0" max="100" value="{{ $dispatchConfig->sentier_percentage }}" data-value="{{ $dispatchConfig->sentier_percentage }}" data-min="{{ $minSentierPercentage ?? 13 }}" data-max="{{ $maxSentierPercentage ?? 100 }}" disabled>
        <div class="kpi-dispatch-logo">
          <img src="{{ asset('images/logos/Klam.png') }}" alt="Klam">
        </div>
        <span class="kpi-dispatch-percentage" id="kpiKlamPercentage">{{ $dispatchConfig->klam_percentage }}%</span>
        <button type="button" class="kpi-dispatch-edit-btn" id="kpiEditDispatchBtn" title="Modifier le dispatch">
          <i class="fas fa-pen"></i>
        </button>
        <button type="button" class="kpi-dispatch-save-btn dispatch-btn-hidden" id="kpiSaveDispatchBtn" title="Sauvegarder">
          <i class="fas fa-check"></i>
        </button>
        <button type="button" class="kpi-dispatch-info-btn" id="kpiDispatchInfoBtn" title="Détails du dispatch">
          <i class="fas fa-info-circle"></i>
        </button>
      </div>
      
      <div class="kpi-actions-group">
        <a href="{{ route('admin.notifications.index') }}" class="kpi-action-btn kpi-action-btn--info">
          <i class="fas fa-bell"></i>
          <span>Notifications</span>
        </a>
        <a href="{{ route('admin.workers.menage-list') }}" class="kpi-action-btn kpi-action-btn--secondary">
          <i class="fas fa-broom"></i>
          <span>Personnel ménage</span>
        </a>
        <a href="{{ route('admin.workers.index') }}" class="kpi-action-btn kpi-action-btn--primary">
          <i class="fas fa-users"></i>
          <span>Liste ouvriers</span>
        </a>
      </div>
    </div>
  </div>

  <div class="kpi-section">
    <h2 class="kpi-section-title">Synthèse main-d'œuvre ouvriers</h2>
    <div class="kpi-cards-row">
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-not-equal"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="total-cost-misc">0 €</span>
          <span class="kpi-label">Total restant à payer</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-random"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="misc-cost">0 €</span>
          <span class="kpi-label">Payé</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-file-invoice-dollar"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="total-cost">0 €</span>
          <span class="kpi-label">Coût total</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-calendar-day"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="daily-average">0 €</span>
          <span class="kpi-label">Moyenne €/jour ouvré</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-chart-line"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="month-forecast">0 €</span>
          <span class="kpi-label">Prévision fin de mois</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-users"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="workers-count">0</span>
          <span class="kpi-label">Ouvriers du mois</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-user-friends"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="avg-workers-per-day">0</span>
          <span class="kpi-label">Moyenne ouvriers/jour</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-calendar-check"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="worked-days-count">0</span>
          <span class="kpi-label">Jours travaillés</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-clock"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="avg-hours-per-day">0h</span>
          <span class="kpi-label">Heures moy./jour</span>
        </div>
      </div>
      <div class="kpi-card kpi-card-dispatch dispatch-only-card hidden" id="sentier-dispatch-card">
        <div class="kpi-dispatch-logo-box">
          <img src="{{ asset('images/logos/Sentier_Services.png') }}" alt="Sentier Services">
        </div>
        <div class="kpi-box-content">
          <span class="kpi-value">
            <span id="sentier-dispatch-cost">0,00 €</span>
            <span class="kpi-percentage-badge">[<span id="sentier-dispatch-percentage">50</span>%]</span>
          </span>
          <span class="kpi-label">Coût total</span>
        </div>
        <div class="kpi-dispatch-info-icon" data-tooltip="Règles Sentier Services :&#10;• Salarié/Micro : Salaires nets uniquement&#10;• Micro : % dispatch du reste à payer&#10;• Autre : 100% du reste à payer">
          <i class="fas fa-info-circle"></i>
        </div>
      </div>
      <div class="kpi-card kpi-card-dispatch dispatch-only-card hidden" id="klam-dispatch-card">
        <div class="kpi-dispatch-logo-box">
          <img src="{{ asset('images/logos/Klam.png') }}" alt="Klam">
        </div>
        <div class="kpi-box-content">
          <span class="kpi-value">
            <span id="klam-dispatch-cost">0,00 €</span>
            <span class="kpi-percentage-badge">[<span id="klam-dispatch-percentage">50</span>%]</span>
          </span>
          <span class="kpi-label">Coût total</span>
        </div>
        <div class="kpi-dispatch-info-icon" data-tooltip="Règles Klam :&#10;• Salarié/Micro : 100% du reste à payer&#10;• Micro : % dispatch du reste à payer&#10;• Autre : 0 €">
          <i class="fas fa-info-circle"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="kpi-section">
    <h2 class="kpi-section-title">Synthèse personnel de ménage</h2>
    <div class="kpi-cards-row">
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-not-equal"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-remaining-cost">0 €</span>
          <span class="kpi-label">Total restant à payer</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-euro"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-paid-cost">0 €</span>
          <span class="kpi-label">Payé</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-broom"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-total-cost">0 €</span>
          <span class="kpi-label">Coût total ménage</span>
        </div>
      </div>

      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-box"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-package-cost">0 €</span>
          <span class="kpi-label">Coûts Forfaits</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-hourglass-half"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-hourly-cost">0 €</span>
          <span class="kpi-label">Coûts A l'heure</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-check-circle"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-validated-services">0</span>
          <span class="kpi-label">Prestations validées</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-user-check"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-active-workers">0</span>
          <span class="kpi-label">Agents affectés</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-check-circle"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-validated-declarations">0/0</span>
          <span class="kpi-label">Declarations validées</span>
        </div>
      </div>
      <div class="kpi-card">
        <div class="kpi-box-icon"><i class="fas fa-balance-scale"></i></div>
        <div class="kpi-box-content">
          <span class="kpi-value" id="menage-average-cost">0 €</span>
          <span class="kpi-label">Coût moyen / contrat</span>
        </div>
      </div>
    </div>
  </div>

  <div class="kpi-section">
    <div class="kpi-section-header">
      <h2 class="kpi-section-title">Analyse visuelle</h2>
    </div>
    <div class="charts-grid">
      <div class="chart-container">
        <div class="chart-header">
          <h3 class="chart-title">Comparatif coûts main-d'œuvre</h3>
        </div>
        <div class="chart-body">
          <canvas id="total-cost-comparison-chart" height="220"></canvas>
        </div>
      </div>
      <div class="chart-container">
        <div class="chart-header">
          <h3 class="chart-title">Répartition prestations ménage</h3>
        </div>
        <div class="chart-body">
          <canvas id="menage-breakdown-chart" height="220"></canvas>
          <div class="chart-empty" id="menage-breakdown-empty" style="display:none;">Aucune donnée pour cette période.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="kpi-section">
    <div class="kpi-section-header">
      <h2 class="kpi-section-title">Données détaillées</h2>
      
      <!-- Onglets de sélection -->
      <div class="radio-inputs declarations-toggle">
        <label class="radio">
          <input type="radio" name="detailed-view" value="workers" checked>
          <span class="name">Ouvriers</span>
        </label>
        <label class="radio">
          <input type="radio" name="detailed-view" value="menage">
          <span class="name">Personnel&nbsp;de&nbsp;ménage</span>
        </label>
      </div>
    </div>
    <!-- Section Ouvriers -->
    <div id="workers-section" class="detailed-section">
      <div class="tables-grid">
        <div class="table-card">
          <div class="chart-header">
            <h3 class="chart-title">Coût par chantier</h3>
          </div>
          <div class="chart-body">
            <div id="address-costs" class="entries-container">
              <div class="loading-indicator">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Chargement des données...</span>
              </div>
              <div class="data-table kpi-hidden" id="address-costs-table">
                <div class="dt-head">
                  <div class="dt-col dt-col-client">Client</div>
                  <div class="dt-col dt-col-addr">Adresse du chantier</div>
                  <div class="dt-col dt-col-type text-center">Type</div>
                  <div class="dt-col dt-col-cost text-end">Coût</div>
                </div>
                <div class="dt-body"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="table-card">
          <div class="chart-header">
            <h3 class="chart-title">Coût par ouvrier</h3>
          </div>
          <div class="chart-body">
            <div id="worker-costs" class="entries-container">
              <div class="loading-indicator">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Chargement des données...</span>
              </div>
              <div class="data-table kpi-hidden" id="worker-costs-table">
                <div class="dt-head">
                  <div class="dt-col dt-col-worker">Ouvrier</div>
                  <div class="dt-col dt-col-hours text-center">Nbr h.</div>
                  <div class="dt-col dt-col-extra text-center">Nbr h. supp.</div>
                  <div class="dt-col dt-col-hours-total text-center">Nbr total h.</div>
                  <div class="dt-col dt-col-days text-center">Nbr jours</div>
                  <div class="dt-col dt-col-avg-hours text-center">Nbr moy. h.</div>
                  <div class="dt-col dt-col-entity text-end">Sentier Services</div>
                  <div class="dt-col dt-col-entity text-end">Klam</div>
                  <div class="dt-col dt-col-cost text-end">Coût total</div>
                  <div class="dt-col dt-col-status text-center">Statut</div>
                  <div class="dt-col dt-col-invoices text-center">Facture(s)</div>
                </div>
                <div class="dt-body"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="table-card">
          <div class="chart-header">
            <h3 class="chart-title">Derniers horaires ajoutés</h3>
          </div>
          <div class="chart-body">
            <div id="latest-schedules" class="entries-container">
              <div class="loading-indicator">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Chargement des données...</span>
              </div>
              <table class="table table-hover kpi-hidden">
                <thead>
                  <tr>
                    <th>Ouvrier</th>
                    <th>Date</th>
                    <th>Début</th>
                    <th>Fin</th>
                    <th>Chantier</th>
                    <th>Horaire de déclaration</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Section Personnel de ménage -->
    <div id="menage-section" class="detailed-section kpi-hidden">
      <div class="tables-grid">
        <div class="table-card">
          <div class="chart-header">
            <h3 class="chart-title">Prestations à l'heure déclarées</h3>
            <div class="chart-search">
              <div class="search-box-mini">
                <i class="fas fa-search search-box-mini__icon"></i>
                <input type="text" id="hourly-search" class="search-box-mini__input" placeholder="Rechercher...">
                <button type="button" id="clear-hourly-search" class="search-box-mini__clear kpi-hidden" title="Vider">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="chart-body">
            <div id="menage-hourly-declarations" class="entries-container">
              <div class="loading-indicator">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Chargement des données...</span>
              </div>
              <div class="data-table kpi-hidden" id="menage-hourly-table">
                <div class="dt-head">
                  <div class="dt-col dt-col-agent">Agent</div>
                  <div class="dt-col dt-col-date">Date</div>
                  <div class="dt-col dt-col-client">Client</div>
                  <div class="dt-col dt-col-type text-center">Type</div>
                  <div class="dt-col dt-col-hours text-center">Heures</div>
                  <div class="dt-col dt-col-amount text-end">Montant</div>
                  <div class="dt-col dt-col-status text-center">Statut</div>
                </div>
                <div class="dt-body" id="menage-hourly-tbody"></div>
                <div class="dt-footer">
                  <div class="dt-row table-active">
                    <div class="dt-col dt-col-agent"></div>
                    <div class="dt-col dt-col-date"></div>
                    <div class="dt-col dt-col-client"></div>
                    <div class="dt-col dt-col-type text-end">Totaux visibles :</div>
                    <div class="dt-col dt-col-hours text-center" id="hourly-total-hours">0h00</div>
                    <div class="dt-col dt-col-amount text-end" id="hourly-total-amount">0,00 €</div>
                    <div class="dt-col dt-col-status"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="table-card">
          <div class="chart-header">
            <h3 class="chart-title">Forfaits déclarés</h3>
            <div class="chart-search">
              <div class="search-box-mini">
                <i class="fas fa-search search-box-mini__icon"></i>
                <input type="text" id="package-search" class="search-box-mini__input" placeholder="Rechercher...">
                <button type="button" id="clear-package-search" class="search-box-mini__clear kpi-hidden" title="Vider">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="chart-body">
            <div id="menage-package-declarations" class="entries-container">
              <div class="loading-indicator">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Chargement des données...</span>
              </div>
              <div class="data-table kpi-hidden" id="menage-package-table">
                <div class="dt-head">
                  <div class="dt-col dt-col-agent">Agent</div>
                  <div class="dt-col dt-col-client">Client</div>
                  <div class="dt-col dt-col-type text-center">Type</div>
                  <div class="dt-col dt-col-amount text-end">Montant</div>
                  <div class="dt-col dt-col-status text-center">Statut</div>
                </div>
                <div class="dt-body" id="menage-package-tbody"></div>
                <div class="dt-footer">
                  <div class="dt-row table-active">
                    <div class="dt-col dt-col-agent"></div>
                    <div class="dt-col dt-col-client"></div>
                    <div class="dt-col dt-col-type text-end">Total visible :</div>
                    <div class="dt-col dt-col-amount text-end" id="package-total-amount">0,00 €</div>
                    <div class="dt-col dt-col-status"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal pour afficher les détails d'une adresse -->
<div class="modal-layer" data-modal-id="address-details-modal">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal">
    <div class="glass-form" style="max-width: 900px; width: 100%;">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <div class="glass-header">
          <h3 class="glass-title">
            <i class="fas fa-building" style="margin-right: 0.75rem; color: #3b82f6;"></i>
            <span id="address-name">Détails de l'adresse</span>
          </h3>
          <button type="button" class="modal-close" data-modal-close aria-label="Fermer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="glass-form-fields">
          <div class="address-details-container">
            <div class="loading-indicator">
              <i class="fas fa-spinner fa-spin"></i>
              <span>Chargement des données...</span>
            </div>
            <div class="address-details-content kpi-hidden">
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>ID Schedule</th>
                      <th>Ouvrier</th>
                      <th>Date</th>
                      <th>Horaires</th>
                      <th>Type de prestation</th>
                      <th class="text-end">Coût</th>
                    </tr>
                  </thead>
                  <tbody id="address-details-table-body">
                    <!-- Les données seront chargées dynamiquement ici -->
                  </tbody>
                  <tfoot>
                    <tr class="table-active">
                      <td colspan="5"><strong>Total</strong></td>
                      <td class="text-end" id="address-details-total"><strong>0.00 €</strong></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="glass-actions">
          <button type="button" class="button button-secondary" data-modal-close>
            <span>Fermer</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal de sélection de période -->
<div class="modal-layer" data-modal-id="month-year-modal">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal">
    <div class="glass-form" style="max-width: 500px; width: 100%;">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <div class="glass-header">
          <h3 class="glass-title">
            <i class="fas fa-calendar" style="margin-right: 0.5rem;"></i>Sélectionner une période
          </h3>
          <button type="button" class="modal-close" data-modal-close aria-label="Fermer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="glass-form-fields">
          <form id="periodSelectorForm">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
              <div class="form-field">
                <label for="month-select" class="form-field__label">Mois</label>
                <div class="form-field__input-wrapper">
                  <select id="month-select" class="form-field__select">
                    <option value="1">Janvier</option>
                    <option value="2">Février</option>
                    <option value="3">Mars</option>
                    <option value="4">Avril</option>
                    <option value="5">Mai</option>
                    <option value="6">Juin</option>
                    <option value="7">Juillet</option>
                    <option value="8">Août</option>
                    <option value="9">Septembre</option>
                    <option value="10">Octobre</option>
                    <option value="11">Novembre</option>
                    <option value="12">Décembre</option>
                  </select>
                  <i class="fas fa-calendar-alt form-field__icon"></i>
                </div>
              </div>
              <div class="form-field">
                <label for="year-select" class="form-field__label">Année</label>
                <div class="form-field__input-wrapper">
                  <select id="year-select" class="form-field__select">
                    <!-- Les options seront générées par JavaScript -->
                  </select>
                  <i class="fas fa-calendar-alt form-field__icon"></i>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="glass-actions">
          <button type="button" class="button button-secondary" data-modal-close>
            <i class="fas fa-times"></i>
            <span>Annuler</span>
          </button>
          <button type="button" class="button button-primary" id="apply-month-year">
            <i class="fas fa-check"></i>
            <span>Appliquer</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Confirmation Dispatch -->
<div class="modal-layer" data-modal-id="dispatchConfirmModal">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal">
    <div class="glass-form">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="glass-content">
        <div class="glass-header">
          <div class="dispatch-modal-icon-wrapper">
            <i class="fas fa-exclamation-triangle dispatch-modal-warning-icon"></i>
          </div>
          <h3 class="glass-title">Confirmer la modification du dispatch</h3>
          <button type="button" class="modal-close" data-modal-close aria-label="Fermer">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="glass-form-fields">
          <p class="dispatch-modal-description">
            Vous êtes sur le point de modifier le dispatch global pour <strong>tous les ouvriers micro</strong> du mois en cours :
          </p>
          <div class="dispatch-modal-values">
            <div class="dispatch-modal-company">
              <img src="{{ asset('images/logos/Sentier_Services.png') }}" alt="Sentier Services" class="dispatch-modal-logo">
              <span class="dispatch-modal-company-label">Sentier Services</span>
              <span id="modal-sentier-percentage" class="dispatch-modal-company-percentage">50%</span>
            </div>
            <div class="dispatch-modal-arrow">
              <i class="fas fa-arrows-alt-h"></i>
            </div>
            <div class="dispatch-modal-company">
              <img src="{{ asset('images/logos/Klam.png') }}" alt="Klam" class="dispatch-modal-logo">
              <span class="dispatch-modal-company-label">Klam</span>
              <span id="modal-klam-percentage" class="dispatch-modal-company-percentage">50%</span>
            </div>
          </div>
          <div class="dispatch-modal-warning">
            <i class="fas fa-info-circle dispatch-modal-warning-icon-inline"></i>
            <span>Cette modification affectera le calcul des coûts pour tous les ouvriers avec le statut <strong>Micro</strong>.</span>
          </div>
        </div>
        <div class="glass-actions">
          <button type="button" class="button button-secondary" data-modal-close>
            <i class="fas fa-times"></i>
            <span>Annuler</span>
          </button>
          <button type="button" class="button button-primary" id="dispatch-confirm-btn">
            <i class="fas fa-check"></i>
            <span>Confirmer</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection