@extends('layouts.app')

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

@section('content')
<div class="container-fluid mt-4 px-0">
    {{-- Style CSS intégré --}}
    <style>
        h1 {
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            color: #0056b3;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .table {
            width: 100%;
            font-size: 0.9rem;
            border-collapse: collapse;
        }

        .table th, .table td {
            padding: 12px;
            text-align: center;
            border: 1px solid #ddd;
        }

        .table th {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: #f8f9fa;
        }

        .table-striped tbody tr:nth-of-type(even) {
            background-color: #e9ecef;
        }

        .id-column {
            color: #007bff;
            font-weight: bold;
        }

        .badge-warning {
            background-color: #ffc107;
            color: #000;
        }

        .badge-success {
            background-color: #28a745;
            color: #fff;
        }

        .badge-secondary {
            background-color: #6c757d;
            color: #fff;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #fff;
            width: 35px;
            height: 35px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

        .btn-info {
            background-color: #17a2b8;
        }

        .btn-secondary {
            background-color: #6c757d;
        }

        .btn-danger {
            background-color: #dc3545;
        }

        .table-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .table-responsive {
            max-width: 1200px;
            width: 100%;
        }

        .btn-nouveau-retour {
            font-size: 1rem;
            padding: 10px 20px;
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: #fff;
            border: none;
            border-radius: 50px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .btn-nouveau-retour:hover {
            transform: scale(1.05);
        }

        .btn-nouveau-retour i {
            margin-right: 8px;
        }
    </style>

    {{-- Titre --}}
    <h1>Liste des retours</h1>

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

    {{-- Bouton Nouveau Retour --}}
    <div class="text-center mb-4">
        <a href="{{ route('retours.create') }}" class="btn-nouveau-retour">
            <i class="bi bi-plus-circle"></i> Nouveau retour
        </a>
    </div>

    {{-- Tableau des retours --}}
    <div class="table-container">
        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date de retour</th>
                        <th>Statut</th>
                        <th>Type</th>
                        <th>Nom compte</th>
                        <th>Type BOX</th>
                        <th>Quantité tablettes retournées</th>
                        <th>Adresse de facturation</th>
                        <th>Commentaire</th>
                        <th>Matériel Défectueux</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($retours as $retour)
                        <tr>
                            <td class="id-column">{{ $retour->id }}</td>
                            <td>{{ $retour->date_retour }}</td>
                            <td>
                                @if($retour->statut === 'EN_ATTENTE_RECEPTION')
                                    <span class="badge badge-warning">En attente de réception</span>
                                @elseif($retour->statut === 'RECU')
                                    <span class="badge badge-success">Reçu</span>
                                @else
                                    <span class="badge badge-secondary">{{ $retour->statut }}</span>
                                @endif
                            </td>
                            <td>{{ $retour->type_retour }}</td>
                            <td>{{ $retour->nom_compte }}</td>
                            <td>{{ $retour->type_box ?? 'N/A' }}</td>
                            <td>{{ $retour->nombre_tablettes_retournees ?? 'N/A' }}</td>
                            <td>{{ $retour->adresse_facturation ?? 'N/A' }}</td>
                            <td>{{ $retour->commentaire ?? 'N/A' }}</td>
                            <td>
                                @php
                                    // Si le champ defectueux_items contient du JSON, on le décode et on affiche les items.
                                    $defItems = json_decode($retour->defectueux_items, true);
                                @endphp
                                @if(is_array($defItems) && count($defItems) > 0)
                                    <ul class="list-unstyled mb-0">
                                        @foreach($defItems as $item)
                                            <li>
                                                <strong>{{ $item['type'] ?? 'Type inconnu' }}</strong>
                                                (@if(isset($item['quantite']) && $item['quantite'] > 1)
                                                    {{ $item['quantite'] }} pcs
                                                @else
                                                    1 pc
                                                @endif)
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                <div class="d-flex justify-content-center gap-2">
                                    <a href="{{ route('retours.show', $retour->id) }}" class="btn btn-info action-btn" title="Voir">👁️</a>
                                    <a href="{{ route('retours.edit', $retour->id) }}" class="btn btn-secondary action-btn" title="Éditer">✏️</a>
                                    <form action="{{ route('retours.destroy', $retour->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger action-btn" title="Supprimer" onclick="return confirm('Voulez-vous vraiment supprimer ce retour ?')">🗑️</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection