{% extends "base.html" %}
{% block title %}Expenses{% endblock %}
{% block content %}
<style>
  :root {
    --primary-color: #dc2626;
    --primary-light: #fca5a5;
    --primary-dark: #991b1b;
    --secondary-color: #3b82f6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --bg-light: #fef2f2;
    --bg-card: #ffffff;
    --border-color: #fee2e2;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --shadow-sm: 0 1px 3px rgba(220, 38, 38, 0.12);
    --shadow-md: 0 4px 6px rgba(220, 38, 38, 0.15);
    --shadow-lg: 0 10px 15px rgba(220, 38, 38, 0.2);
  }

  body {
    background: var(--bg-light);
  }

  /* Modern Card Container */
  .expense-container {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
  }

  /* Section Headers */
  .section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--primary-color);
  }

  .section-header h2, .section-header h3 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .section-icon {
    font-size: 2rem;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
  }

  /* Beautiful Expense Table */
  .expense-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .expense-table thead {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  }

  .expense-table thead th {
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    border: none;
  }

  .expense-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
  }

  .expense-table tbody tr:hover {
    background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
  }

  .expense-table tbody tr:last-child {
    border-bottom: none;
  }

  .expense-table tbody td {
    padding: 1.25rem 1.5rem;
    color: var(--text-dark);
    font-size: 0.95rem;
    vertical-align: middle;
  }

  /* Table Responsive */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ID Badge */
  .id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 0.5rem 0.85rem;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
  }

  /* Date Styling */
  .date-cell {
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .date-icon {
    color: var(--primary-color);
    font-size: 1.1rem;
  }

  /* Reason Highlight */
  .reason-cell {
    font-weight: 600;
    color: var(--text-dark);
    max-width: 250px;
  }

  /* Amount Display */
  .amount-cell {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .amount-icon {
    font-size: 1.2rem;
  }

  /* Payment Method Badge */
  .payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .payment-cash {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #6ee7b7;
  }

  .payment-card {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
  }

  .payment-bank {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
  }

  .payment-other {
    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
    color: #6b21a8;
    border: 1px solid #c084fc;
  }

  /* Action Buttons */
  .action-buttons {
    display: flex;
    gap: 0.75rem;
  }

  .btn-action {
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    gap: 0.3rem;
  }

  .btn-action:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  .btn-edit {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
  }

  .btn-edit:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }

  .btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
  }

  .btn-delete:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  }

  /* Form Styling */
  .form-control, .form-select {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
  }

  .form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
    outline: none;
  }

  .form-label {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Buttons */
  .btn-primary {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease;
  }

  .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    transform: translateY(-2px);
  }

  .btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
  }

  .btn-outline-secondary {
    border: 2px solid #6b7280;
    color: #6b7280;
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-outline-secondary:hover {
    background: #6b7280;
    color: white;
  }

  /* Search Bar */
  .search-container {
    margin-bottom: 1.5rem;
  }

  .input-group .form-control {
    border-right: none;
  }

  .input-group .btn {
    border-left: none;
    background: white;
    border: 2px solid var(--border-color);
    border-left: none;
  }

  /* Mobile Card Styling */
  @media (max-width: 768px) {
    .expense-container {
      padding: 1.5rem;
      border-radius: 12px;
    }

    .mobile-card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--shadow-md);
      border: 2px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .mobile-card:active {
      transform: scale(0.98);
    }
    
    .mobile-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.25rem;
      padding-bottom: 1rem;
      border-bottom: 3px solid var(--primary-color);
    }

    .mobile-id {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-dark);
    }
    
    .mobile-amount {
      padding: 0.6rem 1rem;
      border-radius: 10px;
      font-weight: 800;
      font-size: 1rem;
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      color: var(--primary-dark);
      border: 2px solid var(--primary-light);
    }
    
    .mobile-card-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 0;
      border-bottom: 1px solid #f3f4f6;
    }

    .mobile-card-row:last-child {
      border-bottom: none;
    }
    
    .mobile-card-label {
      font-weight: 700;
      color: var(--text-light);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    
    .mobile-card-value {
      color: var(--text-dark);
      text-align: right;
      font-size: 0.95rem;
      font-weight: 600;
    }
    
    .mobile-card-actions {
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 2px solid var(--border-color);
      display: flex;
      gap: 0.75rem;
      justify-content: flex-end;
    }

    .section-header h2, .section-header h3 {
      font-size: 1.4rem;
    }
    
    .desktop-table {
      display: none;
    }
    
    .mobile-view {
      display: block;
    }

    .btn-mobile-full {
      width: 100%;
      margin-bottom: 0.75rem;
    }
  }
  
  @media (min-width: 769px) {
    .mobile-view {
      display: none;
    }
    
    .desktop-table {
      display: block;
    }
  }

  /* Pagination */
  .pagination {
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .page-item .page-link {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-dark);
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
  }

  .page-item.active .page-link {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    border-color: var(--primary-color);
    color: white;
  }

  .page-item .page-link:hover {
    background: var(--bg-light);
    border-color: var(--primary-color);
    transform: translateY(-2px);
  }

  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-light);
  }

  .empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }

  .empty-state-text {
    font-size: 1.1rem;
    font-weight: 600;
  }
</style>

<!-- ============================================================================ -->
<!-- ADD/EDIT EXPENSE FORM (Admin Only) -->
<!-- ============================================================================ -->

{% if session.get('role') == 'admin' %}
<div class="expense-container">
  <div class="section-header">
    <span class="section-icon">{{ "✏️" if edit_row else "➕" }}</span>
    <h2>{{ "Edit Expense" if edit_row else "Add New Expense" }}</h2>
  </div>

  <form method="POST" class="row g-3">
    <input type="hidden" name="edit_id" value="{{ edit_row.id if edit_row else '' }}">
    
    <div class="col-md-3">
      <label class="form-label">📅 Date</label>
      <input type="date" class="form-control" name="date" value="{{ edit_row.date if edit_row else '' }}" required>
    </div>
    
    <div class="col-md-4">
      <label class="form-label">📝 Reason</label>
      <input type="text" class="form-control" name="reason" value="{{ edit_row.reason if edit_row else '' }}" placeholder="Enter expense reason" required>
    </div>
    
    <div class="col-md-2">
      <label class="form-label">💵 Amount</label>
      <input type="number" step="0.01" class="form-control" name="amount" value="{{ edit_row.amount if edit_row else '' }}" placeholder="0.00" required>
    </div>
    
    <div class="col-md-3">
      <label class="form-label">💳 Payment Method</label>
      <select name="payment_method" class="form-select" required>
        {% for method in ["Cash", "Card", "Bank", "Other"] %}
        <option value="{{ method }}" {% if edit_row and edit_row.payment_method == method %}selected{% endif %}>{{ method }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="col-12">
      <button class="btn btn-primary btn-mobile-full" type="submit">
        {{ "💾 Update Expense" if edit_row else "💾 Save Expense" }}
      </button>
      {% if edit_row %}
      <a href="{{ url_for('manage_expenses') }}" class="btn btn-secondary ms-2 btn-mobile-full">❌ Cancel</a>
      {% endif %}
    </div>
  </form>
</div>
{% endif %}

<!-- ============================================================================ -->
<!-- SEARCH & FILTER SECTION -->
<!-- ============================================================================ -->

<div class="expense-container">
  <div class="section-header">
    <span class="section-icon">🔍</span>
    <h3>Search & Filter Expenses</h3>
  </div>

  <!-- Search Bar -->
  <form method="GET" class="search-container">
    <div class="input-group">
      <input type="text" class="form-control" name="q" placeholder="🔎 Search by reason..."
             value="{{ search_query or '' }}">
      <button class="btn btn-outline-secondary" type="submit">🔍 Search</button>
    </div>
  </form>

  <!-- Filters -->
  <form method="GET" class="row g-3">
    <input type="hidden" name="q" value="{{ search_query or '' }}">
    
    <div class="col-md-4">
      <label for="start_date" class="form-label">📅 From Date</label>
      <input type="date" name="start_date" id="start_date" class="form-control" value="{{ filter_start_date }}">
    </div>
    
    <div class="col-md-4">
      <label for="end_date" class="form-label">📅 To Date</label>
      <input type="date" name="end_date" id="end_date" class="form-control" value="{{ filter_end_date }}">
    </div>
    
    <div class="col-md-4">
      <label for="payment_method_filter" class="form-label">💳 Payment Method</label>
      <select name="payment_method" id="payment_method_filter" class="form-select">
        <option value="All" {% if filter_payment_method == 'All' %}selected{% endif %}>All Methods</option>
        {% for method in ["Cash", "Card", "Bank", "Other"] %}
        <option value="{{ method }}" {% if filter_payment_method == method %}selected{% endif %}>{{ method }}</option>
        {% endfor %}
      </select>
    </div>
    
    <div class="col-12">
      <button type="submit" class="btn btn-outline-primary">✅ Apply Filters</button>
      <a href="{{ url_for('manage_expenses') }}" class="btn btn-outline-secondary ms-2">🔄 Clear All</a>
    </div>
  </form>
</div>

<!-- ============================================================================ -->
<!-- EXPENSE LIST -->
<!-- ============================================================================ -->

<div class="expense-container">
  <div class="section-header">
    <span class="section-icon">📋</span>
    <h3>Expense List</h3>
  </div>

  <!-- Desktop Table View -->
  <div class="desktop-table">
    <div class="table-responsive">
      <table class="expense-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Date</th>
            <th>Reason</th>
            <th>Amount</th>
            <th>Payment Method</th>
            {% if session.get('role') == 'admin' %}
            <th>Actions</th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% for e in expenses %}
          <tr>
            <td><span class="id-badge">#{{ e.id }}</span></td>
            <td>
              <div class="date-cell">
                <span class="date-icon">📅</span>
                {{ e.date }}
              </div>
            </td>
            <td><div class="reason-cell">{{ e.reason }}</div></td>
            <td>
              <div class="amount-cell">
                <span class="amount-icon">💰</span>
                Rs. {{ "{:,.2f}".format(e.amount) }}
              </div>
            </td>
            <td>
              <span class="payment-badge payment-{{ e.payment_method.lower() }}">
                {% if e.payment_method == 'Cash' %}💵
                {% elif e.payment_method == 'Card' %}💳
                {% elif e.payment_method == 'Bank' %}🏦
                {% else %}📱{% endif %}
                {{ e.payment_method }}
              </span>
            </td>
            {% if session.get('role') == 'admin' %}
            <td>
              <div class="action-buttons">
                <a href="?edit={{ e.id }}&page={{ current_page }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}" class="btn-action btn-edit" title="Edit">✏️</a>
                <a href="?delete={{ e.id }}&page={{ current_page }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}" 
                   onclick="return confirmDelete()" 
                   class="btn-action btn-delete" title="Delete">🗑️</a>
              </div>
            </td>
            {% endif %}
          </tr>
          {% else %}
          <tr>
            <td colspan="6">
              <div class="empty-state">
                <div class="empty-state-icon">📭</div>
                <div class="empty-state-text">No expenses found</div>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Mobile Card View -->
  <div class="mobile-view">
    {% for e in expenses %}
    <div class="mobile-card">
      <div class="mobile-card-header">
        <span class="mobile-id">Expense #{{ e.id }}</span>
        <span class="mobile-amount">Rs. {{ "{:,.2f}".format(e.amount) }}</span>
      </div>
      
      <div class="mobile-card-row">
        <span class="mobile-card-label">📅 Date</span>
        <span class="mobile-card-value">{{ e.date }}</span>
      </div>
      
      <div class="mobile-card-row">
        <span class="mobile-card-label">📝 Reason</span>
        <span class="mobile-card-value">{{ e.reason }}</span>
      </div>
      
      <div class="mobile-card-row">
        <span class="mobile-card-label">💳 Payment</span>
        <span class="mobile-card-value">
          <span class="payment-badge payment-{{ e.payment_method.lower() }}">
            {% if e.payment_method == 'Cash' %}💵
            {% elif e.payment_method == 'Card' %}💳
            {% elif e.payment_method == 'Bank' %}🏦
            {% else %}📱{% endif %}
            {{ e.payment_method }}
          </span>
        </span>
      </div>
      
      {% if session.get('role') == 'admin' %}
      <div class="mobile-card-actions">
        <a href="?edit={{ e.id }}&page={{ current_page }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}" class="btn-action btn-edit">✏️ Edit</a>
        <a href="?delete={{ e.id }}&page={{ current_page }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}" 
           onclick="return confirmDelete()" 
           class="btn-action btn-delete">🗑️ Delete</a>
      </div>
      {% endif %}
    </div>
    {% else %}
    <div class="empty-state">
      <div class="empty-state-icon">📭</div>
      <div class="empty-state-text">No expenses found</div>
    </div>
    {% endfor %}
  </div>
</div>

<!-- ============================================================================ -->
<!-- PAGINATION -->
<!-- ============================================================================ -->

<nav>
  <ul class="pagination justify-content-center mt-4">
    {% if current_page > 1 %}
    <li class="page-item">
      <a class="page-link" href="?page={{ current_page - 1 }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}">« Prev</a>
    </li>
    {% endif %}
    
    {% for page_num in range(1, total_pages + 1) %}
    <li class="page-item {% if page_num == current_page %}active{% endif %}">
      <a class="page-link" href="?page={{ page_num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}">{{ page_num }}</a>
    </li>
    {% endfor %}
    
    {% if current_page < total_pages %}
    <li class="page-item">
      <a class="page-link" href="?page={{ current_page + 1 }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_start_date %}&start_date={{ filter_start_date }}{% endif %}{% if filter_end_date %}&end_date={{ filter_end_date }}{% endif %}{% if filter_payment_method != 'All' %}&payment_method={{ filter_payment_method }}{% endif %}">Next »</a>
    </li>
    {% endif %}
  </ul>
</nav>

<!-- ============================================================================ -->
<!-- JAVASCRIPT -->
<!-- ============================================================================ -->

<script>
  function confirmDelete() {
    if (!confirm("⚠️ Are you sure you want to delete this expense?")) return false;
    const password = prompt("🔐 Enter password to confirm deletion:");
    if (password === "12345") return true;
    alert("❌ Incorrect password. Deletion canceled.");
    return false;
  }
</script>
{% endblock %}