@extends('layouts.app')

@section('title', 'Modifier l\'envoi')

@section('content')
<div class="container mt-4">
    {{-- Style CSS intégré --}}
    <style>
        /* Style du titre */
        h1 {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            color: #007bff;
            text-transform: uppercase;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        /* Style du tableau */
        .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: #f8f9fa;
        }
        .form-section {
            background-color: #e9ecef;
            text-align: center;
            font-weight: bold;
        }

        /* Style du bouton */
        .btn-primary {
            background: linear-gradient(90deg, #007bff, #0056b3);
            border: none;
            color: #fff;
            padding: 10px 25px;
            font-size: 1.2rem;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 50px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }
        .btn-primary:hover {
            background: linear-gradient(90deg, #0056b3, #007bff);
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
        }
        .form-table select, .form-table input, .form-table textarea {
            width: 100%;
            box-sizing: border-box;
        }
    </style>

    {{-- Titre de la page --}}
    <h1>Modifier l'envoi #{{ $envoi->id }}</h1>

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

    {{-- Formulaire --}}
    <form action="{{ route('envois.update', $envoi->id) }}" method="POST" class="card p-4 shadow">
        @csrf
        @method('PUT')

        <table class="form-table">
            <thead>
                <tr>
                    <th colspan="2">Informations sur l'envoi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><label for="date_envoi">Date d'envoi</label></td>
                    <td>
                        <input type="date" 
                               name="date_envoi" 
                               id="date_envoi" 
                               class="form-control" 
                               value="{{ old('date_envoi', $envoi->date_envoi) }}" 
                               >
                    </td>
                </tr>
                <tr>
                    <td><label for="type_envoi">Type d'envoi</label></td>
                    <td>
                        <select name="type_envoi" id="type_envoi" class="form-select" required>
                            <option value="PACK_COMPLET"   {{ $envoi->type_envoi === 'PACK_COMPLET'   ? 'selected' : '' }}>Pack complet</option>
                            <option value="BOX_SEULE"      {{ $envoi->type_envoi === 'BOX_SEULE'      ? 'selected' : '' }}>BOX seule</option>
                            <option value="TABLETTES"      {{ $envoi->type_envoi === 'TABLETTES'      ? 'selected' : '' }}>Tablettes</option>
                            <option value="ROUTEUR"        {{ $envoi->type_envoi === 'ROUTEUR'        ? 'selected' : '' }}>Routeur</option>
                            <!-- Nouveaux types -->
                            <option value="CABLE_HDMI"     {{ $envoi->type_envoi === 'CABLE_HDMI'     ? 'selected' : '' }}>Câble HDMI</option>
                            <option value="CABLE_TABLETTE" {{ $envoi->type_envoi === 'CABLE_TABLETTE' ? 'selected' : '' }}>Câble Tablette</option>
                        </select>
                    </td>
                </tr>
                <tr id="quantiteWrapper" style="display:none;">
                    <td><label for="quantite">Quantité</label></td>
                    <td>
                        <input type="number" 
                               name="quantite" 
                               id="quantite" 
                               class="form-control" 
                               min="1" 
                               value="{{ old('quantite', $envoi->quantite) }}">
                    </td>
                </tr>
                <tr id="typeBoxWrapper" style="display:none;">
                    <td><label for="type_box">Type de BOX</label></td>
                    <td>
                        <select name="type_box" id="type_box" class="form-select">
                            <option value="">-- Sélectionner --</option>
                            <option value="MI"           {{ $envoi->type_box === 'MI'           ? 'selected' : '' }}>MI</option>
                            <option value="X96"          {{ $envoi->type_box === 'X96'          ? 'selected' : '' }}>X96</option>
                            <option value="SENIOR ANIM"  {{ $envoi->type_box === 'SENIOR ANIM'  ? 'selected' : '' }}>SENIOR ANIM</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="priorite">Priorité</label></td>
                    <td>
                        <select name="priorite" id="priorite" class="form-select">
                            <option value=""       {{ $envoi->priorite === null       ? 'selected' : '' }}>Aucune</option>
                            <option value="URGENT" {{ $envoi->priorite === 'URGENT'   ? 'selected' : '' }}>Urgent</option>
                            <option value="NORMAL" {{ $envoi->priorite === 'NORMAL'   ? 'selected' : '' }}>Normal</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="commentaire_envoi">Commentaire</label></td>
                    <td>
                        <textarea name="commentaire_envoi" 
                                  id="commentaire_envoi" 
                                  class="form-control" 
                                  rows="2">{{ old('commentaire_envoi', $envoi->commentaire_envoi) }}</textarea>
                    </td>
                </tr>
                <tr>
                    <td><label for="statut">Statut</label></td>
                    <td>
                        <select name="statut" id="statut" class="form-select">
                            <option value="EN_ATTENTE" {{ $envoi->statut === 'EN_ATTENTE' ? 'selected' : '' }}>En attente</option>
                            <option value="ENVOYE"     {{ $envoi->statut === 'ENVOYE'     ? 'selected' : '' }}>Envoyé</option>
                        </select>
                    </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th colspan="2">Informations du compte</th>
                </tr>
            </thead>
            <tbody>
                <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', $envoi->nom_compte) }}" 
                               required>
                    </td>
                </tr>
                <tr>
                    <td><label for="fonction">Fonction</label></td>
                    <td>
                        <input type="text" 
                               name="fonction" 
                               id="fonction" 
                               class="form-control" 
                               value="{{ old('fonction', $envoi->fonction) }}">
                    </td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <th colspan="2">Informations personnelles</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><label for="nom">Nom</label></td>
                    <td>
                        <input type="text" 
                               name="nom" 
                               id="nom" 
                               class="form-control" 
                               value="{{ old('nom', $envoi->nom) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="prenom">Prénom</label></td>
                    <td>
                        <input type="text" 
                               name="prenom" 
                               id="prenom" 
                               class="form-control" 
                               value="{{ old('prenom', $envoi->prenom) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="adresse_livraison">Adresse de livraison</label></td>
                    <td>
                        <input type="text" 
                               name="adresse_livraison" 
                               id="adresse_livraison" 
                               class="form-control" 
                               value="{{ old('adresse_livraison', $envoi->adresse_livraison) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="telephone">Téléphone</label></td>
                    <td>
                        <input type="text" 
                               name="telephone" 
                               id="telephone" 
                               class="form-control" 
                               value="{{ old('telephone', $envoi->telephone) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="email_laravel">Email</label></td>
                    <td>
                        <input type="email" 
                               name="email_laravel" 
                               id="email_laravel" 
                               class="form-control" 
                               value="{{ old('email_laravel', $envoi->email_laravel) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="mdp_laravel">Mot de passe</label></td>
                    <td>
                        <input type="text" 
                               name="mdp_laravel" 
                               id="mdp_laravel" 
                               class="form-control" 
                               value="{{ old('mdp_laravel', $envoi->mdp_laravel) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="android_id">Android ID</label></td>
                    <td>
                        <input type="text" 
                               name="android_id" 
                               id="android_id" 
                               class="form-control" 
                               value="{{ old('android_id', $envoi->android_id) }}">
                    </td>
                </tr>
                <tr>
                    <td><label for="numero_colis">Numéro de colis</label></td>
                    <td>
                        <input type="text" 
                               name="numero_colis" 
                               id="numero_colis" 
                               class="form-control" 
                               value="{{ old('numero_colis', $envoi->numero_colis) }}">
                    </td>
                </tr>
            </tbody>
        </table>

        {{-- Bouton stylisé --}}
        <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
    </form>
</div>

<script>
    const typeEnvoiSelect = document.getElementById('type_envoi');
    const quantiteWrapper = document.getElementById('quantiteWrapper');
    const typeBoxWrapper  = document.getElementById('typeBoxWrapper');
    const quantiteInput   = document.getElementById('quantite');
    const typeBoxSelect   = document.getElementById('type_box');

    function toggleFields() {
        const val = typeEnvoiSelect.value;
        
        // Affiche la Quantité pour TABLETTES, ROUTEUR, CABLE_HDMI, CABLE_TABLETTE
        if (val === 'TABLETTES' || val === 'ROUTEUR' || val === 'CABLE_HDMI' || val === 'CABLE_TABLETTE') {
            quantiteWrapper.style.display = 'table-row';
        } else {
            quantiteWrapper.style.display = 'none';
            quantiteInput.value = '';
        }

        // Affiche le choix du type de BOX pour PACK_COMPLET et BOX_SEULE
        if (val === 'PACK_COMPLET' || val === 'BOX_SEULE') {
            typeBoxWrapper.style.display = 'table-row';
        } else {
            typeBoxWrapper.style.display = 'none';
            typeBoxSelect.value = '';
        }
    }

    toggleFields();
    typeEnvoiSelect.addEventListener('change', toggleFields);
</script>
@endsection