{# templates/pos/dash_saloon.html #}

<style>
.sln-live{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px 14px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.sln-live-title{font-weight:800;font-size:.82rem;color:#0f172a;display:flex;align-items:center;gap:6px}
.sln-live-pulse{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.6);animation:slnP 1.4s infinite}
@keyframes slnP{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
.sln-live-stat{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:#334155}
.sln-live-stat .ld{width:7px;height:7px;border-radius:50%}
.ld-pend{background:#f59e0b}.ld-conf{background:#22c55e}.ld-done{background:#3b82f6}
.sln-live-rev{margin-left:auto;font-size:.85rem;font-weight:800;color:#0056B8}
.sln-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin-bottom:10px}
.sk{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.sk::after{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;border-radius:10px 10px 0 0}
.sk.c1::after{background:#0056B8}.sk.c2::after{background:#22c55e}.sk.c3::after{background:#14b8a6}
.sk.c4::after{background:#8b5cf6}.sk.c5::after{background:#f59e0b}.sk.c6::after{background:#f43f5e}.sk.c7::after{background:#06b6d4}
.sk-top{display:flex;justify-content:space-between;align-items:flex-start}
.sk-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;background:#f1f5f9;color:#475569}
.sk-label{font-size:.62rem;font-weight:700;text-transform:uppercase;color:#94a3b8;letter-spacing:.3px}
.sk-val{font-size:1.15rem;font-weight:900;color:#0f172a;margin-top:1px}
.sk-sub{font-size:.65rem;color:#94a3b8;margin-top:1px}
.sln-chart-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.sln-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sln-chart-head h6{margin:0;font-weight:800;font-size:.85rem;color:#0f172a}
.sln-chart-head .range-lbl{font-size:.72rem;color:#94a3b8;font-weight:600}
.sln-chart-box{height:200px;position:relative}
.sln-chart-box canvas{width:100%!important;height:100%!important}
.sln-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:992px){.sln-grid{grid-template-columns:1fr}}
.sln-panel{background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.04);overflow:hidden}
.sln-panel-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #f1f5f9}
.sln-panel-head h6{margin:0;font-weight:800;font-size:.8rem;color:#0f172a}
.sln-panel-head .btn{font-size:.68rem;padding:2px 8px;border-radius:6px;font-weight:700}
.sln-up-list{max-height:250px;overflow-y:auto}
.sln-up-list::-webkit-scrollbar{width:3px}
.sln-up-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.up-row{display:flex;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid #f8fafc;font-size:.78rem}
.up-row:last-child{border-bottom:none}.up-row:hover{background:#f8fafc}.up-row.past{opacity:.4}
.up-tm{min-width:55px;text-align:center;background:#f1f5f9;border-radius:6px;padding:4px 2px}
.up-tm-v{font-weight:900;font-size:.75rem;color:#0056B8}.up-tm-d{font-size:.58rem;color:#94a3b8}
.up-nfo{flex:1;min-width:0}
.up-nfo-name{font-weight:700;color:#0f172a;font-size:.78rem}
.up-nfo-svc{font-size:.68rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-nfo-staff{font-size:.65rem;color:#94a3b8}
.up-rt{text-align:right;min-width:55px}
.up-rt-amt{font-weight:800;font-size:.78rem;color:#0f172a}
.up-bdg{display:inline-block;padding:1px 5px;border-radius:4px;font-size:.58rem;font-weight:800;margin-top:1px}
.up-bdg.pnd{background:#fef3c7;color:#92400e}.up-bdg.cnf{background:#dcfce7;color:#166534}
.sln-staff-tbl{width:100%;border-collapse:collapse;font-size:.78rem}
.sln-staff-tbl th{font-size:.62rem;font-weight:700;text-transform:uppercase;color:#94a3b8;padding:6px 10px;border-bottom:1px solid #e2e8f0}
.sln-staff-tbl td{padding:6px 10px;border-bottom:1px solid #f8fafc}
.sln-staff-tbl tr:hover{background:#f8fafc}
.stf-nm{font-weight:700;color:#0f172a}
.stf-bar{height:4px;border-radius:2px;background:#f1f5f9;margin-top:2px;overflow:hidden}
.stf-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#0056B8,#3b82f6)}
.svc-row{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid #f8fafc;font-size:.78rem}
.svc-row:last-child{border-bottom:none}
.svc-rk{font-weight:900;color:#0056B8;min-width:18px;font-size:.72rem}
.svc-nm{flex:1;font-weight:700;color:#0f172a}
.svc-ct{font-weight:700;color:#64748b;min-width:30px;text-align:right;font-size:.72rem}
.svc-rv{font-weight:800;color:#0f172a;min-width:60px;text-align:right}
.sln-pie-box{height:170px;position:relative}
.sln-pie-box canvas{width:100%!important;height:100%!important}
.sln-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px}
.sln-quick .btn{font-size:.72rem;padding:4px 10px;border-radius:8px;font-weight:700}

@media(max-width:992px){
  .sln-kpis, div[style*="repeat(7,1fr)"] { grid-template-columns: repeat(4,1fr) !important; }
}
@media(max-width:576px){
  .sln-kpis, div[style*="repeat(7,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
}
</style>

<div class="sln-live">
  <div class="sln-live-title"><span class="sln-live-pulse"></span> Today</div>
  <div class="sln-live-stat"><span class="ld ld-pend"></span> <span id="slTdPend">0</span> Pending</div>
  <div class="sln-live-stat"><span class="ld ld-conf"></span> <span id="slTdConf">0</span> Confirmed</div>
  <div class="sln-live-stat"><span class="ld ld-done"></span> <span id="slTdDone">0</span> Done</div>
  <div class="sln-live-stat" style="color:#94a3b8;"><span id="slTdRem">0</span> Remaining</div>
  <div class="sln-live-rev">Today: Rs. <span id="slTdRev">0</span></div>
</div>
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:10px;">
  <div class="sk c1"><div class="sk-top"><div><div class="sk-label">Bookings</div><div class="sk-val" id="skBk">—</div></div><div class="sk-ic"><i class="fas fa-calendar-check"></i></div></div><div class="sk-sub">Done <span id="skBkDone">0</span> · No-show <span id="skNoShow">0</span></div></div>
  <div class="sk c2"><div class="sk-top"><div><div class="sk-label">Revenue</div><div class="sk-val" id="skRev">—</div></div><div class="sk-ic"><i class="fas fa-chart-line"></i></div></div><div class="sk-sub">Conv: <span id="skConv">0</span>%</div></div>
  <div class="sk c3"><div class="sk-top"><div><div class="sk-label">Advance</div><div class="sk-val" id="skAdv">—</div></div><div class="sk-ic"><i class="fas fa-hand-holding-usd"></i></div></div></div>
  <div class="sk c5"><div class="sk-top"><div><div class="sk-label">Pending</div><div class="sk-val" id="skPend">—</div></div><div class="sk-ic"><i class="fas fa-clock"></i></div></div></div>
  <div class="sk c6"><div class="sk-top"><div><div class="sk-label">Cancelled</div><div class="sk-val" id="skCanc">—</div></div><div class="sk-ic"><i class="fas fa-ban"></i></div></div></div>
  <div class="sk c7"><div class="sk-top"><div><div class="sk-label">Bank</div><div class="sk-val" id="skBank">—</div></div><div class="sk-ic"><i class="fas fa-university"></i></div></div></div>
  <div class="sk c6"><div class="sk-top"><div><div class="sk-label">Expenses</div><div class="sk-val" id="skExp">—</div></div><div class="sk-ic"><i class="fas fa-receipt"></i></div></div></div>
</div>
<div class="sln-chart-card">
  <div class="sln-chart-head"><h6><i class="fas fa-chart-area mr-1" style="color:#0056B8;"></i>Revenue &amp; Bookings</h6><span class="range-lbl" id="slRangeLbl">—</span></div>
  <div class="sln-chart-box"><canvas id="slnDailyChart"></canvas></div>
</div>

<div class="sln-grid">
  <div class="sln-panel">
    <div class="sln-panel-head"><h6><i class="fas fa-clock mr-1" style="color:#f59e0b;"></i>Today's Appointments</h6><a href="{% url 'sales:booking_calendar' %}" class="btn btn-outline-primary">Calendar</a></div>
    <div class="sln-up-list" id="slUpBody"><div class="text-center py-3 text-muted" style="font-size:.78rem;font-weight:700;">Loading...</div></div>
  </div>
  <div class="sln-panel">
    <div class="sln-panel-head"><h6><i class="fas fa-user-tie mr-1" style="color:#8b5cf6;"></i>Staff Performance</h6><a href="{% url 'sales:booking_staff_schedule' %}" class="btn btn-outline-primary">Schedule</a></div>
    <div style="overflow-x:auto;max-height:250px;overflow-y:auto;">
      <table class="sln-staff-tbl"><thead><tr><th>Staff</th><th class="text-center">Bk</th><th class="text-center">Done</th><th class="text-right">Amt</th><th class="text-right">Comm</th></tr></thead>
      <tbody id="slStaffBody"><tr><td colspan="5" class="text-center text-muted py-3">Loading...</td></tr></tbody></table>
    </div>
  </div>
</div>

<div class="sln-grid">
  <div class="sln-panel">
    <div class="sln-panel-head"><h6><i class="fas fa-star mr-1" style="color:#f59e0b;"></i>Top Services</h6></div>
    <div id="slSvcBody" style="max-height:220px;overflow-y:auto;"><div class="text-center py-3 text-muted" style="font-size:.78rem;font-weight:700;">Loading...</div></div>
  </div>
  <div class="sln-panel">
    <div class="sln-panel-head"><h6>Service Share</h6></div>
    <div style="padding:10px;"><div class="sln-pie-box"><canvas id="slnServicePie"></canvas></div></div>
  </div>
</div>

</div>

<script>
(function(){
  var U = {
    summary:  "{% url 'pos:dash_saloon_summary' %}",
    daily:    "{% url 'pos:dash_saloon_chart_daily' %}",
    staff:    "{% url 'pos:dash_saloon_staff_perf' %}",
    services: "{% url 'pos:dash_saloon_top_services' %}",
    upcoming: "{% url 'pos:dash_saloon_upcoming' %}"
  };
  var _ch = null, _pieChart = null;

  async function _summary() {
    var r = await fetch(U.summary + rangeParams()), j = await r.json(), k = j.kpis || {};
    $('#slTdPend').text(k.today_pending); $('#slTdConf').text(k.today_confirmed);
    $('#slTdDone').text(k.today_invoiced); $('#slTdRem').text(k.today_remaining);
    $('#slTdRev').text(fmt(k.today_revenue));
    $('#skBk').text(k.total_bookings); $('#skBkDone').text(k.invoiced_bookings);
    $('#skNoShow').text(k.no_show); $('#skRev').text(fmt(k.revenue));
    $('#skConv').text(k.conversion_rate); $('#skAdv').text(fmt(k.advance_collected));
    $('#skComm').text(fmt(k.commission)); $('#skPend').text(k.pending_bookings);
    $('#skCanc').text(k.cancelled_bookings); $('#skBank').text(fmt(k.bank_sum));
    $('#skExp').text(fmt(k.expenses));
    var rng = j.range || {};
    $('#slRangeLbl').text((rng.from||'')+' → '+(rng.to||''));
  }

  async function _chart() {
    var r = await fetch(U.daily + rangeParams()), j = await r.json();
    var ctx = document.getElementById('slnDailyChart').getContext('2d');
    if (_ch) _ch.destroy();
    _ch = new Chart(ctx, {
      type:'line',
      data:{labels:j.labels,datasets:[
        {label:'Revenue',data:j.revenue,fill:true,borderColor:'#0056B8',backgroundColor:'rgba(0,86,184,.08)',lineTension:.35,pointRadius:0,borderWidth:2,yAxisID:'y-left'},
        {label:'Advance',data:j.advance,fill:true,borderColor:'#14b8a6',backgroundColor:'rgba(20,184,166,.06)',lineTension:.35,pointRadius:0,borderWidth:2,yAxisID:'y-left'},
        {label:'Bookings',data:j.bookings,fill:false,borderColor:'#8b5cf6',backgroundColor:'rgba(139,92,246,.12)',lineTension:0,pointRadius:3,pointBackgroundColor:'#8b5cf6',borderWidth:2,borderDash:[5,3],yAxisID:'y-right'}
      ]},
      options:{responsive:true,maintainAspectRatio:false,animation:{duration:0},
        tooltips:{mode:'index',intersect:false},
        legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8,fontSize:11}},
        scales:{yAxes:[
          {id:'y-left',type:'linear',position:'left',ticks:{beginAtZero:true}},
          {id:'y-right',type:'linear',position:'right',ticks:{beginAtZero:true,stepSize:1},gridLines:{drawOnChartArea:false}}
        ],xAxes:[{ticks:{autoSkip:true,maxTicksToShow:15,fontSize:10}}]}
      }
    });
  }

  async function _upcoming() {
    var r = await fetch(U.upcoming), j = await r.json(), el = document.getElementById('slUpBody');
    if (!j.items||!j.items.length){el.innerHTML='<div class="text-center py-3 text-muted" style="font-size:.78rem;font-weight:700;"><i class="fas fa-check-circle mr-1"></i>No remaining appointments</div>';return;}
    var h='';
    j.items.forEach(function(b){
      var c=b.is_past?'up-row past':'up-row',bg=b.status==='confirmed'?'<span class="up-bdg cnf">Confirmed</span>':'<span class="up-bdg pnd">Pending</span>';
      h+='<div class="'+c+'"><div class="up-tm"><div class="up-tm-v">'+b.time+'</div><div class="up-tm-d">'+b.duration+'m</div></div><div class="up-nfo"><div class="up-nfo-name">'+b.customer_name+'</div><div class="up-nfo-svc">'+b.services+'</div><div class="up-nfo-staff"><i class="fas fa-user-tie mr-1"></i>'+b.staff_name+'</div></div><div class="up-rt"><div class="up-rt-amt">'+fmt(b.amount)+'</div>'+bg+'</div></div>';
    });
    el.innerHTML=h;
  }

  async function _staff() {
    var r = await fetch(U.staff + rangeParams()), j = await r.json(), el = document.getElementById('slStaffBody');
    if (!j.items||!j.items.length){el.innerHTML='<tr><td colspan="5" class="text-center text-muted py-2">No data</td></tr>';return;}
    var mx=Math.max.apply(null,j.items.map(function(x){return x.bookings;}))||1,h='';
    j.items.forEach(function(s){
      var p=Math.round((s.bookings/mx)*100);
      h+='<tr><td><span class="stf-nm">'+s.name+'</span><div class="stf-bar"><div class="stf-bar-fill" style="width:'+p+'%"></div></div></td><td class="text-center">'+s.bookings+'</td><td class="text-center">'+s.invoiced+'</td><td class="text-right">'+fmt(s.amount)+'</td><td class="text-right">'+fmt(s.commission)+'</td></tr>';
    });
    el.innerHTML=h;
  }

  async function _services() {
    var r = await fetch(U.services + rangeParams()), j = await r.json(), el = document.getElementById('slSvcBody');
    if (!j.items||!j.items.length){el.innerHTML='<div class="text-center py-3 text-muted">No data</div>';_renderPie([]);return;}
    var h='';
    j.items.forEach(function(s,i){h+='<div class="svc-row"><span class="svc-rk">'+(i+1)+'</span><span class="svc-nm">'+s.name+'</span><span class="svc-ct">'+s.count+'×</span><span class="svc-rv">'+fmt(s.revenue)+'</span></div>';});
    el.innerHTML=h;_renderPie(j.items);
  }

  function _renderPie(items) {
    var cv=document.getElementById('slnServicePie');if(!cv)return;var ctx=cv.getContext('2d');
    if(_pieChart)_pieChart.destroy();
    if(!items||!items.length){_pieChart=new Chart(ctx,{type:'doughnut',data:{labels:[],datasets:[{data:[]}]},options:{responsive:true,maintainAspectRatio:false,animation:{duration:0}}});return;}
    var cl=['#0056B8','#22c55e','#f59e0b','#8b5cf6','#14b8a6','#f43f5e','#06b6d4','#a78bfa','#fb923c','#4ade80'];
    _pieChart=new Chart(ctx,{type:'doughnut',data:{labels:items.map(function(s){return s.name;}),datasets:[{data:items.map(function(s){return s.count;}),backgroundColor:cl.slice(0,items.length),borderColor:'#fff',borderWidth:2}]},
      options:{responsive:true,maintainAspectRatio:false,animation:{duration:0},cutoutPercentage:60,legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8,fontSize:10}}}
    });
  }

  async function slnRunAll(){
    var tasks=[_summary,_chart,_upcoming,_staff,_services].map(function(fn){return fn().catch(function(e){console.error('[saloon-dash]',fn.name,e);});});
    await Promise.all(tasks);
  }
  window.slnRunAll = slnRunAll;
})();
</script>