@extends('layouts.admin')

@section('page-title') Gestion des ménages @endsection
@section('page-subtitle') Gestion et suivi des ménages @endsection

@section('styles')
<link href="{{ asset('css/layouts/admin.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/components.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/components/modals.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/menage/index.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/admin/menage/wizard.css') }}?v={{ time() }}" rel="stylesheet">
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('js/pages/admin/menage/wizard.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/admin/menage/index.js') }}?v={{ time() }}"></script>
@endsection

@section('content')
    <div class="menage-page">
      @php $t = \App\Helpers\TranslationHelper::getUserTranslations(); @endphp
      <div class="page-header-row">
        <div class="main-header-actions">
                        <button type="button" class="btn btn-success" id="open-event-service-modal">
                            <i class="fas fa-plus me-2"></i>Nouvelle prestation
                        </button>
                        <button type="button" class="btn btn-primary" id="open-contract-wizard">
                            <i class="fas fa-plus me-2"></i>Nouveau contrat
                        </button>
        </div>
      </div>

    <!-- KPI Cards -->
    <div class="menage-stats-grid">
        <div class="menage-stat-card">
            <div class="menage-stat-icon">
                <i class="fas fa-building"></i>
            </div>
            <div class="menage-stat-content">
                <h3 class="menage-stat-number">{{ count($clientsData) }}</h3>
                <p class="menage-stat-label">Contrats</p>
            </div>
        </div>
        
        <div class="menage-stat-card">
            <div class="menage-stat-icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="menage-stat-content">
                <h3 class="menage-stat-number">
                    {{ collect($clientsData)->pluck('workers')->flatten()->unique('id')->count() }}
                </h3>
                <p class="menage-stat-label">Personnel ménage</p>
            </div>
        </div>
        
        <div class="menage-stat-card">
            <div class="menage-stat-icon">
                <i class="fas fa-tasks"></i>
            </div>
            <div class="menage-stat-content">
                <h3 class="menage-stat-number">
                    {{ collect($clientsData)->sum(function($client) {
                        return $client['cleaning_morning'] + $client['cleaning_evening'] + $client['dishwashing'];
                    }) }}
                </h3>
                <p class="menage-stat-label">Tâches/semaine</p>
            </div>
        </div>
        
        <div class="menage-stat-card">
            <div class="menage-stat-icon">
                <i class="fas fa-euro-sign"></i>
            </div>
            <div class="menage-stat-content">
                <h3 class="menage-stat-number">
                    {{ number_format((float)($monthlyPackageRevenue ?? 0), 2, ',', ' ') }} €
                </h3>
                <p class="menage-stat-label">Revenu mensuel (forfaits)</p>
            </div>
        </div>
        <div class="menage-stat-card">
            <div class="menage-stat-icon">
                <i class="fas fa-percent"></i>
            </div>
            <div class="menage-stat-content">
                <h3 class="menage-stat-number">
                    {{ number_format((float)($monthlyPackageMargin ?? 0), 2, ',', ' ') }} €
                </h3>
                <p class="menage-stat-label">Marge (forfaits)</p>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <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 ou prénom...">
      </div>
      <div class="selectors-group">
        <select id="prestation-filter" class="form-select">
          <option value="all">Toutes prestations</option>
          <option value="cleaning">Ménage</option>
          <option value="bin">Poubelle</option>
          <option value="ironing">Repassage</option>
          <option value="dish">Vaisselle</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>
        <select id="contract-status-filter" class="form-select">
          <option value="all">Tous les contrats</option>
          <option value="active">Contrats en cours</option>
          <option value="future">Contrats futurs</option>
          <option value="terminated">Contrats terminés</option>
        </select>
        <button type="button" id="clear-filters" class="btn btn-outline-secondary" title="Effacer tous les filtres">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>

    <!-- Légende des icônes -->
    <div class="legend-section">
        <div class="legend-single-line">
            <h2 class="legend-title">Type de prestations :</h2>
            <!-- Ordre demandé : Ménage - Poubelle - Repassage - Vaisselle / Matin | Soir -->
            <div class="legend-group">
                <div class="legend-icon task-icon cleaning-icon">
                    <i class="fas fa-broom"></i>
                </div>
                <span class="legend-text">{{ $t['translations']['cleaning']['legend_cleaning'] ?? 'Ménage' }}</span>
            </div>
            <span class="legend-separator">-</span>
            <div class="legend-group">
                <div class="legend-icon task-icon trash-icon">
                    <i class="fas fa-trash"></i>
                </div>
                <span class="legend-text">{{ $t['translations']['cleaning']['bin_task'] ?? 'Poubelle' }}</span>
            </div>
            <span class="legend-separator">-</span>
            <div class="legend-group">
                <div class="legend-icon task-icon ironing-icon">
                    <i class="fas fa-shirt"></i>
                </div>
                <span class="legend-text">{{ $t['translations']['cleaning']['ironing_task'] ?? 'Repassage' }}</span>
            </div>
            <span class="legend-separator">-</span>
            <div class="legend-group">
                <div class="legend-icon task-icon dishwashing-icon">
                    <i class="fas fa-utensils"></i>
                </div>
                <span class="legend-text">{{ $t['translations']['cleaning']['legend_dishwashing'] ?? 'Vaisselle' }}</span>
            </div>
            <span class="legend-separator-main">/</span>
            <div class="legend-group">
                <div class="legend-icon time-badge morning-badge">
                    <i class="fas fa-sun"></i>
                </div>
                <span class="legend-text">{{ $t['translations']['cleaning']['legend_morning'] ?? 'Matin' }}</span>
            </div>
            <span class="legend-separator">|</span>
            <div class="legend-group">
                <div class="legend-icon time-badge evening-badge">
                    <i class="fas fa-moon"></i>
                </div>
                <span class="legend-text">{{ $t['translations']['cleaning']['legend_evening'] ?? 'Soir' }}</span>
            </div>
        </div>
    </div>

    <!-- Prestations événementielles -->
    <div id="event-services-section" class="event-services-section">
        <!-- Les cartes seront chargées dynamiquement ici -->
    </div>

    <!-- Tableau des clients (refreshable) -->
    <div id="menage-contracts-list"
         data-refresh-on="menage:contract-updated"
         data-refresh-url="{{ route('admin.menage.clients-table') }}">
        @include('admin.menage.partials.clients-table', ['clientsData' => $clientsData])
    </div>
</div>

<!-- Élément de feedback -->
<div class="admin-feedback" style="display: none;">
    <i class="fas fa-info-circle"></i>
    <span class="feedback-message"></span>
</div>

<!-- Wizard de contrat (partiel réutilisable) -->
@include('admin.menage.partials.planning-wizard')

<!-- Modal: Nouvelle prestation événementielle -->
<div class="modal-layer" id="eventServiceModal" data-modal-id="event-service" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal-backdrop"></div>
    <div class="modal-container">
        <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">
                    <div class="event-service-header-icon">
                        <i class="fas fa-calendar-star"></i>
                    </div>
                    <h2 class="glass-title">
                        <span>Nouvelle prestation événementielle</span>
                    </h2>
                    <button type="button" class="modal-close" data-modal-close aria-label="Fermer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form id="event-service-form" class="glass-form-fields">
                    <!-- Nom de la prestation -->
                    <div class="glass-field">
                        <label for="event_service_name">Nom de la prestation</label>
                        <div class="glass-input">
                            <i class="fas fa-tag"></i>
                            <input type="text" id="event_service_name" name="name" placeholder="Ex: Ménage après événement" required>
                        </div>
                    </div>

                    <!-- Description (optionnel) -->
                    <div class="glass-field">
                        <label for="event_service_description">Description (optionnel)</label>
                        <div class="glass-input">
                            <i class="fas fa-align-left"></i>
                            <textarea id="event_service_description" name="description" rows="3" placeholder="Description de la prestation..."></textarea>
                        </div>
                    </div>

                    <!-- Montant, Marge, Total -->
                    <div class="glass-field">
                        <label>Tarification</label>
                        <div class="event-service-pricing">
                            <!-- Montant de base -->
                            <div class="event-service-field">
                                <label for="event_service_base_amount">Montant</label>
                                <div class="glass-input">
                                    <i class="fas fa-euro-sign"></i>
                                    <input type="number" id="event_service_base_amount" name="base_amount" placeholder="0.00" step="0.01" min="0" required>
                                </div>
                            </div>
                            
                            <!-- Marge bénéficiaire -->
                            <div class="event-service-field">
                                <label for="event_service_margin_percent">Marge bénéf.</label>
                                <div class="glass-input">
                                    <i class="fas fa-percent"></i>
                                    <input type="number" id="event_service_margin_percent" name="margin_percent" placeholder="0" step="0.1" min="0" max="99.9" value="0">
                                </div>
                            </div>
                            
                            <!-- Montant total -->
                            <div class="event-service-field">
                                <label>Montant total</label>
                                <div class="event-service-total">
                                    <span id="event_service_total_amount">0.00</span>
                                    <span class="event-service-currency">€</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                
                <div class="glass-modal-actions">
                    <button type="button" class="glass-modal-btn glass-modal-btn-secondary" data-modal-close>
                        <span>Annuler</span>
                    </button>
                    <button type="button" class="glass-modal-btn glass-modal-btn-primary" id="save-event-service-btn">
                        <span>Enregistrer</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection