@extends('layouts.app')

@section('title', 'Créer un envoi')

@section('content')
<div class="container mt-4">
    <h1 class="mb-4">Créer un nouvel envoi</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

    <form action="{{ route('envois.store') }}" method="POST">
        @csrf
        <table class="table table-bordered align-middle">
            <tbody>
                <tr>
                    <td><label for="date_envoi" class="form-label">Date d'envoi</label></td>
                    <td><input type="date" name="date_envoi" id="date_envoi" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="type_envoi" class="form-label">Type d'envoi</label></td>
                    <td>
                        <select name="type_envoi" id="type_envoi" class="form-select" required>
                            <option value="PACK_COMPLET">Pack complet</option>
                            <option value="BOX_SEULE">BOX seule</option>
                            <option value="TABLETTES">Tablettes</option>
                            <option value="ROUTEUR">Routeur</option>
                            <!-- Nouveaux types -->
                            <option value="CABLE_HDMI">Câble HDMI</option>
                            <option value="CABLE_TABLETTE">Câble Tablette</option>
                        </select>
                    </td>
                </tr>
                <tr class="d-none" id="quantiteWrapper">
                    <td><label for="quantite" class="form-label">Quantité</label></td>
                    <td><input type="number" name="quantite" id="quantite" class="form-control" min="1"></td>
                </tr>
                <tr class="d-none" id="typeBoxWrapper">
                    <td><label for="type_box" class="form-label">Type de BOX</label></td>
                    <td>
                        <select name="type_box" id="type_box" class="form-select">
                            <option value="">-- Sélectionner --</option>
                            <option value="MI">MI</option>
                            <option value="X96">X96</option>
                            <option value="SENIOR ANIM">SENIOR ANIM</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="priorite" class="form-label">Priorité</label></td>
                    <td>
                        <select name="priorite" id="priorite" class="form-select">
                            <option value="">Aucune</option>
                            <option value="URGENT">Urgent</option>
                            <option value="NORMAL">Normal</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="commentaire_envoi" class="form-label">Commentaire</label></td>
                    <td><textarea name="commentaire_envoi" id="commentaire_envoi" class="form-control" rows="2"></textarea></td>
                </tr>
                <tr>
                    <td><label for="statut" class="form-label">Envoi confirmé</label></td>
                    <td>
                        <select name="statut" id="statut" class="form-select">
                            <option value="EN_ATTENTE">En attente</option>
                            <option value="ENVOYE">Envoyé</option>
                        </select>
                    </td>
                </tr>
            </tbody>

            <thead>
                <tr><th colspan="2">Informations du compte / destinataire</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td><label for="nom_compte" class="form-label">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="fonction" class="form-label">Fonction</label></td>
                    <td><input type="text" name="fonction" id="fonction" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="nom" class="form-label">Nom</label></td>
                    <td><input type="text" name="nom" id="nom" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="prenom" class="form-label">Prénom</label></td>
                    <td><input type="text" name="prenom" id="prenom" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="adresse_livraison" class="form-label">Adresse de livraison</label></td>
                    <td><input type="text" name="adresse_livraison" id="adresse_livraison" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="telephone" class="form-label">Téléphone</label></td>
                    <td><input type="text" name="telephone" id="telephone" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="email_laravel" class="form-label">Email (Laravel)</label></td>
                    <td><input type="email" name="email_laravel" id="email_laravel" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="mdp_laravel" class="form-label">Mot de passe (Laravel)</label></td>
                    <td><input type="text" name="mdp_laravel" id="mdp_laravel" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="android_id" class="form-label">Android ID</label></td>
                    <td><input type="text" name="android_id" id="android_id" class="form-control"></td>
                </tr>
                <tr>
                    <td><label for="numero_colis" class="form-label">Numéro de colis</label></td>
                    <td><input type="text" name="numero_colis" id="numero_colis" class="form-control"></td>
                </tr>
                <tr>
                    <td colspan="2" class="text-center">
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

<!-- CSS intégré -->
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f9f9f9;
        color: #333;
        line-height: 1.6;
    }
    .container {
        background: #fff;
        padding: 20px 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-top: 30px;
    }
    h1 {
        font-size: 1.8rem;
        font-weight: bold;
        color: #007bff;
        margin-bottom: 20px;
    }
    .table {
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #dee2e6;
        border-spacing: 0;
    }
    .table th, .table td {
        padding: 10px;
        vertical-align: middle;
    }
    .table-bordered th, .table-bordered td {
        border: 1px solid #dee2e6;
    }
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        padding: 10px 20px;
        border-radius: 5px;
        transition: all 0.3s;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }
    .d-none {
        display: none !important;
    }
</style>

<!-- Script JS -->
<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.classList.remove('d-none');
        } else {
            quantiteWrapper.classList.add('d-none');
            quantiteInput.value = '';
        }

        // Affiche le choix du type de BOX pour PACK_COMPLET et BOX_SEULE
        if (val === 'PACK_COMPLET' || val === 'BOX_SEULE') {
            typeBoxWrapper.classList.remove('d-none');
        } else {
            typeBoxWrapper.classList.add('d-none');
            typeBoxSelect.value = '';
        }
    }

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