{% extends "base.html" %}{% set active="schedule" %}{% block title %}Schedule Appointment{% endblock %}{% block page_title %}Schedule 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">New Appointment</span></div>
        <form method="POST">
            <div class="form-group">
                <label>Patient *</label>
                <div style="position:relative">
                    <input type="text" id="patientSearch" placeholder="Type name, email, or ID to search…"
                           autocomplete="off" oninput="searchPatients(this.value)"
                           value="{{ pre_patient.name if pre_patient else '' }}">
                    <div id="patientDropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);z-index:200;box-shadow:var(--shadow-md);max-height:220px;overflow-y:auto;margin-top:2px"></div>
                </div>
                <input type="hidden" name="patient_id" id="patientIdInput" value="{{ pre_patient.patient_id if pre_patient else '' }}">
                <div id="patientSelected" style="margin-top:.4rem;font-size:.82rem;color:#00b8a6;display:{{ 'block' if pre_patient else 'none' }}">
                    ✓ <span id="patientSelectedName">{{ pre_patient.name if pre_patient else '' }}</span>
                    <button type="button" onclick="clearPatient()" style="background:none;border:none;color:var(--text-muted);cursor:pointer;margin-left:.4rem">✕ clear</button>
                </div>
            </div>
            <div class="form-group">
                <label>Doctor *</label>
                <select name="doctor_id" id="doctorSelect" required onchange="updateCalendar()">
                    <option value="">— Select 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>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">⚠️ Time conflict with existing appointment.</div>
            <div class="form-group">
                <label>Reason for Visit</label>
                <textarea name="reason" placeholder="Brief description…" rows="3"></textarea>
            </div>
            <div style="display:flex;gap:.75rem">
                <button type="submit" class="btn btn-primary btn-full">📅 Confirm Appointment</button>
                <a href="{{ url_for('receptionist_dashboard') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </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 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><div style="margin-top:.75rem;font-size:.75rem;color:var(--text-muted);display:flex;gap:1rem"><span><span style="color:var(--accent)">●</span> Has appointment</span></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(); }

// ── Patient live search ──
let searchTimeout = null;
function searchPatients(q) {
    clearTimeout(searchTimeout);
    const dd = document.getElementById('patientDropdown');
    if (q.length < 1) { dd.style.display='none'; return; }
    searchTimeout = setTimeout(() => {
        fetch(`/api/patients/search?q=${encodeURIComponent(q)}`)
            .then(r => r.json())
            .then(results => {
                if (!results.length) {
                    dd.innerHTML = '<div style="padding:.75rem 1rem;color:var(--text-muted);font-size:.85rem">No patients found</div>';
                } else {
                    dd.innerHTML = results.map(p =>
                        `<div onclick="selectPatient(${p.patient_id},'${p.name.replace(/'/g,"\\'")}','${p.email}')"
                              style="padding:.65rem 1rem;cursor:pointer;border-bottom:1px solid var(--border);font-size:.88rem"
                              onmouseover="this.style.background='var(--surface-2)'"
                              onmouseout="this.style.background=''">
                            <strong>${p.name}</strong>
                            <span style="color:var(--text-muted);margin-left:.5rem">${p.email}</span>
                            ${p.phone ? `<span style="color:var(--text-muted);margin-left:.5rem">${p.phone}</span>` : ''}
                        </div>`
                    ).join('');
                }
                dd.style.display = 'block';
            });
    }, 250);
}
function selectPatient(id, name, email) {
    document.getElementById('patientIdInput').value = id;
    document.getElementById('patientSearch').value = name;
    document.getElementById('patientSelectedName').textContent = name;
    document.getElementById('patientSelected').style.display = 'block';
    document.getElementById('patientDropdown').style.display = 'none';
}
function clearPatient() {
    document.getElementById('patientIdInput').value = '';
    document.getElementById('patientSearch').value = '';
    document.getElementById('patientSelected').style.display = 'none';
    document.getElementById('patientSearch').focus();
}
document.addEventListener('click', e => {
    if (!e.target.closest('#patientSearch') && !e.target.closest('#patientDropdown')) {
        document.getElementById('patientDropdown').style.display = 'none';
    }
});
</script>
{% endblock %}