Embed

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planning JP</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&family=Poppins:wght@300;400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --vm-dark:#0a2240;--vm-accent:#2f80c0;--vm-light:#e8f3fc;--vm-mid:#1a3d6e;
  --mo-dark:#0d1b2a;--mo-accent:#4a9bb5;
  --white:#ffffff;--bg:#f2f5f8;--border:#dde6ea;--muted:#7a9aaa;
  --green:#1a7a4a;--green-bg:#eaf7f0;--orange:#b06a00;--orange-bg:#fff8ec;
  --red:#a01c1c;--red-bg:#fdf0f0;--header-bg:#08111d;
}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:#0d1b2a;min-height:100vh}
.header{background:var(--header-bg);padding:1.1rem 1.4rem;display:flex;align-items:center;justify-content:space-between}
.header-title{font-family:'Roboto',sans-serif;font-weight:900;font-size:1rem;color:white;letter-spacing:.02em}
.header-societes{display:flex;gap:.5rem;margin-top:.35rem}
.pill-societe{font-size:.62rem;font-weight:600;padding:.12rem .5rem;letter-spacing:.05em;border-radius:20px}
.pill-vm{background:var(--vm-accent);color:white}
.pill-mo{background:var(--mo-accent);color:white}
.badge-tri{background:rgba(255,255,255,.12);color:white;font-family:'Roboto',sans-serif;font-weight:700;font-size:1rem;padding:.3rem .8rem;letter-spacing:.1em;border-radius:4px}
.nav-semaine{background:#0f1e30;padding:.7rem 1.4rem;display:flex;align-items:center;justify-content:space-between}
.nav-btn{background:transparent;border:1.5px solid rgba(255,255,255,.25);color:white;width:30px;height:30px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .2s;border-radius:2px;font-family:inherit}
.nav-btn:hover{background:rgba(255,255,255,.1);border-color:white}
.nav-label{font-family:'Roboto',sans-serif;font-weight:700;font-size:.78rem;color:white;letter-spacing:.05em;text-transform:uppercase}
.grille-semaine{display:grid;grid-template-columns:repeat(7,1fr);background:var(--white);border-bottom:2px solid var(--border)}
.jour-cell{padding:.6rem .2rem .5rem;text-align:center;cursor:pointer;border-right:1px solid var(--border);transition:background .15s}
.jour-cell:last-child{border-right:none}
.jour-cell:hover{background:#f0f6fa}
.jour-cell.actif{background:var(--header-bg)}
.jour-cell.actif .jour-nom,.jour-cell.actif .jour-num{color:white}
.jour-cell.aujourd{border-top:3px solid #5aabdf}
.jour-nom{font-size:.55rem;font-weight:600;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.jour-num{font-family:'Roboto',sans-serif;font-size:1.2rem;font-weight:700;color:#0d1b2a;line-height:1.2;margin-top:.05rem}
.jour-dots{display:flex;justify-content:center;gap:2px;margin-top:.28rem;min-height:7px;flex-wrap:wrap}
.dot{width:5px;height:5px;border-radius:50%}
.dot-vm{background:var(--vm-accent)}.dot-mo{background:var(--mo-accent)}
.resume-semaine{padding:.55rem 1rem;background:#f7fafc;border-bottom:1px solid var(--border);display:flex;gap:1rem;align-items:center;font-size:.72rem;color:var(--muted);flex-wrap:wrap}
.resume-item{display:flex;align-items:center;gap:.3rem}
.resume-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.contenu{padding:1rem 1rem 3rem;max-width:700px;margin:0 auto}
.date-titre{font-family:'Roboto',sans-serif;font-weight:900;font-size:1.05rem;color:#0d1b2a;margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.03em}
.banniere-societe{padding:.45rem 1rem;font-family:'Roboto',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:.6rem;margin-top:.2rem;border-radius:2px}
.banniere-vm{background:var(--vm-dark);color:rgba(255,255,255,.9)}
.banniere-mo{background:var(--mo-dark);color:rgba(255,255,255,.9)}
.tour-carte{background:var(--white);border:1px solid var(--border);margin-bottom:.8rem;overflow:hidden;border-radius:2px}
.tour-carte.vm{border-left:4px solid var(--vm-accent)}.tour-carte.mo{border-left:4px solid var(--mo-accent)}
.tour-carte.slot-M{border-top:2px solid #1a7a4a}.tour-carte.slot-MD{border-top:2px solid #b06a00}
.tour-carte.slot-S{border-top:2px solid #7b3fa0}.tour-carte.slot-A{border-top:2px solid #b06a00}
.tour-header{padding:.7rem .9rem;display:flex;align-items:center;justify-content:space-between;background:#f7fafc;border-bottom:1px solid var(--border)}
.tour-label{font-family:'Roboto',sans-serif;font-weight:700;font-size:.86rem;color:#0d1b2a}
.tour-horaire{font-size:.7rem;color:var(--muted);font-weight:500}
.tour-equipe{padding:.5rem .9rem;display:flex;gap:1.2rem;font-size:.69rem;color:rgba(255,255,255,.65);flex-wrap:wrap}
.tour-equipe.vm{background:var(--vm-dark)}.tour-equipe.mo{background:var(--mo-dark)}
.equipe-item strong{color:white;font-weight:600}
.tour-stats{padding:.5rem .9rem;display:flex;gap:.9rem;border-bottom:1px solid var(--border);font-size:.7rem;color:var(--muted);align-items:center;flex-wrap:wrap}
.encaissement{padding:.55rem .9rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.encaissement.due{background:var(--orange-bg)}.encaissement.zero{background:var(--green-bg)}
.encaissement-label{font-size:.69rem;font-weight:600;letter-spacing:.02em}
.encaissement.due .encaissement-label{color:var(--orange)}.encaissement.zero .encaissement-label{color:var(--green)}
.encaissement-montant{font-family:'Roboto',sans-serif;font-weight:700;font-size:1rem}
.encaissement.due .encaissement-montant{color:var(--orange)}.encaissement.zero .encaissement-montant{color:var(--green)}
.client-item{padding:.6rem .9rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.2rem}
.client-item:last-child{border-bottom:none}
.client-nom{font-weight:600;font-size:.8rem;color:#0d1b2a}
.client-ligne{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.client-info{font-size:.68rem;color:var(--muted)}
.client-tel{font-size:.68rem;color:var(--vm-accent);font-weight:500}
.client-tel a{color:inherit;text-decoration:none}
.badge{font-size:.63rem;font-weight:600;padding:.1rem .4rem;white-space:nowrap;border-radius:2px}
.badge-esp{background:var(--orange-bg);color:var(--orange)}.badge-ok{background:var(--green-bg);color:var(--green)}
.badge-tour{background:var(--vm-light);color:var(--vm-mid)}
.badge-eau-oui{background:var(--green-bg);color:var(--green);font-size:.63rem;font-weight:600;padding:.1rem .4rem}
.badge-eau-non{background:var(--red-bg);color:var(--red);font-size:.63rem;font-weight:600;padding:.1rem .4rem}
.client-rmq{font-size:.66rem;color:var(--red);font-style:italic}
.vide{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:.82rem;font-style:italic}
.vide .emoji{font-size:2rem;display:block;margin-bottom:.5rem}
.loading{text-align:center;padding:1.5rem;color:var(--muted);font-size:.8rem}
.spinner{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--vm-accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto .7rem}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:400px){.jour-num{font-size:1rem}.contenu{padding:.8rem .6rem 3rem}}
</style>
</head>
<body>
<div class="header">
  <div class="header-left">
    <div class="header-title">&#128197; Mon Planning</div>
    <div class="header-societes">
      <span class="pill-societe pill-vm">&#9971; Voila Moorea</span>
      <span class="pill-societe pill-mo">&#128011; Mori Ora</span>
    </div>
  </div>
  <div class="badge-tri">JP</div>
</div>
<div class="nav-semaine">
  <button class="nav-btn" id="btnPrev">&#8249;</button>
  <span class="nav-label" id="labelSemaine">&mdash;</span>
  <button class="nav-btn" id="btnNext">&#8250;</button>
</div>
<div class="grille-semaine" id="grilleSemaine">
  <div class="loading" style="grid-column:1/-1"><div class="spinner"></div></div>
</div>
<div class="resume-semaine" id="resumeSemaine" style="display:none">
  <span class="resume-item"><span class="resume-dot" style="background:var(--vm-accent)"></span><span id="resumeVM">&mdash;</span></span>
  <span class="resume-item"><span class="resume-dot" style="background:var(--mo-accent)"></span><span id="resumeMO">&mdash;</span></span>
</div>
<div class="contenu" id="contenu">
  <div class="loading"><div class="spinner"></div>Chargement...</div>
</div>
<script>
(function() {
var API_VM =  + api_vm + ;
var API_MO =  + api_mo + ;
var TRIGRAMME =  + prenom + ;
var lundiCourant = getLundi(new Date());
var dateSelectee = formatDate(new Date());
var dataVM = null, dataMO = null;
var JOURS_FR = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
var MOIS_FR = ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];

document.getElementById('btnPrev').addEventListener('click', function() { changerSemaine(-1); });
document.getElementById('btnNext').addEventListener('click', function() { changerSemaine(1); });

chargerSemaine();

function changerSemaine(delta) {
  lundiCourant = new Date(lundiCourant);
  lundiCourant.setDate(lundiCourant.getDate() + delta * 7);
  chargerSemaine();
}

function chargerSemaine() {
  var lundiStr = formatDate(lundiCourant);
  var dim = new Date(lundiCourant); dim.setDate(dim.getDate() + 6);
  document.getElementById('labelSemaine').textContent =
    lundiCourant.getDate() + ' ' + MOIS_FR[lundiCourant.getMonth()]
    + ' – ' + dim.getDate() + ' ' + MOIS_FR[dim.getMonth()] + ' ' + dim.getFullYear();
  document.getElementById('grilleSemaine').innerHTML = '<div class="loading" style="grid-column:1/-1"><div class="spinner"></div></div>';
  document.getElementById('resumeSemaine').style.display = 'none';
  dataVM = null; dataMO = null;
  Promise.all([
    fetch(API_VM + '?action=semaine&id=' + encodeURIComponent(TRIGRAMME) + '&lundi=' + lundiStr).then(function(r){return r.json();}).catch(function(){return {jours:[]};}),
    fetch(API_MO + '?action=semaine&id=' + encodeURIComponent(TRIGRAMME) + '&lundi=' + lundiStr).then(function(r){return r.json();}).catch(function(){return {jours:[]};})
  ]).then(function(res) {
    dataVM = res[0]; dataMO = res[1];
    renderGrille();
    var auj = formatDate(new Date());
    var dates = fusionnerJours(dataVM, dataMO).map(function(j) { return j.date; });
    dateSelectee = dates.indexOf(auj) !== -1 ? auj : lundiStr;
    chargerJour(dateSelectee);
  });
}

function fusionnerJours(vm, mo) {
  var iVM = {}, iMO = {};
  ((vm && vm.jours) ? vm.jours : []).forEach(function(j) { iVM[j.date] = j.tours || []; });
  ((mo && mo.jours) ? mo.jours : []).forEach(function(j) { iMO[j.date] = j.tours || []; });
  var jours = [];
  for (var i = 0; i < 7; i++) {
    var d = new Date(lundiCourant); d.setDate(lundiCourant.getDate() + i);
    var ds = formatDate(d);
    jours.push({ date: ds, toursVM: iVM[ds] || [], toursMO: iMO[ds] || [] });
  }
  return jours;
}

function renderGrille() {
  var auj = formatDate(new Date()), jours = fusionnerJours(dataVM, dataMO), html = '', tVM = 0, tMO = 0;
  jours.forEach(function(jour, i) {
    var d = parseDate(jour.date), dots = '';
    jour.toursVM.forEach(function() { dots += '<div class="dot dot-vm"></div>'; tVM++; });
    jour.toursMO.forEach(function() { dots += '<div class="dot dot-mo"></div>'; tMO++; });
    var cls = (jour.date === auj ? ' aujourd' : '') + (jour.date === dateSelectee ? ' actif' : '');
    html += '<div class="jour-cell' + cls + '" data-date="' + jour.date + '">'
      + '<div class="jour-nom">' + JOURS_FR[i] + '</div>'
      + '<div class="jour-num">' + d.getDate() + '</div>'
      + '<div class="jour-dots">' + dots + '</div></div>';
  });
  document.getElementById('grilleSemaine').innerHTML = html;
  document.querySelectorAll('.jour-cell').forEach(function(cell) {
    cell.addEventListener('click', function() { selectionnerJour(this.getAttribute('data-date')); });
  });
  document.getElementById('resumeSemaine').style.display = 'flex';
  document.getElementById('resumeVM').textContent = tVM > 0 ? tVM + ' tour(s) Voila Moorea' : 'Pas de tour Voila Moorea';
  document.getElementById('resumeMO').textContent = tMO > 0 ? tMO + ' tour(s) Mori Ora' : 'Pas de tour Mori Ora';
}

function selectionnerJour(ds) {
  dateSelectee = ds;
  document.querySelectorAll('.jour-cell').forEach(function(cell) {
    cell.classList.toggle('actif', cell.getAttribute('data-date') === ds);
  });
  chargerJour(ds);
}

function chargerJour(ds) {
  document.getElementById('contenu').innerHTML = '<div class="loading"><div class="spinner"></div>Chargement...</div>';
  Promise.all([
    fetch(API_VM + '?action=jour&id=' + encodeURIComponent(TRIGRAMME) + '&date=' + ds).then(function(r){return r.json();}).catch(function(){return {tours:[]};}),
    fetch(API_MO + '?action=jour&id=' + encodeURIComponent(TRIGRAMME) + '&date=' + ds).then(function(r){return r.json();}).catch(function(){return {tours:[]};})
  ]).then(function(res) { renderJour(ds, res[0], res[1]); });
}

function renderJour(ds, jVM, jMO) {
  var d = parseDate(ds);
  var titre = JOURS_FR[d.getDay() === 0 ? 6 : d.getDay() - 1] + ' ' + d.getDate() + ' ' + MOIS_FR[d.getMonth()] + ' ' + d.getFullYear();
  var html = '<div class="date-titre">' + titre + '</div>';
  var tVM = (jVM && jVM.tours) ? jVM.tours : [];
  var tMO = (jMO && jMO.tours) ? jMO.tours : [];
  if (tVM.length === 0 && tMO.length === 0) {
    html += '<div class="vide"><span class="emoji">&#127754;</span>Pas de tour ce jour-là</div>';
    document.getElementById('contenu').innerHTML = html; return;
  }
  if (tVM.length > 0) {
    html += '<div class="banniere-societe banniere-vm">&#9971; Voila Moorea</div>';
    tVM.forEach(function(t) { html += renderTourVM(t); });
  }
  if (tMO.length > 0) {
    if (tVM.length > 0) html += '<div style="margin-top:.4rem"></div>';
    html += '<div class="banniere-societe banniere-mo">&#128011; Mori Ora</div>';
    tMO.forEach(function(t) { html += renderTourMO(t); });
  }
  document.getElementById('contenu').innerHTML = html;
}

function renderTourVM(tour) {
  var labels = { M: '&#127749; Matin', MD: '&#9728; Après-midi', S: '&#127751; Sunset' };
  var label = labels[tour.slot] || tour.slot;
  var hFin = tour.heureFin === 'sunset' ? 'coucher du soleil' : (tour.heureFin || '');
  var horaire = tour.heure + (hFin ? ' – ' + hFin : '');
  var capNom = tour.role === 'Capitaine' ? 'Moi (' + TRIGRAMME + ')' : (tour.collegue || '—');
  var guideNom = tour.role === 'Guide' ? 'Moi (' + TRIGRAMME + ')' : (tour.collegue || '');
  var totalEsp = 0;
  if (tour.clients) tour.clients.forEach(function(c) { totalEsp += (c.esp || 0); });
  var hasEsp = totalEsp > 0;
  var html = '<div class="tour-carte vm slot-' + tour.slot + '">';
  html += '<div class="tour-header"><div class="tour-label">' + label + '</div><div class="tour-horaire">&#9200; ' + horaire + '</div></div>';
  html += '<div class="tour-equipe vm"><div class="equipe-item">&#9875; Capitaine : <strong>' + capNom + '</strong></div>';
  if (guideNom) html += '<div class="equipe-item">&#129517; Guide : <strong>' + guideNom + '</strong></div>';
  html += '</div>';
  html += '<div class="tour-stats"><div>&#128101; <strong>' + (tour.totalPax || 0) + '</strong> pax</div><div>&#127915; <strong>' + (tour.clients ? tour.clients.length : 0) + '</strong> rés.</div></div>';
  html += '<div class="encaissement ' + (hasEsp ? 'due' : 'zero') + '"><div class="encaissement-label">&#128181; ' + (hasEsp ? 'À encaisser' : 'Aucun encaissement') + '</div><div class="encaissement-montant">' + (hasEsp ? totalEsp.toLocaleString('fr-FR') + ' XPF' : '&#10003; 0 XPF') + '</div></div>';
  if (tour.clients && tour.clients.length > 0) {
    tour.clients.forEach(function(c) {
      var tb = c.tourType ? c.tourType.replace('CL', '') : '';
      html += '<div class="client-item"><div class="client-nom">' + (c.nom || '—') + '</div>';
      html += '<div class="client-ligne">';
      if (c.hotel) html += '<span class="client-info">&#127968; ' + c.hotel + '</span>';
      html += '<span class="client-info">&#128101; ' + c.pax + ' pax</span>';
      if (tb) html += '<span class="badge badge-tour">' + tb + '</span>';
      if (c.partenaire && c.partenaire !== 'DIRECT') html += '<span class="client-info">&#129309; ' + c.partenaire + '</span>';
      html += '</div><div class="client-ligne">';
      if (c.tel) html += '<span class="client-tel">&#128241; <a href="tel:' + c.tel + '">' + c.tel + '</a></span>';
      html += '<span class="badge ' + (c.esp > 0 ? 'badge-esp' : 'badge-ok') + '">' + (c.esp > 0 ? '&#128181; ' + c.esp.toLocaleString('fr-FR') + ' XPF' : '&#10003; Réglé') + '</span>';
      html += '</div>';
      if (c.rmq) html += '<div class="client-rmq">&#9888; ' + c.rmq + '</div>';
      html += '</div>';
    });
  } else {
    html += '<div class="client-item" style="color:var(--muted);font-size:.75rem;font-style:italic">Aucun client enregistré</div>';
  }
  html += '</div>'; return html;
}

function renderTourMO(tour) {
  var isMatin = tour.slot === 'M';
  var label = isMatin ? '&#127749; Matin' : '&#9728; Après-midi';
  var slotCls = isMatin ? 'slot-M' : 'slot-A';
  var capNom = tour.role === 'Capitaine' ? 'Moi (' + TRIGRAMME + ')' : (tour.collegue || '—');
  var guideNom = tour.role === 'Guide' ? 'Moi (' + TRIGRAMME + ')' : (tour.collegue || '—');
  var totalDu = 0;
  if (tour.clients) tour.clients.forEach(function(c) { totalDu += (c.resteAPayer || 0); });
  var hasEsp = totalDu > 0;
  var html = '<div class="tour-carte mo ' + slotCls + '">';
  html += '<div class="tour-header"><div class="tour-label">' + label + '</div><div class="tour-horaire">&#9200; ' + tour.heure + '</div></div>';
  html += '<div class="tour-equipe mo"><div class="equipe-item">&#127894; Capitaine : <strong>' + capNom + '</strong></div><div class="equipe-item">&#129517; Guide : <strong>' + guideNom + '</strong></div></div>';
  html += '<div class="tour-stats"><div>&#129344; <strong>' + (tour.totalNag || 0) + '</strong> nageur(s)</div><div>&#128065; <strong>' + (tour.totalObs || 0) + '</strong> obs.</div><span class="' + (tour.miseALeau ? 'badge-eau-oui' : 'badge-eau-non') + '">' + (tour.miseALeau ? '&#10003; Mise à l'eau' : '&#10007; Observation') + '</span></div>';
  html += '<div class="encaissement ' + (hasEsp ? 'due' : 'zero') + '"><div class="encaissement-label">&#128181; ' + (hasEsp ? 'À encaisser' : 'Tout est réglé') + '</div><div class="encaissement-montant">' + (hasEsp ? totalDu.toLocaleString('fr-FR') + ' XPF' : '&#10003; 0 XPF') + '</div></div>';
  if (tour.clients && tour.clients.length > 0) {
    tour.clients.forEach(function(c) {
      var paiTxt = c.toutPaye ? '&#10003; Payé' : '&#9888; ' + (c.resteAPayer || 0).toLocaleString('fr-FR') + ' XPF';
      html += '<div class="client-item"><div class="client-nom">' + (c.nom || '—') + '</div>';
      html += '<div class="client-ligne"><span class="client-info">&#129344; ' + c.nageurs + ' · &#128065; ' + c.obs + '</span>';
      if (c.tel) html += '<span class="client-tel">&#128241; <a href="tel:' + c.tel + '">' + c.tel + '</a></span>';
      html += '<span class="badge ' + (c.toutPaye ? 'badge-ok' : 'badge-esp') + '">' + paiTxt + '</span></div></div>';
    });
  } else {
    html += '<div class="client-item" style="color:var(--muted);font-size:.75rem;font-style:italic">Aucun client enregistré</div>';
  }
  html += '</div>'; return html;
}

function getLundi(date) {
  var d = new Date(date), j = d.getDay();
  d.setDate(d.getDate() + (j === 0 ? -6 : 1 - j)); d.setHours(0,0,0,0); return d;
}
function formatDate(date) {
  return date.getFullYear() + '-' + String(date.getMonth()+1).padStart(2,'0') + '-' + String(date.getDate()).padStart(2,'0');
}
function parseDate(str) {
  var p = str.split('-'); return new Date(parseInt(p[0]), parseInt(p[1])-1, parseInt(p[2]));
}
})();
</script>
</body>
</html>