@extends('layouts.admin')

@section('page-title') Liste des ouvriers @endsection
@section('page-subtitle') Gestion et suivi des membres du personnel @endsection

@section('styles')
<link href="{{ asset('css/layouts/admin.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/workers/workers-list.css')  }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/workers/create-worker-modal.css')  }}?v={{ time() }}" rel="stylesheet">
<!-- Les styles des modales ont été centralisés dans components.css -->
@endsection

@section('content')
<div class="kpi-page">
  @php
  $isAdmin = false;
  if (Auth::user()->role === 'admin') {
      $adminRole = DB::table('admins')
          ->where('user_id', Auth::user()->id)
          ->value('admin_role');
      $isAdmin = ($adminRole === 'admin');
  }
@endphp

@if($isAdmin)
<div class="page-header-row">
    <div class="main-header-navigation">
      <a href="{{ route('admin.workers.kpi') }}" class="back-link">
        <i class="fas fa-arrow-left"></i>
        <span>Revenir au tableau de bord</span>
      </a>
    </div>
    <div class="main-header-actions">
      <button type="button" class="button button-primary" data-modal-open="createWorkerModal">
        <i class="fas fa-plus"></i>
        <span>Ajouter un ouvrier</span>
      </button>
    </div>
  </div>
@endif

  <div class="workers-header-card">
    <div class="workers-header-row">
      <div class="workers-search-wrapper">
        <i class="fas fa-search"></i>
        <input type="text" id="worker-search" class="workers-search-input" placeholder="Rechercher un ouvrier...">
      </div>
      
      <div class="workers-filters-group">
        @if($isAdmin)
        <select id="status-filter" class="workers-filter-select">
          <option value="all">Tous statuts</option>
          <option value="active" selected>Actifs</option>
          <option value="inactive">Inactifs</option>
        </select>
        @endif
        <select id="trade-filter" class="workers-filter-select">
          <option value="all">Toutes les spécialités</option>
          @foreach($specialties ?? [] as $specialty)
            @php
              // Normaliser le nom en supprimant les accents et en minuscules
              $name = $specialty->name ?? '';
              $normalized = strtolower(iconv('UTF-8', 'ASCII//TRANSLIT', $name));
              // Supprimer les caractères non alphanumériques
              $normalized = preg_replace('/[^a-z0-9]/', '', $normalized);
            @endphp
            <option value="{{ $normalized }}" data-original="{{ $name }}">{{ $name }}</option>
          @endforeach
        </select>
      </div>
    </div>
  </div>

  <div class="workers-grid">
    @if(isset($workers) && count($workers) > 0)
      @foreach($workers as $user)
        @if(!$isAdmin && $user->id == 18)
          {{-- Masquer l'utilisateur test (ID 18) pour les éditeurs --}}
          @continue
        @endif
        <div class="card worker-card {{ $user->is_manager ? 'has-manager' : '' }}" data-worker-id="{{ $user->id }}">
          @if($user->is_manager)
            <div class="manager-star">
              <i class="fas fa-star"></i>
            </div>
          @endif
          @if($isAdmin)
            <div class="impersonate-btn" title="Voir l'interface de {{ $user->prenom }}">
              <a href="{{ route('admin.workers.impersonate', $user->id) }}" class="impersonate-link">
                <i class="fas fa-eye"></i>
              </a>
            </div>
          @endif
          <div class="worker-card__header">
            <div class="worker-avatar">
              {{ strtoupper(substr($user->prenom ?? '', 0, 1) . substr($user->nom ?? '', 0, 1)) }}
            </div>
            <div class="worker-info">
              <h3 class="worker-name">{{ ($user->prenom ?? '') . ' ' . ($user->nom ?? '') }}</h3>
              <span class="status-chip {{ $user->is_active ? 'status-active' : 'status-inactive' }}">
                <span class="status-dot"></span>
                {{ $user->is_active ? 'Actif' : 'Inactif' }}
              </span>
            </div>
          </div>

          <div class="worker-card__content">
            <div class="detail-group">
              <div class="detail-item">
                <span class="detail-label">Statut</span>
                @php
                  $statusLabels = [
                    'salarie' => 'Salarié',
                    'micro' => 'Micro',
                    'mixed' => 'Salarié / Micro',
                    'autre' => 'Autre'
                  ];
                  $statusClasses = [
                    'micro' => 'micro',
                    'mixed' => 'mixed',
                    'salarie' => 'salarie',
                    'autre' => 'autre'
                  ];
                  $currentStatus = $user->employment_status ?? 'micro';
                @endphp
                <span class="worker-status-badge worker-status-badge--{{ $statusClasses[$currentStatus] ?? 'micro' }}">
                  {{ $statusLabels[$currentStatus] ?? 'Micro' }}
                </span>
              </div>
              
              <div class="detail-item">
                <span class="detail-label">Spécialités</span>
                @php
                  $specialties = DB::table('worker_specialties')
                    ->where('user_id', $user->id)
                    ->join('specialties', 'worker_specialties.specialty_id', '=', 'specialties.id')
                    ->select('specialties.*')
                    ->get();
                @endphp
                @if(count($specialties) > 0)
                  <div class="worker-trades">
                    @foreach($specialties as $specialty)
                      <span class="trade-tag specialty-tag" data-trade="{{ $specialty->id }}" 
                            style="background-color: {{ $specialty->hex_color ?? '#f1f5f9' }}; color: {{ $specialty->text_hex_color ?? '#475569' }};">
                        <i class="trade-icon fa-fw {{ $specialty->icon ?? 'fas fa-wrench' }}"></i>
                        {{ $specialty->name }}
                      </span>
                    @endforeach
                  </div>
                @else
                  <span class="text-muted">Aucune spécialité attribuée</span>
                @endif
              </div>
              
              <div class="detail-item">
                <span class="detail-label">Solde cumulé</span>
                <div class="worker-balance">
                  @php
                    $balance = $user->total_balance ?? 0;
                    $colorClass = $balance == 0 ? 'text-success' : ($balance > 0 ? 'text-danger' : 'text-success');
                  @endphp
                  <span class="balance-amount {{ $colorClass }}">{{ number_format(abs($balance), 2, ',', ' ') }} €</span>
                </div>
              </div>
            </div>
          </div>

          @if($isAdmin)
          <div class="worker-card__footer">
            <div></div>
            <a href="{{ route('admin.workers.show', $user->id) }}" 
               class="button-details"
               onclick="console.log('Clic sur:', '{{ route('admin.workers.show', $user->id) }}'); return true;">
              <i class="fa-solid fa-eye"></i>
              <span>Voir les détails</span>
            </a>
          </div>
          @endif
        </div>
      @endforeach
    @else
    <div class="empty-state">
      <div class="empty-icon"><i class="fa-solid fa-users fa-3x"></i></div>
      <p class="empty-description">Aucun ouvrier ne correspond à vos critères de recherche.</p>
    </div>
    @endif
  </div>
</div>

<!-- Modal de création d'ouvrier -->
<div class="modal-layer" id="createWorkerModal" data-modal-id="createWorkerModal">
  <div class="modal-backdrop"></div>
  <div class="modal-container modal-size-large">
    <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">
        <h5 class="modal-title" id="createWorkerModalLabel">
          <i class="fas fa-user-plus"></i>
          <span>Ajouter un ouvrier</span>
        </h5>
        <button type="button" class="modal-close" data-modal-close aria-label="Fermer">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <!-- Stepper navigation -->
      <div class="stepper-navigation">
        <div class="stepper-container">
          <div class="step active" data-step="1">
            <div class="step-circle">1</div>
            <div class="step-label">Informations générales</div>
          </div>
          <div class="timeline-connector"></div>
          <div class="step" data-step="2">
            <div class="step-circle">2</div>
            <div class="step-label">Spécialités</div>
          </div>
          <div class="timeline-connector"></div>
          <div class="step" data-step="3">
            <div class="step-circle">3</div>
            <div class="step-label">Informations financières</div>
          </div>
        </div>
      </div>
      
      <div class="glass-form-fields">
        <div class="alert hidden" id="formMessage" role="alert">
          <i class="fas fa-info-circle"></i>
          <span class="message-text"></span>
        </div>
        
        <form id="createWorkerForm" action="{{ route('admin.workers.store') }}" method="POST">
          @csrf
          
          <!-- Étape 1: Informations générales -->
          <div id="step1" class="active">
            <h6 class="mb-1"><i class="fas fa-user-edit"></i><strong>Informations générales</strong></h6>
            <p class="text-muted">Veuillez saisir les informations de base de l'ouvrier. Les champs marqués d'un astérisque (*) sont obligatoires.</p>
            <div class="form-row">
              <div class="form-col-half">
                <label for="prenom" class="glass-label">Prénom <span class="text-danger">*</span></label>
                <input type="text" class="glass-input-field @error('prenom') is-invalid @enderror" id="prenom" name="prenom" value="{{ old('prenom') }}" required>
                @error('prenom')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div class="text-danger hidden" id="prenomError">Ce champ est requis</div>
              </div>
              <div class="form-col-half">
                <label for="nom" class="glass-label">Nom <span class="text-danger">*</span></label>
                <input type="text" class="glass-input-field @error('nom') is-invalid @enderror" id="nom" name="nom" value="{{ old('nom') }}" required>
                @error('nom')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div class="text-danger hidden" id="nomError">Ce champ est requis</div>
              </div>
            </div>
            <div class="mb-1">
              <label for="email" class="glass-label">Email <span class="text-danger">*</span></label>
              <input type="email" class="glass-input-field @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
              @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
              <div class="text-danger hidden" id="emailError">Ce champ est requis</div>
            </div>
            <div class="language-status-row">
              <div class="language-select-container">
                <label for="language" class="glass-label">Langue <span class="text-danger">*</span></label>
                <select class="form-select @error('language') is-invalid @enderror" id="language" name="language" required>
                  <option value="fr" {{ old('language') == 'fr' ? 'selected' : '' }}>Français</option>
                  <option value="ro" {{ old('language') == 'ro' ? 'selected' : '' }}>Roumain</option>
                  <option value="ru" {{ old('language') == 'ru' ? 'selected' : '' }}>Russe</option>
                </select>
                @error('language')
                  <div class="invalid-feedback">{{ $message }}</div>
                @enderror
              </div>
              
              <div class="employment-status-container">
                <label class="glass-label">Statut dans l'entreprise</label>
                <select class="form-select" id="employment_status" name="employment_status">
                  <option value="micro" {{ old('employment_status') == 'micro' ? 'selected' : '' }}>Micro</option>
                  <option value="salarie" {{ old('employment_status') == 'salarie' ? 'selected' : '' }}>Salarié</option>
                  <option value="mixed" {{ old('employment_status') == 'mixed' ? 'selected' : '' }}>Salarié / Micro</option>
                  <option value="autre" {{ old('employment_status') == 'autre' ? 'selected' : '' }}>Autre</option>
                </select>
              </div>
            </div>
          </div>
          
          <!-- Étape 2: Spécialités -->
          <div id="step2">
            <h6 class="mb-3"><i class="fas fa-tools"></i><strong>Spécialités de l'ouvrier</strong></h6>
            <p class="text-muted">Sélectionnez les compétences et spécialités de l'ouvrier. Vous pourrez les modifier ultérieurement si nécessaire.</p>
            <div class="mb-4">
              @php
                // Récupérer toutes les spécialités directement depuis la base de données
                $allSpecialties = DB::table('specialties')->get();
              @endphp
              
              <div class="specialties-container p-3 border rounded">
                <div class="trades-list">
                  @foreach($allSpecialties as $specialty)
                  <div class="specialty-item">
                    <input type="checkbox" name="specialties[]" value="{{ $specialty->id }}" id="specialty{{ $specialty->id }}" class="specialty-checkbox hidden">
                    <label for="specialty{{ $specialty->id }}" class="trade-tag specialty-tag" data-trade="{{ $specialty->id }}" 
                            style="background-color: {{ $specialty->hex_color ?? '#f1f5f9' }}; color: {{ $specialty->text_hex_color ?? '#475569' }};">
                      <i class="trade-icon fa-fw {{ $specialty->icon ?? 'fas fa-wrench' }}"></i>
                      {{ $specialty->name }}
                    </label>
                  </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
          
          <!-- Étape 3: Informations financières -->
          <div id="step3">
            <h6 class="mb-3"><i class="fas fa-euro-sign"></i><strong>Informations financières</strong></h6>
            <p class="text-muted">Définissez les tarifs de rémunération de l'ouvrier. Ces informations seront utilisées pour le calcul des salaires.</p>
            <div class="mb-3">
              <label for="taux_quotidien" class="glass-label">Taux quotidien (€) <span class="text-danger">*</span></label>
              <input type="number" step="0.01" min="0" class="glass-input-field @error('taux_quotidien') is-invalid @enderror" id="taux_quotidien" name="taux_quotidien" value="{{ old('taux_quotidien') }}" required>
              @error('taux_quotidien')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
              <div class="text-danger hidden" id="taux_quotidienError">Ce champ est requis</div>
            </div>
            <div class="mb-3">
              <label for="taux_heure_sup" class="glass-label">Taux horaire supplémentaire (€) <span class="text-danger">*</span></label>
              <input type="number" step="0.01" min="0" class="glass-input-field @error('taux_heure_sup') is-invalid @enderror" id="taux_heure_sup" name="taux_heure_sup" value="{{ old('taux_heure_sup') }}" required>
              @error('taux_heure_sup')
                <div class="invalid-feedback">{{ $message }}</div>
              @enderror
              <div class="text-danger hidden" id="taux_heure_supError">Ce champ est requis</div>
            </div>
          </div>
          
          <!-- Résumé des informations (affiché à la fin) -->
          <div id="summary">
            <h6 class="mb-1"><i class="fas fa-check-circle"></i><strong>Résumé des informations</strong></h6>
            <p class="text-muted">Vérifiez les informations avant de finaliser la création de l'ouvrier.</p>
            
            <div class="summary-section">
              <div class="summary-header">
                <i class="fas fa-user-edit"></i>Informations générales
              </div>
              <div class="summary-content">
                <div class="row g-2">
                  <div class="col-6">
                    <small class="text-muted">Nom complet</small>
                    <div id="summary-nom-complet" class="fw-bold"></div>
                  </div>
                  <div class="col-6">
                    <small class="text-muted">Langue</small>
                    <div id="summary-langue" class="fw-bold"></div>
                  </div>
                  <div class="form-col-full">
                    <small class="text-muted">Email</small>
                    <div id="summary-email" class="fw-bold">Non renseigné</div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="summary-section">
              <div class="summary-header">
                <i class="fas fa-tools"></i>Spécialités
              </div>
              <div class="summary-content">
                <div id="summary-specialties" class="specialties-summary">Aucune spécialité sélectionnée</div>
              </div>
            </div>
            
            <div class="summary-section">
              <div class="summary-header">
                <i class="fas fa-euro-sign"></i>Informations financières
              </div>
              <div class="summary-content">
                <div class="row g-2">
                  <div class="col-6">
                    <small class="text-muted">Taux quotidien</small>
                    <div class="fw-bold"><span id="summary-taux-quotidien"></span> €</div>
                  </div>
                  <div class="col-6">
                    <small class="text-muted">Taux horaire supplémentaire</small>
                    <div class="fw-bold"><span id="summary-taux-heure-sup"></span> €</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="progress hidden" id="saveProgress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
          </div>
        </form>
      </div>
      
      <div class="glass-actions">
        <div>
          <a class="back-link" id="prevStep">
            <i class="fas fa-arrow-left"></i>
            <span>Retour</span>
          </a>
        </div>
        <div>
          <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="nextStep" data-step="1">
            <span class="btn-text">Suivant</span>
            <i class="fas fa-arrow-right"></i>
          </button>
          <button type="submit" form="createWorkerForm" class="button button-primary hidden" id="submitForm">
            <i class="fas fa-save"></i>
            <span>Enregistrer</span>
          </button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/pages/admin/workers/workers-list.js')  }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/admin/workers/worker-create.js')  }}?v={{ time() }}"></script>
@endsection