@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="col-lg-9">
                @component('components.pageheader')
                    @slot('title')
                        Continuer/Modifier la Tâche
                    @endslot
                    @slot('title_1')
                    @endslot
                @endcomponent
            </div>


            <form action="{{ route('update', $tasks->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row mt-5">
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="module_id">Module</label>
                            <select class="form-control" id="module_id" name="module_id" required>
                                <option value="">Sélectionner un module</option>
                                @foreach ($modules as $module)
                                    <option value="{{ $module->id }}"
                                        {{ $tasks->module_id == $module->id ? 'selected' : '' }}>
                                        {{ $module->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-lg-6">
                            <label for="projet_id ">Projet</label>
                            <select class="form-control" id="projet_id" name="projet_id" required>
                                <option value="">Sélectionner un projet</option>
                                @foreach ($projets as $projet)
                                    <option value="{{ $projet->id }}"
                                        {{ $tasks->projet_id == $projet->id ? 'selected' : '' }}>
                                        {{ $projet->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="title">Titre</label>
                            <input type="text" class="form-control" id="title" name="title"
                                value="{{ old('title', $tasks->title) }}" required>
                        </div>

                        <div class="form-group col-lg-3">
                            <label for="date">Date</label>
                            <input type="date" class="form-control" id="date" name="date"
                                value="{{ old('date', $tasks->date) }}" required>
                        </div>


                        <div class="form-group col-lg-3">
                            <label for="statut">Statut</label>
                            <select class="form-control" id="statut" name="statut" required>
                                <option value="1" {{ $tasks->statut === 1 ? 'selected' : '' }}>En cours</option>
                                <option value="2" {{ $tasks->statut === 2 ? 'selected' : '' }}>Terminé</option>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="row ">
                    <div class="form-group col-lg-12">
                        <label for="description">Description</label>
                        <textarea class="form-control" id="description" name="description" required>{{ old('description', $tasks->description) }}</textarea>
                    </div>
                </div>
                
                <div class="row  mt-3">
                    <div class="form-group col-lg-4">
                        <button type="submit" class="btn btn-primary">Mettre à jour</button>
                    </div>
                </div>
        </div>
    @endsection


    @section('script')
        <script>
            $(document).ready(function() {
                // Gestion du changement du module
                $(document).on('change', '.module-select', function() {
                    let moduleId = $(this).val();
                    let projetSelect = $(this).closest('.row').next().find('.projet-select');

                    if (moduleId) {
                        $.ajax({
                            url: '/get-projets/' + moduleId,
                            type: 'GET',
                            success: function(data) {
                                projetSelect.empty().append(
                                    '<option value="">Sélectionner un projet</option>');
                                $.each(data, function(index, projet) {
                                    projetSelect.append('<option value="' + projet.id +
                                        '">' + projet.name + '</option>');
                                });
                                projetSelect.prop('disabled', false); // Activer le sélecteur
                            },
                            error: function() {
                                projetSelect.empty().append(
                                    '<option value="">Aucun projet disponible</option>').prop(
                                    'disabled', true);
                            }
                        });
                    } else {
                        projetSelect.empty().prop('disabled', true); // Si aucun module sélectionné, désactiver
                    }
                });

                // Initialisation de la sélection de projet si le rapport existe
                let selectedModuleId = $('.module-select').val();
                if (selectedModuleId) {
                    $('.module-select').trigger('change'); // Déclenche le changement pour charger les projets
                }
            });
        </script>
    @endsection