@extends('layouts.admin')

@section('page-title') Liste des clients @endsection
@section('page-subtitle') Gestion et suivi des clients @endsection

@section('styles')
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ asset('css/pages/admin/clients/clients-list.css') }}" rel="stylesheet">
<link href="{{ asset('css/components/client-logo.css') }}" rel="stylesheet">
<!-- Les styles des modales ont été centralisés dans components.css -->
@endsection

@section('content')
<div class="clients-page">
  <div class="page-header-row">
    <div class="main-header-actions" style="margin-left: auto;">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createClientModal">
        <i class="fas fa-plus"></i>
        <span>Ajouter un client</span>
      </button>
    </div>
  </div>

  <div class="filters-card">
    <div class="filters-card-content">
      <div class="search-box">
        <i class="fas fa-search search-box__icon"></i>
        <input type="text" id="client-search" class="search-box__input" placeholder="Rechercher un client...">
      </div>
      <div class="selectors-group">
        <select id="status-filter" class="form-select">
          <option value="all">Tous statuts</option>
          <option value="actif" selected>Actifs</option>
          <option value="inactif">Inactifs</option>
        </select>
        <select id="type-filter" class="form-select">
          <option value="all">Tous types</option>
          <option value="entreprise">Entreprises</option>
          <option value="particulier">Particuliers</option>
        </select>
      </div>
    </div>
  </div>

  <div class="clients-grid">
    @if(isset($clients) && count($clients) > 0)
      @foreach($clients as $client)
        <div class="client-card" 
             data-client-id="{{ $client['client_id'] }}" 
             data-client-status="{{ isset($client['is_active']) ? ($client['is_active'] ? 'actif' : 'inactif') : ($client['client_status'] ?? 'actif') }}"
             data-client-type="{{ $client['client_type'] }}">
          <div class="client-card__header">
            @php
              $clientLogoHtml = \App\Helpers\ClientLogoHelper::renderClientLogo($client, 'client-avatar', 'client-logo-initials');
            @endphp
            
            {!! $clientLogoHtml !!}
            <div class="client-info">
              <h3 class="client-name">{{ $client['client_name'] }}</h3>
              <span class="status-badge {{ isset($client['is_active']) ? ($client['is_active'] ? 'active' : 'inactive') : ($client['client_status'] == 'actif' ? 'active' : 'inactive') }}">{{ isset($client['is_active']) ? ($client['is_active'] ? 'Actif' : 'Inactif') : ($client['client_status'] == 'actif' ? 'Actif' : 'Inactif') }}</span>
            </div>
          </div>

          <div class="client-card__content">
            <div class="detail-group">
              <div class="d-flex gap-4">
                <div class="detail-item flex-fill">
                  <span class="detail-label">Type</span>
                  <span class="detail-value">
                    <i class="fas {{ $client['client_type'] == 'entreprise' ? 'fa-building' : 'fa-user' }} text-primary"></i>
                    {{ $client['client_type'] == 'entreprise' ? 'Entreprise' : 'Particulier' }}
                  </span>
                </div>
                
                @if(isset($client['nombre_postes']) && !empty($client['nombre_postes']))
                <div class="detail-item flex-fill">
                  <span class="detail-label">Postes</span>
                  <span class="detail-value">
                    <i class="fas fa-desktop text-primary me-2"></i>{{ $client['nombre_postes'] }}
                  </span>
                </div>
                @endif
              </div>
              
              @if(isset($client['short_address']) && $client['short_address'])
              <div class="detail-item">
                <span class="detail-label">Adresse</span>
                <span class="detail-value">
                  <i class="fas fa-map-marker-alt text-primary"></i>
                  {{ $client['short_address'] }}
                </span>
              </div>
              @endif
            </div>
          </div>

          <div class="client-card__footer">
            <div class="creator-info">
              <div class="creator-info__details">
                <div class="creator-info__created-by">
                  <i class="fas fa-user-edit"></i>Créé par {{ $client['creator_name'] ?? 'Admin' }}
                </div>
                <div class="creator-info__date"><i class="fas fa-calendar-alt"></i> Le {{ \Carbon\Carbon::parse($client['created_at'])->format('d/m/Y') }}</div>
              </div>
            </div>
            <a href="{{ route('admin.clients.show', $client['client_id']) }}" class="button-details">
              <i class="fas fa-eye"></i>
              <span>Voir les détails</span>
            </a>
          </div>
        </div>
      @endforeach
    @else
    <div class="empty-state">
      <div class="empty-icon"><i class="fa-solid fa-building fa-3x"></i></div>
      <p class="empty-description">Aucun client ne correspond à vos critères de recherche.</p>
    </div>
    @endif
  </div>
</div>

<!-- Modal de création de client -->
<div class="modal fade" id="createClientModal" tabindex="-1" aria-labelledby="createClientModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Ajouter un nouveau client</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- Indicateurs d'étapes -->
        <div class="steps-container">
          <div class="step active" id="step-indicator-1">
            <div class="step-circle">1</div>
            <div class="step-label">Informations</div>
          </div>
          <div class="step-line"></div>
          <div class="step" id="step-indicator-2">
            <div class="step-circle">2</div>
            <div class="step-label">Logo</div>
          </div>
          <div class="step-line"></div>
          <div class="step" id="step-indicator-3">
            <div class="step-circle">3</div>
            <div class="step-label">Adresse</div>
          </div>
        </div>

        <form id="createClientForm">
          <!-- Étape 1: Informations de base -->
          <div id="step-1">
            <h4 class="step-title mb-3">Informations du client</h4>
            <p class="step-description text-muted mb-4">Renseignez les informations de base du client</p>
            
            <div class="row mb-4">
              <div class="col-md-6">
                <label for="client_name" class="form-label">Nom du client <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="client_name" name="client_name" required>
              </div>
              <div class="col-md-6">
                <label for="client_type" class="form-label">Type de client <span class="text-danger">*</span></label>
                <select class="form-select" id="client_type" name="client_type" required>
                  <option value="">Sélectionner un type</option>
                  <option value="entreprise">Entreprise</option>
                  <option value="particulier">Particulier</option>
                </select>
              </div>
            </div>
            
            <div class="row mb-4">
              <div class="col-md-6">
                <label for="pennylane_customer_id" class="form-label">Pennylane ID</label>
                <select class="form-select" id="pennylane_customer_id" name="pennylane_customer_id">
                  <option value="">Sélectionner un client Pennylane (optionnel)</option>
                  @if(isset($pennylaneCustomers) && count($pennylaneCustomers) > 0)
                    @foreach($pennylaneCustomers as $customer)
                      <option value="{{ $customer['id'] }}">{{ $customer['name'] }} (ID: {{ $customer['id'] }})</option>
                    @endforeach
                  @else
                    <option value="" disabled>Aucun client Pennylane disponible</option>
                  @endif
                </select>
                <div class="form-text">Associer ce client à un client existant dans Pennylane pour la facturation automatique</div>
              </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">
                <div class="form-text">Nombre de postes de travail du client (optionnel)</div>
              </div>
            </div>
          </div>
          
          <!-- Étape 2: Logo -->
          <div id="step-2" style="display: none;">
            <h4 class="step-title mb-3">Logo du client</h4>
            <p class="step-description text-muted mb-4">Ajoutez un logo pour le client (optionnel)</p>
            
            <div class="logo-selection-container">
              <!-- Onglets pour choisir entre upload et sélection -->
              <ul class="nav nav-tabs" id="logoTabs" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload-panel" type="button" role="tab" aria-controls="upload-panel" aria-selected="true">
                    <i class="fas fa-upload me-2"></i>Télécharger
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="select-tab" data-bs-toggle="tab" data-bs-target="#select-panel" type="button" role="tab" aria-controls="select-panel" aria-selected="false">
                    <i class="fas fa-images me-2"></i>Sélectionner
                  </button>
                </li>
              </ul>
              
              <div class="tab-content" id="logoTabContent">
                <!-- Panel Upload -->
                <div class="tab-pane fade show active" id="upload-panel" role="tabpanel" aria-labelledby="upload-tab">
                  <div class="logo-upload-area" id="logo_upload_area">
                    <input type="file" class="file-input" id="client_logo_upload" name="client_logo_upload" accept="image/*" hidden>
                    <div class="upload-content">
                      <i class="fas fa-cloud-upload-alt"></i>
                      <p>Glissez votre logo ici ou cliquez pour parcourir</p>
                      <small>PNG/JPG, max. 2 Mo</small>
                    </div>
                  </div>
                  <div class="upload-preview mt-3" id="upload_preview" style="display: none;">
                    <img src="" alt="Aperçu" class="preview-img" id="preview_image">
                    <button type="button" class="btn btn-danger remove-upload" id="remove_upload">
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                </div>
                
                <!-- Panel Sélection -->
                <div class="tab-pane fade" id="select-panel" role="tabpanel" aria-labelledby="select-tab">
                  <div class="logos-grid" id="logo_grid">
                    <div class="text-center p-4">
                      <i class="fas fa-spinner fa-spin fa-2x text-muted mb-3"></i>
                      <p class="mb-0 text-muted">Chargement des logos...</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Étape 3: Adresse -->
          <div id="step-3" style="display: none;">
            <h4 class="step-title mb-3">Adresse du client</h4>
            <p class="step-description text-muted mb-4">Recherchez et sélectionnez l'adresse (optionnel)</p>
            
            <div class="address-search-container">
              <div class="form-group mb-4">
                <label for="address_search" class="form-label">Rechercher une adresse</label>
                <input type="text" class="form-control" id="address_search" placeholder="Tapez une adresse...">
                <div class="address-suggestions" id="address_suggestions" style="display: none;"></div>
              </div>
              
              <div class="selected-address" id="selected_address" style="display: none;">
                <h5><i class="fas fa-map-marker-alt text-success me-2"></i>Adresse sélectionnée</h5>
                <div class="address-details">
                  <p><strong>Adresse :</strong> <span id="selected_address_text"></span></p>
                  <p><strong>Ville :</strong> <span id="selected_city_text"></span></p>
                  <p><strong>Code postal :</strong> <span id="selected_postal_text"></span></p>
                </div>
                
                <div class="row mb-3">
                  <div class="col-md-6">
                    <label for="client_floor" class="form-label">Étage</label>
                    <select class="form-select" id="client_floor" name="client_floor">
                      <option value="rdc">Rez-de-chaussée</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>
                      <option value="sous-sol-1">Sous-sol -1</option>
                      <option value="sous-sol-2">Sous-sol -2</option>
                    </select>
                  </div>
                  <div class="col-md-6">
                    <label for="client_side" class="form-label">Côté</label>
                    <select class="form-select" id="client_side" name="client_side">
                      <option value="">Sélectionner un côté</option>
                      <option value="gauche">Gauche</option>
                      <option value="droite">Droite</option>
                      <option value="fond">Fond</option>
                      <option value="face">Face</option>
                      <option value="cour">Cour</option>
                      <option value="rue">Rue</option>
                    </select>
                  </div>
                </div>
                
                <div class="address-preview">
                  <h6><i class="fas fa-eye text-primary"></i>Aperçu des adresses</h6>
                  <p><strong>Adresse complète :</strong> <span id="full_address_preview"></span></p>
                  <p><strong>Adresse courte :</strong> <span id="short_address_preview"></span></p>
                </div>
              </div>
            </div>
            
            <!-- Champs cachés pour stocker les données d'adresse -->
            <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">
          </div>
        </form>
      </div>
      <div class="modal-footer justify-content-between">
        <div>
          <button type="button" class="btn btn-outline-secondary" id="prevStep" style="display: none;">
            <i class="fas fa-arrow-left me-2"></i>Retour
          </button>
        </div>
        <div>
          <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">
            <i class="fas fa-times me-2"></i>Annuler
          </button>
          <button type="button" class="btn btn-primary" id="nextStep">
            <span class="btn-text">Suivant</span>
            <i class="fas fa-arrow-right ms-2"></i>
          </button>
          <button type="button" class="btn btn-primary" id="createClient" style="display: none;">
            <i class="fas fa-save me-2"></i>Créer le client
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/pages/admin/clients/clients-list.js') }}"></script>
<script src="{{ asset('js/pages/admin/clients/create-client.js') }}"></script>
@endsection