{% extends "base.html" %}{% set active="schedule" %}
{% block title %}Book Appointment{% endblock %}
{% block page_title %}Book an Appointment{% endblock %}
{% block content %}

{% if msg %}<div class="alert alert-{{ msg[0] }}">{{ msg[1] }}</div>{% endif %}

<div class="grid-2">
    <div class="card">
        <div class="card-header"><span class="card-title">Request an Appointment</span></div>

        <form method="POST">
            <div class="form-group">
                <label>Doctor *</label>
                <select name="doctor_id" id="doctorSelect" required onchange="updateCalendar()">
                    <option value="">— Select a doctor —</option>
                    {% for d in doctors %}
                    <option value="{{ d.doctor_id }}">{{ d.name }}{% if d.specialization %} — {{ d.specialization }}{% endif %}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label>Service</label>
                <select name="service_id" id="serviceSelect" onchange="fillDuration()">
                    <option value="">— Select service —</option>
                    {% for s in services %}
                    <option value="{{ s.service_id }}" data-dur="{{ s.duration_min }}">{{ s.name }} ({{ s.duration_min }} min)</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label>Preferred Date &amp; Time *</label>
                    <input type="datetime-local" name="appointment_datetime" id="datetimeInput" required onchange="checkConflict()">
                </div>
                <div class="form-group">
                    <label>Duration (min)</label>
                    <input type="number" name="duration" id="durationInput" value="30" min="10" max="180">
                </div>
            </div>

            <div id="conflictWarning" class="alert alert-error" style="display:none">
                ⚠️ That time slot is already taken. Please choose another.
            </div>

            <div class="form-group">
                <label>Reason for Visit</label>
                <textarea name="reason" placeholder="Briefly describe why you'd like to be seen…" rows="3"></textarea>
            </div>

            <button type="submit" class="btn btn-primary btn-full">📅 Request Appointment</button>
        </form>

        <div class="alert alert-info" style="margin-top:1rem;font-size:.82rem">
            ℹ️ Your appointment request will be confirmed by our reception team. You'll see it under <strong>My Appointments</strong> once booked.
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <span class="card-title" id="calTitle">Doctor Availability</span>
            <div style="display:flex;gap:.4rem">
                <button class="btn btn-ghost btn-sm" onclick="prevMonth()">‹</button>
                <button class="btn btn-ghost btn-sm" onclick="nextMonth()">›</button>
            </div>
        </div>
        <div id="calGrid">
            <div class="empty-state"><div class="empty-icon">🩺</div><p>Select a doctor to see their availability.</p></div>
        </div>
        <div id="daySlots" style="margin-top:1.2rem;display:none">
            <div class="card-title" style="font-size:.9rem;margin-bottom:.75rem" id="dayTitle"></div>
            <div id="slotsList"></div>
        </div>
    </div>
</div>

<script>
const busyData = {{ busy_data|tojson }};
let currentDocId=null, viewYear=new Date().getFullYear(), viewMonth=new Date().getMonth()+1;

function fillDuration(){
    const opt=document.getElementById('serviceSelect').options[document.getElementById('serviceSelect').selectedIndex];
    if(opt?.dataset?.dur) document.getElementById('durationInput').value=opt.dataset.dur;
    checkConflict();
}
function updateCalendar(){ currentDocId=document.getElementById('doctorSelect').value; renderCalendar(); }
function renderCalendar(){
    const grid=document.getElementById('calGrid'), title=document.getElementById('calTitle');
    if(!currentDocId){ grid.innerHTML='<div class="empty-state"><div class="empty-icon">🩺</div><p>Select a doctor.</p></div>'; return; }
    const months=['January','February','March','April','May','June','July','August','September','October','November','December'];
    title.textContent=months[viewMonth-1]+' '+viewYear;
    const firstDay=new Date(viewYear,viewMonth-1,1).getDay(), daysInMonth=new Date(viewYear,viewMonth,0).getDate();
    const today=new Date(); today.setHours(0,0,0,0);
    const busy=busyData[currentDocId]||[], busyDates={};
    busy.forEach(b=>{ busyDates[b.date]=(busyDates[b.date]||0)+1; });
    const days=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    let html='<div class="cal-grid">';
    days.forEach(d=>html+=`<div class="cal-header-cell">${d}</div>`);
    for(let i=0;i<firstDay;i++) html+='<div class="cal-cell empty"></div>';
    for(let d=1;d<=daysInMonth;d++){
        const ds=`${viewYear}-${String(viewMonth).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
        const cd=new Date(viewYear,viewMonth-1,d), isPast=cd<today, isToday=cd.getTime()===today.getTime(), hasApt=busyDates[ds]>0;
        let cls='cal-cell'+(isPast?' past':'')+(isToday?' today':'')+(hasApt?' has-apt':'');
        const click=!isPast?`onclick="showDaySlots('${ds}',${d})"`:'' ;
        html+=`<div class="${cls}" ${click}>${d}</div>`;
    }
    html+='</div>';
    grid.innerHTML=html; document.getElementById('daySlots').style.display='none';
}
function showDaySlots(ds,day){
    const busy=(busyData[currentDocId]||[]).filter(b=>b.date===ds);
    const months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    document.getElementById('dayTitle').textContent=months[viewMonth-1]+' '+day+', '+viewYear+' — Available slots';
    const slots=[];
    for(let h=8;h<17;h++) for(let m=0;m<60;m+=30){
        const ts=`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`, ss=h*60+m;
        const booked=busy.some(b=>{ const[bh,bm]=b.time.split(':').map(Number), bs=bh*60+bm, be=bs+(b.dur||30); return ss<be&&(ss+30)>bs; });
        slots.push({time:ts,booked});
    }
    document.getElementById('slotsList').innerHTML='<div style="display:flex;flex-wrap:wrap;gap:.4rem">'+
        slots.map(s=>{
            const[h,m]=s.time.split(':').map(Number), ap=h>=12?'PM':'AM', dh=h>12?h-12:(h||12);
            const disp=`${dh}:${String(m).padStart(2,'0')} ${ap}`;
            if(s.booked) return `<span class="btn btn-sm" style="background:#fee2e2;color:#b91c1c;cursor:not-allowed;border:1px solid #fecaca">${disp}</span>`;
            return `<button class="btn btn-sm btn-secondary" onclick="selectSlot('${ds}T${s.time}')">${disp}</button>`;
        }).join('')+'</div>';
    document.getElementById('daySlots').style.display='block';
}
function selectSlot(v){ document.getElementById('datetimeInput').value=v; checkConflict(); }
function checkConflict(){
    const docId=document.getElementById('doctorSelect').value, dtStr=document.getElementById('datetimeInput').value;
    const dur=parseInt(document.getElementById('durationInput').value)||30, warn=document.getElementById('conflictWarning');
    if(!docId||!dtStr){ warn.style.display='none'; return; }
    const chosen=new Date(dtStr), chosenEnd=new Date(chosen.getTime()+dur*60000), ds=dtStr.split('T')[0];
    const conflict=(busyData[docId]||[]).filter(b=>b.date===ds).some(b=>{
        const bStart=new Date(ds+'T'+b.time), bEnd=new Date(bStart.getTime()+b.dur*60000);
        return chosen<bEnd&&chosenEnd>bStart;
    });
    warn.style.display=conflict?'block':'none';
}
function prevMonth(){ viewMonth--; if(viewMonth<1){viewMonth=12;viewYear--;} renderCalendar(); }
function nextMonth(){ viewMonth++; if(viewMonth>12){viewMonth=1;viewYear++;} renderCalendar(); }
</script>
{% endblock %}