@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"><a href="{{ route('partner.applications') }}">{{ $application->name }}</a></li> -->
            <li class="breadcrumb-item active" aria-current="page">Mes clients</li>
        </ol>
    </nav>
@endsection

<div class="container-fluid pt-0 pb-4">
    <div class="container">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-md-1">
                <div class="big-icon-badge d-flex align-items-center justify-content-center mx-auto mb-3">
                    <span class="icon-id-card icon icon-54 text-primary"></span>
                </div>
            </div>
            <div class="col-md-9">
                <h1 class="h3 mb-2 text-primary">
                    @if(isset($totalClients))
                        {{ $totalClients }}
                    @endif clients
                    <!-- @if(isset($allApplications) && $allApplications->count() === 1)
                        - {{ $application->name }}
                    @endif -->
                </h1>
                <div class="text-grey text-16">
                    Retrouvez l'ensemble des informations de vos clients et suivez leur dossier
                </div>
            </div>
            <div class="col-md-2 text-end">
                @if(isset($allApplications) && $allApplications->count() === 1 && auth()->user()->canAccessPartnerClientsWrite())
                    <button type="button" id="openClientCreateModal" class="btn btn-success text-white" data-bs-toggle="modal" data-bs-target="#clientCreateModal">
                        <span class="icon-circle-plus icon icon-18 text-white align-items-center justify-content-center mx-auto me-1"></span> Ajouter
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="container-fluid container-fluid-bordered">
    <div class="container">
        <!-- Filtres -->
        <form method="GET" action="{{ route('partner.clients', request()->except('application_id')) }}" id="filterForm" class="row g-3 mb-4">
            <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="">Commercialisateur</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('partner.clients', array_merge(request()->except('application_id', 'export'), ['export' => 'csv'])) }}" class="btn btn-primary w-100" id="exportBtn">
                    <span class="icon-download icon icon-16 text-dark align-items-center justify-content-center mx-auto"></span> Exporter
                </a>
            </div>
        </form>

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

@if(isset($allApplications) && $allApplications->count() === 1 && auth()->user()->canAccessPartnerClientsWrite())
    @php
        /** @var \App\Models\Client|null $client */
        $clientForModal = isset($client) && $client?->exists === false
            ? $client
            : new \App\Models\Client(['application_id' => $application->id]);
    @endphp

    <div class="modal fade" id="clientCreateModal" tabindex="-1" aria-labelledby="clientCreateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="clientCreateModalLabel">
                        <i class="fas fa-user-plus me-2"></i>Créer un client
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div id="client-form-errors" class="alert alert-danger d-none small mb-3"></div>
                    @include('partner.clients._form', [
                        'client' => $clientForModal,
                        'application' => $application,
                        'users' => $users ?? collect(),
                        'countries' => $countries ?? collect(),
                        'cancelUrl' => null,
                        'submitLabel' => 'Créer le client',
                        'isModal' => true,
                    ])
                </div>
            </div>
        </div>
    </div>
@endif

@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');
        const clientCreateModalElement = document.getElementById('clientCreateModal');
        const clientFormErrors = document.getElementById('client-form-errors');
        let clientsBaseUrl = "{{ route('partner.clients') }}";
        if (clientsBaseUrl.startsWith('http:') && window.location.protocol === 'https:') {
            clientsBaseUrl = clientsBaseUrl.replace('http:', 'https:');
        }
        let searchTimeout;
        let isLoading = false;

        function ensureHttpsUrl(url) {
            if (url && url.startsWith('http:') && window.location.protocol === 'https:') {
                return url.replace('http:', 'https:');
            }
            return url;
        }

        // 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);
            const url = ensureHttpsUrl(clientsBaseUrl + '?' + params.toString());
            
            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;
            });
        }

        // Fonction pour charger depuis une URL (pour tri et pagination)
        function loadClientsFromUrl(url) {
            if (isLoading) return;
            url = ensureHttpsUrl(url);

            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 = clientsBaseUrl + '?' + 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();
        initClientCreateForm();
    });

    function initClientCreateForm() {
        const modalElement = document.getElementById('clientCreateModal');
        if (!modalElement) {
            return;
        }

        const form = modalElement.querySelector('form');
        if (!form) {
            return;
        }

        const errorContainer = document.getElementById('client-form-errors');

        function resetClientFormErrors() {
            if (!errorContainer) {
                return;
            }
            errorContainer.classList.add('d-none');
            errorContainer.innerHTML = '';
        }

        modalElement.addEventListener('shown.bs.modal', function () {
            resetClientFormErrors();
            form.reset();
        });

        form.addEventListener('submit', function (event) {
            event.preventDefault();
            resetClientFormErrors();

            const submitButton = form.querySelector('button[type="submit"]');
            if (submitButton) {
                submitButton.disabled = true;
            }

            const formData = new FormData(form);
            const csrfTokenInput = form.querySelector('input[name="_token"]');

            const fetchOptions = {
                method: form.method || 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData
            };

            if (csrfTokenInput) {
                fetchOptions.headers['X-CSRF-TOKEN'] = csrfTokenInput.value;
            }

            fetch(form.action, fetchOptions)
            .then(async (response) => {
                if (response.status === 422) {
                    const data = await response.json().catch(() => null);
                    if (data && data.errors && errorContainer) {
                        const messages = Object.values(data.errors).flat();
                        if (messages.length) {
                            errorContainer.innerHTML = messages.map((m) => `<div>${m}</div>`).join('');
                            errorContainer.classList.remove('d-none');
                        }
                    }
                    throw new Error('Validation error');
                }

                if (!response.ok) {
                    throw new Error('Erreur lors de la création du client');
                }

                if (window.bootstrap && modalElement) {
                    const modalInstance = bootstrap.Modal.getInstance(modalElement);
                    if (modalInstance) {
                        modalInstance.hide();
                    }
                }

                form.reset();

                if (typeof loadClients === 'function') {
                    // @ts-ignore
                    loadClients();
                } else {
                    window.location.reload();
                }
            })
            .catch((error) => {
                console.error(error);
                if (errorContainer && error.message !== 'Validation error') {
                    errorContainer.innerHTML = '<div>Une erreur est survenue lors de la création du client.</div>';
                    errorContainer.classList.remove('d-none');
                }
            })
            .finally(() => {
                if (submitButton) {
                    submitButton.disabled = false;
                }
            });
        });
    }
</script>
@endpush

@endsection