@extends('layouts.app')

@section('title', 'Modifier le retour')

@section('content')
<div class="container mt-4">
    <style>
        /* --- Styles généraux identiques à create.blade.php --- */
        h1 {
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            color: #0056b3;
            text-transform: uppercase;
            margin-bottom: 20px;
        }
        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .form-table th,
        .form-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .form-table th {
            background-color: #007bff;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        .form-table td input,
        .form-table td select,
        .form-table td textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            font-size: 0.9rem;
        }
        .btn-primary {
            font-size: 1rem;
            padding: 10px 20px;
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: #fff;
            border: none;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            display: block;
            margin: 20px auto;
            text-align: center;
        }
        .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,
        .btn-danger {
            margin-top: 5px;
        }
        .table-container {
            display: flex;
            justify-content: center;
        }
        .table-responsive {
            max-width: 800px;
            width: 100%;
        }
        .d-none {
            display: none;
        }
        
        /* --- Nouveau style pour le formulaire de matériel défectueux --- */
        .defectueux-container {
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
            border: 2px solid #007bff;
            border-radius: 10px;
            background: #f9f9f9;
        }
        .defectueux-container h2 {
            font-size: 1.8rem;
            color: #007bff;
            text-align: center;
            margin-bottom: 20px;
        }
        .defectueux-table {
            width: 100%;
            border-collapse: collapse;
        }
        .defectueux-table th,
        .defectueux-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;
        }
        .defectueux-table th {
            background-color: #0056b3;
            color: #fff;
        }
        .btn-add {
            display: block;
            width: 200px;
            margin: 20px auto;
            font-size: 1.1rem;
            padding: 10px 0;
            background: linear-gradient(90deg, #28a745, #218838);
            color: #fff;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .btn-add:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }
    </style>

    <h1>Modifier le retour #{{ $retour->id }}</h1>

    {{-- Affichage des erreurs --}}
    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Récupération des items défectueux --}}
    @php
        if(old('defectueux_items')) {
            // En cas d'erreur de validation, on utilise old(...)
            $defectueuxItems = old('defectueux_items');
        } else {
            // Sinon, on décode le JSON stocké en base de données
            $defectueuxItems = json_decode($retour->defectueux_items, true) ?? [];
        }
    @endphp

    <form action="{{ route('retours.update', $retour->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="table-container">
            <div class="table-responsive">
                <table class="form-table">
                    <thead>
                        <tr>
                            <th colspan="2">Modifier les informations du retour</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><label for="date_retour">Date de retour</label></td>
                            <td>
                                <input type="date"
                                       name="date_retour"
                                       id="date_retour"
                                       class="form-control"
                                       value="{{ old('date_retour', $retour->date_retour) }}"
                                       required>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="type_retour">Type de retour</label></td>
                            <td>
                                <select name="type_retour" id="type_retour" class="form-control" required>
                                    <option value="PACK_COMPLET"   {{ old('type_retour', $retour->type_retour) === 'PACK_COMPLET'   ? 'selected' : '' }}>Pack complet</option>
                                    <option value="BOX_SEULE"      {{ old('type_retour', $retour->type_retour) === 'BOX_SEULE'      ? 'selected' : '' }}>Box seule</option>
                                    <option value="TABLETTES"      {{ old('type_retour', $retour->type_retour) === 'TABLETTES'      ? 'selected' : '' }}>Tablettes</option>
                                    <option value="ROUTEUR"        {{ old('type_retour', $retour->type_retour) === 'ROUTEUR'        ? 'selected' : '' }}>Routeur</option>
                                    <option value="CABLE_HDMI"     {{ old('type_retour', $retour->type_retour) === 'CABLE_HDMI'     ? 'selected' : '' }}>Câble HDMI</option>
                                    <option value="CABLE_TABLETTE" {{ old('type_retour', $retour->type_retour) === 'CABLE_TABLETTE' ? 'selected' : '' }}>Câble Tablette</option>
                                </select>
                            </td>
                        </tr>
                        <tr id="typeBoxRetourWrapper" style="display:none;">
                            <td><label for="type_box">Type de BOX</label></td>
                            <td>
                                <select name="type_box" id="type_box" class="form-control">
                                    <option value="MI"          {{ old('type_box', $retour->type_box) === 'MI'          ? 'selected' : '' }}>MI</option>
                                    <option value="X96"         {{ old('type_box', $retour->type_box) === 'X96'         ? 'selected' : '' }}>X96</option>
                                    <option value="SENIOR ANIM" {{ old('type_box', $retour->type_box) === 'SENIOR ANIM' ? 'selected' : '' }}>SENIOR ANIM</option>
                                </select>
                            </td>
                        </tr>
                        <tr id="quantiteRetourWrapper" style="display:none;">
                            <td><label for="nombre_tablettes_retournees">Quantité</label></td>
                            <td>
                                <input type="number"
                                       name="nombre_tablettes_retournees"
                                       id="nombre_tablettes_retournees"
                                       class="form-control"
                                       min="1"
                                       value="{{ old('nombre_tablettes_retournees', $retour->nombre_tablettes_retournees) }}">
                            </td>
                        </tr>
                        <tr>
                            <td><label for="nom_compte">Nom du compte</label></td>
                            <td>
                                <input type="text"
                                       name="nom_compte"
                                       id="nom_compte"
                                       class="form-control"
                                       value="{{ old('nom_compte', $retour->nom_compte) }}"
                                       required>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="adresse_facturation">Adresse de facturation</label></td>
                            <td>
                                <input type="text"
                                       name="adresse_facturation"
                                       id="adresse_facturation"
                                       class="form-control"
                                       value="{{ old('adresse_facturation', $retour->adresse_facturation) }}">
                            </td>
                        </tr>
                        <tr>
                            <td><label for="commentaire">Commentaire</label></td>
                            <td>
                                <textarea class="form-control"
                                          name="commentaire"
                                          id="commentaire"
                                          rows="2">{{ old('commentaire', $retour->commentaire) }}</textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="materiel_defectueux">Matériel défectueux (commentaire libre)</label></td>
                            <td>
                                <textarea name="materiel_defectueux"
                                          id="materiel_defectueux"
                                          class="form-control"
                                          rows="2">{{ old('materiel_defectueux', $retour->materiel_defectueux) }}</textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="statut">Statut</label></td>
                            <td>
                                <select name="statut" id="statut" class="form-select">
                                    <option value="EN_ATTENTE"            {{ old('statut', $retour->statut) === 'EN_ATTENTE'            ? 'selected' : '' }}>En attente</option>
                                    <option value="EN_ATTENTE_RECEPTION"  {{ old('statut', $retour->statut) === 'EN_ATTENTE_RECEPTION'  ? 'selected' : '' }}>En attente de réception</option>
                                    <option value="RECU"                  {{ old('statut', $retour->statut) === 'RECU'                  ? 'selected' : '' }}>Reçu</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Section du matériel défectueux repensée -->
        <div class="defectueux-container">
            <h2>Détails du matériel défectueux</h2>
            <table class="defectueux-table" id="defectueuxTable">
                <thead>
                    <tr>
                        <th>Type de matériel</th>
                        <th>Quantité</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Template caché à cloner pour ajout -->
                    <tr class="d-none" id="defectueuxRowTemplate">
                        <td>
                            <select class="form-select" name="defectueux_items[INDEX][type]">
                                <option value="">-- Sélectionnez un type --</option>
                                <option value="BOX_SEULE">Box</option>
                                <option value="TABLETTES">Tablette</option>
                                <option value="ROUTEUR">Routeur</option>
                                <option value="CABLE_HDMI">Câble HDMI</option>
                                <option value="CABLE_TABLETTE">Câble Tablette</option>
                            </select>
                        </td>
                        <td>
                            <input type="number"
                                   class="form-control"
                                   name="defectueux_items[INDEX][quantite]"
                                   value="1"
                                   min="1">
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger" onclick="removeDefectueuxRow(this)">x</button>
                        </td>
                    </tr>
                    
                    <!-- Pré-remplissage via $defectueuxItems -->
                    @if(is_array($defectueuxItems))
                        @foreach($defectueuxItems as $i => $item)
                            <tr>
                                <td>
                                    <select class="form-select" name="defectueux_items[{{ $i }}][type]">
                                        <option value="">-- Sélectionnez un type --</option>
                                        <option value="BOX_SEULE"      {{ ($item['type'] ?? '') === 'BOX_SEULE'      ? 'selected' : '' }}>Box</option>
                                        <option value="TABLETTES"       {{ ($item['type'] ?? '') === 'TABLETTES'       ? 'selected' : '' }}>Tablette</option>
                                        <option value="ROUTEUR"         {{ ($item['type'] ?? '') === 'ROUTEUR'         ? 'selected' : '' }}>Routeur</option>
                                        <option value="CABLE_HDMI"      {{ ($item['type'] ?? '') === 'CABLE_HDMI'      ? 'selected' : '' }}>Câble HDMI</option>
                                        <option value="CABLE_TABLETTE"  {{ ($item['type'] ?? '') === 'CABLE_TABLETTE'  ? 'selected' : '' }}>Câble Tablette</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="number"
                                           class="form-control"
                                           name="defectueux_items[{{ $i }}][quantite]"
                                           value="{{ $item['quantite'] ?? 1 }}"
                                           min="1">
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger" onclick="removeDefectueuxRow(this)">x</button>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
            <button type="button" class="btn-add" onclick="addDefectueuxRow()">+ Ajouter un matériel défectueux</button>
        </div>

        <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
    </form>
</div>

<script>
    // Gestion de l'affichage des champs en fonction du type de retour
    const typeRetourSelect      = document.getElementById('type_retour');
    const typeBoxRetourWrapper  = document.getElementById('typeBoxRetourWrapper');
    const quantiteRetourWrapper = document.getElementById('quantiteRetourWrapper');
    const nombreTablettesInput  = document.getElementById('nombre_tablettes_retournees');

    function toggleFields() {
        const val = typeRetourSelect.value;

        // Afficher le champ type_box pour PACK_COMPLET et BOX_SEULE
        if (val === 'PACK_COMPLET' || val === 'BOX_SEULE') {
            typeBoxRetourWrapper.style.display = 'table-row';
        } else {
            typeBoxRetourWrapper.style.display = 'none';
        }

        // Afficher le champ quantité pour TABLETTES, ROUTEUR, CABLE_HDMI et CABLE_TABLETTE
        if (val === 'TABLETTES' || val === 'ROUTEUR' || val === 'CABLE_HDMI' || val === 'CABLE_TABLETTE') {
            quantiteRetourWrapper.style.display = 'table-row';
        } else {
            quantiteRetourWrapper.style.display = 'none';
            nombreTablettesInput.value = '';
        }
    }
    toggleFields();
    typeRetourSelect.addEventListener('change', toggleFields);

    // Gestion de la liste dynamique pour les items défectueux
    let defectueuxIndex = {{ count($defectueuxItems) }};

    function addDefectueuxRow() {
        defectueuxIndex++;
        const template = document.getElementById('defectueuxRowTemplate');
        const newRow   = template.cloneNode(true);
        newRow.id = '';
        newRow.classList.remove('d-none');

        // Mise à jour du nom des champs (remplacement de "INDEX" par l'index courant)
        const elements = newRow.querySelectorAll('select, input');
        elements.forEach((el) => {
            el.name = el.name.replace('INDEX', defectueuxIndex);
        });

        template.parentNode.appendChild(newRow);
    }

    function removeDefectueuxRow(button) {
        const row = button.closest('tr');
        row.remove();
    }
</script>
@endsection