@extends('layouts.app')

@section('content')
    <div class="pt-md-3 pt-0">

    @include('layouts.notification.errors')
    @include('layouts.notification.success')


   @php
    $isDev = auth()->user()->role == 3;
    $messageTitre = $isDev
        ? 'Vous êtes développeur.'
        : 'Vous êtes administrateur de l\'agence <span class="text-primary">' . (auth()->user()->agence->nom ?? 'Non assignée') . '</span>.';

    $messageDetail = $isDev
        ? 'Affichage de tous les panneaux.'
        : 'Affichage de tous les panneaux de cette agence.';
    @endphp

    @if(auth()->user()->role == 2 || $isDev)
        <div class="col-12 col-md-6 bg-light border-start border-5 border-primary rounded-3 p-3 mb-4 shadow-sm">
            <div class="fw-bold text-dark mb-1">
                <i class="fa-solid fa-shield-halved text-primary me-2"></i>
                {!! $messageTitre !!}
            </div>
            <div class="text-muted">{{ $messageDetail }}</div>
        </div>
    @endif


    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3">
        <h4 class="mb-3 mb-md-0">Liste des panneaux de chantiers numériques pour  <b>{{ auth()->user()->agence ? auth()->user()->agence->nom : 'Agence non affecté' }}</b></h4>
        <a href="{{ route('panneaux.create') }}" class="btn btn-primary">Ajouter un chantier</a>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered align-middle">
            <thead class="table-light">
                <tr class="table-dark">
                    <!-- <th>ID</th> -->
                    <th style="width: 10%;">Code Chantier</th>
                    <th style="width: 20%;">Nom</th>
                    <th style="width: 25%;">Adresse</th>
                    <th style="width: 5%;">Actif</th>
                    <th style="width: 15%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($panneaux as $panneau)
                <tr>
                    <!-- <td>{{ $panneau->id }}</td> -->
                    <td>{{ $panneau->code }}</td>
                    <td>{{ $panneau->nom }}</td>
                    <td>{{ $panneau->adresse }}</td>
                    <td>
                        @if ($panneau->actif)
                            <span class="badge bg-success">Oui</span>
                        @else
                            <span class="badge bg-secondary">Non</span>
                        @endif
                    </td>
                    <td>                        
                        
                        <a href="{{ route('panneaux.edit', $panneau->id) }}" class="btn btn-sm btn-outline-warning mb-1 mb-md-0">
                            <span class="d-none d-md-inline">Modifier</span>
                            <i class="fa-solid fa-pen-to-square d-inline d-md-none"></i>
                        </a>                        

                        <form method="POST" action="{{ route('panneaux.destroy', $panneau->id) }}" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger mb-1 mb-md-0"" onclick="return confirm('Supprimer ce chantier ?')">
                                <!-- Icône visible sur mobile -->
                                <i class="fa-solid fa-trash-can d-inline d-md-none"></i>
                                <!-- Texte visible à partir de md -->
                                <span class="d-none d-md-inline">Supprimer</span>
                            </button>
                        </form>
                        <a href="{{ route('panneaux.pdcn', $panneau->id) }}" class="btn btn-sm btn-outline-secondary" title="Voir la panneau"><i class="fa-solid fa-eye"></i></a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center text-muted">Aucun chantier trouvé.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

@endsection