@extends('layouts.base')

@section('content')
@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ $homeUrl }}">Accueil</a></li>
            <li class="breadcrumb-item active" aria-current="page">Mes clients</li>
        </ol>
    </nav>
@endsection

<div class="container-fluid py-4">
    <div class="container">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h3 mb-1 text-primary">
                            <i class="fas fa-user-friends me-2"></i>Mes clients - {{ $application->name }}
                        </h1>
                        <p class="text-muted mb-0">Liste de vos clients pour cette application</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filtres -->
        <form method="GET" action="{{ route('account.clients.list') }}" id="filterForm" class="row g-3 mb-4">
            <input type="hidden" name="application" value="{{ $application->id }}">
            <div class="col-md-5">
                <label for="search_name" class="form-label">Nom ou prénom</label>
                <input type="text" name="search_name" id="search_name" class="form-control" value="{{ request('search_name') }}" placeholder="Rechercher par nom ou prénom...">
            </div>
            <div class="col-md-5">
                <label for="user_id" class="form-label">Commercialisateur associé</label>
                <select name="user_id" id="user_id" class="form-select">
                    <option value="">Tous les commercialisateurs</option>
                    @if(isset($users))
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->firstname }} {{ $user->lastname }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <a href="{{ route('account.clients.list', array_merge(request()->all(), ['export' => 'csv'])) }}" class="btn btn-success w-100" id="exportBtn">
                    <img src="{{ asset('images/pictos/download.svg') }}" alt="Exporter"> Exporter
                </a>
            </div>
        </form>

        <div id="clients-list-container">
            @include('account.clients.list-content', [
                'clients' => $clients ?? null,
                'application' => $application ?? null,
                'sortBy' => $sortBy ?? null,
                'sortDir' => $sortDir ?? null
            ])
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const filterForm = document.getElementById('filterForm');
        const clientsListContainer = document.getElementById('clients-list-container');
        const searchNameInput = document.getElementById('search_name');
        const userIdSelect = document.getElementById('user_id');
        let searchTimeout;
        let isLoading = false;

        // Fonction pour charger les résultats via AJAX
        function loadClients() {
            if (isLoading) return;
            
            isLoading = true;
            const formData = new FormData(filterForm);
            const params = new URLSearchParams(formData);
            
            fetch('{{ route('account.clients.list') }}?' + params.toString(), {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'text/html'
                }
            })
            .then(response => response.text())
            .then(html => {
                clientsListContainer.innerHTML = html;
                isLoading = false;
                initClientRowEvents();
                initSortAndPaginationEvents();
            })
            .catch(error => {
                console.error('Erreur lors du chargement des clients:', error);
                isLoading = false;
            });
        }

        // Fonction pour charger depuis une URL (pour tri et pagination)
        function loadClientsFromUrl(url) {
            if (isLoading) return;
            
            isLoading = true;
            fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'text/html'
                }
            })
            .then(response => response.text())
            .then(html => {
                clientsListContainer.innerHTML = html;
                isLoading = false;
                initClientRowEvents();
                initSortAndPaginationEvents();
            })
            .catch(error => {
                console.error('Erreur lors du chargement des clients:', error);
                isLoading = false;
            });
        }

        // Initialiser les événements de clic sur les lignes
        function initClientRowEvents() {
            document.querySelectorAll('tr.client-row[data-href]').forEach(function (row) {
                row.addEventListener('click', function (event) {
                    if (event.target.closest('a, button')) {
                        return;
                    }
                    const href = this.getAttribute('data-href');
                    if (href) {
                        window.location.href = href;
                    }
                });
            });
        }

        // Initialiser les événements de tri et pagination
        function initSortAndPaginationEvents() {
            document.querySelectorAll('.sort-link, .pagination a').forEach(function (link) {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    const url = this.getAttribute('href');
                    if (url) {
                        loadClientsFromUrl(url);
                    }
                });
            });
        }

        // Mettre à jour l'URL du bouton d'export
        function updateExportButton() {
            const exportBtn = document.getElementById('exportBtn');
            if (exportBtn) {
                const formData = new FormData(filterForm);
                const params = new URLSearchParams(formData);
                params.set('export', 'csv');
                exportBtn.href = '{{ route('account.clients.list') }}?' + params.toString();
            }
        }

        // Écouter les changements sur le champ de recherche
        if (searchNameInput) {
            searchNameInput.addEventListener('input', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    loadClients();
                    updateExportButton();
                }, 500);
            });
        }

        // Écouter les changements sur le select commercialisateur
        if (userIdSelect) {
            userIdSelect.addEventListener('change', function () {
                loadClients();
                updateExportButton();
            });
        }

        // Initialiser les événements au chargement
        initClientRowEvents();
        initSortAndPaginationEvents();
        updateExportButton();
    });
</script>
@endpush

@endsection