{% extends "base.html" %}
{% block title %}My Requests{% endblock %}
{% block page_title %}My Requests{% endblock %}
{% block content %}
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .stat-number { font-size: 28px; font-weight: bold; color: #FF6B35; }
    .btn-add {
        background: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 20px;
    }
    .table-container {
        background: white;
        border-radius: 15px;
        overflow-x: auto;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .requests-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px;
    }
    .requests-table th, .requests-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .requests-table th { background: #FF6B35; color: white; }
    .status-pending { background: #ffc107; color: #333; padding: 4px 10px; border-radius: 15px; font-size: 11px; display: inline-block; }
    .status-approved { background: #28a745; color: white; padding: 4px 10px; border-radius: 15px; font-size: 11px; display: inline-block; }
    .status-rejected { background: #dc3545; color: white; padding: 4px 10px; border-radius: 15px; font-size: 11px; display: inline-block; }
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }
    .modal-content {
        background: white;
        max-width: 500px;
        margin: 50px auto;
        padding: 25px;
        border-radius: 15px;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #eee;
    }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 5px; }
    .form-group input, .form-group select, .form-group textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .btn-submit { background: #28a745; color: white; padding: 10px; border: none; border-radius: 5px; width: 100%; cursor: pointer; }
    .close { font-size: 24px; cursor: pointer; }
</style>

<div class="stats-grid">
    <div class="stat-card"><div class="stat-number">{{ stats.total }}</div><div>Total Requests</div></div>
    <div class="stat-card"><div class="stat-number">{{ stats.pending }}</div><div>Pending</div></div>
    <div class="stat-card"><div class="stat-number">{{ stats.approved }}</div><div>Approved</div></div>
    <div class="stat-card"><div class="stat-number">{{ stats.rejected }}</div><div>Rejected</div></div>
</div>

<button class="btn-add" onclick="openAddModal()">➕ New Request</button>

<div class="table-container">
    <table class="requests-table">
        <thead>
            <tr><th>ID</th><th>Type</th><th>Subject</th><th>Start Date</th><th>End Date</th><th>Status</th><th>Remarks</th><th>Date</th></tr>
        </thead>
        <tbody>
            {% for req in requests %}
            <tr>
                <td>#{{ req[0] }}</td>
                <td>{{ req[3] }}</td>
                <td>{{ req[4] }}</td>
                <td>{{ req[6] if req[6] else '-' }}</td>
                <td>{{ req[7] if req[7] else '-' }}</td>
                <td>
                    {% if req[8] == 'pending' %}
                        <span class="status-pending">⏳ Pending</span>
                    {% elif req[8] == 'approved' %}
                        <span class="status-approved">✅ Approved</span>
                    {% else %}
                        <span class="status-rejected">❌ Rejected</span>
                    {% endif %}
                 </td>
                <td>{{ req[11] if req[11] else '-' }}</td>
                <td>{{ req[13][:10] if req[13] else '-' }}</td>
             </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Add Request Modal -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>➕ New Request</h3>
            <span class="close" onclick="closeAddModal()">&times;</span>
        </div>
        <form method="post" action="/add-request">
            <div class="form-group">
                <label>Request Type</label>
                <select name="request_type" required>
                    <option value="leave">🏖️ Leave Request</option>
                    <option value="wfh">🏠 Work From Home</option>
                    <option value="short_leave">⏰ Short Leave</option>
                    <option value="resignation">📝 Resignation</option>
                    <option value="asset_request">💻 Asset Request</option>
                </select>
            </div>
            <div class="form-group">
                <label>Subject</label>
                <input type="text" name="subject" required>
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea name="description" rows="3" required></textarea>
            </div>
            <div class="form-group">
                <label>Start Date</label>
                <input type="date" name="start_date" required>
            </div>
            <div class="form-group">
                <label>End Date</label>
                <input type="date" name="end_date">
            </div>
            <button type="submit" class="btn-submit">✅ Submit Request</button>
        </form>
    </div>
</div>

<script>
    function openAddModal() { document.getElementById('addModal').style.display = 'block'; }
    function closeAddModal() { document.getElementById('addModal').style.display = 'none'; }
    window.onclick = function(e) { if (e.target == document.getElementById('addModal')) closeAddModal(); }
</script>
{% endblock %}