@extends('layouts.public')

@section('title', 'Exprimer une préoccupation')

@push('styles')
<!-- Tom Select CSS -->
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<style>
.ts-control {
    @apply block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm;
    position: relative;
    cursor: text;
}

.ts-control .ts-input {
    @apply text-gray-900;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ts-control input::placeholder {
    @apply text-gray-400;
}

.ts-dropdown {
    @apply bg-white border border-gray-300 rounded-md shadow-lg;
    margin-top: 2px;
}

.ts-dropdown .ts-dropdown-content {
    @apply max-h-60 overflow-y-auto;
}

.ts-dropdown .option {
    @apply px-3 py-2 cursor-pointer hover:bg-gray-100;
}

.ts-dropdown .active {
    @apply bg-indigo-100 text-indigo-900;
}

.ts-control.has-items .ts-input {
    margin-bottom: 0;
}

.ts-control .item {
    @apply bg-indigo-100 text-indigo-800 px-2 py-1 rounded text-xs font-medium mr-1 mb-1 inline-block;
}

.ts-control .item .remove {
    @apply ml-1 text-indigo-600 hover:text-indigo-800 cursor-pointer;
}
</style>
@endpush

@section('content')
    <div class="bg-white py-8 px-6 shadow-lg rounded-lg sm:px-10">
        <div class="mb-8">
            <h2 class="text-center text-3xl font-bold text-gray-900">
                Exprimer une préoccupation
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                Remplissez le formulaire ci-dessous pour soumettre votre demande d'assistance
            </p>
        </div>

        @if(session('success'))
            <div class="mb-4 rounded-md bg-green-50 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800">
                            {{ session('success') }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('support.store') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Nom complet -->
            <div>
                <label for="visiteur_nom" class="block text-sm font-medium text-gray-700">
                    Nom complet <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <input type="text"
                        id="visiteur_nom"
                        name="visiteur_nom"
                        value="{{ old('visiteur_nom') }}"
                        required
                        class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('visiteur_nom') border-red-300 @enderror">
                    @error('visiteur_nom')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Email -->
            <div>
                <label for="visiteur_email" class="block text-sm font-medium text-gray-700">
                    Adresse email <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <input type="email"
                        id="visiteur_email"
                        name="visiteur_email"
                        value="{{ old('visiteur_email') }}"
                        required
                        class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('visiteur_email') border-red-300 @enderror">
                    @error('visiteur_email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- WhatsApp -->
            <div>
                <label for="whatsapp_number" class="block text-sm font-medium text-gray-700">
                    Numéro WhatsApp
                </label>
                <div class="mt-1">
                    <input type="text"
                        id="whatsapp_number"
                        name="whatsapp_number"
                        value="{{ old('whatsapp_number', '+229') }}"
                        placeholder="+229XXXXXXXXXXX"
                        class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('whatsapp_number') border-red-300 @enderror">
                    <p class="mt-1 text-sm text-gray-500">Format: +229 suivi de 8 ou 10 chiffres</p>
                    @error('whatsapp_number')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Personne impliquée -->
            <div>
                <label for="personne_impliquee" class="block text-sm font-medium text-gray-700">
                    Personne impliquée / Service / Division
                </label>
                <div class="mt-1">
                    <input type="text"
                        id="personne_impliquee"
                        name="personne_impliquee"
                        value="{{ old('personne_impliquee') }}"
                        class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('personne_impliquee') border-red-300 @enderror"
                        placeholder="Nom et prénom de la personne impliquée ou Nom de la division ou du service">
                    @error('personne_impliquee')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Poste de la personne impliquée -->
            <div>
                <label for="poste" class="block text-sm font-medium text-gray-700">
                    Poste de la personne impliquée
                </label>
                <div class="mt-1">
                    <select id="poste"
                            name="poste"
                            class="@error('poste') border-red-300 @enderror">
                        <option value="">Sélectionner un poste</option>
                        @foreach(\App\Models\Plainte::getPostes() as $categorie => $postes)
                            <optgroup label="{{ $categorie }}">
                                @foreach($postes as $key => $poste)
                                    <option value="{{ $key }}" {{ old('poste') == $key ? 'selected' : '' }}>
                                        {{ $poste }}
                                    </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                        <option value="autre">Autre (préciser)</option>
                    </select>
                    @error('poste')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Champ pour poste personnalisé -->
                <div id="poste_personnalise_section" class="mt-2" style="display: none;">
                    <input type="text"
                        id="poste_personnalise"
                        name="poste_personnalise"
                        value="{{ old('poste_personnalise') }}"
                        class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                        placeholder="Précisez le poste (laissez vide si inconnu)">
                    <small class="text-gray-500 mt-1 block">Si vous ne connaissez pas le poste exact, laissez ce champ vide.</small>
                </div>
            </div>

            <!-- Centre universitaire -->
            <div id="centre_section">
                <label for="centre" class="block text-sm font-medium text-gray-700">
                    Centre universitaire
                </label>
                <div class="mt-1">
                    <select id="centre"
                            name="centre"
                            class="@error('centre') border-red-300 @enderror">
                        <option value="">Sélectionner un centre universitaire</option>
                        @foreach($centres as $key => $centre)
                            <option value="{{ $key }}" {{ old('centre') == $key ? 'selected' : '' }}>
                                {{ $centre }}
                            </option>
                        @endforeach
                    </select>
                    @error('centre')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Organisme spécifique -->
            <div id="organisme_section">
                <label for="organisme_specifique" class="block text-sm font-medium text-gray-700">
                    Organisme spécifique
                </label>
                <div class="mt-1">
                    <select id="organisme_specifique"
                            name="organisme_specifique"
                            class="@error('organisme_specifique') border-red-300 @enderror">
                        <option value="">Sélectionner un organisme spécifique</option>
                    </select>
                    @error('organisme_specifique')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Pièce jointe -->
            <div>
                <label for="file" class="block text-sm font-medium text-gray-700">
                    Pièce jointe (optionnel)
                </label>
                <div class="mt-1">
                    <input type="file"
                        id="file"
                        name="file"
                        accept=".jpg,.jpeg,.png,.pdf,.doc,.docx"
                        class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 @error('file') border-red-300 @enderror">
                    <p class="mt-1 text-sm text-gray-500">Formats acceptés: JPG, PNG, PDF, DOC, DOCX (max 5MB)</p>
                    @error('file')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Sujet -->
            <div>
                <label for="sujet" class="block text-sm font-medium text-gray-700">
                    Sujet <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <input type="text"
                        id="sujet"
                        name="sujet"
                        value="{{ old('sujet') }}"
                        required
                        class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('sujet') border-red-300 @enderror">
                    @error('sujet')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Priorité -->
            <div>
                <label for="priorite" class="block text-sm font-medium text-gray-700">
                    Priorité <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <select id="priorite"
                            name="priorite"
                            required
                            class="block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('priorite') border-red-300 @enderror">
                        <option value="">Sélectionner la priorité</option>
                        <option value="Basse" {{ old('priorite') == 'Basse' ? 'selected' : '' }}>Basse</option>
                        <option value="Moyenne" {{ old('priorite') == 'Moyenne' ? 'selected' : '' }}>Moyenne</option>
                        <option value="Haute" {{ old('priorite') == 'Haute' ? 'selected' : '' }}>Haute</option>
                    </select>
                    @error('priorite')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Description -->
            <div>
                <label for="probleme" class="block text-sm font-medium text-gray-700">
                    Description de votre requêtes <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <textarea id="probleme"
                            name="probleme"
                            rows="4"
                            required
                            class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm @error('probleme') border-red-300 @enderror"
                            placeholder="Décrivez votre problème en détail">{{ old('probleme') }}</textarea>
                    @error('probleme')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Bouton de soumission -->
            <div>
                <button type="submit"
                        class="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                        <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                        </svg>
                    </span>
                    Soumettre la préoccupation
                </button>
            </div>
        </form>
    </div>

    @push('scripts')
    <!-- Tom Select JS -->
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

    <script>
        const organismesData = {
            'unites_formation_recherche': {
                'abomey_calavi': {
                    'École Nationale d\'Administration': 'École Nationale d\'Administration',
                    'École Polytechnique d\'Abomey-Calavi': 'École Polytechnique d\'Abomey-Calavi',
                    'Faculté des Lettres, Langues, Arts et Communications': 'Faculté des Lettres, Langues, Arts et Communications',
                    'Faculté des Sciences Humaines et Sociales': 'Faculté des Sciences Humaines et Sociales',
                    'Faculté des Sciences et Techniques': 'Faculté des Sciences et Techniques',
                    'Faculté de Droit et de Science Politique': 'Faculté de Droit et de Science Politique',
                    'Faculté des Sciences Économiques et de Gestion': 'Faculté des Sciences Économiques et de Gestion',
                    'Faculté des Sciences Agronomiques': 'Faculté des Sciences Agronomiques',
                    'Institut de Langue Arabe et Culture Islamique': 'Institut de Langue Arabe et Culture Islamique',
                    'École Nationale des Sciences et Techniques de l\'Information et de la Communication': 'École Nationale des Sciences et Techniques de l\'Information et de la Communication',
                    'Institut National de l\'Eau': 'Institut National de l\'Eau',
                    'Institut de Formation et de Recherche en Informatique': 'Institut de Formation et de Recherche en Informatique',
                    'Institut national du Cadre de Vie': 'Institut national du Cadre de Vie',
                    'Institut national des Métiers d\'Arts, d\'Archéologie et de la Culture': 'Institut national des Métiers d\'Arts, d\'Archéologie et de la Culture',
                    'Institut Confucius': 'Institut Confucius',
                    'Chaire UNESCO des Droits de la Personne humaine et de la Démocratie': 'Chaire UNESCO des Droits de la Personne humaine et de la Démocratie',
                    'Chaire Internationale en Physique, Mathématique et Application': 'Chaire Internationale en Physique, Mathématique et Application'
                },
                'porto_novo': {
                    'Institut National de la Jeunesse, de l\'Éducation Physique et du Sport': 'Institut National de la Jeunesse, de l\'Éducation Physique et du Sport',
                    'École Normale Supérieure': 'École Normale Supérieure',
                    'Haute École Régionale de Commerce International': 'Haute École Régionale de Commerce International',
                    'Institut de Mathématiques et de Sciences Physiques': 'Institut de Mathématiques et de Sciences Physiques',
                    'École du Patrimoine africain': 'École du Patrimoine africain'
                },
                'ouidah': {
                    'Institut Régional de Santé Publique': 'Institut Régional de Santé Publique'
                },
                'cotonou': {
                    'Faculté des Sciences de la Santé': 'Faculté des Sciences de la Santé',
                    'Institut National Médico-Sanitaire': 'Institut National Médico-Sanitaire',
                    'École Nationale d\'Économie Appliquée et de Management': 'École Nationale d\'Économie Appliquée et de Management',
                    'Centre de Formation et de Recherche en matière de Population': 'Centre de Formation et de Recherche en matière de Population',
                    'Centre inter facultaire de Formation et de Recherche en Environnement pour le Développement durable': 'Centre inter facultaire de Formation et de Recherche en Environnement pour le Développement durable',
                    'Centre béninois des Langues étrangères': 'Centre béninois des Langues étrangères'
                }
            },
            'ecoles_doctorales': {
                'abomey_calavi': {
                    'École Doctorale des Sciences Juridiques, Politiques et Administratives': 'École Doctorale des Sciences Juridiques, Politiques et Administratives',
                    'École Doctorale Sciences de la Vie et de la Terre': 'École Doctorale Sciences de la Vie et de la Terre',
                    'École Doctorale Sciences Économiques et de Gestion': 'École Doctorale Sciences Économiques et de Gestion',
                    'École Doctorale Pluridisciplinaire "Espaces, Cultures et Développement"': 'École Doctorale Pluridisciplinaire "Espaces, Cultures et Développement"',
                    'École Doctorale des Sciences Exactes et Appliquées': 'École Doctorale des Sciences Exactes et Appliquées',
                    'École Doctorale des Sciences Agronomiques et de l\'Eau': 'École Doctorale des Sciences Agronomiques et de l\'Eau',
                    'École Doctorale des Sciences de l\'Ingénieur': 'École Doctorale des Sciences de l\'Ingénieur'
                },
                'cotonou': {
                    'École Doctorale des Sciences de la Santé': 'École Doctorale des Sciences de la Santé'
                },
                'porto_novo': {
                    'École Doctorale Pluridisciplinaire de l\'Éducation physique, du Sport et du Développement humain': 'École Doctorale Pluridisciplinaire de l\'Éducation physique, du Sport et du Développement humain'
                }
            }
        };

        document.addEventListener('DOMContentLoaded', function() {
            const postePersonnaliseSection = document.getElementById('poste_personnalise_section');
            const postePersonnaliseInput = document.getElementById('poste_personnalise');

            // Initialise Tom Select pour le poste
            const posteSelect = new TomSelect('#poste', {
                placeholder: 'Sélectionner un poste',
                searchField: ['text'],
                maxOptions: null,
                render: {
                    option: function(data, escape) {
                        return '<div class="py-2 px-3">' + escape(data.text) + '</div>';
                    },
                    optgroup_header: function(data, escape) {
                        return '<div class="font-semibold text-gray-700 py-2 px-3 bg-gray-50 border-b">' + escape(data.label) + '</div>';
                    }
                }
            });

            // Initialise Tom Select pour le centre
            const centreSelect = new TomSelect('#centre', {
                placeholder: 'Sélectionner un centre universitaire',
                searchField: ['text'],
                maxOptions: null,
                render: {
                    option: function(data, escape) {
                        return '<div class="py-2 px-3">' + escape(data.text) + '</div>';
                    }
                }
            });

            // Initialise Tom Select pour l'organisme
            const organismeSelect = new TomSelect('#organisme_specifique', {
                placeholder: 'Sélectionner un organisme spécifique',
                searchField: ['text'],
                maxOptions: null,
                optgroups: [
                    {value: 'unites_formation_recherche', label: 'Unités de formation et de recherche'},
                    {value: 'ecoles_doctorales', label: 'Écoles doctorales'}
                ],
                optgroupField: 'optgroup',
                render: {
                    option: function(data, escape) {
                        return '<div class="py-2 px-3">' + escape(data.text) + '</div>';
                    },
                    optgroup_header: function(data, escape) {
                        return '<div class="font-semibold text-gray-700 py-2 px-3 bg-gray-50 border-b">' + escape(data.label) + '</div>';
                    }
                }
            });

            // Fonction pour mettre à jour les organismes selon le centre sélectionné
            function updateOrganismes(selectedCentre) {
                // Vide les options actuelles
                organismeSelect.clearOptions();

                if (selectedCentre) {
                    // Ajoute les unités de formation et de recherche
                    if (organismesData['unites_formation_recherche'][selectedCentre]) {
                        Object.keys(organismesData['unites_formation_recherche'][selectedCentre]).forEach(function(key) {
                            organismeSelect.addOption({
                                value: key,
                                text: organismesData['unites_formation_recherche'][selectedCentre][key],
                                optgroup: 'unites_formation_recherche'
                            });
                        });
                    }

                    // Ajoute les écoles doctorales
                    if (organismesData['ecoles_doctorales'][selectedCentre]) {
                        Object.keys(organismesData['ecoles_doctorales'][selectedCentre]).forEach(function(key) {
                            organismeSelect.addOption({
                                value: key,
                                text: organismesData['ecoles_doctorales'][selectedCentre][key],
                                optgroup: 'ecoles_doctorales'
                            });
                        });
                    }
                }

                // Actualise l'affichage
                organismeSelect.refreshOptions(false);
            }

            // Gestionnaire pour le changement de poste
            posteSelect.on('change', function(value) {
                if (value === 'autre') {
                    postePersonnaliseSection.style.display = 'block';
                    postePersonnaliseInput.required = true;
                } else {
                    postePersonnaliseSection.style.display = 'none';
                    postePersonnaliseInput.required = false;
                    postePersonnaliseInput.value = '';
                }

                // Gestion des champs centre et organisme pour les postes du rectorat
                const rectoratPostes = ['secretaire_administratif', 'service_scolarite_licence', 'service_scolarite_master_doctorat', 'service_etudes_orientation', 'service_suivi_programmes', 'centre_pedagogie_universitaire', 'service_emplois_temps', 'service_statistique', 'centre_recherche_handicapes'];
                const isRectorat = rectoratPostes.includes(value);
                const centreSection = document.getElementById('centre_section');
                const organismeSection = document.getElementById('organisme_section');

                if (isRectorat) {
                    // Masquer les champs
                    centreSection.style.display = 'none';
                    organismeSection.style.display = 'none';
                    // Vider les valeurs
                    centreSelect.clear();
                    organismeSelect.clear();
                } else {
                    // Afficher les champs
                    centreSection.style.display = 'block';
                    organismeSection.style.display = 'block';
                    
                    // Recharger les options du centre si elles ont été vidées
                    if (centreSelect.options.length === 0) {
                        // Repeupler les options du centre depuis les options HTML originales
                        const originalCentreSelect = document.getElementById('centre');
                        const options = originalCentreSelect.querySelectorAll('option');
                        options.forEach(option => {
                            if (option.value) {
                                centreSelect.addOption({
                                    value: option.value,
                                    text: option.textContent
                                });
                            }
                        });
                        centreSelect.refreshOptions(false);
                    }
                }
            });

            // Gestionnaire pour le changement de centre
            centreSelect.on('change', function(value) {
                updateOrganismes(value);
            });

            // Initialisation au chargement de la page
            if (document.getElementById('centre').value) {
                updateOrganismes(document.getElementById('centre').value);
            }

            // Vérifier si "autre" était sélectionné au chargement
            if (document.getElementById('poste').value === 'autre') {
                postePersonnaliseSection.style.display = 'block';
                postePersonnaliseInput.required = true;
            }

            // Validation de la taille du fichier
            document.getElementById('file').addEventListener('change', function(e) {
                const file = e.target.files[0];
                const maxSize = 5 * 1024 * 1024; // 5MB en bytes
                const errorElement = document.querySelector('#file + p.text-red-600');

                if (file && file.size > maxSize) {
                    e.target.value = ''; // Vider le champ
                    if (!errorElement) {
                        const errorP = document.createElement('p');
                        errorP.className = 'mt-1 text-sm text-red-600';
                        errorP.textContent = 'Le fichier ne doit pas dépasser 5MB.';
                        e.target.parentNode.appendChild(errorP);
                    } else {
                        errorElement.textContent = 'Le fichier ne doit pas dépasser 5MB.';
                    }
                } else if (errorElement) {
                    errorElement.remove();
                }
            });
        });
    </script>
    @endpush
@endsection