@extends('layouts.app')

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

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


   @php
    $user = auth()->user();
    $isDev = $user->role == 3;
    $isAdmin = $user->role == 2;
    $isReadOnly = $user->role == 1;
    $messageTitre = $isDev
        ? 'Vous etes developpeur.'
        : ($isAdmin
            ? 'Vous etes administrateur de l\'agence <span class="text-primary">' . ($user->agence->nom ?? 'Non assignee') . '</span>.'
            : 'Vous consultez tous les chantiers de l\'agence <span class="text-primary">' . ($user->agence->nom ?? 'Non assignee') . '</span>.');

    $messageDetail = $isDev
        ? 'Affichage de tous les panneaux.'
        : ($isAdmin
            ? 'Affichage de tous les panneaux de cette agence.'
            : 'Vous pouvez creer et modifier vos panneaux, et consulter ceux des autres users en lecture seule.');

    //AAAA-MM-DD
    $maintenanceStartDate = '2026-04-27 00:00:00';
    $maintenanceEndDate = '2026-05-04 23:59:59';
    $shouldShowMaintenanceMessage = now()->between(
        \Carbon\Carbon::parse($maintenanceStartDate),
        \Carbon\Carbon::parse($maintenanceEndDate)
    );

    @endphp

    @if($isAdmin || $isDev || $isReadOnly)
        <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

    <!-- BLOC MAJ -->
     @if($shouldShowMaintenanceMessage)
    <div class="col-12 col-md-8 bg-warning-subtle border-start border-end border-5 border-warning rounded-3 p-3 mb-4 shadow-sm">
        <div class="fw-bold text-dark mb-1">            
            <i class="fa-solid fa-triangle-exclamation text-primary me-2"></i>
            Une mise à jour est en cours de déploiement. Certains dysfonctionnements temporaires peuvent être rencontrés.
        </div>

          <div class="mt-3 text-dark">
            <div class="mb-2">
                📩 En cas d'anomalie : 
                <a href="mailto:francois.barberi@groupe-gb.fr">francois.barberi@groupe-gb.fr</a>
            </div>

            <div class="fw-semibold mb-1">Évolutions :</div>
            <ul class="mb-0">
                <li>Un utilisateur ne peut plus modifier les chantiers d'un autre utilisateur. Vous pourrez toutefois les consulter.</li>
                <li>Un administrateur d'agence peut gérer l'ensemble des chantiers</li>
                <li>Toute suppression doit passer par une demande au support informatique</li>
            </ul>
        </div>
    </div>
    @endif
    <!-- FIN BLOC MAJ -->


    <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>
                @if($isDev)
                    Toutes les agences (Dev)
                @else
                    {{ $user->agence ? $user->agence->nom : 'Agence non affectee' }}
                @endif
            </b>
        </h4>
        
        @if($user->canCreatePanneau())
            <a href="{{ route('panneaux.create') }}" class="btn btn-primary">Ajouter un chantier</a>
        @else
            <button class="btn btn-primary" disabled title="Vous devez etre associe a une agence pour creer un panneau">
                Ajouter un chantier
            </button>
        @endif
    </div>

    <div class="table-responsive">
        <table class="table table-bordered align-middle {{ $isDev ? 'fz-15' : '' }}" id="dashboard-panneaux-table">
            <thead class="table-light">
                <tr class="table-dark">
                    <!-- <th>ID</th> -->
                    <th style="width: 8%;" data-sort-type="number">Code Chantier</th>
                    <th style="width: 17%;" data-sort-type="text">Nom</th>
                    <th style="width: 20%;" data-sort-type="text">Adresse</th>
                    @if($isDev)
                        <th style="width: 6%;" data-sort-type="text">Agence</th>
                        <th style="width: 8%;" data-sort-type="date">Cree le</th>
                        <th style="width: 8%;" data-sort-type="date">Modifie le</th>
                    @endif
                    <th style="width: 4%;" data-sort-type="boolean">Actif</th>
                    <th style="width: 10%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($panneaux as $panneau)
                <tr>
                    <!-- <td>{{ $panneau->id }}</td> -->
                    <td class="{{ $isDev ? 'small' : '' }}" data-sort-value="{{ (int) $panneau->code }}">{{ $panneau->code }}</td>
                    <td class="{{ $isDev ? 'small' : '' }}" data-sort-value="{{ strtolower($panneau->nom ?? '') }}">{{ $panneau->nom }}</td>
                    <td class="{{ $isDev ? 'small' : '' }}" data-sort-value="{{ strtolower($panneau->adresse ?? '') }}">{{ $panneau->adresse }}</td>
                    @if($isDev)
                        <td class="small" data-sort-value="{{ strtolower($panneau->agence->nom ?? 'N.C') }}">
                            <span class="">
                                {{ $panneau->agence ? $panneau->agence->nom : 'N.C' }}
                            </span>
                        </td>
                        <td class="small text-nowrap" data-sort-value="{{ optional($panneau->created_at)->timestamp ?? 0 }}">
                            {{ optional($panneau->created_at)->format('d/m/Y') ?? 'N.C' }}<br>
                            {{ optional($panneau->created_at)->format('H:i') ?? '' }}
                        </td>
                        <td class="small text-nowrap" data-sort-value="{{ optional($panneau->updated_at)->timestamp ?? 0 }}">
                            {{ optional($panneau->updated_at)->format('d/m/Y') ?? 'N.C' }}<br>
                            {{ optional($panneau->updated_at)->format('H:i') ?? '' }}
                        </td>
                    @endif
                    <td class="text-center {{ $isDev ? 'small' : '' }}" data-sort-value="{{ $panneau->actif ? 1 : 0 }}">
                        @if ($panneau->actif)
                            <span class="badge bg-success">Oui</span>
                        @else
                            <span class="badge bg-secondary">Non</span>
                        @endif
                    </td>
                    <td class="text-nowrap {{ $isDev ? 'small' : '' }}">                        
                        
                        @if($user->canEditPanneau($panneau))
                        <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>
                        @elseif($user->canViewPanneau($panneau))
                        <a href="{{ route('panneaux.edit', $panneau->id) }}" class="btn btn-sm btn-outline-secondary mb-1 mb-md-0">
                            <span class="d-none d-md-inline">Consulter</span>
                            <i class="fa-solid fa-clipboard-list d-inline d-md-none"></i>
                        </a>
                        @endif

                        @if($user->canDeletePanneau($panneau) || $isAdmin)
                        <form method="POST" action="{{ route('panneaux.destroy', $panneau->id) }}" class="d-inline">
                        @csrf
                        @method('DELETE')
        
                        @if(!$isDev)
                            <button type="button" class="btn btn-sm btn-outline-danger mb-1 mb-md-0"
                                    onclick="alert('Merci de contacter le support informatique (support.it@groupe-gb.fr) pour effectuer une suppression'); return false;">
                                <i class="fa-solid fa-trash-can d-inline d-md-none"></i>
                                <span class="d-none d-md-inline">Supprimer</span>
                            </button>
                        @else
                            <button type="submit" class="btn btn-sm btn-outline-danger mb-1 mb-md-0"
                                    onclick="return confirm('ATTENTION !!! Risque de perte du QR CODE !!! Supprimer ce chantier ?') 
                                            && confirm('Confirmez-vous définitivement la suppression ?')">
                                <i class="fa-solid fa-trash-can d-inline d-md-none"></i>
                                <span class="d-none d-md-inline">Supprimer</span>
                            </button>
                        @endif
                        </form>
                        @endif

                        <a href="{{ route('panneaux.pdcn', $panneau->id) }}" class="btn btn-sm btn-outline-secondary" title="Voir le panneau"><i class="fa-solid fa-eye"></i></a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="{{ $isDev ? '8' : '5' }}" class="text-center text-muted">Aucun chantier trouvé.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($isDev)
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const table = document.getElementById('dashboard-panneaux-table');

            if (!table) {
                return;
            }

            const headers = Array.from(table.querySelectorAll('thead th'));
            const tbody = table.querySelector('tbody');
            let currentSort = { index: null, direction: 'asc' };

            headers.forEach((header, index) => {
                if (!header.dataset.sortType) {
                    return;
                }

                header.style.cursor = 'pointer';
                header.dataset.sortDirection = 'none';
                header.innerHTML = `<span class="d-inline-flex align-items-center gap-1">${header.textContent.trim()} <small class="sort-indicator">↕</small></span>`;

                header.addEventListener('click', function () {
                    const rows = Array.from(tbody.querySelectorAll('tr'))
                        .filter((row) => row.querySelectorAll('td').length === headers.length);

                    const sortType = header.dataset.sortType;
                    const nextDirection = currentSort.index === index && currentSort.direction === 'asc' ? 'desc' : 'asc';

                    headers.forEach((th) => {
                        if (th.dataset.sortType) {
                            th.dataset.sortDirection = 'none';
                            const indicator = th.querySelector('.sort-indicator');
                            if (indicator) {
                                indicator.textContent = '↕';
                            }
                        }
                    });

                    rows.sort((rowA, rowB) => {
                        const cellA = rowA.children[index];
                        const cellB = rowB.children[index];
                        const valueA = cellA.dataset.sortValue ?? cellA.textContent.trim();
                        const valueB = cellB.dataset.sortValue ?? cellB.textContent.trim();
                        let comparison = 0;

                        if (sortType === 'number' || sortType === 'date' || sortType === 'boolean') {
                            comparison = Number(valueA) - Number(valueB);
                        } else {
                            comparison = valueA.localeCompare(valueB, 'fr', { sensitivity: 'base' });
                        }

                        return nextDirection === 'asc' ? comparison : -comparison;
                    });

                    rows.forEach((row) => tbody.appendChild(row));

                    header.dataset.sortDirection = nextDirection;
                    const indicator = header.querySelector('.sort-indicator');
                    if (indicator) {
                        indicator.textContent = nextDirection === 'asc' ? '↑' : '↓';
                    }

                    currentSort = { index, direction: nextDirection };
                });
            });
        });
    </script>
    @endif

@endsection