{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>📅 Appointment Scheduling</h1>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Schedule/Edit Appointment</h2>
        
        <form method="POST" id="appointmentForm">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Appointment ID:</label>
                    <input type="text" name="appointment_id" id="appointment_id" 
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                    <small style="color: #666;">Leave empty to auto-generate</small>
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Patient:</label>
                    <select name="patient_id" id="patient_id" required
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="">Select Patient</option>
                        {% for patient in patients %}
                        <option value="{{ patient[0] }}">{{ patient[1] }} (ID: {{ patient[0] }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Doctor:</label>
                    <select name="doctor_id" id="doctor_id" required
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="">Select Doctor</option>
                        {% for doctor in doctors %}
                        <option value="{{ doctor[0] }}">{{ doctor[1] }} (ID: {{ doctor[0] }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Date:</label>
                    <input type="date" name="date" id="date" required
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Time:</label>
                    <input type="time" name="time" id="time" required
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
                
                <div>
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Status:</label>
                    <select name="status" id="status"
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                        <option value="Scheduled">Scheduled</option>
                        <option value="Confirmed">Confirmed</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                </div>
                
                <div style="grid-column: span 2;">
                    <label style="display: block; margin-bottom: 5px; font-weight: bold;">Notes:</label>
                    <textarea name="notes" id="notes" rows="3"
                              style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;"></textarea>
                </div>
            </div>
            
            <div style="display: flex; gap: 10px; margin-top: 30px;">
                <button type="button" onclick="scheduleAppointment()" class="btn btn-success" style="flex: 1; padding: 12px; font-size: 16px;">
                    ➕ Schedule Appointment
                </button>
                <button type="button" onclick="updateAppointment()" class="btn btn-accent" style="flex: 1; padding: 12px; font-size: 16px;">
                    🔄 Update Appointment
                </button>
                <button type="button" onclick="cancelAppointment()" class="btn btn-danger" style="flex: 1; padding: 12px; font-size: 16px;">
                    🗑️ Cancel Appointment
                </button>
                <button type="button" onclick="clearForm()" class="btn btn-warning" style="flex: 1; padding: 12px; font-size: 16px;">
                    🧹 Clear
                </button>
            </div>
        </form>
    </div>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Upcoming Appointments</h2>
        
        {% if appointments %}
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">ID</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Patient</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Doctor</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Date</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Time</th>
                            <th style="padding: 12px; text-align: left;">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for appointment in appointments %}
                        <tr style="border-bottom: 1px solid #dee2e6; cursor: pointer;" 
                            onclick="selectAppointment('{{ appointment[0] }}', '{{ appointment[1] }}', '{{ appointment[2] }}', '{{ appointment[3] }}', '{{ appointment[4] }}', '{{ appointment[5] }}')"
                            onmouseover="this.style.backgroundColor='#f8f9fa'" 
                            onmouseout="this.style.backgroundColor='white'">
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ appointment[0] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ appointment[1] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ appointment[2] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ appointment[3] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ appointment[4] }}</td>
                            <td style="padding: 12px;">
                                <span style="padding: 4px 8px; border-radius: 4px; font-size: 12px;
                                    {% if appointment[5] == 'Scheduled' %}background: #fff3cd; color: #856404;
                                    {% elif appointment[5] == 'Confirmed' %}background: #d1ecf1; color: #0c5460;
                                    {% elif appointment[5] == 'Completed' %}background: #d4edda; color: #155724;
                                    {% elif appointment[5] == 'Cancelled' %}background: #f8d7da; color: #721c24;
                                    {% endif %}">
                                    {{ appointment[5] }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p style="text-align: center; padding: 40px; color: #666;">No appointments found. Schedule your first appointment!</p>
        {% endif %}
    </div>
</div>

<script>
function selectAppointment(appointmentId, patientName, doctorName, date, time, status) {
    document.getElementById('appointment_id').value = appointmentId;
    
    // Get patient and doctor IDs from dropdowns
    const patientSelect = document.getElementById('patient_id');
    for (let i = 0; i < patientSelect.options.length; i++) {
        if (patientSelect.options[i].text.includes(patientName)) {
            patientSelect.value = patientSelect.options[i].value;
            break;
        }
    }
    
    const doctorSelect = document.getElementById('doctor_id');
    for (let i = 0; i < doctorSelect.options.length; i++) {
        if (doctorSelect.options[i].text.includes(doctorName)) {
            doctorSelect.value = doctorSelect.options[i].value;
            break;
        }
    }
    
    document.getElementById('date').value = date;
    document.getElementById('time').value = time;
    document.getElementById('status').value = status;
}

function scheduleAppointment() {
    document.getElementById('appointmentForm').action = '/appointments/schedule';
    document.getElementById('appointmentForm').submit();
}

function updateAppointment() {
    const appointmentId = document.getElementById('appointment_id').value;
    if (!appointmentId) {
        alert('Please select an appointment to update');
        return;
    }
    document.getElementById('appointmentForm').action = '/appointments/update';
    document.getElementById('appointmentForm').submit();
}

function cancelAppointment() {
    const appointmentId = document.getElementById('appointment_id').value;
    if (!appointmentId) {
        alert('Please select an appointment to cancel');
        return;
    }
    if (confirm('Are you sure you want to cancel this appointment?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/appointments/cancel';
        
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'appointment_id';
        input.value = appointmentId;
        
        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }
}

function clearForm() {
    document.getElementById('appointment_id').value = '';
    document.getElementById('patient_id').value = '';
    document.getElementById('doctor_id').value = '';
    document.getElementById('date').value = '';
    document.getElementById('time').value = '';
    document.getElementById('status').value = 'Scheduled';
    document.getElementById('notes').value = '';
    
    // Set today's date as default
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('date').value = today;
    
    // Set current time as default (rounded to nearest 30 minutes)
    const now = new Date();
    const minutes = now.getMinutes();
    const roundedMinutes = minutes < 30 ? '00' : '30';
    const hours = now.getHours().toString().padStart(2, '0');
    document.getElementById('time').value = `${hours}:${roundedMinutes}`;
}
</script>
{% endblock %}