@extends('layouts.admin')
@section('page-title', 'Détails du client')
@section('page-subtitle', 'Informations du client')

@section('styles')
<link href="{{ asset('css/pages/admin/base.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/clients/clients-profile.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/clients/client-timeline.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/components/client-logo.css') }}?v={{ time() }}" rel="stylesheet">
@endsection

@section('scripts')
@stack('page-scripts')
@endsection

@section('content')
<div class="client-profile-page">
  <div class="page-header-row">
    <div class="main-header-navigation">
      <a href="/admin/clients" class="back-link">
        <i class="fas fa-arrow-left"></i>
        <span>Revenir à la liste des clients</span>
      </a>
    </div>
    <div class="main-header-actions hstack gap-md">
      <div class="checkbox-wrapper-35">
        <input type="hidden" id="clientId" value="{{ $client['client_id'] }}">
        <input type="checkbox" id="client_status" class="switch" {{ isset($client['is_active']) ? ($client['is_active'] ? 'checked' : '') : ($client['client_status'] == 'actif' ? 'checked' : '') }}>
        <label for="client_status">
          <span class="switch-x-text">Client</span>
          <span class="switch-x-toggletext">
            <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">État: </span>Inactif</span>
            <span class="switch-x-checked"><span class="switch-x-hiddenlabel">État: </span>Actif</span>
          </span>
        </label>
      </div>
      <button type="button" class="button button--danger" data-modal-open="confirmDeleteClientModal">
        <i class="fas fa-user-times"></i>
        Supprimer le client
      </button>
    </div>
  </div>

  <div class="client-grid">
    <!-- Colonne de gauche - Informations principales (40%) -->
    <div class="client-grid__main">
      <!-- Card d'identité du client -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-info-circle card-title-icon" aria-hidden="true"></i>
            <span>Informations générales</span>
          </div>
          <button class="edit-btn" data-bs-toggle="modal" data-bs-target="#editClientInfoModal" title="Modifier les informations">
            <i class="fas fa-pen"></i>
          </button>
        </div>
        <div class="card-body">
          <div class="client-header">
            @php
              $isEntreprise = $client['client_type'] == 'entreprise';
              
              // Pour les particuliers, on extrait les initiales du prénom et nom
            @endphp
            {!! \App\Helpers\ClientLogoHelper::renderClientLogo($client) !!}
            <div class="client-details">
              <h3 class="client-name">
                {{ $client['client_name'] }}
                <span id="statusBadge" class="status-chip {{ isset($client['is_active']) ? ($client['is_active'] ? 'status-active' : 'status-inactive') : ($client['client_status'] == 'actif' ? 'status-active' : 'status-inactive') }}">
                  <span class="status-dot"></span>
                  {{ isset($client['is_active']) ? ($client['is_active'] ? 'Actif' : 'Inactif') : ($client['client_status'] == 'actif' ? 'Actif' : 'Inactif') }}
                </span>
              </h3>
              <div class="hstack gap-md">
                <div class="icon-container">
                  <i class="fas {{ $client['client_type'] == 'entreprise' ? 'fa-building' : 'fa-user' }} text-secondary"></i>
                </div>
                <span class="fw-bold text-primary">{{ $client['client_type'] == 'entreprise' ? 'Entreprise' : 'Particulier' }}</span>
              </div>
              @if(isset($client['pennylane_customer_id']) && !empty($client['pennylane_customer_id']))
                <div class="hstack gap-md">
                  <div class="icon-container">
                    <i class="fas fa-link text-secondary"></i>
                  </div>
                  <span class="text-muted">Pennylane ID:</span>
                  <span class="fw-bold text-primary">{{ $client['pennylane_customer_id'] }}</span>
                  @php
                    $pennylaneCustomerName = null;
                    if (isset($pennylaneCustomers) && is_array($pennylaneCustomers)) {
                      foreach ($pennylaneCustomers as $customer) {
                        if (isset($customer['id']) && $customer['id'] == $client['pennylane_customer_id']) {
                          $pennylaneCustomerName = $customer['name'];
                          break;
                        }
                      }
                    }
                  @endphp
                  @if($pennylaneCustomerName)
                    <span class="text-muted">({{ $pennylaneCustomerName }})</span>
                  @endif
                </div>
              @endif
              @if(isset($client['nombre_postes']) && !empty($client['nombre_postes']))
                <div class="hstack gap-md">
                  <div class="icon-container">
                    <i class="fas fa-desktop text-secondary"></i>
                  </div>
                  <span class="text-muted">Postes:</span>
                  <span class="fw-bold text-primary">{{ $client['nombre_postes'] }}</span>
                </div>
              @endif
            </div>
          </div>
          
          <!-- La section d'informations sur le créateur a été supprimée et sera remplacée par une timeline plus tard -->
          
          <!-- TEST: Bouton de suppression déplacé ici - COMMENTÉ -->
          <!--
          <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e9ecef;">
            <button type="button" class="button button--danger" data-modal-open="confirmDeleteClientModal">
              <i class="fas fa-user-times"></i>
              Supprimer le client (TEST dans card)
            </button>
          </div>
          -->
        </div>
      </div>

      <!-- Card de contact -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-map-marker-alt card-title-icon" aria-hidden="true"></i>
            <span>Localisation</span>
          </div>
          <button class="add-btn" data-modal-open="addLocationModal" title="Ajouter une adresse">
            <i class="fas fa-plus"></i>
          </button>
        </div>
        <div class="card-body">
          <div class="info-section card-section">
            @if(isset($addresses) && count($addresses) > 0)
              @foreach($addresses as $address)
                <div class="address-card" data-address-id="{{ $address['id'] }}">
                  <div class="address-header">
                    <h5>
                      {{ $address['short_address'] }}
                      @if($address['is_primary'])
                        <span class="pill-badge pill-badge--primary">Principale</span>
                      @endif
                    </h5>
                    <div class="address-actions">
                      <button class="button button--icon edit-address-btn" 
                              data-modal-open="editAddressModal"
                              data-address-id="{{ $address['id'] }}">
                        <i class="fas fa-edit"></i>
                      </button>
                      <button class="button button--outline-danger delete-address-btn" 
                              data-address-id="{{ $address['id'] }}" 
                              data-modal-open="deleteAddressModal">
                         <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </div>
                  <div class="address-details">
                    <p><i class="fas fa-map-marked-alt text-secondary"></i>{{ $address['full_address'] }}</p>
                    <p class="text-muted">
                      @if(isset($address['floor']) && $address['floor'])
                        <span><i class="fas fa-building"></i>{{ $address['floor'] }}</span>
                      @endif
                      @if(isset($address['side']) && $address['side'])
                        <span><i class="fas fa-compass"></i>{{ $address['side'] }}</span>
                      @endif
                    </p>
                  </div>
                </div>
              @endforeach
            @else
              <p class="text-muted text-center">
                <i class="fas fa-map-marker-alt"></i>Aucune adresse
              </p>
            @endif
          </div>
        </div>
      </div>

      <!-- Card Café -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-coffee card-title-icon" aria-hidden="true"></i>
            <span>Café</span>
          </div>
          <div class="header-actions">
            <button class="add-btn" data-bs-toggle="modal" data-bs-target="#addCoffeeContractModal" title="Ajouter un contrat café">
              <i class="fas fa-plus"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="info-section card-section">
            @if(isset($coffee_data) && !empty($coffee_data))
              @foreach($coffee_data as $index => $contract_data)
                <div class="coffee-contract-card">
                  <div class="coffee-header">
                    <div class="coffee-info">
                      <h5>
                        <i class="fas fa-file-contract text-success"></i>
                        Contrat café #{{ $contract_data['contract']['id'] }}
                        @if(count($coffee_data) > 1)
                          <small class="text-muted">({{ $index + 1 }}/{{ count($coffee_data) }})</small>
                        @endif
                      </h5>
                      <div class="coffee-status">
                        @php
                          $statusClass = match($contract_data['status']) {
                            'over' => 'pill-badge pill-badge--danger',
                            'under' => 'pill-badge pill-badge--warning', 
                            default => 'pill-badge pill-badge--success'
                          };
                          $statusText = match($contract_data['status']) {
                            'over' => 'Surconsommation',
                            'under' => 'Sous-consommation',
                            default => 'Normal'
                          };
                        @endphp
                        <span class="{{ $statusClass }}">{{ $statusText }}</span>
                      </div>
                    </div>

                  </div>
                
                  <div class="coffee-details">
                    <div class="grid-2">
                      <div>
                        <div class="coffee-metric">
                          <i class="fas fa-calendar-alt text-secondary"></i>
                          <strong>Quota mensuel:</strong> {{ number_format($contract_data['contract']['monthly_quota'], 1) }} kg
                        </div>
                      </div>
                      <div>
                        <div class="coffee-metric">
                          <i class="fas fa-truck text-secondary"></i>
                          <strong>Total livré:</strong> {{ number_format($contract_data['total_delivered'], 1) }} kg
                        </div>
                      </div>
                    </div>
                    
                    <div class="grid-2">
                      <div>
                        <div class="coffee-metric">
                          <i class="fas fa-calendar-check text-secondary"></i>
                          <strong>Début:</strong> {{ $contract_data['contract']['start_date'] ? date('d/m/Y', strtotime($contract_data['contract']['start_date'])) : 'Non défini' }}
                        </div>
                      </div>
                      <div>
                        <div class="coffee-metric">
                          <i class="fas fa-calendar-times text-secondary"></i>
                          <strong>Fin:</strong> {{ $contract_data['contract']['end_date'] ? date('d/m/Y', strtotime($contract_data['contract']['end_date'])) : 'Indéterminée' }}
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <div class="coffee-metric">
                          <i class="fas fa-map-marker-alt text-secondary"></i>
                          <strong>Adresse de livraison:</strong> 
                          @if(!empty($contract_data['contract']['short_address']))
                            {{ $contract_data['contract']['short_address'] }}
                          @else
                            <span class="text-muted">Non spécifiée</span>
                          @endif
                        </div>
                    </div>
                  </div>
                
                  <!-- Actions en bas de la card -->
                  <div class="coffee-actions-bottom">
                    <button class="button button--outline-primary" 
                            data-bs-toggle="modal" 
                            data-bs-target="#editCoffeeContractModal"
                            onclick="loadContractForEdit({{ json_encode($contract_data['contract']) }})"
                            title="Modifier ce contrat">
                      <i class="fas fa-edit"></i>
                      Modifier
                    </button>
                    <button class="button button--outline-danger" 
                            onclick="confirmStopContract({{ $contract_data['contract']['id'] }})"
                            title="Arrêter ce contrat">
                      <i class="fas fa-stop"></i>
                      Stopper
                    </button>
                    <a href="{{ route('admin.coffee.show', $client['client_id']) }}" 
                       class="button button--primary"
                       title="Voir le suivi détaillé">
                      <i class="fas fa-chart-line"></i>
                      Suivi détaillé
                    </a>
                  </div>
                </div>
              @endforeach
            @else
              <p class="text-muted text-center">
                <i class="fas fa-coffee"></i>Aucun contrat café
              </p>
            @endif
          </div>
        </div>
      </div>

      <!-- Card des documents -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-file-alt card-title-icon" aria-hidden="true"></i>
            <span>Documents</span>
          </div>
          <button class="add-btn" data-bs-toggle="modal" data-bs-target="#addDocumentModal" title="Ajouter un document">
            <i class="fas fa-plus"></i>
          </button>
        </div>
        <div class="card-body">
          <div class="info-section card-section">
            <p class="text-muted text-center">
              <i class="fas fa-file-alt"></i>Aucun document
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Colonne de droite - Historique et détails (60%) -->
    <div class="client-grid__aside">
      <!-- Card Timeline pour l'historique des modifications -->
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <i class="fas fa-history card-title-icon" aria-hidden="true"></i>
            <span>Historique d'activité</span>
          </div>
        </div>
        <div class="card-body">
          <div class="timeline">
            @if(isset($activities) && count($activities) > 0)
              @php
            // Filtrer les activités pour ne garder que celles avec des données pertinentes
            $filteredActivities = [];
            foreach($activities as $activity) {
              $metadata = json_decode($activity['metadata'], true);
              $isValid = true;
              
              // Vérifier si c'est une activité de mise à jour sans changements réels
              if ($activity['activity_type'] === 'update') {
                $changes = $metadata['changes'] ?? [];
                if (empty($changes) || !(isset($changes['name']) || isset($changes['email']) || isset($changes['type']) || isset($changes['status']))) {
                  $isValid = false;
                }
              }
              
              if ($isValid) {
                $filteredActivities[] = $activity;
              }
            }
          @endphp
          
          @foreach($filteredActivities as $activity)
            <div class="timeline-item">
              <div class="timeline-marker {{ $loop->last ? 'timeline-marker-placeholder' : '' }}">
                @switch($activity['activity_type'])
                  @case('create')
                    <i class="fas fa-plus-circle"></i>
                    @break
                  @case('update')
                    <i class="fas fa-edit"></i>
                    @break
                  @case('status_change')
                    <i class="fas fa-toggle-on"></i>
                    @break
                  @case('address_add')
                    <i class="fas fa-map-marker-alt"></i>
                    @break
                  @case('address_update')
                    <i class="fas fa-map-marker-alt"></i>
                    @break
                  @case('address_remove')
                    <i class="fas fa-map-marker-alt"></i>
                    @break
                  @default
                    <i class="fas fa-info-circle"></i>
                @endswitch
              </div>
                <div class="timeline-content">
                  <h4 class="timeline-title">
                    @switch($activity['activity_type'])
                      @case('create')
                        Création du client
                        @break
                      @case('update')
                        Mise à jour des informations
                        @break
                      @case('status_change')
                        Changement de statut
                        @break
                      @case('address_add')
                        Ajout d'une adresse
                        @break
                      @case('address_remove')
                        Suppression d'une adresse
                        @break
                      @default
                        {{ $activity['description'] }}
                    @endswitch
                  </h4>
                  <p class="timeline-date">
                    <i class="fas fa-calendar-alt"></i>
                    {{ \Carbon\Carbon::parse($activity['created_at'])->format('d/m/Y') }}
                  </p>
                  <p class="timeline-text">
                    <i class="fas fa-user"></i>
                    Par {{ $activity['user_name'] ?? 'l\'administrateur' }}
                  </p>
                  <!-- Détails spécifiques selon le type d'activité -->
                  @switch($activity['activity_type'])
                    @case('create')
                      <p class="timeline-text">
                        <i class="fas fa-info-circle"></i>
                        @php
                          $metadata = json_decode($activity['metadata'], true);
                        @endphp
                        @if(!empty($metadata))
                          Création du client <strong>{{ $metadata['client_name'] ?? '' }}</strong>
                          <ul>
                            <li>Type: {{ $metadata['client_type'] ?? '' }}</li>
                            @if(!empty($metadata['client_email']) && $metadata['client_email'] !== 'Non spécifié')
                              <li>Email: {{ $metadata['client_email'] }}</li>
                            @endif
                            <li>Statut initial: <span class="status-badge {{ ($metadata['is_active'] ?? '') === 'Actif' ? 'active' : 'inactive' }}">{{ $metadata['is_active'] ?? '' }}</span></li>
                          </ul>
                        @else
                          {{ $activity['description'] }}
                        @endif
                      </p>
                      @break
                    @case('update')
                      @php
                        $metadata = json_decode($activity['metadata'], true);
                        $changes = $metadata['changes'] ?? [];
                        $fieldsUpdated = $metadata['fields_updated'] ?? [];
                        $hasChanges = !empty($changes) && (isset($changes['name']) || isset($changes['email']) || isset($changes['type']) || isset($changes['status']));
                      @endphp
                      @if($hasChanges)
                      <p class="timeline-text">
                        <i class="fas fa-info-circle"></i>
                        Mise à jour des informations:
                        <ul>
                          @if(isset($changes['name']))
                            <li>Nom: <del>{{ $changes['name']['old'] }}</del> → <strong>{{ $changes['name']['new'] }}</strong></li>
                          @endif
                          @if(isset($changes['email']))
                            <li>Email: <del>{{ $changes['email']['old'] }}</del> → <strong>{{ $changes['email']['new'] }}</strong></li>
                          @endif
                          @if(isset($changes['type']))
                            <li>Type: <del>{{ $changes['type']['old'] }}</del> → <strong>{{ $changes['type']['new'] }}</strong></li>
                          @endif
                          @if(isset($changes['status']))
                            <li>Statut: <span class="status-badge {{ $changes['status']['old'] === 'Actif' ? 'active' : 'inactive' }}">{{ $changes['status']['old'] }}</span> → <span class="status-badge {{ $changes['status']['new'] === 'Actif' ? 'active' : 'inactive' }}">{{ $changes['status']['new'] }}</span></li>
                          @endif
                        </ul>
                      </p>
                      @endif
                      @break
                    @case('status_change')
                      <p class="timeline-text">
                        <i class="fas fa-info-circle"></i>
                        @php
                          $metadata = json_decode($activity['metadata'], true);
                          $newStatus = $metadata['new_status'] ?? null;
                          $previousStatus = $metadata['previous_status'] ?? null;
                        @endphp
                        @if($newStatus && $previousStatus)
                          Status changé de <span class="status-badge {{ $previousStatus == 'actif' ? 'active' : 'inactive' }}">{{ ucfirst($previousStatus) }}</span> à <span class="status-badge {{ $newStatus == 'actif' ? 'active' : 'inactive' }}">{{ ucfirst($newStatus) }}</span>
                        @else
                          {{ $activity['description'] }}
                        @endif
                      </p>
                      @break
                    @case('address_add')
                      <p class="timeline-text">
                        @php
                          $metadata = json_decode($activity['metadata'], true);
                          $address = $metadata['address'] ?? null;
                        @endphp
                        @if($address)
                          <div class="address-info">
                            <div class="address-main">
                              <i class="fas fa-map-marker-alt text-secondary"></i>
                              <strong class="timeline-text">{{ $address }}</strong>
                            </div>
                            @if(isset($metadata['floor']) || isset($metadata['side']))
                              <div class="address-details">
                                @if(isset($metadata['floor']))
                                  <span><i class="fas fa-building"></i> {{ $metadata['floor'] }}</span>
                                @endif
                                @if(isset($metadata['side']))
                                  <span><i class="fas fa-compass"></i> {{ $metadata['side'] }}</span>
                                @endif
                              </div>
                            @endif
                          </div>
                        @else
                          {{ $activity['description'] }}
                        @endif
                      </p>
                      @break
                    @case('address_update')
                      <p class="timeline-text">
                        @php
                          $metadata = json_decode($activity['metadata'], true);
                          $address = $metadata['address'] ?? null;
                        @endphp
                        @if($address)
                          <div class="address-info">
                            <div class="address-main">
                              <i class="fas fa-map-marker-alt text-secondary"></i>
                              <strong class="timeline-text">{{ $address }}</strong>
                            </div>
                            @if(isset($metadata['floor']) || isset($metadata['side']))
                              <div class="address-details">
                                @if(isset($metadata['floor']))
                                  <span><i class="fas fa-building"></i> {{ $metadata['floor'] }}</span>
                                @endif
                                @if(isset($metadata['side']))
                                  <span><i class="fas fa-compass"></i> {{ $metadata['side'] }}</span>
                                @endif
                              </div>
                            @endif
                          </div>
                        @else
                          {{ $activity['description'] }}
                        @endif
                      </p>
                      @break
                    @case('address_remove')
                      <p class="timeline-text">
                        @php
                          $metadata = json_decode($activity['metadata'], true);
                          $address = $metadata['address'] ?? null;
                        @endphp
                        @if($address)
                          <div class="address-info">
                            <div class="address-main">
                              <i class="fas fa-map-marker-alt text-secondary"></i>
                              <strong class="timeline-text">{{ $address }}</strong>
                            </div>
                            @if(isset($metadata['floor']) || isset($metadata['side']))
                              <div class="address-details">
                                @if(isset($metadata['floor']))
                                  <span><i class="fas fa-building"></i> {{ $metadata['floor'] }}</span>
                                @endif
                                @if(isset($metadata['side']))
                                  <span><i class="fas fa-compass"></i> {{ $metadata['side'] }}</span>
                                @endif
                              </div>
                            @endif
                          </div>
                        @else
                          {{ $activity['description'] }}
                        @endif
                      </p>
                      @break
                    @default
                      @if($activity['description'])
                        <p class="timeline-text">
                          <i class="fas fa-info-circle"></i>
                          {{ $activity['description'] }}
                        </p>
                      @endif
                  @endswitch
                </div>
              </div>
              @endforeach
            @else
              <!-- Affichage par défaut si aucune activité n'est enregistrée -->
              <div class="timeline-item">
                <div class="timeline-marker">
                  <i class="fas fa-plus-circle"></i>
                </div>
                <div class="timeline-content">
                  <h4 class="timeline-title">Création du client</h4>
                  <p class="timeline-date">
                    <i class="fas fa-calendar-alt"></i>
                    @if(isset($client['created_at']))
                      {{ \Carbon\Carbon::parse($client['created_at'])->format('d/m/Y') }}
                    @else
                      Date inconnue
                    @endif
                  </p>
                  <p class="timeline-text">
                    <i class="fas fa-user"></i>
                    @if(isset($client['creator_name']))
                      Par {{ $client['creator_name'] }}
                    @else
                      Par l'administrateur
                    @endif
                  </p>
                </div>
              </div>
              @if(isset($client['updated_at']) && (!isset($client['created_at']) || $client['updated_at'] != $client['created_at']))
              <div class="timeline-item">
                <div class="timeline-marker">
                  <i class="fas fa-edit"></i>
                </div>
                <div class="timeline-content">
                  <h4 class="timeline-title">Dernière modification</h4>
                  <p class="timeline-date">
                    <i class="fas fa-calendar-alt"></i>
                    {{ \Carbon\Carbon::parse($client['updated_at'])->format('d/m/Y') }}
                  </p>
                  <p class="timeline-text">
                    <i class="fas fa-user"></i>
                    Par {{ isset($client['updated_by_name']) ? $client['updated_by_name'] : 'l\'administrateur' }}
                  </p>
                </div>
              </div>
              @endif
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-layer" data-modal-id="addLocationModal" aria-hidden="true">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal" role="dialog" aria-modal="true" aria-labelledby="addLocationModalTitle" tabindex="-1">
    <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">
          <h3 class="glass-title" id="addLocationModalTitle">
            <i class="fas fa-map-marker-alt"></i>
            Ajouter une adresse
          </h3>
          <button type="button" class="modal-close" data-modal-close aria-label="Fermer">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <form id="addressForm" class="glass-form-fields" autocomplete="off">
          <input type="hidden" id="clientId" name="client_id" value="0">
          <input type="hidden" id="client_address" name="client_address">
          <input type="hidden" id="client_city" name="client_city">
          <input type="hidden" id="client_postal_code" name="client_postal_code">
          <input type="hidden" id="client_country" name="client_country" value="France">

          <div class="glass-field">
            <label for="address-search">Recherche d'adresse</label>
            <div class="glass-input glass-input-search address-search-wrapper">
              <i class="fas fa-search"></i>
              <input type="text" id="address-search" placeholder="Ex: 20 avenue de Ségur, Paris">
              <div id="address-suggestions" class="address-suggestions-container"></div>
            </div>
            <p class="helper-text">Commencez à taper une adresse pour obtenir des suggestions.</p>
          </div>

          <div id="locationDetails" class="stack-md" style="display: none;">
            <div class="glass-field-row">
              <div class="glass-field">
                <label for="client_floor">Étage</label>
                <div class="glass-input glass-input-select">
                  <i class="fas fa-building"></i>
                  <select id="client_floor" name="client_floor">
                    <option value="sous-sol-3">Sous-sol 3</option>
                    <option value="sous-sol-2">Sous-sol 2</option>
                    <option value="sous-sol-1">Sous-sol 1</option>
                    <option value="rdc" selected>RDC</option>
                    <option value="1">1er étage</option>
                    <option value="2">2ème étage</option>
                    <option value="3">3ème étage</option>
                    <option value="4">4ème étage</option>
                    <option value="5">5ème étage</option>
                    <option value="6">6ème étage</option>
                    <option value="7">7ème étage</option>
                    <option value="8">8ème étage</option>
                    <option value="9">9ème étage</option>
                    <option value="10">10ème étage</option>
                  </select>
                </div>
              </div>
              <div class="glass-field">
                <label for="client_side">Côté</label>
                <div class="glass-input glass-input-select">
                  <i class="fas fa-compass"></i>
                  <select id="client_side" name="client_side">
                    <option value="">Non spécifié</option>
                    <option value="droite">Droite</option>
                    <option value="face">Face</option>
                    <option value="gauche">Gauche</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="address-preview stack-sm">
              <div>
                <h6 class="fw-bold">Adresse complète</h6>
                <div id="fullAddressPreview" class="address-display p-2"></div>
              </div>
              <div>
                <h6 class="fw-bold">Adresse courte</h6>
                <div id="shortAddressPreview" class="address-display p-2"></div>
              </div>
            </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="saveAddress">
              <i class="fas fa-save"></i>
              <span>Enregistrer</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal de confirmation de suppression d'adresse - TEMPORAIREMENT COMMENTÉ POUR TEST -->
<!--
<div class="modal-layer" data-modal-id="deleteAddressModal" aria-hidden="true">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal" role="dialog" aria-modal="true" aria-labelledby="deleteAddressModalLabel" tabindex="-1">
    <div class="glass-form glass-form--alert">
      <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" id="deleteAddressModalLabel">
            <i class="fas fa-trash text-danger"></i>
            Supprimer cette adresse ?
          </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="glass-alert glass-alert--warning">
            <i class="fas fa-exclamation-triangle"></i>
            <div>
              <h4 class="glass-alert-title">Action irréversible</h4>
              <p class="glass-alert-text">Êtes-vous sûr de vouloir supprimer cette adresse ? Cette action ne peut pas être annulée.</p>
            </div>
          </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>
          <form id="deleteAddressForm" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="button button--danger">
              <i class="fas fa-trash"></i>
              <span>Supprimer</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
-->

<!-- Modal de modification d'adresse -->
<div class="modal-layer" data-modal-id="editAddressModal" aria-hidden="true">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="editAddressModalLabel" tabindex="-1">
    <div class="modal-header">
      <h5 class="modal-title" id="editAddressModalLabel">Modifier l'adresse</h5>
      <button type="button" class="modal-close" data-modal-close aria-label="Fermer"><i class="fas fa-times"></i></button>
    </div>
    <div class="modal-body">
        <form id="editAddressForm">
          <input type="hidden" id="edit_address_id" name="address_id">
          <input type="hidden" id="edit_client_address" name="street">
          <input type="hidden" id="edit_client_city" name="city">
          <input type="hidden" id="edit_client_postal_code" name="postal_code">
          
          <!-- Recherche d'adresse -->
          <div class="form-group mb-4">
            <label for="edit-address-search" class="form-label">Recherche d'adresse</label>
            <div class="position-relative">
              <input type="text" id="edit-address-search" class="input" placeholder="Ex: 20 avenue de Ségur, Paris">
              <div id="edit-address-suggestions" class="address-suggestions-container"></div>
            </div>
          </div>
          
          <!-- Sélecteurs d'étage et côté -->
          <div id="edit-locationDetails">
            <div class="form-row form-row--2 mb-4">
              <div>
                <label for="edit_client_floor" class="form-label">Étage</label>
                <select id="edit_client_floor" name="floor" class="select">
                  <option value="sous-sol-3">Sous-sol 3</option>
                  <option value="sous-sol-2">Sous-sol 2</option>
                  <option value="sous-sol-1">Sous-sol 1</option>
                  <option value="rdc" selected>RDC</option>
                  <option value="1">1er étage</option>
                  <option value="2">2ème étage</option>
                  <option value="3">3ème étage</option>
                  <option value="4">4ème étage</option>
                  <option value="5">5ème étage</option>
                  <option value="6">6ème étage</option>
                  <option value="7">7ème étage</option>
                  <option value="8">8ème étage</option>
                  <option value="9">9ème étage</option>
                  <option value="10">10ème étage</option>
                </select>
              </div>
              <div>
                <label for="edit_client_side" class="form-label">Côté</label>
                <select id="edit_client_side" name="side" class="select">
                  <option value="">Non spécifié</option>
                  <option value="droite">Droite</option>
                  <option value="face">Face</option>
                  <option value="gauche">Gauche</option>
                </select>
              </div>
            </div>
            
            <!-- Aperçu des adresses -->
            <div class="address-preview mb-3">
              <h6 class="fw-bold mb-2">Adresse complète</h6>
              <div id="edit-fullAddressPreview" class="address-display p-2 mb-3"></div>
              
              <h6 class="fw-bold mb-2">Adresse courte</h6>
              <div id="edit-shortAddressPreview" class="address-display p-2"></div>
            </div>
            
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="edit_is_primary" name="is_primary">
              <label class="form-check-label" for="edit_is_primary">
                Définir comme adresse principale
              </label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="button" data-modal-close>
          <i class="fas fa-times me-2"></i>Annuler
        </button>
        <button type="submit" form="editAddressForm" class="button button--primary">
          <i class="fas fa-save me-2"></i>Enregistrer
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal d'édition des informations générales du client -->
<div class="modal fade" id="editClientInfoModal" tabindex="-1" aria-labelledby="editClientInfoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="editClientInfoModalLabel">
          <i class="fas fa-edit me-2 text-primary"></i>
          Modifier les informations générales
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <form action="{{ route('admin.clients.update', $client['client_id']) }}" method="POST" id="editClientForm" enctype="multipart/form-data">
          @csrf
          @method('PUT')
          
          <div class="mb-3">
            <label for="client_name" class="form-label">Nom du client</label>
            <input type="text" class="form-control" id="client_name" name="client_name" value="{{ $client['client_name'] }}" required>
          </div>
          
          <div class="mb-3">
            <label for="client_type" class="form-label">Type de client</label>
            <select class="form-select" id="client_type" name="client_type" required>
              <option value="entreprise" {{ $client['client_type'] == 'entreprise' ? 'selected' : '' }}>Entreprise</option>
              <option value="particulier" {{ $client['client_type'] == 'particulier' ? 'selected' : '' }}>Particulier</option>
            </select>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="pennylane_customer_id" class="form-label">Client Pennylane</label>
              <select class="form-select" id="pennylane_customer_id" name="pennylane_customer_id">
                <option value="">Sélectionner un client Pennylane (optionnel)</option>
                @if(!empty($pennylane_customers))
                  @foreach($pennylane_customers as $customer)
                    <option value="{{ $customer['id'] }}" {{ (isset($client['pennylane_customer_id']) && $client['pennylane_customer_id'] == $customer['id']) ? 'selected' : '' }}>
                      {{ $customer['name'] }}
                    </option>
                  @endforeach
                @else
                  <option value="" disabled>Aucun client Pennylane disponible</option>
                @endif
              </select>
            </div>
            <div class="col-md-6">
              <label for="nombre_postes" class="form-label">Nombre de postes</label>
              <input type="number" class="form-control" id="nombre_postes" name="nombre_postes" min="0" placeholder="Ex: 25" value="{{ $client['nombre_postes'] ?? '' }}">
            </div>
          </div>
          
          <div class="mb-3">
            <label class="form-label">Logo</label>
            <div class="logo-grid">
              <!-- Logo actuel -->
              <div class="logo-current">
                <div class="logo-container p-3 border rounded text-center">
                  @if($client['client_type'] == 'entreprise' && isset($client['client_logo']) && !empty($client['client_logo']))
                    @php
                      // Corriger la casse pour les fichiers avec underscore
                      $logoPath = $client['client_logo'];
                      if (strpos($logoPath, '_founded.png') !== false) {
                        $logoPath = str_replace('_founded.png', '_Founded.png', $logoPath);
                      }
                    @endphp
                    <img src="/{{ ltrim($logoPath, '/') }}" alt="Logo actuel" class="img-fluid">
                  @else
                    <div class="text-muted">Aucun logo</div>
                  @endif
                </div>
                <p class="text-center mt-2 mb-0"><small>Logo actuel</small></p>
              </div>
              
              <!-- Sélection du nouveau logo -->
              <div class="logo-upload">
                <div class="logo-dropzone" id="logo-dropzone">
                  <input type="file" class="file-input" id="client_logo" name="client_logo" accept="image/*,.heic,.heif" hidden>
                  <div class="dropzone-content">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Glissez votre logo ici ou <span class="browse-link">parcourir</span></p>
                    <p class="dropzone-info">PNG/JPG, max. 2 Mo</p>
            </div>
            
            <!-- Sélection du nouveau logo -->
            <div class="logo-upload">
              <div class="logo-dropzone" id="logo-dropzone">
                <input type="file" class="file-input" id="client_logo" name="client_logo" accept="image/*,.heic,.heif" hidden>
                <div class="dropzone-content">
                  <i class="fas fa-cloud-upload-alt"></i>
                  <p>Glissez votre logo ici ou <span class="browse-link">parcourir</span></p>
                  <p class="dropzone-info">PNG/JPG, max. 2 Mo</p>
                </div>
                <div class="preview-container" id="logo-preview" style="display: none;">
                  <img src="" alt="Aperçu du logo" id="preview-image" class="preview-image">
                  <button type="button" class="btn btn-sm btn-danger remove-preview" id="remove-preview">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="button" data-modal-close>
        <i class="fas fa-times me-2"></i>Annuler
      </button>
      <button type="submit" form="editClientForm" class="button button--primary">
        <i class="fas fa-save me-2"></i>Enregistrer
      </button>
    </div>
  </div>
</div>

<!-- Modal d'ajout de contrat café -->
<div class="modal fade coffee-modal" id="addCoffeeContractModal" tabindex="-1" aria-labelledby="addCoffeeContractModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="addCoffeeContractModalLabel">
          <i class="fas fa-coffee me-1 text-secondary"></i>
          Nouveau contrat café
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <form action="{{ route('admin.coffee.contracts.store') }}" method="POST" id="addCoffeeContractForm" onsubmit="return false;">
          @csrf
          <input type="hidden" name="client_id" value="{{ $client['client_id'] }}">
          
          <div class="mb-3">
            <label for="address_id" class="form-label">
              <i class="fas fa-map-marker-alt me-2 text-secondary"></i>
              Adresse de réassort
            </label>
            <select class="form-select" id="address_id" name="address_id" required>
              <option value="">Sélectionner une adresse</option>
              @if(isset($addresses) && count($addresses) > 0)
                @foreach($addresses as $address)
                  <option value="{{ $address['id'] }}">
                    {{ $address['short_address'] }}
                  </option>
                @endforeach
              @else
                <option value="" disabled>Aucune adresse disponible</option>
              @endif
            </select>
            <div class="form-text">Sélectionnez l'adresse où le café sera livré</div>
          </div>
          
          <div class="mb-3">
            <label for="monthly_quota" class="form-label">
              <i class="fas fa-balance-scale me-2 text-secondary"></i>
              Quota mensuel (kg)
            </label>
            <input type="number" 
                   class="form-control" 
                   id="monthly_quota" 
                   name="monthly_quota" 
                   step="0.1" 
                   min="0.1" 
                   required
                   placeholder="Ex: 10.5">
            <div class="form-text">Quantité de café en kilogrammes par mois</div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="start_date" class="form-label">
                  <i class="fas fa-calendar-start me-2 text-secondary"></i>
                  Date de début
                </label>
                <input type="date" 
                       class="form-control" 
                       id="start_date" 
                       name="start_date" 
                       value="{{ date('Y-m-01') }}"
                       required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="end_date" class="form-label">
                  <i class="fas fa-calendar-times me-2 text-secondary"></i>
                  Date de fin (optionnel)
                </label>
                <input type="date" 
                       class="form-control" 
                       id="end_date" 
                       name="end_date">
                <div class="form-text">Laisser vide pour un contrat illimité</div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="fas fa-times me-2"></i>Annuler
        </button>
        <button type="submit" form="addCoffeeContractForm" class="btn btn-primary">
          <i class="fas fa-save me-2"></i>Créer le contrat
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal de modification de contrat café -->
@if(isset($coffee_data) && $coffee_data)
<div class="modal fade coffee-modal" id="editCoffeeContractModal" tabindex="-1" aria-labelledby="editCoffeeContractModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="editCoffeeContractModalLabel">
          <i class="fas fa-edit me-1 text-secondary"></i>
          Modifier le contrat café
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        @if(!empty($coffee_data))
        <form action="{{ route('admin.coffee.contracts.update', 1) }}" method="POST" id="editCoffeeContractForm" onsubmit="return false;">
        @else
        <form action="#" method="POST" id="editCoffeeContractForm" onsubmit="return false;">
        @endif
          @csrf
          @method('PUT')
          <input type="hidden" name="client_id" value="{{ $client['client_id'] }}">
          
          <div class="mb-3">
            <label for="edit_address_id" class="form-label">
              <i class="fas fa-map-marker-alt me-2 text-secondary"></i>
              Adresse de réassort
            </label>
            <select class="form-select" id="edit_address_id" name="address_id" required>
              <option value="">Sélectionner une adresse</option>
              @if(isset($addresses) && count($addresses) > 0)
                @foreach($addresses as $address)
                  <option value="{{ $address['id'] }}">
                    {{ $address['short_address'] }}
                  </option>
                @endforeach
              @else
                <option value="" disabled>Aucune adresse disponible</option>
              @endif
            </select>
            <div class="form-text">Sélectionnez l'adresse où le café sera livré</div>
          </div>
          
          <div class="mb-3">
            <label for="edit_monthly_quota" class="form-label">
              <i class="fas fa-balance-scale me-2 text-secondary"></i>
              Quota mensuel (kg)
            </label>
            <input type="number" 
                   class="form-control" 
                   id="edit_monthly_quota" 
                   name="monthly_quota" 
                   step="0.1" 
                   min="0.1" 
                   value=""
                   required>
            <div class="form-text">Quantité de café en kilogrammes par mois</div>
          </div>
          
          <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="edit_start_date" class="form-label">
                  <i class="fas fa-calendar-start me-2 text-secondary"></i>
                  Date de début
                </label>
                <input type="date" 
                       class="form-control" 
                       id="edit_start_date" 
                       name="start_date" 
                       value=""
                       required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="edit_end_date" class="form-label">
                  <i class="fas fa-calendar-times me-2 text-secondary"></i>
                  Date de fin (optionnel)
                </label>
                <input type="date" 
                       class="form-control" 
                       id="edit_end_date" 
                       name="end_date"
                       value="">
                <div class="form-text">Laisser vide pour un contrat illimité</div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="fas fa-times me-2"></i>Annuler
        </button>
        <button type="submit" form="editCoffeeContractForm" class="btn btn-primary">
          <i class="fas fa-save me-2"></i>Enregistrer
        </button>
      </div>
    </div>
  </div>
</div>
@endif

@endsection

@section('modals')
<!-- Modal de suppression d'adresse -->
<div class="modal-layer" data-modal-id="deleteAddressModal" aria-hidden="true">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal" role="dialog" aria-modal="true" aria-labelledby="deleteAddressModalLabel" tabindex="-1">
    <div class="glass-form glass-form--alert">
      <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" id="deleteAddressModalLabel">
            <i class="fas fa-trash text-danger"></i>
            Supprimer cette adresse ?
          </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="glass-alert glass-alert--warning">
            <i class="fas fa-exclamation-triangle"></i>
            <div>
              <h4 class="glass-alert-title">Action irréversible</h4>
              <p class="glass-alert-text">Êtes-vous sûr de vouloir supprimer cette adresse ? Cette action ne peut pas être annulée.</p>
            </div>
          </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>
          <form id="deleteAddressForm" method="POST">
            @csrf
            @method('DELETE')
            <button type="submit" class="button button--danger">
              <i class="fas fa-trash"></i>
              <span>Supprimer</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal de suppression du client -->
<div class="modal-layer" data-modal-id="confirmDeleteClientModal" aria-hidden="true">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-container glass-modal" role="dialog" aria-modal="true" aria-labelledby="confirmDeleteClientModalLabel" tabindex="-1">
    <div class="glass-form glass-form--alert">
      <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" id="confirmDeleteClientModalLabel">
            <i class="fas fa-trash text-danger"></i>
            Supprimer ce client ?
          </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="glass-alert glass-alert--warning">
            <i class="fas fa-exclamation-triangle"></i>
            <div>
              <h4 class="glass-alert-title">Action irréversible</h4>
              <p class="glass-alert-text">Toutes les adresses et données associées à ce client seront définitivement supprimées.</p>
            </div>
          </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>
          <form id="deleteClientForm" method="POST" action="{{ route('admin.clients.destroy', $client['client_id']) }}">
            @csrf
            @method('DELETE')
            <button type="submit" class="button button--danger">
              <i class="fas fa-trash"></i>
              <span>Supprimer définitivement</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('page-scripts')
<script type="module">
  import { initAddressAutocomplete } from '{{ asset('js/components/address-autocomplete.js') }}?v={{ time() }}';
  window.initAddressAutocomplete = initAddressAutocomplete;
</script>
<script>
  // Wait for modals.js to be ready before loading show.js
  function waitForModals() {
    if (window.Modals && typeof window.Modals.open === 'function') {
      console.log('[clients/show] Modals ready, loading show.js');
      const script = document.createElement('script');
      script.src = '{{ asset('js/pages/admin/clients/show.js') }}?v={{ time() }}';
      document.body.appendChild(script);
    } else {
      console.log('[clients/show] Waiting for Modals...');
      setTimeout(waitForModals, 50);
    }
  }
  waitForModals();
</script>
@endpush