GestionDemandeConge/client-connexion/src/components/NewLeaveRequestForm.jsx

import React, { useState, useEffect } from 'react';
import './NewLeaveRequestForm.css';

export default function NewLeaveRequestForm({ startDate, endDate, onClose, availableLeaveCounters, userId }) {
    const [leaveType, setLeaveType] = useState('CP');
    const [formStartDate, setFormStartDate] = useState('');
    const [formEndDate, setFormEndDate] = useState('');
    const [comment, setComment] = useState('');
    const [numDays, setNumDays] = useState('');
    const [error, setError] = useState('');

    const formatLocalDateToYYYYMMDD = (dateObject) => {
        if (!dateObject) return '';
        const year = dateObject.getFullYear();
        const month = (dateObject.getMonth() + 1).toString().padStart(2, '0');
        const day = dateObject.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
    };

    useEffect(() => {
        if (startDate) {
            setFormStartDate(formatLocalDateToYYYYMMDD(startDate));
        }
        if (endDate) {
            setFormEndDate(formatLocalDateToYYYYMMDD(endDate));
        } else if (startDate) {
            setFormEndDate(formatLocalDateToYYYYMMDD(startDate));
        }
    }, [startDate, endDate]);

    useEffect(() => {
        if (formStartDate && formEndDate) {
            const start = new Date(formStartDate);
            const end = new Date(formEndDate);

            if (end < start) {
                setError("La date de fin ne peut pas être antérieure à la date de début.");
                setNumDays('');
                return;
            }

            let totalWorkingDays = 0;
            let currentDate = new Date(start);

            while (currentDate <= end) {
                const dayOfWeek = currentDate.getDay();
                if (dayOfWeek !== 0 && dayOfWeek !== 6) {
                    totalWorkingDays++;
                }
                currentDate.setDate(currentDate.getDate() + 1);
            }

            setNumDays(totalWorkingDays);
            setError('');
        } else {
            setNumDays('');
            setError('');
        }
    }, [formStartDate, formEndDate]);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');

        if (!formStartDate || !formEndDate) {
            setError("Veuillez sélectionner les dates de début et de fin.");
            return;
        }

        const start = new Date(formStartDate);
        const end = new Date(formEndDate);
        if (end < start) {
            setError("La date de fin ne peut pas être antérieure à la date de début.");
            return;
        }

        if (isNaN(numDays) || numDays <= 0) {
            setError("Le nombre de jours demandés doit être un nombre positif.");
            return;
        }

        let hasEnoughDays = true;
        let errorMessage = '';

        switch (leaveType) {
            case 'CP':
                if (numDays > availableLeaveCounters.availableCP) {
                    hasEnoughDays = false;
                    errorMessage = `Vous n'avez pas assez de jours de Congé Payé. Il vous reste ${availableLeaveCounters.availableCP} jours.`;
                }
                break;
            case 'RTT':
                if (numDays > availableLeaveCounters.availableRTT) {
                    hasEnoughDays = false;
                    errorMessage = `Vous n'avez pas assez de jours de RTT. Il vous reste ${availableLeaveCounters.availableRTT} jours.`;
                }
                break;
            case 'ABS':
                if (numDays > availableLeaveCounters.availableABS) {
                    hasEnoughDays = false;
                    errorMessage = `Vous n'avez pas assez de jours d'Absence (Maladie). Il vous reste ${availableLeaveCounters.availableABS} jours.`;
                }
                break;
            default:
                errorMessage = "Type de congé inconnu.";
                hasEnoughDays = false;
        }

        if (!hasEnoughDays) {
            setError(errorMessage);
            return;
        }

      

        const payload = {
            EmployeeId: userId,
            TypeConge: leaveType,
            DateDebut: formStartDate,
            DateFin: formEndDate,
            Commentaire: comment,
            NumDays: numDays
        };

        console.log("Payload envoyé au backend :", payload);

        try {
            const response = await fetch('http://localhost/GestionDemandeCongeV1/api/submitLeaveRequest.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            });

            const text = await response.text();
            console.log('Réponse brute du serveur :', text);

            try {
                const data = JSON.parse(text);

                if (data.success) {
                    alert('Demande de congé soumise avec succès et en attente de validation par le manager !');
                    setLeaveType('CP');
                    setFormStartDate('');
                    setFormEndDate('');
                    setComment('');
                    setNumDays('');
                    if (onClose) {
                        onClose();
                    }
                } else {
                    setError(data.message || "Erreur lors de la soumission de la demande.");
                }

            } catch (jsonError) {
                console.error("Réponse invalide (pas du JSON) :", text);
                setError("Réponse du serveur invalide. Consulte la console pour plus de détails.");
            }

        } catch (error) {
            console.error('Erreur réseau ou du serveur lors de la soumission:', error);
            setError("Erreur de connexion au serveur. Veuillez vérifier que le serveur est démarré.");
        }
    };

    return (
        <div className="new-leave-request-form">
            <button className="close-button" onClick={onClose}>&times;</button>
            <h2 className="form-title">Nouvelle demande de congé</h2>
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="leaveType">Type de congés</label>
                    <select
                        id="leaveType"
                        value={leaveType}
                        onChange={(e) => setLeaveType(e.target.value)}
                    >
                        <option value="CP">CP</option>
                        <option value="RTT">RTT</option>
                        <option value="ABS">ABS</option>
                    </select>
                </div>

                <div className="form-group date-group">
                    <div>
                        <label htmlFor="formStartDate">Date de début</label>
                        <input
                            type="date"
                            id="formStartDate"
                            value={formStartDate}
                            onChange={(e) => setFormStartDate(e.target.value)}
                            required
                        />
                    </div>
                    <div>
                        <label htmlFor="formEndDate">Date de fin</label>
                        <input
                            type="date"
                            id="formEndDate"
                            value={formEndDate}
                            onChange={(e) => setFormEndDate(e.target.value)}
                            required
                        />
                    </div>
                </div>

                {error && <p className="error-message">{error}</p>}

                <div className="form-group">
                    <label htmlFor="comment">Commentaire</label>
                    <textarea
                        id="comment"
                        rows="4"
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                    ></textarea>
                </div>

                <div className="form-group num-days-group">
                    <label htmlFor="numDays">Nombre de jours demandés</label>
                    <input
                        type="number"
                        id="numDays"
                        value={numDays}
                        readOnly
                        disabled={!formStartDate || !formEndDate}
                    />
                </div>

                <button type="submit" className="validate-button">Valider</button>
            </form>
        </div>
    );
}