@extends('layouts.app')

@section('title', 'Liste des envois')

@section('content')
<div class="container-fluid mt-4 px-0">
    <h1 class="mb-3 text-center" style="font-size:1.5rem; font-weight: bold;">Liste des envois</h1>

    @if(session('success'))
        <div class="alert alert-success text-center">{{ session('success') }}</div>
    @endif

    <!-- Bouton pour créer un nouvel envoi -->
    <div class="text-center mb-4">
        <a href="{{ route('envois.create') }}" class="btn btn-primary btn-lg" style="font-size:1rem; padding: 12px 20px;">
            <i class="bi bi-plus-circle"></i> Créer un nouvel envoi
        </a>
    </div>

    <!-- Formulaire de filtre (Date, Statut, Nom du compte) -->
    <div class="mb-4 d-flex justify-content-center">
        <!-- On englobe le formulaire dans un bloc stylisé -->
        <div style="max-width: 1200px; width:100%; background-color: #f8f9fa; border-radius: 10px; 
                    padding: 44px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-left:auto;">
            <form action="{{ route('envois.index') }}" method="GET" class="row g-3 align-items-end justify-content-center mb-0">
                <!-- Filtrer par date -->
                <div class="col-md-3">
                    <label for="date_envoi" class="form-label mb-0 fw-bold">Date d'envoi</label>
                    <input type="date" name="date_envoi" id="date_envoi" 
                           class="form-control"
                           value="{{ $dateEnvoi ?? '' }}">
                </div>

                <!-- Filtrer par statut -->
                <div class="col-md-3">
                    <label for="statut" class="form-label mb-0 fw-bold">Statut</label>
                    <select name="statut" id="statut" class="form-select">
                        <option value="">-- Tous --</option>
                        <option value="EN_ATTENTE" {{ (isset($statut) && $statut === 'EN_ATTENTE') ? 'selected' : '' }}>
                            En attente
                        </option>
                        <option value="ENVOYE" {{ (isset($statut) && $statut === 'ENVOYE') ? 'selected' : '' }}>
                            Envoyé
                        </option>
                    </select>
                </div>

                <!-- Filtrer par nom_compte -->
                <div class="col-md-3">
                    <label for="nom_compte" class="form-label mb-0 fw-bold">Nom du compte</label>
                    <input type="text" name="nom_compte" id="nom_compte" 
                           class="form-control"
                           placeholder="ex: Dupont"
                           value="{{ $nomCompte ?? '' }}">
                </div>

                <!-- Bouton Rechercher -->
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-lg" style="font-size:1rem; padding: 12px 20px;">
                        Rechercher
                    </button>
                </div>
            </form>
        </div>
    </div>

    <style>
        /* Design général du tableau */
        table {
            font-size: 0.9rem;
            width: 100%;
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        /* Style pour l'alternance de couleur des lignes */
        tbody tr:nth-child(odd) {
            background-color: #f9f9f9; /* Gris clair pour les lignes impaires */
        }

        tbody tr:nth-child(even) {
            background-color: #ffffff; /* Blanc pour les lignes paires */
        }

        /* Couleurs de fond pour les cellules ID selon priorite/statut */
        .priority-urgent-cell {
            background-color: #f8d7da; /* Rouge doux */
            color: #721c24;
            font-weight: bold;
        }

        .priority-normal-cell {
            background-color: #d4edda; /* Vert doux */
            color: #155724;
            font-weight: bold;
        }

        .priority-pending-cell {
            background-color: #fff3cd; /* Orange doux */
            color: #856404;
            font-weight: bold;
        }

        /* Centraliser le tableau */
        .table-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .table-wrapper {
            width: 85%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 10px;
        }

        .table-dark th {
            background-color: #343a40;
            color: #ffffff;
            font-weight: bold;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            font-size: 1rem;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #004085;
        }

        /* Petits boutons avec emojis et tooltip */
        .action-btn {
            font-size: 0.75rem;
            position: relative;
        }
        .action-btn:hover::after {
            content: attr(data-title);
            position: absolute;
            white-space: nowrap;
            background: rgba(0,0,0,0.7);
            color: #fff;
            padding: 2px 6px;
            border-radius: 4px;
            top: 1.5rem;
            right: 0;
            font-size: 0.7rem;
        }
        .actions-cell {
            text-align: right !important;
        }
    </style>

    <!-- Table contenant les envois -->
    <div class="table-container">
        <div class="table-wrapper">
            <div class="rounded-table">
                <table class="table table-striped table-sm align-middle mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Date</th>
                            <th>Statut</th>
                            <th>Type</th>
                            <th>Commentaire</th>
                            <th>Qté</th>
                            <th>Type BOX</th>
                            <th>Nom compte</th>
                            <th>Fonction</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Adresse livraison</th>
                            <th>Téléphone</th>
                            <th>Email Laravel</th>
                            <th>MDP Laravel</th>
                            <th>Android ID</th>
                            <th>N° Colis</th>
                            <th class="actions-cell">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($envois as $envoi)
                            @php
                                // Couleur de la cellule ID selon la priorité ou le statut
                                $idClass = '';
                                if($envoi->priorite === 'URGENT') {
                                    $idClass = 'priority-urgent-cell';
                                } elseif($envoi->priorite === 'NORMAL') {
                                    $idClass = 'priority-normal-cell';
                                } elseif($envoi->statut === 'EN_ATTENTE') {
                                    $idClass = 'priority-pending-cell';
                                }
                            @endphp

                            <tr>
                                <td class="{{ $idClass }}">{{ $envoi->id }}</td>
                                <td>{{ $envoi->date_envoi }}</td>
                                <td>
                                    @if($envoi->statut === 'EN_ATTENTE')
                                        <span class="badge bg-warning text-dark">En attente</span>
                                    @elseif($envoi->statut === 'ENVOYE')
                                        <span class="badge bg-success">Envoyé</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $envoi->statut }}</span>
                                    @endif
                                </td>
                                <td>{{ $envoi->type_envoi }}</td>
                                <td>{{ $envoi->commentaire_envoi }}</td>
                                <td>{{ $envoi->quantite }}</td>
                                <td>{{ $envoi->type_box }}</td>
                                <td>{{ $envoi->nom_compte }}</td>
                                <td>{{ $envoi->fonction }}</td>
                                <td>{{ $envoi->nom }}</td>
                                <td>{{ $envoi->prenom }}</td>
                                <td>{{ $envoi->adresse_livraison }}</td>
                                <td>{{ $envoi->telephone }}</td>
                                <td>{{ $envoi->email_laravel }}</td>
                                <td>{{ $envoi->mdp_laravel }}</td>
                                <td>{{ $envoi->android_id }}</td>
                                <td>{{ $envoi->numero_colis }}</td>
                                <td class="actions-cell">
                                    <div class="d-flex justify-content-end gap-1">
                                        <a href="{{ route('envois.show', $envoi->id) }}"
                                           class="btn btn-sm btn-info action-btn"
                                           data-title="Voir (👁️)">
                                           👁️
                                        </a>
                                        <a href="{{ route('envois.edit', $envoi->id) }}"
                                           class="btn btn-sm btn-secondary action-btn"
                                           data-title="Éditer (✏️)">
                                           ✏️
                                        </a>
                                        <form action="{{ route('envois.destroy', $envoi->id) }}"
                                              method="POST"
                                              style="margin:0;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="btn btn-sm btn-danger action-btn"
                                                    data-title="Supprimer (🗑️)"
                                                    onclick="return confirm('Voulez-vous vraiment supprimer cet envoi ?')">
                                                🗑️
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div><!-- /.rounded-table -->
        </div><!-- /.table-wrapper -->
    </div><!-- /.table-container -->
</div>
@endsection