@extends('layouts.app')

@section('title', 'Détail du retour')

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

        /* Table de détails */
        .details-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .details-table th, .details-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .details-table th {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        .details-table td {
            background-color: #f8f9fa;
        }

        /* Table des matériels défectueux */
        .defective-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .defective-table th, .defective-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .defective-table th {
            background-color: #dc3545;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        .defective-table td {
            background-color: #ffecec;
        }

        /* Boutons */
        .btn-primary, .btn-secondary {
            font-size: 1rem;
            padding: 10px 20px;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            text-decoration: none;
        }
        .btn-primary {
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: #fff;
            border: none;
        }
        .btn-primary:hover {
            background: linear-gradient(90deg, #0056b3, #007bff);
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }
        .btn-secondary {
            background: linear-gradient(90deg, #6c757d, #5a6268);
            color: #fff;
            border: none;
        }
        .btn-secondary:hover {
            background: linear-gradient(90deg, #5a6268, #6c757d);
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }

        /* Badge Statut */
        .badge-warning {
            background-color: #ffc107;
            color: #000;
            padding: 5px 10px;
            border-radius: 4px;
        }
        .badge-success {
            background-color: #28a745;
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
        }
        .badge-secondary {
            background-color: #6c757d;
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
        }
    </style>

    {{-- Titre --}}
    <h1>Détail du retour #{{ $retour->id }}</h1>

    {{-- Tableau des détails --}}
    <div class="table-responsive">
        <table class="details-table">
            <thead>
                <tr>
                    <th colspan="2">Informations du retour</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>ID</strong></td>
                    <td>#{{ $retour->id }}</td>
                </tr>
                <tr>
                    <td><strong>Date de retour</strong></td>
                    <td>{{ $retour->date_retour }}</td>
                </tr>
                <tr>
                    <td><strong>Type de retour</strong></td>
                    <td>{{ $retour->type_retour }}</td>
                </tr>
                <tr>
                    <td><strong>Type de BOX</strong></td>
                    <td>{{ $retour->type_box ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td><strong>Nombre de tablettes retournées</strong></td>
                    <td>{{ $retour->nombre_tablettes_retournees ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td><strong>Nom du compte</strong></td>
                    <td>{{ $retour->nom_compte }}</td>
                </tr>
                <tr>
                    <td><strong>Adresse de facturation</strong></td>
                    <td>{{ $retour->adresse_facturation ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td><strong>Commentaire</strong></td>
                    <td>{{ $retour->commentaire ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td><strong>Statut</strong></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>
                </tr>
            </tbody>
        </table>
    </div>

    {{-- Section des matériels défectueux --}}
    <div class="table-responsive">
        <table class="defective-table">
            <thead>
                <tr>
                    <th colspan="2">Matériels défectueux</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $defItems = json_decode($retour->defectueux_items, true);
                @endphp
                @if(is_array($defItems) && count($defItems) > 0)
                    @foreach($defItems as $item)
                        <tr>
                            <td><strong>{{ $item['type'] ?? 'Type inconnu' }}</strong></td>
                            <td>
                                @if(isset($item['quantite']) && $item['quantite'] > 1)
                                    {{ $item['quantite'] }} pcs
                                @else
                                    1 pc
                                @endif
                            </td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="2">Aucun matériel défectueux noté.</td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>

    {{-- Boutons --}}
    <div class="text-center">
        <a href="{{ route('retours.index') }}" class="btn btn-secondary">Retour à la liste</a>
        <a href="{{ route('retours.edit', $retour->id) }}" class="btn btn-primary">✏️ Éditer</a>
    </div>
</div>
@endsection