@extends('layouts.app')

@section('content')
<div class="container mt-4">
    {{-- Style CSS intégré --}}
    <style>
        /* Style global pour la page */
        h1 {
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            color: #0056b3;
            margin-bottom: 20px;
        }
        /* Table principale */
        .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;
        }
        /* Boutons principaux */
        .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;
        }
        /* Conteneur centré pour les tables */
        .table-container {
            display: flex;
            justify-content: center;
        }
        .table-responsive {
            max-width: 800px;
            width: 100%;
        }
        /* Classe utilitaire */
        .d-none {
            display: none !important;
        }

        /* 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;
        }
        /* Bouton + stylisé */
        .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>

    {{-- Titre principal --}}
    <h1>Nouveau retour</h1>

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

    {{-- Formulaire principal --}}
    <form action="{{ route('retours.store') }}" method="POST">
        @csrf

        <div class="table-container">
            <div class="table-responsive">
                <table class="form-table">
                    <thead>
                        <tr><th colspan="2">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" required>
                            </td>
                        </tr>
                        <!-- Type de retour principal -->
                        <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="">-- Sélectionnez un type principal --</option>
                                    <option value="PACK_COMPLET">Pack complet</option>
                                    <option value="BOX_SEULE">Box seule</option>
                                    <option value="TABLETTES">Tablettes</option>
                                    <option value="ROUTEUR">Routeur</option>
                                    <option value="CABLE_HDMI">Câble HDMI</option>
                                    <option value="CABLE_TABLETTE">Câble Tablette</option>
                                </select>
                            </td>
                        </tr>
                        <!-- type_box si PACK_COMPLET ou BOX_SEULE -->
                        <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">MI</option>
                                    <option value="X96">X96</option>
                                    <option value="SENIOR ANIM">SENIOR ANIM</option>
                                </select>
                            </td>
                        </tr>
                        <!-- Quantité si TABLETTES / ROUTEUR / CABLE_HDMI / CABLE_TABLETTE -->
                        <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">
                            </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" 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">
                            </td>
                        </tr>
                        <tr>
                            <td><label for="commentaire">Commentaire</label></td>
                            <td>
                                <textarea name="commentaire" id="commentaire" class="form-control"></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"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="statut">Statut</label></td>
                            <td>
                                <select name="statut" id="statut" class="form-control" required>
                                    <option value="EN_ATTENTE">En attente</option>
                                    <option value="RECU">Reçu</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Formulaire redessiné pour les détails du matériel défectueux --}}
        <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 -->
                    <tr class="d-none" id="defectueuxRowTemplate">
                        <td>
                            <select class="form-select" name="defectueux_items[INDEX][type]" onchange="toggleDefectueuxRow(this)">
                                <option value="">-- Sélectionnez un type --</option>
                                <option value="BOX_SEULE">Box seule</option>
                                <option value="TABLETTES">Tablettes</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 class="defQteCell d-none">
                            <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>
                </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</button>
    </form>
</div>

<script>
    // Gestion 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 type_box pour PACK_COMPLET ou BOX_SEULE
        if (val === 'PACK_COMPLET' || val === 'BOX_SEULE') {
            typeBoxRetourWrapper.style.display = 'table-row';
        } else {
            typeBoxRetourWrapper.style.display = 'none';
        }

        // Afficher quantité pour TABLETTES, ROUTEUR, CABLE_HDMI ou 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 le matériel défectueux
    let defectueuxIndex = 0;
    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 en remplaçant "INDEX" par defectueuxIndex
        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();
    }

    // Afficher/masquer la cellule "Quantité" en fonction du type sélectionné dans le matériel défectueux
    function toggleDefectueuxRow(selectEl) {
        const row   = selectEl.closest('tr');
        const val   = selectEl.value;
        const qteCell = row.querySelector('.defQteCell');
        const qteInp  = qteCell.querySelector('input');

        if (val === 'TABLETTES' || val === 'ROUTEUR' || val === 'CABLE_HDMI' || val === 'CABLE_TABLETTE') {
            qteCell.classList.remove('d-none');
            if (!qteInp.value) {
                qteInp.value = 1;
            }
        } else {
            qteCell.classList.add('d-none');
            qteInp.value = '';
        }
    }
</script>
@endsection