@extends('layouts.dashboard')

@section('title', 'Réclamations')
@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) { vertical-align: middle; text-align: center; }
    .table th:nth-child(3), .table th:nth-child(4), .table th:nth-child(5) { 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); }
    .item-info { display: flex; align-items: center; gap: 0.75rem; }
    .item-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); }
    .item-details h6 { margin: 0 0 0.5rem 0; font-weight: 700; color: #1f2937; font-size: 1rem; line-height: 1.3; }
    .item-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); }
    .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); }
    .client-search-result { padding: 0.75rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: all 0.2s ease; }
    .client-search-result:hover { background: #e8f5ea; }
    .client-search-result:last-child { border-bottom: none; }
    .client-search-result-name { font-weight: 600; color: #1f2937; margin-bottom: 0.25rem; }
    .client-search-result-details { font-size: 0.85rem; color: #6b7280; }
</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;">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Réclamations</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Gérez les réclamations</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 Réclamations</h2>
                    <button class="btn btn-primary" id="addReclamationBtn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="me-2">
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                        </svg>
                        Nouvelle Réclamation
                    </button>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-12">
                        <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="reclamationSearch" class="search-input" placeholder="Rechercher par nom, email, téléphone ou numéro de contrat...">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Sujet</th>
                                <th>Client</th>
                                <th>Date de création</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reclamations ?? [] as $reclamation)
                            <tr>
                                <td>
                                    <div style="font-weight: 600; color: #1f2937; font-size: 0.95rem;">
                                        {{ $reclamation->sujet ?? 'Sans sujet' }}
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <div style="font-size: 0.9rem; color: #1f2937; margin-bottom: 0.25rem;">{{ $reclamation->client_name ?? 'N/A' }}</div>
                                        <div style="font-size: 0.85rem; color: #6b7280;">{{ $reclamation->email ?? 'N/A' }}</div>
                                    </div>
                                </td>
                                <td>
                                    <div style="font-size: 0.9rem; color: #1f2937;">
                                        {{ $reclamation->created_at ? $reclamation->created_at->tz(config('app.timezone'))->format('d/m/Y à H:i') : 'N/A' }}
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <div class="action-buttons">
                                        @if($reclamation->prospect_id)
                                        <a href="{{ route('portefeuille.show', $reclamation->prospect_id) }}/reclamations/{{ $reclamation->id }}" 
                                           class="action-btn" 
                                           title="Voir les détails de la réclamation"
                                           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>
                                        @endif
                                        <button type="button" class="action-btn action-btn-delete" 
                                                onclick="confirmDelete({{ $reclamation->id }}, '{{ $reclamation->sujet ?? $reclamation->client_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="4" class="text-center py-5">
                                    <p class="text-muted">Aucune réclamation trouvée</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter une réclamation -->
<div class="modal fade" id="addReclamationModal" tabindex="-1" aria-labelledby="addReclamationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addReclamationModalLabel">Ajouter une réclamation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addReclamationForm">
                    @csrf
                    <input type="hidden" id="reclamationProspectId" name="prospect_id">
                    
                    <!-- Recherche de client -->
                    <div class="mb-3">
                        <label for="clientSearch" class="form-label">Rechercher un client <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="clientSearch" placeholder="Tapez le nom, prénom ou email du client..." autocomplete="off" required>
                        <div id="clientSearchResults" class="mt-2" style="display: none; max-height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; background: white;">
                            <!-- Les résultats de recherche seront injectés ici -->
                        </div>
                        <div id="selectedClientInfo" class="mt-2" style="display: none; padding: 0.75rem; background: #e8f5ea; border-radius: 8px; border: 1px solid #6fb87d;">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div>
                                    <strong id="selectedClientName"></strong>
                                    <div style="font-size: 0.85rem; color: #6b7280; margin-top: 0.25rem;">
                                        <span id="selectedClientEmail"></span>
                                        <span id="selectedClientPhone" style="margin-left: 1rem;"></span>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm" id="clearClientSelection" style="background: #ef4444; color: white; border: none; padding: 0.25rem 0.75rem; border-radius: 6px; cursor: pointer;">
                                    ✕
                                </button>
                            </div>
                        </div>
                    </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="confirmAddReclamation">Ajouter</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
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);
    modal.querySelector('.confirm-modal-btn-cancel').addEventListener('click', () => modal.remove());
    modal.querySelector('.confirm-modal-btn-confirm').addEventListener('click', () => { modal.remove(); onConfirm(); });
    modal.addEventListener('click', (e) => { if (e.target === modal) modal.remove(); });
}
function confirmDelete(id, name) {
    showConfirmDialog('Supprimer la réclamation', `Êtes-vous sûr de vouloir supprimer la réclamation de "${name}" ?\n\nCette action est irréversible.`, () => deleteItem(id));
}
function deleteItem(id) {
    fetch(`/reclamations/${id}`, { 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 : ' + (data.message || 'Erreur inconnue')); })
    .catch(error => { console.error('Error:', error); alert('Erreur lors de la suppression'); });
}
function filterItems() {
    const searchTerm = document.getElementById('reclamationSearch').value.toLowerCase();
    document.querySelectorAll('tbody tr').forEach(function(row) {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
    });
}
let clientSearchTimeout = null;
let selectedClient = null;

function searchClients(query) {
    if (query.length < 2) {
        document.getElementById('clientSearchResults').style.display = 'none';
        return;
    }
    
    clearTimeout(clientSearchTimeout);
    clientSearchTimeout = setTimeout(() => {
        fetch(`/api/clients/search?q=${encodeURIComponent(query)}`, {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            const resultsDiv = document.getElementById('clientSearchResults');
            if (data.success && data.clients && data.clients.length > 0) {
                resultsDiv.innerHTML = data.clients.map(client => `
                    <div class="client-search-result" onclick="selectClient(${client.id}, '${(client.first_name || '')} ${(client.last_name || '')}', '${client.email || ''}', '${client.phone || ''}')">
                        <div class="client-search-result-name">${(client.first_name || '')} ${(client.last_name || '')}</div>
                        <div class="client-search-result-details">
                            ${client.email || ''} ${client.phone ? '• ' + client.phone : ''}
                        </div>
                    </div>
                `).join('');
                resultsDiv.style.display = 'block';
            } else {
                resultsDiv.innerHTML = '<div style="padding: 0.75rem; text-align: center; color: #6b7280;">Aucun client trouvé</div>';
                resultsDiv.style.display = 'block';
            }
        })
        .catch(error => {
            console.error('Erreur lors de la recherche:', error);
            document.getElementById('clientSearchResults').style.display = 'none';
        });
    }, 300);
}

function selectClient(id, name, email, phone) {
    selectedClient = { id, name: name.trim(), email, phone };
    
    document.getElementById('reclamationProspectId').value = id;
    document.getElementById('selectedClientName').textContent = name;
    document.getElementById('selectedClientEmail').textContent = email;
    document.getElementById('selectedClientPhone').textContent = phone ? '• ' + phone : '';
    document.getElementById('selectedClientInfo').style.display = 'block';
    document.getElementById('clientSearchResults').style.display = 'none';
    document.getElementById('clientSearch').value = '';
    document.getElementById('manualClientInfo').style.display = 'none';
    
    // Pré-remplir les champs manuels (au cas où)
    document.getElementById('reclamationClientName').value = name;
    document.getElementById('reclamationEmail').value = email;
    document.getElementById('reclamationPhone').value = phone;
}

function clearClientSelection() {
    selectedClient = null;
    document.getElementById('reclamationProspectId').value = '';
    document.getElementById('selectedClientInfo').style.display = 'none';
    document.getElementById('clientSearch').value = '';
}

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('reclamationSearch');
    const addBtn = document.getElementById('addReclamationBtn');
    const confirmBtn = document.getElementById('confirmAddReclamation');
    const clientSearchInput = document.getElementById('clientSearch');
    const clearClientBtn = document.getElementById('clearClientSelection');
    
    if (searchInput) searchInput.addEventListener('input', filterItems);
    
    if (addBtn) {
        addBtn.addEventListener('click', () => {
            // Réinitialiser le formulaire
            clearClientSelection();
            document.getElementById('clientSearch').value = '';
            new bootstrap.Modal(document.getElementById('addReclamationModal')).show();
        });
    }
    
    if (clientSearchInput) {
        clientSearchInput.addEventListener('input', function(e) {
            searchClients(e.target.value);
        });
        
        // Fermer les résultats si on clique ailleurs
        document.addEventListener('click', function(e) {
            if (!e.target.closest('#clientSearch') && !e.target.closest('#clientSearchResults')) {
                document.getElementById('clientSearchResults').style.display = 'none';
            }
        });
    }
    
    if (clearClientBtn) {
        clearClientBtn.addEventListener('click', clearClientSelection);
    }
    
    if (confirmBtn) confirmBtn.addEventListener('click', function() {
        const prospectId = document.getElementById('reclamationProspectId').value;
        
        // Validation : un client doit être sélectionné
        if (!prospectId) {
            alert('Veuillez sélectionner un client.');
            return;
        }
        
        confirmBtn.disabled = true;
        confirmBtn.textContent = 'Ajout en cours...';
        
        const formData = new FormData();
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
        formData.append('prospect_id', prospectId);
        formData.append('sujet', 'Nouvelle réclamation');
        formData.append('details', 'Réclamation créée depuis la page réclamations');
        formData.append('claim_type', 'autre');
        formData.append('status', 'nouvelle');
        
        fetch('/reclamations', { 
            method: 'POST', 
            body: formData, 
            headers: { 
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 
                'Accept': 'application/json' 
            } 
        })
        .then(response => response.json())
        .then(data => { 
            if (data.success) { 
                bootstrap.Modal.getInstance(document.getElementById('addReclamationModal')).hide();
                // Rediriger vers la page du client
                window.location.href = `/portefeuille/${prospectId}`;
            } else { 
                alert('Erreur : ' + (data.message || 'Erreur inconnue')); 
                confirmBtn.disabled = false; 
                confirmBtn.textContent = 'Ajouter'; 
            } 
        })
        .catch(error => { 
            console.error('Error:', error); 
            alert('Erreur lors de l\'ajout'); 
            confirmBtn.disabled = false; 
            confirmBtn.textContent = 'Ajouter'; 
        });
    });
});
</script>
@endpush