@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">Entreprises</li>
        </ol>
    </nav>
@endsection

<div class="container-fluid py-0">
    <div class="container">
        <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-building icon icon-54 text-primary"></span>
                </div>
            </div>
            <div class="col-md-8">
                <h1 class="h3 mb-2 text-primary">
                    @if(isset($networks) && $networks->total() > 0)
                        {{ $networks->total() }} entreprise{{ $networks->total() > 1 ? 's' : '' }}
                    @else
                        Entreprises
                    @endif
                </h1>
                <div class="text-grey text-16">
                    Liste des réseaux et entreprises de votre compagnie
                </div>
            </div>
            @if(auth()->user()->canAccessPartnerCommercialNetworksWrite())
            <div class="col-md-3 text-end">
                <a href="{{ route('partner.network.create') }}" class="btn btn-success text-white">
                    <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">
        <div class="table-responsive">
            <table class="table-personnalisee table-hover" id="table_networks">
                <thead class="table-light">
                    <tr>
                        <th>Entreprise</th>
                        <th class="text-center">Commercialisateurs</th>
                        <th class="text-center">Date de création</th>
                        <th class="text-center"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($networks as $network)
                        <tr class="cursor-pointer network-row" data-href="{{ route('partner.network.show', $network->token) }}">
                            <td>
                                <div class="d-flex align-items-center">
                                    @php
                                        $initials = $network->name ? strtoupper(substr($network->name, 0, 2)) : '';
                                    @endphp
                                    @if($initials)
                                        <span class="client-avatar me-2">{{ $initials }}</span>
                                    @endif
                                    <a href="{{ route('partner.network.show', $network->token) }}" class="text-decoration-none text-navigo" onclick="event.stopPropagation();">
                                        {{ $network->name }}
                                    </a>
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="badge">{{ $network->users->count() }}</span>
                            </td>
                            <td class="text-center text-grey text-14">
                                {{ $network->created_at->format('d/m/Y') }}
                            </td>
                            <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center flex-nowrap">
                                    <a href="{{ route('partner.network.show', $network->token) }}" class="btn btn-action btn-outline-secondary" title="Voir" onclick="event.stopPropagation();">
                                        <span class="icon-eye icon icon-16 align-items-center justify-content-center mx-auto"></span>
                                    </a>
                                    @if(auth()->user()->canAccessPartnerCommercialNetworksWrite())
                                    <a href="{{ route('partner.network.edit', $network->token) }}" class="btn btn-action btn-outline-secondary" title="Modifier" onclick="event.stopPropagation();">
                                        <span class="icon-edit icon icon-16 align-items-center justify-content-center mx-auto"></span>
                                    </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5">
                                <p class="text-muted mb-0">Aucune entreprise trouvée</p>
                                <p class="text-muted text-14">Les réseaux et entreprises de votre compagnie apparaîtront ici.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('tr.network-row[data-href]').forEach(function(row) {
        row.addEventListener('click', function(event) {
            if (event.target.closest('a, button, form')) {
                return;
            }
            const href = this.getAttribute('data-href');
            if (href) {
                window.location.href = href;
            }
        });
    });
});
</script>
@endpush
@endsection