@extends('layouts.base')

@section('menu')
    @include('admin.menu')
@endsection

@section('content')

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<section class="courses-listing bg-gray">
    <div class="container">
        <nav class="nav nav-pills nav-justified d-flex justify-content-center">
            <a href="{{ route('admin.type-offres.create2') }}" 
                class="nav-link btn btn-primary {{ Route::currentRouteName() === 'admin.type-offres' ? 'active' : '' }}">
                    Créer un type d'offre
            </a>
            <a href="{{ route('admin.domaines.create2') }}" 
                class="nav-link btn btn-primary {{ Route::currentRouteName() === 'admin.domaines' ? 'active' : '' }}">
                    Créer un domaine
            </a>
        </nav>

    <div class="container">
        <div class="card">
            <div class="card-header  text-white" style="background-color: {{ session('etablissementThirdLight') }};">
                <h4>Nouvelle offre</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.store-offres') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="alert alert-warning">
                        <ul class="mb-0"> 
                            <li> ATTENTION ! Si vous ne voyez pas le type d'offre ou le domaine d'offre, veuillez en créer </li> 
                        </ul>
                    </div>

                    <!-- Etape 1 -->
                    <div id="step1">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="offer_type_id" class="form-label">Type d'offre</label>
                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownOfferTypes" data-bs-toggle="dropdown" aria-expanded="false">
                                            Choisir les types d'offre
                                        </button>
                                        <ul class="dropdown-menu p-3" aria-labelledby="dropdownOfferTypes" style="max-height: 200px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAllOfferTypes">
                                                    <label class="form-check-label" for="selectAllOfferTypes">
                                                        Tout sélectionner
                                                    </label>
                                                </div>
                                            </li>
                                            @foreach($offerTypes as $type)
                                                <li>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="offer_type_id[]" 
                                                            id="offer_type_{{ $type->id }}" value="{{ $type->id }}">
                                                        <label class="form-check-label" for="offer_type_{{ $type->id }}">
                                                            {{ $type->name }}
                                                        </label>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                        <div class="mt-4" id="selectedOfferTypes" style="min-height: 40px;">
                                            <label>Types d'offre sélectionnés :</label>
                                            <div id="selectedOfferTypesList">
                                                <span class="text-muted">Aucune sélection</span>
                                            </div>
                                        </div>
                                    </div>
                                    @error('offer_type_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="domain_id" class="form-label">Domaine</label>
                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDomains" data-bs-toggle="dropdown" aria-expanded="false">
                                            Choisir les domaines
                                        </button>
                                        <ul class="dropdown-menu p-3" aria-labelledby="dropdownDomains" style="max-height: 200px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAllDomains">
                                                    <label class="form-check-label" for="selectAllDomains">
                                                        Tout sélectionner
                                                    </label>
                                                </div>
                                            </li>
                                            @foreach($domains as $domain)
                                                <li>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="domain_id[]" 
                                                            id="domain_{{ $domain->id }}" value="{{ $domain->id }}">
                                                        <label class="form-check-label" for="domain_{{ $domain->id }}">
                                                            {{ $domain->name }}
                                                        </label>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                        <div class="mt-4" id="selectedDomains" style="min-height: 40px;">
                                                    <label>Domaines sélectionnés :</label>
                                                <div id="selectedDomainsList">
                                                    <span class="text-muted">Aucune sélection</span>
                                                </div>
                                    
                                        </div>
                                    </div>                                                       
                                      @error('domain_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="filiere_id" class="form-label">Filieres concernées</label>
                                    <div class="dropdown">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownFiliers" data-bs-toggle="dropdown" aria-expanded="false">
                                            Choisir les filières concernées
                                        </button>
                                        <ul class="dropdown-menu p-3" aria-labelledby="dropdownFiliers" style="max-height: 200px; overflow-y: auto;">
                                            <li>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAllFiliers">
                                                    <label class="form-check-label" for="selectAllFiliers">
                                                        Tout sélectionner
                                                    </label>
                                                </div>
                                            </li>
                                            @foreach($filieres as $filiere)
                                                <li>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="filiere_id[]"
                                                            id="filiere_{{ $filiere->idFiliere }}" value="{{ $filiere->idFiliere }}">
                                                        <label class="form-check-label" for="filiere_{{ $filiere->idFiliere }}">
                                                            {{ $filiere->intituleFilieres }}
                                                        </label>
                                                    </div>
                                                </li>
                                            @endforeach

                                        </ul>
                                        <div class="mt-4" id="selectedFiliers" style="min-height: 40px;">
                                            <label>Filières sélectionnées :</label>
                                            <div id="selectedFiliersList">
                                                <span class="text-muted">Aucune sélection</span>
                                            </div>
                                        </div>
                                    </div>


                                    @error('filiere_id')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Etape 2 -->
                    <div id="step2" style="display: none;">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Intitulé de l'offre</label>
                                    <input type="text" name="title" id="title" class="form-control" required>
                                    @error('title')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="keywords" class="form-label">Mots-clés</label>
                                    <input type="text" name="keywords" id="keywords" class="form-control">
                                    @error('keywords')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea name="description" id="description" class="form-control" rows="4" required></textarea>
                            @error('description')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                     <label for="url" class="form-label">URL de l'offre</label>
                                     <input type="url" name="url" id="url" class="form-control" required>
                                    @error('url')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="company_name" class="form-label">Nom de l'entreprise</label>
                                    <input type="text" name="company_name" id="company_name" class="form-control">
                                    @error('company_name')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="start_date" class="form-label">Date de début</label>
                                    <input type="date" name="start_date" id="start_date" class="form-control" required>
                                    @error('start_date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="end_date" class="form-label">Date limite</label>
                                    <input type="date" name="end_date" id="end_date" class="form-control" required>
                                    @error('end_date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="alertStep1" class="alert alert-danger" style="display: none;">
                        <strong>Attention !</strong> Veuillez sélectionner au moins un type d'offre, un domaine et une filière pour continuer.
                    </div>

                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" id="previousStep" style="display:none;">Précédent</button>
                        <button type="button" class="btn btn-primary" id="nextStep">Suivant</button>
                        <button type="submit" class="btn btn-success" id="submitStep" style="display:none;">Enregistrer l'offre</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const nextStepButton = document.getElementById('nextStep');
    const previousStepButton = document.getElementById('previousStep');
    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const submitStepButton = document.getElementById('submitStep');
    const alertStep1 = document.getElementById('alertStep1');

    const selectAllOfferTypes = document.getElementById('selectAllOfferTypes');
    const selectAllDomains = document.getElementById('selectAllDomains');
    const selectAllFiliers = document.getElementById('selectAllFiliers');

    const offerTypeCheckboxes = document.querySelectorAll('input[name="offer_type_id[]"]');
    const domainCheckboxes = document.querySelectorAll('input[name="domain_id[]"]');
    const filierCheckboxes = document.querySelectorAll('input[name="filiere_id[]"]');

    const selectedOfferTypesList = document.getElementById('selectedOfferTypesList');
    const selectedDomainsList = document.getElementById('selectedDomainsList');
    const selectedFiliersList = document.getElementById('selectedFiliersList');

    // Fonction pour afficher les éléments sélectionnés
    function displaySelectedItems(checkboxes, selectedListElement, selectedDivId) {
        const selectedItems = [];
        checkboxes.forEach(function(checkbox) {
            if (checkbox.checked) {
                selectedItems.push(checkbox.nextElementSibling.textContent);
            }
        });
        if (selectedItems.length > 0) {
            selectedListElement.innerHTML = selectedItems.join(', ');
            document.getElementById(selectedDivId).style.display = 'block';
        } else {
            document.getElementById(selectedDivId).style.display = 'none';
        }
    }

    // Gérer le comportement de "Tout sélectionner" pour les types d'offre
    selectAllOfferTypes.addEventListener('change', function() {
        toggleCheckboxes(offerTypeCheckboxes, selectAllOfferTypes);
        displaySelectedItems(offerTypeCheckboxes, selectedOfferTypesList, 'selectedOfferTypes');
    });

    // Gérer le comportement de "Tout sélectionner" pour les domaines
    selectAllDomains.addEventListener('change', function() {
        toggleCheckboxes(domainCheckboxes, selectAllDomains);
        displaySelectedItems(domainCheckboxes, selectedDomainsList, 'selectedDomains');
    });

    // Gérer le comportement de "Tout sélectionner" pour les filières
    selectAllFiliers.addEventListener('change', function() {
        toggleCheckboxes(filierCheckboxes, selectAllFiliers);
        displaySelectedItems(filierCheckboxes, selectedFiliersList, 'selectedFiliers');
    });

    // Mettre à jour la liste des éléments sélectionnés chaque fois qu'un utilisateur coche/décoche une case
    offerTypeCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            displaySelectedItems(offerTypeCheckboxes, selectedOfferTypesList, 'selectedOfferTypes');
        });
    });

    domainCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            displaySelectedItems(domainCheckboxes, selectedDomainsList, 'selectedDomains');
        });
    });

    filierCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            displaySelectedItems(filierCheckboxes, selectedFiliersList, 'selectedFiliers');
        });
    });

    // Fonction pour sélectionner ou désélectionner toutes les cases à cocher
    function toggleCheckboxes(checkboxes, selectAllCheckbox) {
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = selectAllCheckbox.checked;
        });
    }

    // Fonction pour passer à l'étape suivante
    nextStepButton.addEventListener('click', function() {
        // Vérifier si tous les champs requis de l'étape 1 sont sélectionnés
        const offerTypeSelected = Array.from(offerTypeCheckboxes).some(checkbox => checkbox.checked);
        const domainSelected = Array.from(domainCheckboxes).some(checkbox => checkbox.checked);
        const filierSelected = Array.from(filierCheckboxes).some(checkbox => checkbox.checked);

        if (!offerTypeSelected || !domainSelected || !filierSelected) {
            // Afficher l'alerte si un ou plusieurs champs ne sont pas sélectionnés
            alertStep1.style.display = 'block';
        } else {
            alertStep1.style.display = 'none';
            step1.style.display = 'none';   
            step2.style.display = 'block'; 
            previousStepButton.style.display = 'inline-block';  
            nextStepButton.style.display = 'none';  
            submitStepButton.style.display = 'inline-block';  
        }
    });

    // Fonction pour revenir à l'étape précédente
    previousStepButton.addEventListener('click', function() {
        step1.style.display = 'block';  
        step2.style.display = 'none';  
        previousStepButton.style.display = 'none';  
        nextStepButton.style.display = 'inline-block';  
        submitStepButton.style.display = 'none';  
    });
});

</script>

@endsection