@extends('layouts.public')

@section('title', 'Formuler une plainte - UAC-eServices')

@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>
/* Style Tom Select pour correspondre à Tailwind */
.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">
                Formuler une plainte
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                Votre plainte sera traitée de manière anonyme et confidentielle
            </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('plaintes.store') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div>
                <label for="personne_impliquee" class="block text-sm font-medium text-gray-700">
                    Personne impliquée ou Nom de la division/service <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <input type="text"
                        id="personne_impliquee"
                        name="personne_impliquee"
                        value="{{ old('personne_impliquee') }}"
                        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('personne_impliquee') border-red-300 @enderror"
                        placeholder="Nom et prénom de la personne impliquée ou Nom de la division/service">
                    @error('personne_impliquee')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <label for="poste" class="block text-sm font-medium text-gray-700">
                    Poste de la personne impliquée <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <select id="poste"
                            name="poste"
                            required
                            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>

            <div id="centre_section">
                <label for="centre" class="block text-sm font-medium text-gray-700">
                    Centre universitaire <span class="text-red-500" id="centre_required">*</span>
                </label>
                <div class="mt-1">
                    <select id="centre"
                            name="centre"
                            required
                            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>

            <div id="organisme_section">
                <label for="organisme_specifique" class="block text-sm font-medium text-gray-700">
                    Organisme spécifique <span class="text-red-500" id="organisme_required">*</span>
                </label>
                <div class="mt-1">
                    <select id="organisme_specifique"
                            name="organisme_specifique"
                            required
                            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>


            <div>
                <label for="description" class="block text-sm font-medium text-gray-700">
                    Description de la plainte <span class="text-red-500">*</span>
                </label>
                <div class="mt-1">
                    <textarea id="description"
                            name="description"
                            rows="6"
                            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('description') border-red-300 @enderror"
                            placeholder="Décrivez en détail votre plainte. Soyez le plus précis possible pour faciliter le traitement.">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="flex items-start">
                <div class="flex items-center h-5">
                    <input id="deja_porte_plainte"
                        name="deja_porte_plainte"
                        type="checkbox"
                        value="1"
                        {{ old('deja_porte_plainte') ? 'checked' : '' }}
                        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                </div>
                <div class="ml-3 text-sm">
                    <label for="deja_porte_plainte" class="font-medium text-gray-700">
                        Avez-vous déjà porté plainte sur ce cas ?
                    </label>
                    <p class="text-gray-500">Cochez cette case si vous avez déjà signalé ce problème auparavant.</p>
                </div>
            </div>

            <!-- Document joint -->
            <div>
                <label for="document" class="block text-sm font-medium text-gray-700">
                    Joindre des documents à votre plainte (optionnel)
                </label>
                <div class="mt-1">
                    <input type="file"
                        id="document"
                        name="document"
                        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('document') 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('document')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">
                            Protection de l'anonymat
                        </h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <p>
                                Votre plainte sera traitée de manière strictement confidentielle.
                                Aucune information permettant de vous identifier ne sera divulguée sans votre consentement.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <button type="submit"
                        class="group relative flex w-full justify-center rounded-md border border-transparent bg-red-600 py-2 px-4 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-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-red-500 group-hover:text-red-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                    </span>
                    Soumettre la plainte
                </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');

            // Initialiser 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>';
                    }
                }
            });

            // Initialiser 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>';
                    }
                }
            });

            // Initialiser 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) {
                // Vider les options actuelles
                organismeSelect.clearOptions();

                if (selectedCentre) {
                    // Ajouter 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'
                            });
                        });
                    }

                    // Ajouter 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'
                            });
                        });
                    }
                }

                // Actualiser 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 centreElement = document.getElementById('centre');
                const organismeElement = document.getElementById('organisme_specifique');
                const centreRequiredSpan = document.getElementById('centre_required');
                const organismeRequiredSpan = document.getElementById('organisme_required');
                const centreSection = document.getElementById('centre_section');
                const organismeSection = document.getElementById('organisme_section');

                if (isRectorat) {
                    // Masquer les champs et retirer l'obligation
                    centreSection.style.display = 'none';
                    organismeSection.style.display = 'none';
                    centreElement.required = false;
                    organismeElement.required = false;
                    centreRequiredSpan.style.display = 'none';
                    organismeRequiredSpan.style.display = 'none';
                    // Vider les valeurs
                    centreSelect.clear();
                    organismeSelect.clear();
                } else {
                    // Afficher les champs et remettre l'obligation
                    centreSection.style.display = 'block';
                    organismeSection.style.display = 'block';
                    centreElement.required = true;
                    organismeElement.required = true;
                    centreRequiredSpan.style.display = 'inline';
                    organismeRequiredSpan.style.display = 'inline';
                    
                    // 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('document').addEventListener('change', function(e) {
                const file = e.target.files[0];
                const maxSize = 5 * 1024 * 1024; // 5MB en bytes
                const errorElement = document.querySelector('#document + 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