@extends('layouts.dashboard')

@section('title', 'Prospects')
@section('page-title', '')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .page-subtitle {
        color: #6b7280;
        font-size: 1rem;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }
    
    .table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e5e7eb;
    }
    
    .table th {
        background: #f8fafc;
        border: none;
        border-bottom: 2px solid #e5e7eb;
        font-weight: 700;
        color: #1f2937;
        padding: 1.25rem 1rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    
    .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        background: white;
    }
    
    .table td:nth-child(3),
    .table td:nth-child(4),
    .table td:nth-child(5),
    .table td:nth-child(6),
    .table td:nth-child(7) {
        vertical-align: middle;
        text-align: center;
    }
    
    .table th:nth-child(3),
    .table th:nth-child(4),
    .table th:nth-child(5),
    .table th:nth-child(6),
    .table th:nth-child(7) {
        text-align: center;
    }
    
    .table tbody tr:hover {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    
    /* Désactiver le hover sur la ligne quand un dropdown est ouvert */
    .table tbody tr.has-open-dropdown:hover {
        transform: none;
    }
    
    .prospect-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .prospect-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #6fb87d;
        box-shadow: 0 2px 8px rgba(111, 184, 125, 0.2);
    }
    
    .prospect-avatar-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6fb87d 0%, #5da66d 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        border: 3px solid #6fb87d;
        box-shadow: 0 2px 8px rgba(111, 184, 125, 0.3);
    }
    
    .prospect-details h6 {
        margin: 0 0 0.5rem 0;
        font-weight: 700;
        color: #1f2937;
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .prospect-details small {
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.3;
        background: #f8fafc;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        display: inline-block;
    }
    
    .action-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
    }
    
    .action-btn {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
    }
    
    .action-btn:hover {
        transform: scale(1.1);
    }
    
    .action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .action-btn-delete {
        color: #ef4444;
    }
    
    .action-btn-delete:hover {
        color: #dc2626;
    }
    
    .search-container {
        position: relative;
    }
    
    .search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .search-icon {
        position: absolute;
        left: 12px;
        color: #6b7280;
        z-index: 2;
    }
    
    .search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        background: white;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .search-input:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    .prospect-type-badge:hover {
        opacity: 0.8;
        transform: scale(1.05);
        transition: all 0.2s ease;
    }
    
    .type-dropdown {
        margin-top: 0.25rem;
        z-index: 9999 !important;
        pointer-events: auto;
    }
    
    .dropdown {
        position: relative;
    }
    
    .type-option {
        transition: background-color 0.2s ease;
    }
    
    .type-option:hover {
        background-color: #f8fafc;
    }
    
    .type-dropdown .dropdown-item {
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-select {
        cursor: pointer;
    }
    
    .form-select:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 3px rgba(111, 184, 125, 0.1);
    }
    
    .form-control {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    .form-control:hover {
        border-color: #6fb87d;
    }
    
    .confirm-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999999;
    }
    
    .confirm-modal-content {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        width: 90%;
        text-align: center;
    }
    
    .confirm-modal h3 {
        margin-bottom: 1rem;
        color: #333;
        font-size: 1.25rem;
    }
    
    .confirm-modal p {
        margin-bottom: 2rem;
        color: #666;
        line-height: 1.5;
    }
    
    .confirm-modal-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    
    .confirm-modal-btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .confirm-modal-btn-cancel {
        background-color: #6c757d;
        color: white;
    }
    
    .confirm-modal-btn-cancel:hover {
        background-color: #5a6268;
    }
    
    .confirm-modal-btn-confirm {
        background-color: #dc3545;
        color: white;
    }
    
    .confirm-modal-btn-confirm:hover {
        background-color: #c82333;
    }
    
    .btn-primary {
        background-color: #6fb87d;
        border-color: #6fb87d;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #5da66d;
        border-color: #5da66d;
        color: white;
    }
    
    .btn-primary:focus {
        background-color: #5da66d;
        border-color: #5da66d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <!-- En-tête de la page -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Prospects</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Gérez vos prospects</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="section-title mb-0">Gestion des Prospects</h2>
                    <button type="button" class="btn btn-primary" id="addProspectBtn" style="display: inline-flex; align-items: center; gap: 0.5rem;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                        </svg>
                        Ajouter un prospect
                    </button>
                </div>
                
                <!-- Barre de recherche et filtres -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="search-container">
                            <div class="search-input-wrapper">
                                <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <path d="m21 21-4.35-4.35"></path>
                                </svg>
                                <input type="text" id="prospectSearch" class="search-input" placeholder="Rechercher par nom, prénom, email ou source...">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select id="filterType" class="form-select" style="padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 0.95rem; width: 100%;">
                            <option value="">Tous les types</option>
                            <option value="prospect">Prospect</option>
                            <option value="client">Client</option>
                            <option value="resilie">Résilié</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select id="filterStatus" class="form-select" style="padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 0.95rem; width: 100%;">
                            <option value="">Tous les statuts</option>
                            <option value="a_traiter" selected>À traiter</option>
                            <option value="traite">Traité</option>
                            <option value="relance">Relancé</option>
                        </select>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Nom / Prénom</th>
                                <th>Email</th>
                                <th>Source</th>
                                <th>Nombre de devis</th>
                                <th>Type</th>
                                <th>Statut</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($prospects ?? [] as $prospect)
                            <tr>
                                <td>
                                    <div style="font-weight: 600; color: #1f2937; font-size: 0.95rem;">
                                        {{ trim(($prospect->first_name ?? '') . ' ' . ($prospect->last_name ?? '')) ?: 'N/A' }}
                                    </div>
                                </td>
                                <td>
                                    <div style="font-size: 0.9rem; color: #1f2937;">{{ $prospect->email ?? 'N/A' }}</div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @php
                                        $currentSource = $prospect->source ?? 'Manuel';
                                    @endphp
                                    <div class="dropdown source-dropdown-wrapper" style="display: inline-block; position: relative;">
                                        <span class="badge prospect-source-badge"
                                              data-prospect-id="{{ $prospect->id }}"
                                              data-current-source="{{ $currentSource }}"
                                              style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3); cursor: pointer;">
                                            {{ $currentSource }}
                                        </span>
                                        <div class="dropdown-menu source-dropdown"
                                             data-prospect-id="{{ $prospect->id }}"
                                             style="display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9999; min-width: 220px; padding: 0; margin-top: 0.25rem; overflow: hidden;">
                                            <a class="dropdown-item source-option" href="#"
                                               data-source="Général"
                                               style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                <span class="badge" style="background-color: #e5e7eb; color: #374151; border: none; font-weight: 600; margin-right: 0.5rem;">Général</span>
                                            </a>
                                            @if(isset($ambassadeurs) && $ambassadeurs->count() > 0)
                                                @foreach($ambassadeurs as $ambassadeur)
                                                    <a class="dropdown-item source-option" href="#"
                                                       data-source="{{ $ambassadeur->name }}"
                                                       style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                        <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: none; font-weight: 600; margin-right: 0.5rem;">
                                                            {{ $ambassadeur->name }}
                                                        </span>
                                                    </a>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <span style="font-weight: 600; color: #6fb87d; font-size: 1rem;">
                                        {{ $prospect->devis ? $prospect->devis->count() : 0 }}
                                    </span>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @php
                                        $prospectType = $prospect->prospect_type ?? 'prospect';
                                    @endphp
                                    <div class="dropdown" style="display: inline-block; position: relative;">
                                        @if($prospectType === 'client')
                                            <span class="badge prospect-type-badge" data-prospect-id="{{ $prospect->id }}" data-current-type="client" style="background-color: #6fb87d; color: white; border: none; font-weight: 600; cursor: pointer;">
                                                Client
                                            </span>
                                        @elseif($prospectType === 'resilie')
                                            <span class="badge prospect-type-badge" data-prospect-id="{{ $prospect->id }}" data-current-type="resilie" style="background-color: #1f2937; color: white; border: none; font-weight: 600; cursor: pointer;">
                                                Résilié
                                            </span>
                                        @else
                                            <span class="badge prospect-type-badge" data-prospect-id="{{ $prospect->id }}" data-current-type="prospect" style="background-color: #fb923c; color: white; border: none; font-weight: 600; cursor: pointer;">
                                                Prospect
                                            </span>
                                        @endif
                                        <div class="dropdown-menu type-dropdown" data-prospect-id="{{ $prospect->id }}" style="display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9999; min-width: 150px; padding: 0; margin-top: 0.25rem; overflow: hidden;">
                                            <a class="dropdown-item type-option" href="#" data-type="prospect" style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                <span class="badge" style="background-color: #fb923c; color: white; border: none; font-weight: 600; margin-right: 0.5rem;">Prospect</span>
                                            </a>
                                            <a class="dropdown-item type-option" href="#" data-type="client" style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                <span class="badge" style="background-color: #6fb87d; color: white; border: none; font-weight: 600; margin-right: 0.5rem;">Client</span>
                                            </a>
                                            <a class="dropdown-item type-option" href="#" data-type="resilie" style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; margin: 0;">
                                                <span class="badge" style="background-color: #1f2937; color: white; border: none; font-weight: 600; margin-right: 0.5rem;">Résilié</span>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;" data-client-status="{{ $prospect->client_status ?? 'a_traiter' }}">
                                    @php
                                        $clientStatus = $prospect->client_status ?? 'a_traiter';
                                        $statusLabels = [
                                            'a_traiter' => 'À traiter',
                                            'traite' => 'Traité',
                                            'relance' => 'Relancé'
                                        ];
                                        $statusColors = [
                                            'a_traiter' => '#fbbf24',
                                            'traite' => '#6fb87d',
                                            'relance' => '#3b82f6'
                                        ];
                                    @endphp
                                    <div class="dropdown status-dropdown-wrapper" style="display: inline-block; position: relative;">
                                        <span class="badge prospect-status-badge" data-prospect-id="{{ $prospect->id }}" data-current-status="{{ $clientStatus }}" style="background-color: {{ $statusColors[$clientStatus] ?? '#6b7280' }}; color: white; border: none; font-weight: 600; cursor: pointer;">
                                            {{ $statusLabels[$clientStatus] ?? 'À traiter' }}
                                        </span>
                                        <div class="dropdown-menu status-dropdown" data-prospect-id="{{ $prospect->id }}" style="display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9999; min-width: 150px; padding: 0; margin-top: 0.25rem; overflow: hidden;">
                                            <a class="dropdown-item status-option" href="#" data-status="a_traiter" style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                <span class="badge" style="background-color: #fbbf24; color: white; border: none; font-weight: 600; margin-right: 0.5rem;">À traiter</span>
                                            </a>
                                            <a class="dropdown-item status-option" href="#" data-status="traite" style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                <span class="badge" style="background-color: #6fb87d; color: white; border: none; font-weight: 600; margin-right: 0.5rem;">Traité</span>
                                            </a>
                                            <a class="dropdown-item status-option" href="#" data-status="relance" style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; margin: 0;">
                                                <span class="badge" style="background-color: #3b82f6; color: white; border: none; font-weight: 600; margin-right: 0.5rem;">Relancé</span>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <div class="action-buttons">
                                        <a href="{{ route('prospects.show', $prospect->id) }}" class="action-btn" title="Voir les détails" style="color: #6fb87d;">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                                <circle cx="12" cy="12" r="3"/>
                                            </svg>
                                        </a>
                                        <button
                                            type="button"
                                            class="action-btn action-btn-delete js-delete-prospect"
                                            data-prospect-id="{{ $prospect->id }}"
                                            data-prospect-name="{{ ($prospect->first_name ?? '') . ' ' . ($prospect->last_name ?? '') }}"
                                            title="Supprimer"
                                        >
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <polyline points="3,6 5,6 21,6"/>
                                                <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                                <line x1="10" y1="11" x2="10" y2="17"/>
                                                <line x1="14" y1="11" x2="14" y2="17"/>
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <p class="text-muted">Aucun prospect trouvé</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Ajouter un prospect -->
<div class="modal fade" id="addProspectModal" tabindex="-1" aria-labelledby="addProspectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addProspectModalLabel">Ajouter un prospect</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="addProspectForm">
                    @csrf
                    <div class="mb-3">
                        <label for="addProspectFirstName" class="form-label">Prénom *</label>
                        <input type="text" class="form-control" id="addProspectFirstName" name="first_name" required maxlength="255" placeholder="Prénom">
                    </div>
                    <div class="mb-3">
                        <label for="addProspectLastName" class="form-label">Nom *</label>
                        <input type="text" class="form-control" id="addProspectLastName" name="last_name" required maxlength="255" placeholder="Nom">
                    </div>
                    <div class="mb-3">
                        <label for="addProspectEmail" class="form-label">Email *</label>
                        <input type="email" class="form-control" id="addProspectEmail" name="email" required maxlength="255" placeholder="email@exemple.fr">
                    </div>
                    <div class="mb-3">
                        <label for="addProspectPhone" class="form-label">Téléphone</label>
                        <input type="text" class="form-control" id="addProspectPhone" name="phone" maxlength="255" placeholder="06 12 34 56 78">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="addProspectSubmitBtn">
                    Créer le prospect
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
function showConfirmDialog(title, message, onConfirm) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3>${title}</h3>
            <p>${message}</p>
            <div class="confirm-modal-buttons">
                <button class="confirm-modal-btn confirm-modal-btn-cancel">Annuler</button>
                <button class="confirm-modal-btn confirm-modal-btn-confirm">Confirmer</button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    const cancelBtn = modal.querySelector('.confirm-modal-btn-cancel');
    const confirmBtn = modal.querySelector('.confirm-modal-btn-confirm');
    
    cancelBtn.addEventListener('click', () => {
        modal.remove();
    });
    
    confirmBtn.addEventListener('click', () => {
        modal.remove();
        onConfirm();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

function confirmDelete(prospectId, prospectName) {
    showConfirmDialog(
        'Supprimer le prospect',
        `Êtes-vous sûr de vouloir supprimer le prospect "${prospectName}" ?\n\nCette action est irréversible.`,
        () => deleteProspect(prospectId)
    );
}

document.addEventListener('click', function(e) {
    const btn = e.target.closest('.js-delete-prospect');
    if (!btn) return;

    e.preventDefault();
    const prospectId = btn.getAttribute('data-prospect-id');
    const prospectName = btn.getAttribute('data-prospect-name') || '';
    if (!prospectId) return;

    confirmDelete(prospectId, prospectName);
});

function deleteProspect(prospectId) {
    fetch(`/prospects/${prospectId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur lors de la suppression du prospect : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erreur lors de la suppression du prospect');
    });
}

function filterProspects() {
    const searchTerm = document.getElementById('prospectSearch').value.toLowerCase();
    const filterType = document.getElementById('filterType').value;
    const filterStatus = document.getElementById('filterStatus').value;
    const prospectRows = document.querySelectorAll('tbody tr');
    
    prospectRows.forEach(function(row) {
        // Recherche par nom, prénom, email ou source
        const nameCell = row.querySelector('td:first-child');
        const name = nameCell ? nameCell.textContent.toLowerCase() : '';
        const email = row.querySelector('td:nth-child(2)')?.textContent.toLowerCase() || '';
        const source = row.querySelector('td:nth-child(3)')?.textContent.toLowerCase() || '';
        
        const matchesSearch = !searchTerm || 
            name.includes(searchTerm) || 
            email.includes(searchTerm) || 
            source.includes(searchTerm);
        
        // Filtre par type
        const typeBadge = row.querySelector('.prospect-type-badge');
        const prospectType = typeBadge ? typeBadge.getAttribute('data-current-type') : '';
        const matchesType = !filterType || prospectType === filterType;
        
        // Filtre par statut du client (basé sur client_status)
        const statusCell = row.querySelector('td[data-client-status]');
        const clientStatus = statusCell ? statusCell.getAttribute('data-client-status') : 'a_traiter';
        let matchesStatus = true;
        if (filterStatus) {
            if (filterStatus === 'a_traiter') {
                matchesStatus = !clientStatus || clientStatus === 'a_traiter' || clientStatus === '';
            } else if (filterStatus === 'traite') {
                matchesStatus = clientStatus === 'traite';
            } else if (filterStatus === 'relance') {
                matchesStatus = clientStatus === 'relance';
            }
        }
        
        if (matchesSearch && matchesType && matchesStatus) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// Fonction pour changer le type de prospect
function changeProspectType(prospectId, newType) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    
    fetch(`/prospects/${prospectId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            prospect_type: newType
        })
    })
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error('Erreur HTTP: ' + response.status);
            });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Recharger la page pour mettre à jour l'affichage
            location.reload();
        } else {
            alert('Erreur: ' + (data.message || 'Une erreur est survenue'));
        }
    })
    .catch(error => {
        console.error('Erreur lors de la mise à jour du type:', error);
        alert('Erreur lors de la mise à jour du type prospect');
    });
}

function changeProspectStatus(prospectId, newStatus) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    const statusLabels = { a_traiter: 'À traiter', traite: 'Traité', relance: 'Relancé' };
    const statusColors = { a_traiter: '#fbbf24', traite: '#6fb87d', relance: '#3b82f6' };

    fetch('/prospects/' + prospectId, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({ client_status: newStatus })
    })
    .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
    .then(function(result) {
        if (result.ok && result.data.success) {
            const badge = document.querySelector('.prospect-status-badge[data-prospect-id="' + prospectId + '"]');
            const td = badge ? badge.closest('td') : null;
            if (badge) {
                badge.setAttribute('data-current-status', newStatus);
                badge.textContent = statusLabels[newStatus] || newStatus;
                badge.style.backgroundColor = statusColors[newStatus] || '#6b7280';
            }
            if (td) td.setAttribute('data-client-status', newStatus);
            const dropdown = document.querySelector('.status-dropdown[data-prospect-id="' + prospectId + '"]');
            if (dropdown) dropdown.style.display = 'none';
        } else {
            alert('Erreur: ' + (result.data.message || 'Une erreur est survenue'));
        }
    })
    .catch(function(err) {
        console.error('Erreur lors de la mise à jour du statut:', err);
        alert('Erreur lors de la mise à jour du statut');
    });
}

function changeProspectSource(prospectId, newSource) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    fetch('/prospects/' + prospectId + '/source', {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({ source: newSource })
    })
    .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
    .then(function(result) {
        if (result.ok && result.data.success) {
            const badge = document.querySelector('.prospect-source-badge[data-prospect-id="' + prospectId + '"]');
            if (badge) {
                badge.setAttribute('data-current-source', newSource);
                badge.textContent = newSource;
            }
            const dropdown = document.querySelector('.source-dropdown[data-prospect-id="' + prospectId + '"]');
            if (dropdown) dropdown.style.display = 'none';
        } else {
            alert('Erreur: ' + (result.data.message || 'Une erreur est survenue'));
        }
    })
    .catch(function(err) {
        console.error('Erreur lors de la mise à jour de la source:', err);
        alert('Erreur lors de la mise à jour de la source');
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('prospectSearch');
    const filterType = document.getElementById('filterType');
    const filterStatus = document.getElementById('filterStatus');

    // Modal Ajouter un prospect
    const addProspectBtn = document.getElementById('addProspectBtn');
    const addProspectModalEl = document.getElementById('addProspectModal');
    const addProspectForm = document.getElementById('addProspectForm');
    const addProspectSubmitBtn = document.getElementById('addProspectSubmitBtn');

    if (addProspectBtn && addProspectModalEl) {
        addProspectBtn.addEventListener('click', function() {
            addProspectForm.reset();
            const modal = new bootstrap.Modal(addProspectModalEl);
            modal.show();
        });
    }

    if (addProspectSubmitBtn && addProspectForm) {
        addProspectSubmitBtn.addEventListener('click', function() {
            const first = document.getElementById('addProspectFirstName').value.trim();
            const last = document.getElementById('addProspectLastName').value.trim();
            const email = document.getElementById('addProspectEmail').value.trim();
            const phone = document.getElementById('addProspectPhone').value.trim();
            if (!first || !last || !email) {
                alert('Veuillez remplir les champs Prénom, Nom et Email.');
                return;
            }
            addProspectSubmitBtn.disabled = true;
            addProspectSubmitBtn.textContent = 'Création...';
            const formData = new FormData();
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            formData.append('first_name', first);
            formData.append('last_name', last);
            formData.append('email', email);
            formData.append('phone', phone);

            fetch('{{ route("prospects.store") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                }
            })
            .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
            .then(function(result) {
                addProspectSubmitBtn.disabled = false;
                addProspectSubmitBtn.textContent = 'Créer le prospect';
                if (result.ok && result.data.success) {
                    bootstrap.Modal.getInstance(addProspectModalEl).hide();
                    if (result.data.prospect_id) {
                        window.location.href = '/prospects/' + result.data.prospect_id;
                    } else {
                        location.reload();
                    }
                } else {
                    const msg = result.data.message || 'Erreur lors de la création';
                    const err = result.data.errors;
                    alert(err ? (msg + '\n' + (err.email ? err.email[0] : err.first_name ? err.first_name[0] : '')) : msg);
                }
            })
            .catch(function(err) {
                addProspectSubmitBtn.disabled = false;
                addProspectSubmitBtn.textContent = 'Créer le prospect';
                console.error(err);
                alert('Erreur lors de la création du prospect.');
            });
        });
    }
    
    // Appliquer le filtre par défaut "a_traiter" au chargement
    if (filterStatus) {
        filterStatus.value = 'a_traiter';
        filterProspects(); // Appliquer immédiatement le filtre
        filterStatus.addEventListener('change', filterProspects);
    }
    
    if (searchInput) {
        searchInput.addEventListener('input', filterProspects);
    }
    
    if (filterType) {
        filterType.addEventListener('change', filterProspects);
    }
    
    // Gestion du clic sur les badges de type pour changer le type
    document.querySelectorAll('.prospect-type-badge').forEach(function(badge) {
        badge.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const dropdown = this.parentElement.querySelector('.type-dropdown');
            if (!dropdown) return;
            
            const isVisible = dropdown.style.display === 'block' || dropdown.style.display === '';
            
            // Fermer tous les autres dropdowns (type et statut) pour n'avoir qu'un seul menu ouvert
            document.querySelectorAll('.type-dropdown').forEach(function(d) {
                if (d !== dropdown) {
                    d.style.display = 'none';
                }
            });
            document.querySelectorAll('.status-dropdown').forEach(function(d) {
                d.style.display = 'none';
            });

            // Ouvrir/fermer le dropdown actuel
            const row = badge.closest('tr');
            if (isVisible) {
                dropdown.style.display = 'none';
                if (row) {
                    row.classList.remove('has-open-dropdown');
                }
            } else {
                // Retirer la classe de toutes les autres lignes
                document.querySelectorAll('tbody tr').forEach(function(r) {
                    r.classList.remove('has-open-dropdown');
                });
                
                // Calculer la position du dropdown
                const rect = badge.getBoundingClientRect();
                const dropdownHeight = 120; // Hauteur approximative du dropdown
                const spaceBelow = window.innerHeight - rect.bottom;
                const spaceAbove = rect.top;
                
                // Réinitialiser les styles
                dropdown.style.position = 'fixed';
                dropdown.style.left = rect.left + 'px';
                
                // Si pas assez d'espace en dessous mais assez au-dessus, afficher au-dessus
                if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
                    dropdown.style.top = (rect.top - dropdownHeight - 5) + 'px';
                    dropdown.style.bottom = 'auto';
                } else {
                    // Sinon, afficher en dessous
                    dropdown.style.top = (rect.bottom + 5) + 'px';
                    dropdown.style.bottom = 'auto';
                }
                
                dropdown.style.display = 'block';
                if (row) {
                    row.classList.add('has-open-dropdown');
                }
            }
        });
    });
    
    // Gestion du clic sur les options du dropdown
    document.querySelectorAll('.type-option').forEach(function(option) {
        option.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const type = this.getAttribute('data-type');
            const dropdown = this.closest('.type-dropdown');
            const prospectId = dropdown.getAttribute('data-prospect-id');
            const badge = dropdown.parentElement.querySelector('.prospect-type-badge');
            const currentType = badge.getAttribute('data-current-type');
            
            if (type !== currentType) {
                changeProspectType(prospectId, type);
            } else {
                // Fermer le dropdown si on clique sur le même type
                dropdown.style.display = 'none';
            }
        });
    });

    // Clic sur le badge Statut : même logique simple que la colonne Type (mais indépendant)
    document.querySelectorAll('.prospect-status-badge').forEach(function(badge) {
        badge.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const wrapper = this.closest('.status-dropdown-wrapper');
            const dropdown = wrapper ? wrapper.querySelector('.status-dropdown') : null;
            if (!dropdown) return;

            const isVisible = dropdown.style.display === 'block' || dropdown.style.display === '';

            // Fermer tous les autres dropdowns de statut
            document.querySelectorAll('.status-dropdown').forEach(function(d) {
                if (d !== dropdown) {
                    d.style.display = 'none';
                }
            });

            if (isVisible) {
                dropdown.style.display = 'none';
                const row = badge.closest('tr');
                if (row) {
                    row.classList.remove('has-open-dropdown');
                }
                return;
            }

            // Positionner le dropdown statut sous le badge (en fixed pour éviter le clipping)
            const rect = badge.getBoundingClientRect();
            const dropdownHeight = 110;
            const spaceBelow = window.innerHeight - rect.bottom;
            const spaceAbove = rect.top;

            dropdown.style.position = 'fixed';
            dropdown.style.left = rect.left + 'px';

            if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
                dropdown.style.top = (rect.top - dropdownHeight - 5) + 'px';
                dropdown.style.bottom = 'auto';
            } else {
                dropdown.style.top = (rect.bottom + 5) + 'px';
                dropdown.style.bottom = 'auto';
            }

            dropdown.style.display = 'block';
            const row = badge.closest('tr');
            if (row) {
                row.classList.add('has-open-dropdown');
            }
        });
    });

    // Clic sur une option du dropdown Statut
    document.querySelectorAll('.status-option').forEach(function(option) {
        option.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const status = this.getAttribute('data-status');
            const dropdown = this.closest('.status-dropdown');
            const prospectId = dropdown.getAttribute('data-prospect-id');
            const badge = document.querySelector('.prospect-status-badge[data-prospect-id="' + prospectId + '"]');
            const currentStatus = badge ? badge.getAttribute('data-current-status') : '';
            if (status !== currentStatus) {
                changeProspectStatus(prospectId, status);
            } else {
                dropdown.style.display = 'none';
            }
        });
    });
    
    // Clic sur le badge Source : même logique que Type/Statut
    document.querySelectorAll('.prospect-source-badge').forEach(function(badge) {
        badge.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const wrapper = this.closest('.source-dropdown-wrapper');
            const dropdown = wrapper ? wrapper.querySelector('.source-dropdown') : null;
            if (!dropdown) return;

            const isVisible = dropdown.style.display === 'block' || dropdown.style.display === '';

            // Fermer les autres dropdowns
            document.querySelectorAll('.source-dropdown').forEach(function(d) {
                if (d !== dropdown) d.style.display = 'none';
            });
            document.querySelectorAll('.type-dropdown').forEach(function(d) { d.style.display = 'none'; });
            document.querySelectorAll('.status-dropdown').forEach(function(d) { d.style.display = 'none'; });

            const rect = badge.getBoundingClientRect();
            const dropdownHeight = 200;
            const spaceBelow = window.innerHeight - rect.bottom;
            const spaceAbove = rect.top;

            dropdown.style.position = 'fixed';
            dropdown.style.left = rect.left + 'px';

            if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
                dropdown.style.top = (rect.top - dropdownHeight - 5) + 'px';
                dropdown.style.bottom = 'auto';
            } else {
                dropdown.style.top = (rect.bottom + 5) + 'px';
                dropdown.style.bottom = 'auto';
            }

            dropdown.style.display = isVisible ? 'none' : 'block';
        });
    });

    // Clic sur une option du dropdown Source
    document.querySelectorAll('.source-option').forEach(function(option) {
        option.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const newSource = this.getAttribute('data-source');
            const dropdown = this.closest('.source-dropdown');
            const prospectId = dropdown.getAttribute('data-prospect-id');
            const badge = document.querySelector('.prospect-source-badge[data-prospect-id="' + prospectId + '"]');
            const currentSource = badge ? badge.getAttribute('data-current-source') : '';

            if (newSource && newSource !== currentSource) {
                changeProspectSource(prospectId, newSource);
            } else {
                dropdown.style.display = 'none';
            }
        });
    });

    // Fermer les dropdowns quand on clique ailleurs (mais pas au survol)
    document.addEventListener('click', function(e) {
        const clickedDropdown = e.target.closest('.dropdown');
        const clickedBadge = e.target.closest('.prospect-type-badge');
        const clickedOption = e.target.closest('.type-option');
        const clickedStatusBadge = e.target.closest('.prospect-status-badge');
        const clickedStatusOption = e.target.closest('.status-option');
        const clickedSourceBadge = e.target.closest('.prospect-source-badge');
        const clickedSourceOption = e.target.closest('.source-option');
        const clickedRow = e.target.closest('tr');
        
        // Ne pas fermer si on clique dans la ligne qui contient un dropdown ouvert
        let shouldClose = true;
        if (clickedRow) {
            const rowTypeDropdown = clickedRow.querySelector('.type-dropdown');
            const rowStatusDropdown = clickedRow.querySelector('.status-dropdown');
            if ((rowTypeDropdown && rowTypeDropdown.style.display === 'block') ||
                (rowStatusDropdown && rowStatusDropdown.style.display === 'block')) {
                shouldClose = false;
            }
        }
        
        if (shouldClose && !clickedDropdown && !clickedBadge && !clickedOption && !clickedStatusBadge && !clickedStatusOption && !clickedSourceBadge && !clickedSourceOption) {
            document.querySelectorAll('.type-dropdown').forEach(function(d) { d.style.display = 'none'; });
            document.querySelectorAll('.status-dropdown').forEach(function(d) { d.style.display = 'none'; });
            document.querySelectorAll('.source-dropdown').forEach(function(d) { d.style.display = 'none'; });
            document.querySelectorAll('tbody tr').forEach(function(r) {
                r.classList.remove('has-open-dropdown');
            });
        }
    });
    
    // Empêcher la propagation des clics dans les dropdowns
    document.querySelectorAll('.type-dropdown').forEach(function(dropdown) {
        dropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        
        // Garder le dropdown ouvert quand on le survole
        dropdown.addEventListener('mouseenter', function(e) {
            e.stopPropagation();
        });
        
        dropdown.addEventListener('mouseleave', function(e) {
            e.stopPropagation();
        });
    });
    document.querySelectorAll('.status-dropdown').forEach(function(dropdown) {
        dropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });
    
    document.querySelectorAll('.source-dropdown').forEach(function(dropdown) {
        dropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });

    // Garder le dropdown ouvert quand on survole la ligne qui le contient
    document.querySelectorAll('tbody tr').forEach(function(row) {
        const dropdown = row.querySelector('.type-dropdown');
        if (dropdown) {
            row.addEventListener('mouseenter', function(e) {
                // Si le dropdown est ouvert, le garder ouvert
                if (dropdown.style.display === 'block') {
                    e.stopPropagation();
                    row.classList.add('has-open-dropdown');
                }
            });
            
            row.addEventListener('mouseleave', function(e) {
                // Ne pas fermer le dropdown si on quitte la ligne mais qu'on va vers le dropdown
                const relatedTarget = e.relatedTarget;
                if (relatedTarget && (relatedTarget.closest('.type-dropdown') === dropdown || relatedTarget === dropdown)) {
                    return;
                }
                // Si on quitte vraiment la ligne et le dropdown, on peut le fermer après un délai
                setTimeout(function() {
                    if (dropdown.style.display === 'block') {
                        const isHoveringDropdown = document.querySelector('.type-dropdown:hover');
                        if (!isHoveringDropdown || isHoveringDropdown !== dropdown) {
                            // Ne pas fermer si on est toujours dans la zone
                            const mouseX = e.clientX;
                            const mouseY = e.clientY;
                            const dropdownRect = dropdown.getBoundingClientRect();
                            if (!(mouseX >= dropdownRect.left && mouseX <= dropdownRect.right &&
                                  mouseY >= dropdownRect.top && mouseY <= dropdownRect.bottom)) {
                                // dropdown.style.display = 'none';
                                // row.classList.remove('has-open-dropdown');
                            }
                        }
                    }
                }, 100);
            });
        }
    });
    
});
</script>
@endpush