@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">Commercialisateurs</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">
                    <span class="icon-square-user-round icon icon-54 text-primary"></span>
                </div>
            </div>
            <div class="col-md-8">
                <h1 class="h3 mb-2 text-primary">
                    @if(isset($commercialisateurs) && $commercialisateurs->total() > 0)
                        {{ $commercialisateurs->total() }} commercialisateur{{ $commercialisateurs->total() > 1 ? 's' : '' }}
                    @else
                        Commercialisateurs
                    @endif
                </h1>
                <div class="text-grey text-16">
                    Liste des commercialisateurs de vos applications
                </div>
            </div>
            @if(auth()->user()->canAccessPartnerCommercialNetworksWrite())
            <div class="col-md-3 text-end">
                <a class="btn btn-success text-white" href="{{ route('partner.commercialisateur.create') }}">
                <span class="icon-circle-plus icon icon-18 text-white align-items-center justify-content-center mx-auto me-1"></span> Ajouter
                </a>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="container-fluid container-fluid-bordered">
    <div class="container">
        <!-- Filtres -->
        <form method="GET" action="{{ route('partner.commercialisateurs') }}" id="filterForm" class="row g-3 mb-4">
            <div class="col-md-2">
                <input type="text" name="email" id="email" class="form-control" value="{{ request('email') }}" placeholder="Rechercher par email...">
            </div>
            <div class="col-md-2">
                <select name="network_id" id="network_id" class="form-select">
                    <option value="">Entreprise</option>
                    @foreach($networks ?? [] as $network)
                        <option value="{{ $network->id }}" {{ request('network_id') == $network->id ? 'selected' : '' }}>
                            {{ $network->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="profession_id" id="profession_id" class="form-select">
                    <option value="">Rôle métier</option>
                    @foreach($professions ?? [] as $profession)
                        <option value="{{ $profession->id }}" {{ request('profession_id') == $profession->id ? 'selected' : '' }}>
                            {{ $profession->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="last_connection_filter" id="last_connection_filter" class="form-select">
                    <option value="">Dernière connexion</option>
                    <option value="never" {{ request('last_connection_filter') == 'never' ? 'selected' : '' }}>Jamais connecté</option>
                    <option value="less_than_1_month" {{ request('last_connection_filter') == 'less_than_1_month' ? 'selected' : '' }}>Moins d'1 mois</option>
                    <option value="1_to_3_months" {{ request('last_connection_filter') == '1_to_3_months' ? 'selected' : '' }}>1 à 3 mois</option>
                    <option value="more_than_3_months" {{ request('last_connection_filter') == 'more_than_3_months' ? 'selected' : '' }}>Plus de 3 mois</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="activity_status" id="activity_status" class="form-select">
                    <option value="">Statut</option>
                    <option value="actif" {{ request('activity_status') == 'actif' ? 'selected' : '' }}>Actif</option>
                    <option value="inactif" {{ request('activity_status') == 'inactif' ? 'selected' : '' }}>Inactif</option>
                    <option value="désactivé" {{ request('activity_status') == 'désactivé' ? 'selected' : '' }}>Désactivé</option>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-1">
                @if(request('per_page'))
                    <input type="hidden" name="per_page" value="{{ request('per_page') }}">
                @endif
                @if(request('sort'))
                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                @endif
                @if(request('direction'))
                    <input type="hidden" name="direction" value="{{ request('direction') }}">
                @endif
                <button type="button" class="btn btn-outline-secondary" title="Réinitialiser les filtres" onclick="window.location.href='{{ route('partner.commercialisateurs') }}'">
                    <span class="icon-x icon icon-16 text-black align-items-center justify-content-center mx-auto"></span>
                </button>
            </div>
        </form>

        <div class="d-flex justify-content-between align-items-center mb-2">
            <select class="form-select form-select-sm" id="perPage" style="width: auto;">
                <option value="10" {{ request('per_page', 15) == 10 ? 'selected' : '' }}>10</option>
                <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15</option>
                <option value="25" {{ request('per_page', 15) == 25 ? 'selected' : '' }}>25</option>
                <option value="50" {{ request('per_page', 15) == 50 ? 'selected' : '' }}>50</option>
            </select>
        </div>

        <div class="table-responsive">
            <table class="table-personnalisee table-hover align-middle mb-0" id="commercialisateursTable">
                <thead class="table-light">
                    <tr>
                        <th>
                            @php
                                $sort = request('sort');
                                $direction = request('direction', 'asc');
                                $newDirection = ($sort === 'lastname' && $direction === 'asc') ? 'desc' : 'asc';
                            @endphp
                            <a href="{{ route('partner.commercialisateurs', array_merge(request()->all(), ['sort' => 'lastname', 'direction' => $newDirection])) }}" class="text-decoration-none sort-link">
                                @if($sort === 'lastname')
                                    <i class="fas fa-sort-{{ $direction === 'asc' ? 'up' : 'down' }} me-1"></i>
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                @endif
                                Commercialisateur
                            </a>
                        </th>
                        <th>
                            @php $newDirection = ($sort === 'email' && $direction === 'asc') ? 'desc' : 'asc'; @endphp
                            <a href="{{ route('partner.commercialisateurs', array_merge(request()->all(), ['sort' => 'email', 'direction' => $newDirection])) }}" class="text-decoration-none sort-link">
                                @if($sort === 'email')
                                    <i class="fas fa-sort-{{ $direction === 'asc' ? 'up' : 'down' }} me-1"></i>
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                @endif
                                Email
                            </a>
                        </th>
                        <th>Téléphone</th>
                        <th>Entreprise</th>
                        <th>Rôle métier</th>
                        <th>
                            @php $newDirection = ($sort === 'last_connection_to_the_front_at' && $direction === 'asc') ? 'desc' : 'asc'; @endphp
                            <a href="{{ route('partner.commercialisateurs', array_merge(request()->all(), ['sort' => 'last_connection_to_the_front_at', 'direction' => $newDirection])) }}" class="text-decoration-none sort-link">
                                @if($sort === 'last_connection_to_the_front_at')
                                    <i class="fas fa-sort-{{ $direction === 'asc' ? 'up' : 'down' }} me-1"></i>
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                @endif
                                Dernière connexion
                            </a>
                        </th>
                        <th>
                            @php $newDirection = ($sort === 'is_active' && $direction === 'asc') ? 'desc' : 'asc'; @endphp
                            <a href="{{ route('partner.commercialisateurs', array_merge(request()->all(), ['sort' => 'is_active', 'direction' => $newDirection])) }}" class="text-decoration-none sort-link">
                                @if($sort === 'is_active')
                                    <i class="fas fa-sort-{{ $direction === 'asc' ? 'up' : 'down' }} me-1"></i>
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                                @endif
                                Statut
                            </a>
                        </th>
                        <th class="text-center"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($commercialisateurs as $commercialisateur)
                    <tr class="clickable-row cursor-pointer" data-href="{{ route('partner.commercialisateur.show', $commercialisateur->token) }}">
                        <td>
                            <div class="d-flex align-items-center">
                                <span class="client-avatar me-2">{{ $commercialisateur->initials() }}</span>
                                <span class="text-navigo text-medium text-dark text-16">{{ $commercialisateur->fullName() }}</span>
                            </div>
                        </td>
                        <td>
                            @if($commercialisateur->email)
                                <a href="mailto:{{ $commercialisateur->email }}" class="text-decoration-none text-roboto text-medium text-grey text-14">
                                    {{ $commercialisateur->email }}
                                </a>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($commercialisateur->phones && $commercialisateur->phones->count() > 0)
                                <span class="text-roboto text-medium text-grey text-14">
                                    {{ format_phone_display($commercialisateur->phones->first()->value ?? null) }}
                                </span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($commercialisateur->networks && $commercialisateur->networks->count() > 0)
                                <a href="{{ route('partner.network.show', $commercialisateur->networks->first()->token) }}" class="text-decoration-none text-roboto text-medium text-grey text-14">
                                    {{ $commercialisateur->networks->first()->name }}
                                </a>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($commercialisateur->professions && $commercialisateur->professions->count() > 0)
                                @foreach($commercialisateur->professions as $profession)
                                    <span class="badge">{{ $profession->name ?? '-' }}</span>
                                @endforeach
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($commercialisateur->last_connection_to_the_front_at)
                                <span class="text-roboto text-medium text-grey text-14">
                                    {{ $commercialisateur->last_connection_to_the_front_at->format('d/m/Y à H:i') }}
                                </span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($commercialisateur->activity_status === 'actif')
                                <span class="badge"><i class="fas fa-check me-1"></i>Actif</span>
                            @elseif($commercialisateur->activity_status === 'inactif')
                                <span class="badge"><i class="fas fa-clock me-1"></i>Inactif</span>
                            @else
                                <span class="badge"><i class="fas fa-pause me-1"></i>Désactivé</span>
                            @endif
                        </td>
                        <td class="text-center row-actions">
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('partner.commercialisateur.show', $commercialisateur->token) }}" class="btn btn-sm btn-outline-secondary" title="Voir">
                                    <span class="icon-eye icon icon-16 text-black align-items-center justify-content-center mx-auto"></span>
                                </a>
                                @if(auth()->user()->canAccessPartnerCommercialNetworksWrite())
                                <a href="{{ route('partner.commercialisateur.edit', $commercialisateur->token) }}" class="btn btn-sm btn-outline-secondary" title="Modifier">
                                    <span class="icon-square-pen icon icon-16 text-black align-items-center justify-content-center mx-auto"></span>
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-user-tie fa-3x mb-3"></i>
                                <h5>Aucun commercialisateur trouvé</h5>
                                <p>Les commercialisateurs de vos applications apparaîtront ici.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($commercialisateurs->hasPages())
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted">
                    Affichage de {{ $commercialisateurs->firstItem() }} à {{ $commercialisateurs->lastItem() }} sur {{ $commercialisateurs->total() }} résultats
                </div>
                <nav aria-label="Pagination des commercialisateurs">
                    {{ $commercialisateurs->appends(request()->query())->links('pagination::bootstrap-4') }}
                </nav>
            </div>
        @endif
    </div>
</div>

<form id="perPageForm" method="GET" action="{{ route('partner.commercialisateurs') }}">
    @if(request('network_id'))
        <input type="hidden" name="network_id" value="{{ request('network_id') }}">
    @endif
    @if(request('profession_id'))
        <input type="hidden" name="profession_id" value="{{ request('profession_id') }}">
    @endif
    @if(request('last_connection_filter'))
        <input type="hidden" name="last_connection_filter" value="{{ request('last_connection_filter') }}">
    @endif
    @if(request('activity_status'))
        <input type="hidden" name="activity_status" value="{{ request('activity_status') }}">
    @endif
    @if(request('email'))
        <input type="hidden" name="email" value="{{ request('email') }}">
    @endif
    @if(request('sort'))
        <input type="hidden" name="sort" value="{{ request('sort') }}">
    @endif
    @if(request('direction'))
        <input type="hidden" name="direction" value="{{ request('direction') }}">
    @endif
    <input type="hidden" name="per_page" id="perPageInput" value="{{ request('per_page', 15) }}">
</form>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const perPageSelect = document.getElementById('perPage');
    const perPageForm = document.getElementById('perPageForm');
    const perPageInput = document.getElementById('perPageInput');

    if (perPageSelect && perPageForm && perPageInput) {
        perPageSelect.addEventListener('change', function() {
            perPageInput.value = this.value;
            perPageForm.submit();
        });
    }

    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function (event) {
            if (event.target.closest('.row-actions')) return;
            var href = this.getAttribute('data-href');
            if (href) { window.location.href = href; }
        });
    });

    const filterForm = document.getElementById('filterForm');
    if (filterForm) {
        var searchTimeout;
        var emailInput = document.getElementById('email');
        if (emailInput) {
            emailInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() { filterForm.submit(); }, 500);
            });
        }
        ['network_id', 'profession_id', 'last_connection_filter', 'activity_status'].forEach(function(id) {
            const el = document.getElementById(id);
            if (el) el.addEventListener('change', function() { filterForm.submit(); });
        });
    }
});
</script>
@endpush
@endsection