{# templates/admin/delivery/_form_delivery_show.html.twig #}
<style>
  .delivery-show-header {
    border-bottom: 1px solid #eef1f5;
  }

  .delivery-show-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    font-size: 1.05rem;
    flex-shrink: 0;
  }

  .delivery-show-subtitle {
    font-size: .83rem;
    color: #6b7280;
    margin-top: .15rem;
    line-height: 1.45;
  }

  .delivery-show-tabs {
    border-bottom: 1px solid #eef1f5;
  }

  .delivery-show-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-weight: 600;
    border-radius: 0;
    padding-left: 0;
    padding-right: 1rem;
    margin-right: 1rem;
  }

  .delivery-show-tabs .nav-link.active {
    color: #1d4ed8;
    background: transparent;
    border-bottom-color: #1d4ed8;
  }

  .delivery-show-section {
    border: 1px solid #e9edf3;
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
  }

  .delivery-show-section + .delivery-show-section {
    margin-top: 1rem;
  }

  .delivery-show-legend {
    font-size: .92rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .delivery-show-field {
    padding: .55rem 0;
    border-bottom: 1px dashed #edf0f4;
  }

  .delivery-show-field:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .delivery-show-label {
    color: #6b7280;
    font-size: .84rem;
    font-weight: 600;
    margin-bottom: .2rem;
    display: flex;
    align-items: center;
    gap: .4rem;
  }

  .delivery-show-value {
    color: #111827;
    font-size: .95rem;
    line-height: 1.45;
    word-break: break-word;
  }

  .delivery-show-highlight {
    font-weight: 700;
    color: #0f172a;
  }

  .delivery-show-logo-card {
    border: 1px dashed #d6dde6;
    border-radius: 14px;
    padding: 1rem;
    background: #f8fafc;
    height: 100%;
  }

  .delivery-show-logo-title {
    font-size: .9rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: .75rem;
  }

  .logo-wrapper {
    position: relative;
  }

  .logo-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.7);
    border-radius: .75rem;
  }

  .logo-spinner.hidden {
    display: none;
  }

  .logo-preview {
    width: 100%;
    height: 190px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .75rem;
    opacity: 0;
    transition: opacity .2s;
  }

  .logo-preview.loaded {
    opacity: 1;
  }

  .delivery-show-empty-logo {
    border: 1px dashed #d5dbe3;
    border-radius: .75rem;
    background: #fff;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #94a3b8;
    text-align: center;
    padding: 1rem;
  }

  .status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .5rem;
    vertical-align: middle;
  }

  .stats-table th.val,
  .stats-table td.val {
    text-align: center;
  }

  .stats-filter-card {
    border: 1px solid #e9edf3;
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
  }

  .stats-chart-card {
    border: 1px solid #e9edf3;
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
  }
</style>

<div class="modal-content">
  <div class="modal-header delivery-show-header">
    <div class="d-flex align-items-start gap-3">
      <span class="delivery-show-icon">
        <i class="fa fa-truck"></i>
      </span>
      <div>
        <h5 class="modal-title mb-0">Fiche societe de livraison</h5>
        <div class="delivery-show-subtitle">
          Visualisez les informations principales, les tarifs et les statistiques de cette societe de livraison.
        </div>
      </div>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  </div>

  <div class="modal-body px-3 px-lg-4 pb-3">
    <ul class="nav delivery-show-tabs mb-3" role="tablist" id="deliveryShowTabs">
      <li class="nav-item">
        <a class="nav-link active" id="tab-infos" data-bs-toggle="tab" href="#pane-infos" role="tab">
          <i class="fa fa-id-card me-1"></i> Infos
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab-stats" data-bs-toggle="tab" href="#pane-stats" role="tab">
          <i class="fa fa-chart-bar me-1"></i> Statistiques
        </a>
      </li>
    </ul>

    <div class="tab-content pt-1">
      <div class="tab-pane fade show active" id="pane-infos" role="tabpanel" aria-labelledby="tab-infos">
        <div class="row g-3">
          <div class="col-lg-8">
            <div class="delivery-show-section">
              <div class="delivery-show-legend">
                <i class="fa fa-circle-info text-primary"></i>
                Informations generales
              </div>

              <div class="row g-3">
                <div class="col-md-6">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Etat</div>
                    <div id="deliveryShow_field_active" class="delivery-show-value">-</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Par defaut</div>
                    <div id="deliveryShow_field_selected" class="delivery-show-value">-</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Nom</div>
                    <div id="deliveryShow_field_name" class="delivery-show-value delivery-show-highlight">-</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Type</div>
                    <div id="deliveryShow_field_type" class="delivery-show-value">-</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label"><i class="fa fa-phone"></i> Telephone</div>
                    <div id="deliveryShow_field_phone" class="delivery-show-value">-</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label"><i class="fa fa-map-marker-alt"></i> Adresse</div>
                    <div id="deliveryShow_field_address" class="delivery-show-value">-</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label"><i class="fa fa-sticky-note"></i> Note</div>
                    <div id="deliveryShow_field_note" class="delivery-show-value">-</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="delivery-show-section">
              <div class="delivery-show-legend">
                <i class="fa fa-money-bill-wave text-success"></i>
                Tarifs
              </div>

              <div class="row g-3">
                <div class="col-md-4">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Prix de vente</div>
                    <div id="deliveryShow_field_price" class="delivery-show-value delivery-show-highlight">-</div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Prix d'achat</div>
                    <div id="deliveryShow_field_totalPrice" class="delivery-show-value">-</div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="delivery-show-field">
                    <div class="delivery-show-label">Prix de retour</div>
                    <div id="deliveryShow_field_returnPrice" class="delivery-show-value">-</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="delivery-show-logo-card">
              <div class="delivery-show-logo-title">Logo</div>
              <div class="logo-wrapper mb-2">
                <div id="deliveryShowLogoSpinner" class="logo-spinner">
                  <div class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement"></div>
                </div>
                <img id="deliveryShow_logo" class="logo-preview" alt="Logo">
                <div id="deliveryShow_noLogo" class="delivery-show-empty-logo d-none">
                  <i class="fa fa-image mb-2" style="font-size: 1.5rem;"></i>
                  <div class="small">Pas de logo disponible</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="pane-stats" role="tabpanel" aria-labelledby="tab-stats">
        <div class="stats-filter-card mb-3">
          <div class="row g-3 align-items-end">
            <div class="col-md-4 col-lg-3">
              <label class="form-label mb-1">Date debut</label>
              <input type="date" id="deliveryShow_startDate" class="form-control form-control-sm">
            </div>
            <div class="col-md-4 col-lg-3">
              <label class="form-label mb-1">Date fin</label>
              <input type="date" id="deliveryShow_endDate" class="form-control form-control-sm">
            </div>
            <div class="col-md-4 col-lg-3">
              <button id="deliveryShow_filterBtn" class="btn btn-primary btn-sm">
                <i class="fa fa-filter me-1"></i> Filtrer
              </button>
            </div>
          </div>
        </div>

        <div class="table-responsive mb-3">
          <table class="table table-sm table-striped mb-0 stats-table">
            <thead class="table-light">
              <tr>
                <th>Indicateur</th>
                <th class="val">Valeur</th>
                <th class="val">%</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="status-dot alert-expedie"></span> Expediees</td>
                <td class="val" id="stat_shipped">0</td>
                <td class="val" id="stat_shipped_rate">0%</td>
              </tr>
              <tr>
                <td><span class="status-dot alert-livre"></span> Livrees</td>
                <td class="val" id="stat_delivered">0</td>
                <td class="val" id="stat_delivered_rate">0%</td>
              </tr>
              <tr>
                <td><span class="status-dot alert-paye"></span> Payees</td>
                <td class="val" id="stat_paid">0</td>
                <td class="val" id="stat_paid_rate">0%</td>
              </tr>
              <tr>
                <td><span class="status-dot alert-retourne"></span> Retournees</td>
                <td class="val" id="stat_returns">0</td>
                <td class="val" id="stat_returns_rate">0%</td>
              </tr>
              <tr>
                <td><span class="status-dot alert-retour-en-cours"></span> Retour en cours</td>
                <td class="val" id="stat_returns_pending">0</td>
                <td class="val text-muted">-</td>
              </tr>
              <tr class="fw-bold">
                <td><i class="fa fa-sigma me-1 text-secondary"></i> Total</td>
                <td class="val" id="stat_total">0</td>
                <td class="val text-muted">100%</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="stats-chart-card">
          <div class="delivery-show-legend mb-3">
            <i class="fa fa-chart-pie text-primary"></i>
            Graphique
          </div>
          <div style="height: 300px; position: relative;">
            <canvas id="deliveryShow_chart"></canvas>
            <div id="deliveryShow_chartEmpty" class="d-none text-muted text-center" style="display:flex;align-items:center;justify-content:center;height:100%;">
              Aucune donnee a afficher.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Fermer</button>
  </div>
</div>