{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>👨‍⚕️ Doctor Management</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;">Add/Edit Doctor</h2>
        
        <form method="POST" id="doctorForm">
            <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;">Doctor ID:</label>
                    <input type="text" name="doctor_id" id="doctor_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;">Full Name:</label>
                    <input type="text" name="name" id="name" 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;">Specialization:</label>
                    <input type="text" name="specialization" id="specialization"
                           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;">Mobile:</label>
                    <input type="text" name="mobile" id="mobile"
                           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;">Email:</label>
                    <input type="email" name="email" id="email"
                           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;">Consultation Fee:</label>
                    <input type="number" name="fee" id="fee" step="0.01" value="0"
                           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;">Qualification:</label>
                    <input type="text" name="qualification" id="qualification"
                           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;">Experience (years):</label>
                    <input type="number" name="experience" id="experience" value="0"
                           style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
                </div>
            </div>
            
            <div style="display: flex; gap: 10px; margin-top: 30px;">
                <button type="button" onclick="addDoctor()" class="btn btn-success" style="flex: 1; padding: 12px; font-size: 16px;">
                    ➕ Add Doctor
                </button>
                <button type="button" onclick="updateDoctor()" class="btn btn-accent" style="flex: 1; padding: 12px; font-size: 16px;">
                    🔄 Update Doctor
                </button>
                <button type="button" onclick="deleteDoctor()" class="btn btn-danger" style="flex: 1; padding: 12px; font-size: 16px;">
                    🗑️ Delete Doctor
                </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;">Doctors List</h2>
        
        {% if doctors %}
            <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;">Doctor ID</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Name</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Specialization</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Mobile</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Email</th>
                            <th style="padding: 12px; text-align: left;">Fee</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for doctor in doctors %}
                        <tr style="border-bottom: 1px solid #dee2e6; cursor: pointer;" 
                            onclick="selectDoctor('{{ doctor[0] }}', '{{ doctor[1] }}', '{{ doctor[2] }}', '{{ doctor[3] }}', '{{ doctor[4] }}', '{{ doctor[5] }}')"
                            onmouseover="this.style.backgroundColor='#f8f9fa'" 
                            onmouseout="this.style.backgroundColor='white'">
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ doctor[0] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ doctor[1] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ doctor[2] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ doctor[3] }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ doctor[4] }}</td>
                            <td style="padding: 12px;">${{ "%.2f"|format(doctor[5]|float) }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p style="text-align: center; padding: 40px; color: #666;">No doctors found. Add your first doctor!</p>
        {% endif %}
    </div>
</div>

<script>
function selectDoctor(doctorId, name, specialization, mobile, email, fee) {
    document.getElementById('doctor_id').value = doctorId;
    document.getElementById('name').value = name;
    document.getElementById('specialization').value = specialization;
    document.getElementById('mobile').value = mobile;
    document.getElementById('email').value = email;
    document.getElementById('fee').value = fee;
}

function addDoctor() {
    document.getElementById('doctorForm').action = '/doctors/add';
    document.getElementById('doctorForm').submit();
}

function updateDoctor() {
    const doctorId = document.getElementById('doctor_id').value;
    if (!doctorId) {
        alert('Please select a doctor to update');
        return;
    }
    document.getElementById('doctorForm').action = '/doctors/update';
    document.getElementById('doctorForm').submit();
}

function deleteDoctor() {
    const doctorId = document.getElementById('doctor_id').value;
    if (!doctorId) {
        alert('Please select a doctor to delete');
        return;
    }
    if (confirm('Are you sure you want to delete this doctor?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/doctors/delete';
        
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'doctor_id';
        input.value = doctorId;
        
        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }
}

function clearForm() {
    document.getElementById('doctor_id').value = '';
    document.getElementById('name').value = '';
    document.getElementById('specialization').value = '';
    document.getElementById('mobile').value = '';
    document.getElementById('email').value = '';
    document.getElementById('qualification').value = '';
    document.getElementById('experience').value = '0';
    document.getElementById('fee').value = '0';
}
</script>
{% endblock %}