@extends('layouts.app')

@section('title', 'Création d\'une demande - L\'unique Création')

@push('styles')
    <link href="{{ asset('/assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css') }}" rel="stylesheet">

    <!-- Pick date -->
    <link rel="stylesheet" href="{{ asset('/assets/vendor/pickadate/themes/default.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/vendor/pickadate/themes/default.date.css') }}">

    <!-- Dropzone -->
    <link rel="stylesheet" href="{{ asset('/assets/vendor/dropzone/dist/dropzone.css') }}">
@endpush

@section('content')
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-9">
                <div>
                    <h3 class="">Création d'une demande</h3>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="tab-content">
                <div class="filter cm-content-box box-primary">
                    <div>
                        <div class="card-body">
                            <form class="row" action="{{ route('demande.store') }}" method="POST">
                                @csrf

                                <div class="col-12 mb-3">
                                    <h4>
                                        <i class="fa-solid fa-user"></i> &nbsp;Informations du Client
                                    </h4>
                                </div>

                                <div class="mb-3 col-12">
                                    <label for="client_id" class="form-label">Rechercher un client existant en base</label>
                                    <select class="js-data-client w-100"></select>
                                    <input type="hidden" name="client_id" id="client_id" value="">
                                </div>

                                <div class="mb-3 col-md-12">
                                    <label for="nom" class="form-label">Societe</label>
                                    <input type="text" name="societe" id="societe" class="form-control" value="{{ old('societe') }}">
                                </div>

                                <!-- Nom -->
                                <div class="mb-3 col-md-6">
                                    <label for="nom" class="form-label">Nom</label>
                                    <input type="text" name="nom" id="nom" class="form-control" value="{{ old('nom') }}">
                                </div>

                                <!-- Prénom -->
                                <div class="mb-3 col-md-6">
                                    <label for="prenom" class="form-label">Prénom</label>
                                    <input type="text" name="prenom" id="prenom" class="form-control" value="{{ old('prenom') }}">
                                </div>

                                <!-- Email -->
                                <div class="mb-3 col-md-6">
                                    <label for="email" class="form-label">E-mail</label>
                                    <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}">
                                </div>

                                <!-- Téléphone -->
                                <div class="mb-3 col-md-6">
                                    <label for="telephone" class="form-label">Téléphone</label>
                                    <input type="text" name="telephone" id="telephone" class="form-control" value="{{ old('telephone') }}">
                                </div>

                                <!-- Email 2 -->
                                <div class="mb-3 col-md-6">
                                    <label for="email2" class="form-label">E-mail 2</label>
                                    <input type="email" name="email2" id="email2" class="form-control" value="{{ old('email2') }}">
                                </div>

                                <!-- Téléphone 2 -->
                                <div class="mb-3 col-md-6">
                                    <label for="telephone2" class="form-label">Téléphone 2</label>
                                    <input type="text" name="telephone2" id="telephone2" class="form-control" value="{{ old('telephone2') }}">
                                </div>

                                <!-- Adresse -->
                                <div class="mb-3 col-md-6">
                                    <label for="adresse" class="form-label">Adresse</label>
                                    <input type="text" name="adresse" id="adresse" class="form-control" value="{{ old('adresse') }}">
                                </div>

                                <!-- Ville -->
                                <div class="mb-3 col-md-6">
                                    <label for="ville" class="form-label">Ville</label>
                                    <input type="text" name="ville" id="ville" class="form-control" value="{{ old('ville') }}">
                                </div>

                                <!-- Code postal -->
                                <div class="mb-3 col-md-6">
                                    <label for="code_postal" class="form-label">Code postal</label>
                                    <input type="text" name="code_postal" id="code_postal" class="form-control" value="{{ old('code_postal') }}">
                                </div>

                                <div class="col-12 my-4">
                                    <hr>
                                </div>

                                <div class="col-12 mb-3">
                                    <h4>
                                        <i class="fa-solid fa-ruler"></i> &nbsp;Informations du projet
                                    </h4>
                                </div>

                                <!-- Type de projet -->
                                <div class="mb-3 col-md-12">
                                    <label for="type_projet_id" class="form-label">Type de projet *</label>
                                    <select name="type_projet_id" id="type_projet_id" class="default-select form-control wide" required>
                                        <option value="">-- Sélectionner un type --</option>
                                        @foreach($typesProjets as $type)
                                            <option value="{{ $type->id }}">{{ $type->libelle_bo }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Habitation</label>
                                    <select class="default-select form-control wide" name="type_habitation_id" >
                                        <option>Choisir...</option>
                                        @foreach ($typeHabitations as $habitation)
                                            <option value="{{ $habitation['id'] }}">{{ $habitation['libelle'] }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Type de construction</label>
                                    <select class="default-select form-control wide" name="type_construction_id">
                                        <option>Choisir...</option>
                                        @foreach ($typeConstructions as $construction)
                                            <option value="{{ $construction['id'] }}">{{ $construction['libelle'] }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-sm-6 col-md-3 mb-3">
                                    <label class="form-label" for="etage">Etage</label>
                                    <input type="text" class="form-control" name="etage" id="etage" value="">
                                </div>

                                <div class="col-sm-6 col-md-3 mb-3">
                                    <label class="form-label" for="ascenseur">Ascenseur</label>
                                    <input type="text" class="form-control" name="ascenseur" id="ascenseur" value="">
                                </div>

                                <div class="col-sm-6 col-md-3 mb-3">
                                    <label class="form-label" for="cage_escalier">Cage d'escalier</label>
                                    <input type="text" class="form-control" name="cage_escalier" id="cage_escalier" value="">
                                </div>

                                <div class="col-sm-6 col-md-3 mb-3">
                                    <label class="form-label" for="couloir">Couloir</label>
                                    <input type="text" class="form-control" name="couloir" id="couloir" value="">
                                </div>

                                <div class="col-12 mb-3">
                                    <label class="form-label" for="accessibilite">Accessibilité</label>
                                    <textarea class="form-control" name="accessibilite" id="accessibilite" rows="3"></textarea>
                                </div>

                                <div class="col-12 mb-3">
                                    <label class="form-label" for="commentaire">Commentaire</label>
                                    <textarea class="form-control" name="commentaire" id="commentaire" rows="3"></textarea>
                                </div>

                                <!-- Bouton submit -->
                                <div class="col-12 mt-4">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-paper-plane"></i> Créer la demande
                                    </button>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            $(".js-data-client").select2({
                width: "100%",
                placeholder: "Rechercher un client",
                ajax: {
                    url: "{{ route('clients.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.results
                        };
                    },
                    cache: true
                }
            });

            // Quand on sélectionne un client → pré-remplir les champs
            $(".js-data-client").on('select2:select', function (e) {
                const client = e.params.data.data;

                $('#nom').val(client.nom);
                $('#prenom').val(client.prenom);
                $('#email').val(client.email);
                $('#telephone').val(client.telephone);
                $('#societe').val(client.societe);
                $('#adresse').val(client.adresse);
                $('#ville').val(client.ville);
                $('#code_postal').val(client.cp);
                $('#client_id').val(client.id);
            });
        });
    </script>
@endpush