@extends('layouts.admin')

@section('page-title') Liste du personnel ménage @endsection
@section('page-subtitle') Gestion et suivi du personnel de ménage @endsection

@section('styles')
<link href="{{ asset('css/layouts/admin.css') }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/components.css') }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/workers/workers-list.css') }}" rel="stylesheet">
@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="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createMenageWorkerModal">
        <i class="fas fa-plus"></i>
        <span>Ajouter personnel ménage</span>
      </button>
    </div>
  </div>
@endif

  <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="menage-search" class="search-box__input" placeholder="Rechercher dans le personnel ménage...">
      </div>
      <div class="selectors-group">
        @if($isAdmin)
        <select id="status-filter" class="form-select">
          <option value="all">Tous statuts</option>
          <option value="active" selected>Actifs</option>
          <option value="inactive">Inactifs</option>
        </select>
        @endif
      </div>
    </div>
  </div>

  <div class="workers-grid">
    @if(isset($workers) && count($workers) > 0)
      @foreach($workers as $worker)
        <div class="worker-card" data-worker-id="{{ $worker->id }}">
          @if($worker->is_manager)
            <div class="manager-star">
              <i class="fas fa-star"></i>
            </div>
          @endif
          <div class="worker-card__header">
            <div class="worker-avatar">
              {{ strtoupper(substr($worker->name ?? '', 0, 2)) }}
            </div>
            <div class="worker-info">
              <h3 class="worker-name">{{ $worker->name ?? 'N/A' }}</h3>
              <span class="status-badge {{ $worker->is_active ? 'active' : 'inactive' }}">{{ $worker->is_active ? 'Actif' : 'Inactif' }}</span>
            </div>
          </div>

          <div class="worker-card__content">
            <div class="detail-group">
              <div class="detail-item">
                <span class="detail-label">Type</span>
                <span class="detail-value">
                  <span class="badge bg-info">Personnel ménage</span>
                </span>
              </div>
              @if($worker->phone)
              <div class="detail-item">
                <span class="detail-label">Téléphone</span>
                <span class="detail-value">{{ $worker->phone }}</span>
              </div>
              @endif
              @if($worker->email)
              <div class="detail-item">
                <span class="detail-label">Email</span>
                <span class="detail-value">{{ $worker->email }}</span>
              </div>
              @endif
            </div>
          </div>

          @if($isAdmin)
          <div class="worker-card__footer">
            <div></div>
            <a href="#" class="button-details" onclick="viewMenageWorkerDetails({{ $worker->id }})">
              <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-broom fa-3x"></i></div>
      <p class="empty-description">Aucun personnel de ménage ne correspond à vos critères de recherche.</p>
    </div>
    @endif
  </div>
</div>

<!-- Modal de création personnel ménage -->
@if($isAdmin)
<div class="modal fade" id="createMenageWorkerModal" tabindex="-1" aria-labelledby="createMenageWorkerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-width-500">
    <div class="modal-content">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="createMenageWorkerModalLabel">
          <i class="fas fa-broom me-2 text-primary"></i>Ajouter personnel ménage
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      
      <div class="modal-body">
        <div class="alert d-none" id="menageFormMessage" role="alert">
          <i class="fas fa-info-circle me-2"></i>
          <span class="message-text"></span>
        </div>
        
        <form id="createMenageWorkerForm" action="{{ route('admin.menage.store') }}" method="POST">
          @csrf
          <input type="hidden" name="type" value="menage">
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="menage-prenom" class="form-label">
                <i class="fas fa-user text-primary me-2"></i>Prénom *
              </label>
              <input type="text" class="form-control" id="menage-prenom" name="prenom" required>
              <div class="text-danger d-none" id="menagePrenomError">Ce champ est requis</div>
            </div>
            
            <div class="col-md-6 mb-3">
              <label for="menage-email" class="form-label">
                <i class="fas fa-envelope text-primary me-2"></i>Email *
              </label>
              <input type="email" class="form-control" id="menage-email" name="email" required>
              <div class="text-danger d-none" id="menageEmailError">Ce champ est requis</div>
            </div>
            
            <div class="col-12 mb-3">
              <label for="menage-language" class="form-label">
                <i class="fas fa-language text-primary me-2"></i>Langue *
              </label>
              <select class="form-select" id="menage-language" name="language" required>
                <option value="">Sélectionner une langue</option>
                <option value="fr" selected>Français</option>
                <option value="ru">Russe</option>
                <option value="ro">Roumain</option>
              </select>
              <div class="text-danger d-none" id="menageLanguageError">Ce champ est requis</div>
            </div>
            
            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="menage-is-active" name="is_active" value="1" checked>
                <label class="form-check-label" for="menage-is-active">
                  Personnel actif
                </label>
              </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="createMenageWorkerForm" class="btn btn-primary">
          <i class="fas fa-save me-2"></i>Enregistrer
        </button>
      </div>
    </div>
  </div>
</div>
@endif
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Recherche en temps réel
  const searchInput = document.getElementById('menage-search');
  const statusFilter = document.getElementById('status-filter');
  const workerCards = document.querySelectorAll('.worker-card');

  function filterWorkers() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusValue = statusFilter ? statusFilter.value : 'all';

    workerCards.forEach(card => {
      const workerName = card.querySelector('.worker-name').textContent.toLowerCase();
      const statusBadge = card.querySelector('.status-badge');
      const isActive = statusBadge.classList.contains('active');
      
      const matchesSearch = workerName.includes(searchTerm);
      const matchesStatus = statusValue === 'all' || 
                           (statusValue === 'active' && isActive) || 
                           (statusValue === 'inactive' && !isActive);

      if (matchesSearch && matchesStatus) {
        card.style.display = 'block';
      } else {
        card.style.display = 'none';
      }
    });

    // Afficher/masquer le message d'état vide
    const visibleCards = Array.from(workerCards).filter(card => card.style.display !== 'none');
    const emptyState = document.querySelector('.empty-state');
    if (emptyState) {
      emptyState.style.display = visibleCards.length === 0 ? 'block' : 'none';
    }
  }

  if (searchInput) {
    searchInput.addEventListener('input', filterWorkers);
  }
  
  if (statusFilter) {
    statusFilter.addEventListener('change', filterWorkers);
  }

  // Validation et soumission du formulaire
  const createForm = document.getElementById('createMenageWorkerForm');
  createForm.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Validation simple
    const prenom = document.getElementById('menage-prenom').value.trim();
    const email = document.getElementById('menage-email').value.trim();
    const language = document.getElementById('menage-language').value;
    const prenomError = document.getElementById('menagePrenomError');
    const emailError = document.getElementById('menageEmailError');
    const languageError = document.getElementById('menageLanguageError');
    
    let hasError = false;
    
    if (!prenom) {
      prenomError.classList.remove('d-none');
      hasError = true;
    } else {
      prenomError.classList.add('d-none');
    }
    
    if (!email) {
      emailError.classList.remove('d-none');
      hasError = true;
    } else {
      emailError.classList.add('d-none');
    }
    
    if (!language) {
      languageError.classList.remove('d-none');
      hasError = true;
    } else {
      languageError.classList.add('d-none');
    }
    
    if (hasError) {
      return;
    }
    
    // Soumission AJAX
    const formData = new FormData(this);
    const formMessage = document.getElementById('menageFormMessage');
    
    fetch(this.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        formMessage.className = 'alert alert-success';
        formMessage.textContent = data.message;
        formMessage.classList.remove('d-none');
        
        // Fermer le modal et recharger la page
        setTimeout(() => {
          const modal = bootstrap.Modal.getInstance(document.getElementById('createMenageWorkerModal'));
          modal.hide();
          location.reload();
        }, 1500);
      } else {
        formMessage.className = 'alert alert-danger';
        formMessage.textContent = data.message;
        formMessage.classList.remove('d-none');
      }
    })
    .catch(error => {
      formMessage.className = 'alert alert-danger';
      formMessage.textContent = 'Erreur lors de la soumission du formulaire';
      formMessage.classList.remove('d-none');
    });
  });

});

// Fonction globale pour voir les détails d'un personnel ménage
function viewMenageWorkerDetails(workerId) {
  // Rediriger vers la page de détails du personnel ménage
  window.location.href = `/admin/menage/${workerId}`;
}
</script>
@endsection