function MainComponent() { const [services, setServices] = React.useState([]); const [selectedService, setSelectedService] = React.useState(""); const [clientForm, setClientForm] = React.useState({ name: "", phone: "", email: "", address: "", complement: "", comment: "" }); const [showAvailabilities, setShowAvailabilities] = React.useState(false); const [availabilities, setAvailabilities] = React.useState([]); const [loadingAvailabilities, setLoadingAvailabilities] = React.useState(false); const [error, setError] = React.useState(null); const [address, setAddress] = React.useState(""); const [addressSuggestions, setAddressSuggestions] = React.useState([]); const [addressLoading, setAddressLoading] = React.useState(false); const [calendarAvailabilities, setCalendarAvailabilities] = React.useState([]); const [calendarLoading, setCalendarLoading] = React.useState(false); const [calendarError, setCalendarError] = React.useState(null); const [calendarStartDate, setCalendarStartDate] = React.useState(()=>{ // Toujours initialiser avec la date du jour au format YYYY-MM-DD const today = new Date(); const year = today.getFullYear(); const month = String(today.getMonth() + 1).padStart(2, "0"); const day = String(today.getDate()).padStart(2, "0"); return `${year}-${month}-${day}`; }); const [calendarDisplayDays, setCalendarDisplayDays] = React.useState(5); const [companySettings, setCompanySettings] = React.useState(null); const [bookingSuccess, setBookingSuccess] = React.useState(false); const [calendarPage, setCalendarPage] = React.useState(0); const [confirmedAppointment, setConfirmedAppointment] = React.useState(null); const availabilitiesRef = React.useRef(null); const calendarRef = React.useRef(null); const calendarContentRef = React.useRef(null); const [showMenu, setShowMenu] = React.useState(false); React.useEffect(()=>{ const fetchSettings = async ()=>{ try { const response = await fetch("/api/getcompanysettings", { method: "POST" }); if (!response.ok) { throw new Error("Erreur lors de la récupération des paramètres"); } const data = await response.json(); setCompanySettings(data.settings || data); // Correction pour l'affichage des services sur mobile if (data.settings && data.settings.services) { // Utiliser les services depuis data.settings console.log("Services récupérés depuis settings:", data.settings.services); setServices(data.settings.services); localStorage.setItem("services", JSON.stringify(data.settings.services)); } else if (data.services) { // Fallback sur data.services si data.settings n'existe pas console.log("Services récupérés depuis data:", data.services); setServices(data.services); localStorage.setItem("services", JSON.stringify(data.services)); } else { console.warn("Aucun service trouvé dans les paramètres"); // Essayer de récupérer depuis le localStorage comme fallback const storedServices = localStorage.getItem("services"); if (storedServices) { try { const parsedServices = JSON.parse(storedServices); setServices(parsedServices); console.log("Services récupérés du localStorage:", parsedServices); } catch (parseError) { console.error("Erreur lors du parsing des services stockés:", parseError); setDefaultServices(); } } else { setDefaultServices(); } } if (data.settings && data.settings.display_days) { setCalendarDisplayDays(Number(data.settings.display_days)); localStorage.setItem("displayDays", data.settings.display_days); } else if (data.display_days) { setCalendarDisplayDays(Number(data.display_days)); localStorage.setItem("displayDays", data.display_days); } if (data.settings && data.settings.special_days) { localStorage.setItem("specialDays", data.settings.special_days); } else if (data.special_days) { localStorage.setItem("specialDays", data.special_days); } } catch (e) { console.error("Erreur lors de la récupération des paramètres:", e); // Essayer de récupérer depuis le localStorage comme fallback const storedServices = localStorage.getItem("services"); if (storedServices) { try { const parsedServices = JSON.parse(storedServices); setServices(parsedServices); console.log("Services récupérés du localStorage après erreur:", parsedServices); } catch (parseError) { console.error("Erreur lors du parsing des services stockés:", parseError); setDefaultServices(); } } else { setDefaultServices(); } } }; // Fonction pour définir les services par défaut const setDefaultServices = ()=>{ const defaultServices = [ { name: "Toilettage petit chien", price: 45 }, { name: "Toilettage moyen chien", price: 55 }, { name: "Toilettage grand chien", price: 65 } ]; setServices(defaultServices); localStorage.setItem("services", JSON.stringify(defaultServices)); console.log("Services par défaut définis:", defaultServices); }; fetchSettings(); }, []); React.useEffect(()=>{ try { const stored = localStorage.getItem("services"); if (stored) setServices(JSON.parse(stored)); } catch (e) {} }, []); const handleClientFormChange = (field, value)=>{ setClientForm((prev)=>({ ...prev, [field]: value })); }; // Fonction pour formater la date const formatDate = (dateString)=>{ const date = new Date(dateString); return date.toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long", year: "numeric" }); }; // Fonction pour formater l'heure const formatTime = (timeString)=>{ // Si le format est déjà HH:MM, on le retourne tel quel if (/^\d{1,2}:\d{2}(:\d{2})?$/.test(timeString)) { return timeString.substring(0, 5); // Garder seulement HH:MM } return timeString; }; const handleShowAvailabilities = ()=>{ setLoadingAvailabilities(true); setTimeout(()=>{ const formattedDate = calendarStartDate ? new Date(calendarStartDate).toLocaleDateString("fr-FR", { weekday: "short", day: "2-digit", month: "2-digit" }) : ""; setAvailabilities([ { time: "09:00", available: true, date: formattedDate }, { time: "10:00", available: false, date: formattedDate }, { time: "11:00", available: true, date: formattedDate }, { time: "14:00", available: true, date: formattedDate }, { time: "15:00", available: false, date: formattedDate }, { time: "16:00", available: true, date: formattedDate } ]); setShowAvailabilities(true); setLoadingAvailabilities(false); // Scroll vers le calendrier après affichage setTimeout(()=>{ if (calendarRef.current) { calendarRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); } }, 200); }, 1200); }; const handleShowCalendarAvailabilities = async (page = 0)=>{ if (!calendarStartDate) { setCalendarError("Veuillez sélectionner une date de début"); return; } setCalendarLoading(true); setCalendarError(null); setCalendarAvailabilities([]); // Calculer la nouvelle date de début en fonction de la page const startDate = new Date(calendarStartDate); const today = new Date(); today.setHours(0, 0, 0, 0); // Réinitialiser l'heure à minuit pour comparer uniquement les dates // Si la date de début est antérieure à aujourd'hui, utiliser aujourd'hui comme date de début if (startDate < today) { startDate.setTime(today.getTime()); } // Calculer la date de début effective en fonction de la page const effectiveStartDate = new Date(startDate); effectiveStartDate.setDate(effectiveStartDate.getDate() + page * calendarDisplayDays); const newStartDate = effectiveStartDate.toISOString().slice(0, 10); try { const response = await fetch("/api/calculer-disponibilites", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ startDate: newStartDate, nbDays: calendarDisplayDays, address: clientForm.address, service: selectedService }) }); if (!response.ok) { throw new Error(`Erreur: ${response.status} ${response.statusText}`); } const data = await response.json(); if (data.error) { setCalendarError(data.error); } else if (data.availability && Array.isArray(data.availability)) { setCalendarAvailabilities(data.availability); } else if (data.days && Array.isArray(data.days)) { setCalendarAvailabilities(data.days); } else { setCalendarError("Format de réponse incorrect"); } // Défilement vers le calendrier après son chargement setTimeout(()=>{ if (calendarRef.current) { calendarRef.current.scrollIntoView({ behavior: "smooth", block: "start" }); } }, 100); } catch (error) { console.error("Erreur lors du calcul des disponibilités:", error); setCalendarError("Erreur lors du calcul des disponibilités"); } finally{ setCalendarLoading(false); } }; const fetchAddressSuggestions = async (input)=>{ if (!input || input.length < 3) { setAddressSuggestions([]); return; } setAddressLoading(true); try { const response = await fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${encodeURIComponent(input)}&radius=500`, { method: "GET" }); if (!response.ok) throw new Error("Erreur lors de la récupération des suggestions"); const data = await response.json(); setAddressSuggestions(data.predictions || []); } catch (e) { setAddressSuggestions([]); console.error(e); } finally{ setAddressLoading(false); } }; const bookAppointment = async (time, date)=>{ try { console.log("🎯 Tentative de réservation:", { time, date, selectedService, clientForm }); // Validation des champs obligatoires if (!selectedService || !clientForm.name || !clientForm.phone || !clientForm.email || !clientForm.address) { setError("Merci de remplir tous les champs obligatoires."); return; } // Utiliser la date fournie ou celle du calendrier const appointmentDate = date || calendarStartDate; // Vérifier que nous avons une date valide if (!appointmentDate) { setError("Date de rendez-vous manquante."); return; } console.log("📅 Date de rendez-vous:", appointmentDate); console.log("⏰ Heure de rendez-vous:", time); const requestBody = { name: clientForm.name.trim(), phone: clientForm.phone.trim(), email: clientForm.email.trim(), address: clientForm.address.trim(), service: selectedService, appointment_date: appointmentDate, appointment_time: time, comment: clientForm.comment?.trim() || "", booking_source: "online_client" }; console.log("📤 Données envoyées:", requestBody); const response = await fetch("/api/ajouter-rdv-2", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(requestBody) }); console.log("📥 Réponse HTTP:", response.status, response.statusText); if (!response.ok) { const errorText = await response.text(); console.error("❌ Erreur HTTP:", errorText); throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}`); } const data = await response.json(); console.log("📋 Données de réponse:", data); if (data.success) { setError(null); setBookingSuccess(true); setConfirmedAppointment({ date: appointmentDate, time: time, service: selectedService }); // Réinitialiser le formulaire setClientForm({ name: "", phone: "", email: "", address: "", complement: "", comment: "" }); setAddress(""); setSelectedService(""); setShowAvailabilities(false); setCalendarAvailabilities([]); // Réinitialiser la date à aujourd'hui const today = new Date(); const year = today.getFullYear(); const month = String(today.getMonth() + 1).padStart(2, "0"); const day = String(today.getDate()).padStart(2, "0"); setCalendarStartDate(`${year}-${month}-${day}`); console.log("✅ Réservation réussie!"); } else { console.error("❌ Erreur de réservation:", data.error); setError(data.error || "Erreur lors de la réservation"); } } catch (e) { console.error("❌ Erreur complète:", e); setError(`Erreur lors de la réservation: ${e.message}`); } }; const navigateCalendar = (direction)=>{ let newPage = calendarPage; if (direction === "next") { newPage++; } else if (direction === "prev" && calendarPage > 0) { newPage--; } // Si on va vers la page précédente et qu'on est déjà à la page 0, on ne fait rien if (direction === "prev" && calendarPage === 0) { return; } setCalendarPage(newPage); handleShowCalendarAvailabilities(newPage); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex flex-col items-center font-roboto relative", __source: { fileName: "", lineNumber: 440, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 442, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 444, columnNumber: 9 }, __self: this }, companySettings?.company_logo && /*#__PURE__*/ React.createElement("img", { src: companySettings.company_logo, alt: "Logo de l'entreprise", className: "w-10 h-10 object-contain rounded", onError: (e)=>{ e.target.style.display = "none"; }, __source: { fileName: "", lineNumber: 446, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-center", __source: { fileName: "", lineNumber: 458, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-10", __source: { fileName: "", lineNumber: 463, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full relative bg-white", __source: { fileName: "", lineNumber: 467, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 468, columnNumber: 9 }, __self: this }, companySettings?.company_logo ? /*#__PURE__*/ React.createElement("img", { src: companySettings.company_logo, alt: `Logo ${companySettings.company_name || "de l'entreprise"}`, className: "w-full h-auto object-contain", style: { maxHeight: 400 }, __source: { fileName: "", lineNumber: 470, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/933a06aa-833c-4659-9f13-6c5dba4446f4/-/format/auto/", alt: "Logo Toilettage-Mobile", className: "w-full h-auto object-contain", style: { maxHeight: 400 }, __source: { fileName: "", lineNumber: 477, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mt-4", __source: { fileName: "", lineNumber: 485, columnNumber: 11 }, __self: this }, companySettings?.company_name || "Toilettage-Mobile"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-center mb-4", __source: { fileName: "", lineNumber: 489, columnNumber: 11 }, __self: this }, "Prise de rendez-vous en ligne"))), bookingSuccess ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-green-50 border border-green-500 text-green-700 px-4 py-3 rounded relative mb-6", __source: { fileName: "", lineNumber: 496, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 497, columnNumber: 11 }, __self: this }, "Rendez-vous confirmé !"), /*#__PURE__*/ React.createElement("p", { className: "text-base", __source: { fileName: "", lineNumber: 498, columnNumber: 11 }, __self: this }, "Votre rendez-vous a été enregistré avec succès."), confirmedAppointment && /*#__PURE__*/ React.createElement("div", { className: "mt-3 mb-3", __source: { fileName: "", lineNumber: 502, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 503, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, "Date :"), " ", new Date(confirmedAppointment.date).toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long", year: "numeric" })), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 515, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 516, columnNumber: 17 }, __self: this }, "Heure :"), " ", confirmedAppointment.time), confirmedAppointment.service && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 520, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 521, columnNumber: 19 }, __self: this }, "Service :"), " ", confirmedAppointment.service)), /*#__PURE__*/ React.createElement("p", { className: "text-base", __source: { fileName: "", lineNumber: 527, columnNumber: 11 }, __self: this }, "Un email de confirmation vous sera envoyé prochainement."), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex gap-3", __source: { fileName: "", lineNumber: 530, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex-1 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors", onClick: ()=>{ setBookingSuccess(false); setConfirmedAppointment(null); }, __source: { fileName: "", lineNumber: 531, columnNumber: 13 }, __self: this }, "Prendre un nouveau rendez-vous"))) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md flex flex-col gap-4 relative", __source: { fileName: "", lineNumber: 543, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white rounded shadow p-4 flex flex-col gap-3", onSubmit: (e)=>{ e.preventDefault(); handleShowAvailabilities(); handleShowCalendarAvailabilities(); }, __source: { fileName: "", lineNumber: 544, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 555, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 556, columnNumber: 15 }, __self: this }, companySettings?.race_placeholder || "Sélectionner un service"), /*#__PURE__*/ React.createElement("select", { className: "border rounded p-2 w-full bg-gray-50 appearance-none z-10 cursor-pointer", value: selectedService, onChange: (e)=>setSelectedService(e.target.value), required: true, name: "selectedService", __source: { fileName: "", lineNumber: 559, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 566, columnNumber: 17 }, __self: this }, "Choisir un service"), services && services.length > 0 ? services.map((s, idx)=>/*#__PURE__*/ React.createElement("option", { key: idx, value: s.name, __source: { fileName: "", lineNumber: 569, columnNumber: 21 }, __self: this }, s.name, " ", s.price ? `- ${s.price} €` : "")) : /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 574, columnNumber: 19 }, __self: this }, "Chargement des services...")), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700", style: { top: "32px" }, __source: { fileName: "", lineNumber: 579, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "fill-current h-4 w-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", __source: { fileName: "", lineNumber: 583, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z", __source: { fileName: "", lineNumber: 588, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2 w-full", placeholder: "Nom", value: clientForm.name, onChange: (e)=>handleClientFormChange("name", e.target.value), name: "name", required: true, __source: { fileName: "", lineNumber: 594, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2 w-full", placeholder: "Téléphone", value: clientForm.phone, onChange: (e)=>handleClientFormChange("phone", e.target.value), name: "phone", required: true, __source: { fileName: "", lineNumber: 602, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2 w-full", placeholder: "Email", type: "email", value: clientForm.email, onChange: (e)=>handleClientFormChange("email", e.target.value), name: "email", required: true, __source: { fileName: "", lineNumber: 610, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "address-input-container relative", __source: { fileName: "", lineNumber: 619, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2 w-full", placeholder: "Adresse", value: clientForm.address, onChange: (e)=>{ setAddress(e.target.value); handleClientFormChange("address", e.target.value); fetchAddressSuggestions(e.target.value); }, name: "address", required: true, autoComplete: "off", __source: { fileName: "", lineNumber: 620, columnNumber: 15 }, __self: this }), addressLoading && /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 634, columnNumber: 17 }, __self: this }, "Recherche..."), addressSuggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "border rounded bg-white shadow mt-1 z-50 absolute left-0 right-0 top-full", __source: { fileName: "", lineNumber: 637, columnNumber: 17 }, __self: this }, addressSuggestions.map((s, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "p-2 hover:bg-blue-100 cursor-pointer", onClick: ()=>{ setAddress(s.description); handleClientFormChange("address", s.description); setAddressSuggestions([]); }, __source: { fileName: "", lineNumber: 639, columnNumber: 21 }, __self: this }, s.description)))), /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2 w-full", placeholder: "Complément d'adresse (étage, digicode...)", value: clientForm.complement, onChange: (e)=>handleClientFormChange("complement", e.target.value), name: "complement", autoComplete: "off", __source: { fileName: "", lineNumber: 654, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "border rounded p-2 w-full min-h-[60px]", placeholder: "Commentaire (facultatif)", value: clientForm.comment || "", onChange: (e)=>handleClientFormChange("comment", e.target.value), name: "comment", autoComplete: "off", __source: { fileName: "", lineNumber: 664, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "calendarStartDate", className: "font-medium mb-1", __source: { fileName: "", lineNumber: 674, columnNumber: 13 }, __self: this }, "A partir de quelle date ?"), /*#__PURE__*/ React.createElement("input", { className: "border rounded p-2 w-full mt-0", type: "date", value: calendarStartDate, onChange: (e)=>setCalendarStartDate(e.target.value), name: "calendarStartDate", id: "calendarStartDate", required: true, __source: { fileName: "", lineNumber: 677, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white px-4 py-2 rounded font-semibold mt-2", disabled: loadingAvailabilities || calendarLoading, __source: { fileName: "", lineNumber: 686, columnNumber: 13 }, __self: this }, loadingAvailabilities || calendarLoading ? "Recherche..." : "Voir les disponibilités")), (showAvailabilities || calendarStartDate) && /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full bg-white rounded-lg shadow-md p-4", ref: calendarRef, __source: { fileName: "", lineNumber: 698, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 702, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 703, columnNumber: 17 }, __self: this }, "Calendrier des disponibilités"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 706, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateCalendar("prev"), className: "bg-gray-100 hover:bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center", "aria-label": "Période précédente", __source: { fileName: "", lineNumber: 707, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { "aria-hidden": "true", __source: { fileName: "", lineNumber: 712, columnNumber: 21 }, __self: this }, "←")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateCalendar("next"), className: "bg-gray-100 hover:bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center", "aria-label": "Période suivante", __source: { fileName: "", lineNumber: 714, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { "aria-hidden": "true", __source: { fileName: "", lineNumber: 719, columnNumber: 21 }, __self: this }, "→")))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", ref: calendarContentRef, __source: { fileName: "", lineNumber: 724, columnNumber: 15 }, __self: this }, calendarLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-blue-600 font-semibold py-8", __source: { fileName: "", lineNumber: 726, columnNumber: 19 }, __self: this }, "Calcul des créneaux en cours...") : calendarError ? /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center py-4", __source: { fileName: "", lineNumber: 730, columnNumber: 19 }, __self: this }, calendarError) : /*#__PURE__*/ React.createElement("table", { className: "min-w-full border-collapse table-fixed", __source: { fileName: "", lineNumber: 734, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 735, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 736, columnNumber: 23 }, __self: this }, calendarAvailabilities.map((day, idx)=>/*#__PURE__*/ React.createElement("th", { key: idx, className: "w-1/5 px-1 py-1 border-b border-white text-center font-bold bg-gray-100 text-xs", __source: { fileName: "", lineNumber: 738, columnNumber: 27 }, __self: this }, new Date(day.date).toLocaleDateString("fr-FR", { weekday: "short", day: "2-digit", month: "2-digit" }))))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 751, columnNumber: 21 }, __self: this }, (()=>{ const maxSlots = Math.max(...calendarAvailabilities.map((day)=>day.slots ? day.slots.length : 0)); return Array.from({ length: maxSlots }).map((_, rowIdx)=>/*#__PURE__*/ React.createElement("tr", { key: rowIdx, __source: { fileName: "", lineNumber: 760, columnNumber: 29 }, __self: this }, calendarAvailabilities.map((day, colIdx)=>{ const slot = day.slots && day.slots[rowIdx]; if (!slot) { return /*#__PURE__*/ React.createElement("td", { key: colIdx, className: "w-1/5 px-1 py-1 border border-white text-center bg-green-100", __source: { fileName: "", lineNumber: 765, columnNumber: 37 }, __self: this }); } return /*#__PURE__*/ React.createElement("td", { key: colIdx, className: "w-1/5 px-1 py-1 border border-white text-center cursor-pointer text-sm bg-green-100 hover:bg-green-200", onClick: ()=>bookAppointment(slot.time, day.date), __source: { fileName: "", lineNumber: 772, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 text-white px-1 py-1 rounded-full text-xs font-medium hover:bg-green-600 transition-colors", __source: { fileName: "", lineNumber: 779, columnNumber: 37 }, __self: this }, slot.time)); }))); })())))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mt-2", __source: { fileName: "", lineNumber: 795, columnNumber: 21 }, __self: this }, error)), companySettings && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8 bg-white rounded shadow p-4", __source: { fileName: "", lineNumber: 800, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 801, columnNumber: 11 }, __self: this }, "Informations de contact"), companySettings.company_name && /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 803, columnNumber: 13 }, __self: this }, companySettings.company_name), companySettings.company_phone && /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 806, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 807, columnNumber: 15 }, __self: this }, "Téléphone:"), " ", companySettings.company_phone), companySettings.company_hours && /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 812, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 813, columnNumber: 15 }, __self: this }, "Horaires:"), " ", companySettings.company_hours))); }