@extends('layout.mainlayout')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>



<style>
    .uppercase-input {
        text-transform: uppercase;
    }

    .heat {
        position: fixed;
        top: 60px;
        left: 250px;
        /* right: 40px; */
        width: calc(100% - 20px);
        z-index: 1000;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px 20px;
    }

    .out {
        top: 117px;
    }

    .report-item {
        position: relative;
    }

    .remove-report {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
    }
</style>

@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="row heat">
                @component('components.pageheader')
                    @slot('title')
                        Création de Rapport(s)
                    @endslot
                    @slot('title_1')
                        Créer un Rapport avec une ou plusieurs Tâche(s)
                    @endslot
                @endcomponent
                <div class="col-lg-8 mt-1">
                    <a href="javascript:void(0);" id="addMoreReports" class="btn btn-submit me-2">
                        <i class="fa fa-plus"></i>
                        Ajouter Nouvelle Tâche
                    </a>
                    <button type="submit" form="newReportForm" class="btn btn-cancel me-2">
                        <i class="fa fa-check"></i> Soumettre le Rapport
                    </button>

                </div>
                <div class="col-lg-4">
                    <a href="{{ route('rapports') }}" class="btn btn-primary me-2">
                        <i class="fas fa-list-alt"></i>
                        <span style="margin-left: 10px">Liste des Rapports</span>
                    </a>
                </div>
            </div>
            <form action="{{ route('rapport') }}" method="POST" id="newReportForm">
                @csrf
                <div class="card out">
                    <div class="card-body">
                        <div class="row">
                            <div id="success-message" class="alert alert-success" style="display: none;"></div>
                            <div id="error-message" class="alert alert-danger" style="display: none;"></div>
                            <div class="col-lg-10 col-sm-12">
                                <div class="form-group">
                                    <label style="font-weight: bold;">Libellé</label>
                                    <input type="text" id="libelle" name="libelle" class="form-control uppercase-input"
                                        readonly value="RAPPORT DU 04/10/2026">

                                </div>
                            </div>
                            <div class="col-lg-2 col-sm-12">
                                <div class="form-group">
                                    <label style="font-weight: bold;">Date</label>
                                    <input type="date" id="date" name="date" class="form-control" required
                                        value="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body report-item" id="reportContainer">

                        <div class="row">
                            <div class="col-lg-4 col-sm-6">
                                <div class="form-group">
                                    <label style="font-weight: bold;" for="projet_id">Projet</label>
                                    <select name="rapports[${reportCount}][projet_id]"
                                        class="form-select projet-select select2" required>
                                        <option value="">SÉLECTIONNEZ UN PROJET</option>
                                        @foreach ($projets as $projet)
                                            <option value="{{ $projet->id }}">{{ $projet->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-5 col-sm-6">
                                <div class="form-group">
                                    <label style="font-weight: bold;">Module</label>
                                    <select name="rapports[${reportCount}][module_id]" class="form-select module-select"
                                        required>
                                        <option value="">SÉLECTIONNEZ UN MODULE</option>
                                        @foreach ($modules as $module)
                                            <option value="{{ $module->id }}">{{ $module->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-3 form-group">
                                <label style="font-weight: bold;" for="">Statut</label>
                                <select name="rapports[${reportCount}][statut]" id="statut" class="form-select select"
                                    required>
                                    <option value="">SÉLECTIONNEZ LE STATUT</option>
                                    <option value="En Cours">EN COURS</option>
                                    <option value="Terminé">TERMINÉ</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-lg-12 col-sm-4">
                            <div class="form-group">
                                <label class="task-title" style="font-weight: bold;">Tâche N°1</label>
                                <input type="text" name="rapports[${reportCount}][title]"
                                    class="form-control uppercase-input" placeholder="Entrez le libellé de la tâche"
                                    required>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label style="font-weight: bold;">Commentaire</label>
                                    <textarea name="rapports[${reportCount}][description]" class="form-control"
                                        placeholder="FAITES UN COMMENTAIRE (Facultatif)"></textarea>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </form>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const dateInput = document.getElementById('date');
            const libelleInput = document.getElementById('libelle');


            dateInput.addEventListener('change', function() {

                const dateValue = this.value;

                if (dateValue) {
                    const date = new Date(dateValue);
                    const day = String(date.getDate()).padStart(2, '0');
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const year = date.getFullYear();

                    libelleInput.value = `RAPPORT DU ${day}/${month}/${year}`;
                }
            });
        });
    </script>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            let reportCount = 1;

            $('select.module-select').prop('disabled', true);

            $(document).on('change', '.projet-select', function() {
                let projetId = $(this).val();
                let moduleSelect = $(this).closest('.report-item').find('.module-select');

                if (projetId) {
                    $.ajax({
                        url: '/get-modules/' + projetId,
                        type: 'GET',
                        success: function(data) {
                            // Vider et ajouter les options pour les modules
                            moduleSelect.empty().append(
                                '<option value="">SÉLECTIONNEZ UN MODULE</option>');
                            data.sort((a, b) => a.name.localeCompare(b.name, 'fr', {
                                sensitivity: 'base'
                            }));

                            $.each(data, function(index, module) {
                                moduleSelect.append(
                                    '<option value="' + module.id + '">' + module
                                    .name + '</option>');
                            });
                            moduleSelect.prop('disabled',
                                false);
                        },
                        error: function() {
                            moduleSelect.empty().prop('disabled',
                                true);
                            showMessage('error', 'Erreur lors du chargement des modules.');
                        }
                    });
                } else {
                    moduleSelect.empty().append('<option value="">SÉLECTIONNEZ UN MODULE</option>').prop(
                        'disabled', true);
                }

            });
            $('select').select2({
                placeholder: "SÉLECTIONNEZ UNE OPTION",
                allowClear: true,
                language: {
                    noResults: function() {
                        return "AUCUNE DONNÉE";
                    }
                }
            });

            $(document).ready(function() {
                let reportCount = 1;

                $('#addMoreReports').on('click', function() {
                    reportCount = $('.report-item').length;
                    let newReportFields = `
                    <div class="card report-item">
                        <button type="button" class="btn btn-danger btn-sm remove-report" title="Supprimer cette tâche">
                            ✖
                        </button>
                    
                        <div class="card-body">
                            <div class="row ">
                                <div class="col-lg-4 col-sm-6 mt-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold;" for="projet_id">Projet</label>
                                        <select name="rapports[${reportCount}][projet_id]" class="form-select projet-select select" required>
                                            <option value="">SÉLECTIONNEZ UN PROJET</option>
                                            @foreach ($projets as $projet)
                                                <option value="{{ $projet->id }}">{{ $projet->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-sm-6 mt-4">
                                    <div class="form-group">
                                        <label style="font-weight: bold;">Module</label>
                                        <select name="rapports[${reportCount}][module_id]" class="form-select module-select select" required disabled>
                                            <option value="">SÉLECTIONNEZ UN MODULE</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 form-group mt-4">
                                    <label style="font-weight: bold;" for="">Statut</label>
                                    <select name="rapports[${reportCount}][statut]" id="statut" class="form-select select" required>
                                        <option value="">SÉLECTIONNEZ LE STATUT</option>
                                        <option value="En Cours">EN COURS</option>
                                        <option value="Terminé">TERMINÉ</option>
                                    </select>
                                </div>
                            </div>
                        
                            <div class="col-lg-12 col-sm-4">
                                <div class="form-group">
                                    <label style="font-weight: bold;" class="task-title">Tâche N°${reportCount + 1}</label>
                                    <input type="text" name="rapports[${reportCount}][title]" class="form-control uppercase-input" placeholder="Entrez le libellé de la tâche" required>
                                </div>
                            </div>
                        
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label style="font-weight: bold;">Commentaire</label>
                                    <textarea name="rapports[${reportCount}][description]" class="form-control" placeholder="FAITES UN COMMENTAIRE (Facultatif)"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>`;

                    $('#reportContainer').append(newReportFields);

                    $('#reportContainer .select').select2({
                        placeholder: "SÉLECTIONNEZ UNE OPTION",
                        allowClear: true,
                        language: {
                            noResults: function() {
                                return "AUCUNE DONNÉE";
                            }
                        }
                    });

                    // Faire défiler jusqu'au nouveau formulaire
                    const newReportElement = $('#reportContainer .report-item').last()[0];
                    newReportElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });

                    reportCount++;
                });


            });

            $(document).on('click', '.remove-report', function() {
                $(this).closest('.report-item').remove();
                reportCount = 1;
                $('.report-item').each(function() {
                    $(this).find('.task-title').text(`Tâche N°${reportCount}`);
                    $(this).find('input, select, textarea').each(function() {
                        const name = $(this).attr('name');
                        if (name) {
                            const updatedName = name.replace(/\[\d+\]/,
                                `[${reportCount - 1}]`);
                            $(this).attr('name', updatedName);
                        }
                    });
                    reportCount++;
                });
                reportCount = $('.report-item').length;
            });

            function showMessage(type, message) {
                const messageDiv = type === 'success' ? '#success-message' : '#error-message';
                $(messageDiv).text(message).fadeIn();

                setTimeout(function() {
                    $(messageDiv).fadeOut();
                }, 3000);
            }

            // Suppression d'un rapport
            $(document).on('click', '.remove-report', function() {
                $(this).closest('.report-item').remove();
            });

            $('#newReportForm').on('submit', function(e) {
                e.preventDefault();

                $('select:disabled').prop('disabled', false);

                let form = $(this);
                let url = form.attr('action');
                let method = form.attr('method');
                let formData = form.serialize();

                $.ajax({
                    url: url,
                    method: method,
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            showMessage('success', response.message);

                            $('#reportContainer input[type="text"]').val('');
                            $('#reportContainer textarea').val('');
                            $('#reportContainer select').each(function() {
                                $(this).val('').trigger('change');
                            });
                            $('#reportContainer .report-item').remove();


                        } else {
                            showMessage('error', response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorMessages = Object.values(errors).flat().join('<br>');
                            showMessage('error', errorMessages);
                        } else {
                            showMessage('error',
                                'Une erreur s\'est produite lors de la soumission du formulaire.'
                                );
                        }
                    }
                });
            });


            $(document).ready(function() {
                let today = new Date().toISOString().split('T')[0];
                $('#date').val(today);
            });
        });
    </script>
@endsection