@extends('dashboard.layouts.app')
@section('title', 'Créer un Sondage - UAC eservices')
@section('page-title', 'Créer un Sondage')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('surveys.index') }}">Sondages</a></li>
    <li class="breadcrumb-item active" aria-current="page">Créer</li>
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <a href="{{ route('surveys.index') }}" class="btn btn-secondary">
                <i class="mdi mdi-arrow-left"></i> Retour à la liste
            </a>
            <div class="card-body">
                <h4 class="card-title">Créer un nouveau sondage</h4>
                <form action="{{ route('surveys.store') }}" method="POST" x-data="{
                    questions: [
                        {
                            texte: '',
                            type: 'TEXTE_LIBRE',
                            options: []
                        }
                    ],
                    addQuestion() {
                        this.questions.push({
                            texte: '',
                            type: 'TEXTE_LIBRE',
                            options: []
                        });
                    },
                    removeQuestion(index) {
                        if (this.questions.length > 1) {
                            this.questions.splice(index, 1);
                        }
                    },
                    addOption(questionIndex) {
                        if (this.questions[questionIndex].type !== 'TEXTE_LIBRE') {
                            this.questions[questionIndex].options.push('');
                        }
                    },
                    removeOption(questionIndex, optionIndex) {
                        if (this.questions[questionIndex].options.length > 2) {
                            this.questions[questionIndex].options.splice(optionIndex, 1);
                        }
                    },
                    validateForm(event) {
                        let isValid = true;
                        this.questions.forEach((question, index) => {
                            if (question.type !== 'TEXTE_LIBRE') {
                                let hasEmptyOption = question.options.some(option => option.trim() === '');
                                if (hasEmptyOption) {
                                    isValid = false;
                                    console.warn(`Option vide détectée à la question ${index + 1}`);
                                }
                            }
                        });

                        if (!isValid) {
                            event.preventDefault();
                            alert('Veuillez remplir ou supprimer toutes les options vides avant de soumettre le formulaire.');
                            return false;
                        }
                        return true;
                    }
                }" @submit="validateForm($event)">
                    @csrf
                    <!-- Informations générales du sondage -->
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="titre" class="form-label">Titre du sondage <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('titre') is-invalid @enderror"
                                    id="titre" name="titre" value="{{ old('titre') }}" required>
                                @error('titre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                        id="description" name="description" rows="4" placeholder="Saisissez la description du sondage ici...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="statut" class="form-label">Statut <span class="text-danger">*</span></label>
                                <select class="form-select @error('statut') is-invalid @enderror" id="statut" name="statut" required>
                                    <option value="actif" {{ old('statut') === 'actif' ? 'selected' : '' }}>Actif</option>
                                    <option value="inactif" {{ old('statut') === 'inactif' ? 'selected' : '' }}>Inactif</option>
                                </select>
                                @error('statut')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="date_debut" class="form-label">Date de début <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('date_debut') is-invalid @enderror"
                                    id="date_debut" name="date_debut" value="{{ old('date_debut') }}" required>
                                @error('date_debut')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="date_fin" class="form-label">Date de fin <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('date_fin') is-invalid @enderror"
                                    id="date_fin" name="date_fin" value="{{ old('date_fin') }}" required>
                                @error('date_fin')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Utilisateurs cibles (optionnel)</label>
                                <small class="form-text text-muted">Sélectionnez les utilisateurs autorisés à voir et répondre au sondage. Si aucun rôle n'est sélectionné, tous les utilisateurs pourront y accéder.</small>
                                <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                    @foreach(\App\Models\Role::all() as $role)
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                name="target_roles[]" value="{{ $role->id }}"
                                                id="role_{{ $role->id }}"
                                                {{ in_array($role->id, old('target_roles', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="role_{{ $role->id }}">
                                                {{ $role->nom }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                @error('target_roles')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Section Questions -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h5 class="mb-0">Questions du sondage</h5>
                        </div>
                        <div class="card-body">
                            <div id="questions-container">
                                <template x-for="(question, index) in questions" :key="index">
                                    <div class="question-item border rounded p-3 mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h6>Question <span x-text="index + 1"></span></h6>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                    @click="removeQuestion(index)" x-show="questions.length > 1">
                                                <i class="mdi mdi-delete"></i> Supprimer
                                            </button>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Texte de la question <span class="text-danger">*</span></label>
                                            <textarea class="form-control" :name="`questions[${index}][texte]`"
                                                    x-model="question.texte" rows="2" required></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Type de question <span class="text-danger">*</span></label>
                                            <select class="form-select" :name="`questions[${index}][type]`"
                                                    x-model="question.type" required>
                                                <option value="TEXTE_LIBRE">Texte libre</option>
                                                <option value="CHOIX_UNIQUE">Choix unique (radio)</option>
                                                <option value="CHOIX_MULTIPLE">Choix multiple (checkbox)</option>
                                            </select>
                                        </div>
                                        <!-- Options pour les questions à choix -->
                                        <div x-show="question.type !== 'TEXTE_LIBRE'" class="mb-3">
                                            <label class="form-label">Options de réponse</label>
                                            <div class="mb-2">
                                                <template x-for="(option, optionIndex) in question.options" :key="optionIndex">
                                                    <div class="input-group mb-2">
                                                        <input type="text" class="form-control"
                                                            :name="`questions[${index}][options][${optionIndex}]`"
                                                            x-model="question.options[optionIndex]"
                                                            placeholder="Saisir une option"
                                                            :required="question.type !== 'TEXTE_LIBRE'">
                                                        <button type="button" class="btn btn-outline-danger"
                                                                @click="removeOption(index, optionIndex)"
                                                                x-show="question.options.length > 2">
                                                            <i class="mdi mdi-minus"></i>
                                                        </button>
                                                    </div>
                                                </template>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm"
                                                    @click="addOption(index)">
                                                <i class="mdi mdi-plus"></i> Ajouter une option
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <button type="button" class="btn btn-primary" @click="addQuestion()">
                                <i class="mdi mdi-plus"></i> Ajouter une question
                            </button>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('surveys.index') }}" class="btn btn-secondary">
                            <i class="mdi mdi-arrow-left"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="mdi mdi-content-save"></i> Créer le sondage
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection