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

{% block title %}Configure {{ student_class.name }} Timings | STD Lab{% endblock %}

{% block content %}
<div class="card" style="max-width: 600px; margin: 40px auto; padding: 40px; border-radius: 28px; border-top: 6px solid #6366f1;">
    <h2 style="font-weight: 900; color: #0f172a; margin-bottom: 5px; text-align: center;">{{ student_class.name }} Timings</h2>
    <p style="text-align: center; color: #64748b; font-size: 0.9rem; margin-bottom: 40px;">Manage daily attendance punch rules for this class.</p>
    
    <form method="post" style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
        {% csrf_token %}
        <div style="grid-column: 1 / -1; border-left: 4px solid #10b981; padding-left: 15px; margin-bottom: 10px;">
            <h4 style="color: #0f172a; font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Daily Punch-In Rules</h4>
        </div>
        <div class="form-group">
            <label>Punch-In Start</label>
            <input type="time" name="punch_in_start" value="{{ schedule.punch_in_start|time:'H:i' }}" required style="font-weight: 800;">
        </div>
        <div class="form-group">
            <label>Punch-In End (Late Threshold)</label>
            <input type="time" name="punch_in_end" value="{{ schedule.punch_in_end|time:'H:i' }}" required style="font-weight: 800; border-color: #f59e0b;">
        </div>

        <div style="grid-column: 1 / -1; border-left: 4px solid #3b82f6; padding-left: 15px; margin-bottom: 10px; margin-top: 10px;">
            <h4 style="color: #0f172a; font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Daily Check-Out Rules</h4>
        </div>
        <div class="form-group">
            <label>Check-Out Start</label>
            <input type="time" name="checkout_start" value="{{ schedule.checkout_start|time:'H:i' }}" required style="font-weight: 800;">
        </div>
        <div class="form-group">
            <label>Check-Out End (Absent Threshold)</label>
            <input type="time" name="checkout_end" value="{{ schedule.checkout_end|time:'H:i' }}" required style="font-weight: 800; border-color: #ef4444;">
        </div>

        <div style="grid-column: 1 / -1; border-left: 4px solid #8b5cf6; padding-left: 15px; margin-bottom: 10px; margin-top: 10px;">
            <h4 style="color: #0f172a; font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Break / Lunch Period (Optional)</h4>
        </div>
        <div class="form-group">
            <label>Lunch Starts At</label>
            <input type="time" name="lunch_start" value="{{ schedule.lunch_start|time:'H:i' }}">
        </div>
        <div class="form-group">
            <label>Lunch Ends At</label>
            <input type="time" name="lunch_end" value="{{ schedule.lunch_end|time:'H:i' }}">
        </div>

        <div style="grid-column: 1 / -1; display: flex; gap: 15px; margin-top: 20px;">
            <button type="submit" class="btn" style="flex: 2; height: 55px; justify-content: center; background: #6366f1; border-radius: 12px; font-weight: 800;">
                SAVE RULES & APPLY LOGIC
            </button>
            <a href="{% url 'schedule_list' %}" class="btn" style="flex: 1; height: 55px; background: #f1f5f9; color: #475569; border-radius: 12px; justify-content: center; text-decoration: none;">CANCEL</a>
        </div>
    </form>
</div>
{% endblock %}