{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0"><i class="bi bi-calendar2-week me-2"></i>Month-wise Leave Report</h4>
      <div class="text-muted small">
        Month: <b>{{ month }}</b> ({{ month_start.strftime('%d-%b-%Y') }} to {{ month_end.strftime('%d-%b-%Y') }})
      </div>
    </div>

    <div class="d-flex gap-2 align-items-center">
      <span class="badge bg-secondary">Req: {{ totals.count_requests }}</span>
      <span class="badge bg-primary">Total Days: {{ totals.days_total }}</span>
      <span class="badge bg-success">Paid: {{ totals.days_paid }}</span>
      <span class="badge bg-danger">Unpaid(LWP): {{ totals.days_unpaid }}</span>
      <span class="badge bg-warning text-dark">RH: {{ totals.days_rh }}</span>
      <span class="badge bg-info text-dark">CO: {{ totals.days_co }}</span>
    </div>
  </div>

  <!-- Filters -->
  <form class="card shadow-sm mb-3" method="GET">
    <div class="card-body row g-2 align-items-end">

      <div class="col-md-2">
        <label class="form-label fw-bold">Month</label>
        <input type="month" class="form-control" name="month" value="{{ month }}">
      </div>

      <div class="col-md-2">
        <label class="form-label fw-bold">Department</label>
        <select class="form-select" name="department_id">
          <option value="">All</option>
          {% for d in departments %}
            <option value="{{ d.id }}" {% if dept_id and dept_id == d.id %}selected{% endif %}>{{ d.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-3">
        <label class="form-label fw-bold">Employee</label>
        <select class="form-select" name="employee_id">
          <option value="">All</option>
          {% for e in employees %}
            <option value="{{ e.id }}" {% if emp_id and emp_id == e.id %}selected{% endif %}>
              {{ e.full_name }} ({{ e.employee_code }})
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label fw-bold">Leave Type</label>
        <select class="form-select" name="leave_type_id">
          <option value="">All</option>
          {% for lt in leave_types %}
            <option value="{{ lt.id }}" {% if lt_id and lt_id == lt.id %}selected{% endif %}>
              {{ lt.name }} ({{ lt.code }})
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label fw-bold">Status</label>
        <select class="form-select" name="status">
          {% set s = (status or 'final_approved') %}
          <option value="all" {% if s=='all' %}selected{% endif %}>All</option>
          <option value="pending" {% if s=='pending' %}selected{% endif %}>Pending</option>
          <option value="manager_approved" {% if s=='manager_approved' %}selected{% endif %}>Manager Approved</option>
          <option value="final_approved" {% if s=='final_approved' %}selected{% endif %}>Final Approved</option>
          <option value="rejected" {% if s=='rejected' %}selected{% endif %}>Rejected</option>
          <option value="cancelled" {% if s=='cancelled' %}selected{% endif %}>Cancelled</option>
        </select>
      </div>

      <div class="col-md-1">
        <label class="form-label fw-bold">Search</label>
        <input class="form-control" name="q" value="{{ q_name or '' }}" placeholder="Name">
      </div>

      <div class="col-12 d-flex gap-2 mt-2">
        <button class="btn btn-primary">
          <i class="bi bi-funnel me-1"></i> Apply
        </button>

        <a class="btn btn-outline-secondary"
           href="{{ url_for('leave.monthly_leave_report') }}">
          Reset
        </a>

        <a class="btn btn-success ms-auto"
           href="{{ url_for('leave.monthly_leave_report_export',
              month=month, department_id=dept_id, employee_id=emp_id, leave_type_id=lt_id, status=status, q=q_name) }}">
          <i class="bi bi-download me-1"></i> Download CSV
        </a>
      </div>

    </div>
  </form>

  <!-- Employee summary -->
  <div class="card shadow-sm mb-3">
    <div class="card-header bg-light fw-bold">
      <i class="bi bi-bar-chart me-2"></i> Employee Summary (Days in selected month)
    </div>
    <div class="card-body table-responsive">
      <table class="table table-sm table-striped align-middle">
        <thead>
          <tr>
            <th>Emp Code</th>
            <th>Employee</th>
            <th>Department</th>
            <th class="text-end">Paid</th>
            <th class="text-end">Unpaid (LWP)</th>
            <th class="text-end">RH</th>
            <th class="text-end">CO</th>
            <th class="text-end">Total</th>
          </tr>
        </thead>
        <tbody>
          {% for r in emp_summary %}
          <tr>
            <td>{{ r.emp_code }}</td>
            <td>{{ r.employee }}</td>
            <td>{{ r.department }}</td>
            <td class="text-end">{{ "%.2f"|format(r.paid_days) }}</td>
            <td class="text-end">{{ "%.2f"|format(r.unpaid_days) }}</td>
            <td class="text-end">{{ "%.2f"|format(r.rh_days) }}</td>
            <td class="text-end">{{ "%.2f"|format(r.co_days) }}</td>
            <td class="text-end fw-bold">{{ "%.2f"|format(r.total) }}</td>
          </tr>
          {% else %}
          <tr><td colspan="8" class="text-muted text-center">No data</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Detailed rows -->
  <div class="card shadow-sm">
    <div class="card-header bg-light fw-bold">
      <i class="bi bi-list-check me-2"></i> Detailed Requests
    </div>
    <div class="card-body table-responsive">
      <table class="table table-bordered table-sm align-middle">
        <thead class="table-light">
          <tr>
            <th>ID</th>
            <th>Emp</th>
            <th>Dept</th>
            <th>Type</th>
            <th>Range</th>
            <th class="text-end">Days (in month)</th>
            <th>Status</th>
            <th>Paid/LWP</th>
            <th>Half Day</th>
            <th>Reason</th>
            <th>Mgr Remark</th>
            <th>HR Remark</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ r.id }}</td>
            <td>
              <div class="fw-bold">{{ r.employee }}</div>
              <div class="text-muted small">{{ r.emp_code }}</div>
            </td>
            <td>{{ r.department }}</td>
            <td>{{ r.leave_type }} <span class="badge bg-secondary">{{ r.leave_code }}</span></td>
            <td>
              {{ r.start_date.strftime('%d-%b-%Y') }}<br>
              <span class="text-muted small">to</span><br>
              {{ r.end_date.strftime('%d-%b-%Y') }}
            </td>
            <td class="text-end fw-bold">{{ r.days_in_month }}</td>
            <td><span class="badge bg-info text-dark">{{ r.status }}</span></td>
            <td>
              {% if r.paid_or_lwp == 'LWP' %}
                <span class="badge bg-danger">LWP</span>
              {% else %}
                <span class="badge bg-success">Paid</span>
              {% endif %}
            </td>
            <td>
              {% if r.half_day %}
                <span class="badge bg-warning text-dark">Yes {{ r.half_day_session or '' }}</span>
              {% else %}
                <span class="text-muted">No</span>
              {% endif %}
            </td>
            <td style="min-width:180px;">{{ r.reason }}</td>
            <td style="min-width:160px;">{{ r.manager_remark }}</td>
            <td style="min-width:160px;">{{ r.hr_remark }}</td>
          </tr>
          {% else %}
          <tr><td colspan="12" class="text-muted text-center">No requests found</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}