{% extends 'school/base_school.html' %}

{% block title %}Leave Management | STD Lab{% endblock %}

{% block content %}
<div style="max-width: 900px; margin: 0 auto;">
    <div style="margin-bottom: 40px;">
        <h2 style="font-weight: 900; color: #0f172a;">Student Leave Management</h2>
        <p style="color: #64748b; font-size: 0.9rem;">Search for a student to record leaves or view their history.</p>
    </div>

    <!-- Search Section -->
    <div class="card" style="margin-bottom: 30px; padding: 30px;">
        <form method="get" style="display: flex; gap: 15px; align-items: flex-end;">
            <div style="flex: 1;">
                <label>Enter Student ID (PIN)</label>
                <input type="text" name="student_id" value="{{ search_id|default:'' }}" required placeholder="e.g. 101" style="font-size: 1.1rem; font-weight: 800; height: 55px;">
            </div>
            <button type="submit" class="btn" style="height: 55px; padding: 0 40px; font-weight: 800;">SEARCH STUDENT</button>
        </form>
    </div>

    {% if selected_student %}
    <div style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px;">
        <!-- New Leave Form -->
        <div class="card" style="padding: 35px; border-top: 5px solid #10b981;">
            <h3 style="font-weight: 900; color: #0f172a; margin-bottom: 25px;">New Leave Entry</h3>
            
            <div style="display: flex; gap: 15px; align-items: center; margin-bottom: 30px; background: #f8fafc; padding: 15px; border-radius: 12px; border: 1px solid #f1f5f9;">
                <div style="width: 45px; height: 45px; border-radius: 10px; overflow: hidden;">
                    {% if selected_student.photo %}
                        <img src="{{ selected_student.photo.url }}" style="width:100%; height:100%; object-fit:cover;">
                    {% else %}
                        <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#e2e8f0;"><i class="fas fa-user"></i></div>
                    {% endif %}
                </div>
                <div>
                    <div style="font-weight: 800; font-size: 0.9rem;">{{ selected_student.name }}</div>
                    <div style="font-size: 0.72rem; color: #10b981; font-weight: 800;">PIN: {{ selected_student.pin }}</div>
                </div>
            </div>

            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="target_student_id" value="{{ selected_student.id }}">
                
                <div class="form-group">
                    <label>Leave Type</label>
                    <select name="leave_type" required>
                        <option value="Casual Leave">Casual Leave</option>
                        <option value="Medical Leave">Medical Leave</option>
                        <option value="Annual Leave">Annual Leave</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    <div class="form-group">
                        <label>From Date</label>
                        <input type="date" name="start_date" required style="font-weight: 700;">
                    </div>
                    <div class="form-group">
                        <label>To Date</label>
                        <input type="date" name="end_date" required style="font-weight: 700;">
                    </div>
                </div>

                <div class="form-group">
                    <label>Reason (Optional)</label>
                    <textarea name="reason" rows="3" placeholder="Explain leave reason..."></textarea>
                </div>

                <button type="submit" class="btn" style="width: 100%; justify-content: center; height: 50px; font-weight: 800; margin-top: 10px;">SAVE LEAVE RECORD</button>
            </form>
        </div>

        <!-- History Section -->
        <div class="card" style="padding: 35px;">
            <h3 style="font-weight: 900; color: #0f172a; margin-bottom: 25px;">Leave History</h3>
            
            <div style="max-height: 400px; overflow-y: auto; padding-right: 5px; margin-bottom: 30px;">
                <h4 style="font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; font-weight: 800;">ACTIVE LEAVES</h4>
                {% for l in active_leaves %}
                <div style="padding: 20px; border-radius: 16px; background: #fdfdfd; border: 1px solid #f1f5f9; margin-bottom: 15px; 
                            {% if l.end_date >= today %}border-left: 5px solid #10b981;{% else %}border-left: 5px solid #6366f1;{% endif %}">
                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px;">
                        <div>
                            <div style="font-weight: 900; color: #1e293b; font-size: 0.95rem;">{{ l.leave_type }}</div>
                            <div style="font-size: 0.75rem; color: #64748b; font-weight: 700;">{{ l.start_date }} to {{ l.end_date }} ({{ l.total_days }} Days)</div>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            {% if l.end_date >= today %}
                                <a href="{% url 'leave_delete' l.pk %}" onclick="return confirm('Dismiss this active leave?')" 
                                   style="font-size: 0.65rem; background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 4px 10px; border-radius: 6px; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: 0.2s;" onmouseover="this.style.background='#ef4444'; this.style.color='#fff';" onmouseout="this.style.background='rgba(239, 68, 68, 0.1)'; this.style.color='#ef4444';">
                                    DISMISS
                                </a>
                            {% endif %}
                            <span style="font-size: 0.65rem; background: rgba(16, 185, 129, 0.1); color: #10b981; padding: 4px 10px; border-radius: 6px; font-weight: 800; text-transform: uppercase;">ACTIVE</span>
                        </div>
                    </div>
                </div>
                {% empty %}
                <p style="font-size: 0.8rem; color: #94a3b8; text-align: center; padding: 20px;">No active leaves.</p>
                {% endfor %}
            </div>

            <div style="max-height: 300px; overflow-y: auto; padding-right: 5px;">
                <h4 style="font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; font-weight: 800;">DISMISSED HISTORY</h4>
                {% for l in deleted_leaves %}
                <div style="padding: 15px; border-radius: 12px; background: rgba(241, 245, 249, 0.5); border: 1px dashed #e2e8f0; margin-bottom: 12px; opacity: 0.6;">
                    <div style="display: flex; justify-content: space-between; align-items: start;">
                        <div>
                            <div style="font-weight: 800; color: #475569; font-size: 0.85rem;">{{ l.leave_type }}</div>
                            <div style="font-size: 0.7rem; color: #64748b; font-weight: 700;">{{ l.start_date }} to {{ l.end_date }} ({{ l.total_days }} Days)</div>
                            <div style="font-size: 0.6rem; color: #94a3b8; margin-top: 4px; font-weight: 700;">DISMISSED AT: {{ l.deleted_at|date:"d M, h:i A" }}</div>
                        </div>
                        <span style="font-size: 0.6rem; background: #e2e8f0; color: #64748b; padding: 2px 8px; border-radius: 4px; font-weight: 800;">DISMISSED</span>
                    </div>
                </div>
                {% empty %}
                <p style="font-size: 0.8rem; color: #94a3b8; text-align: center; padding: 20px;">No dismissed history.</p>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}