<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}Sale Contracts{% endblock %} – KVPL</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
        rel="stylesheet"
        integrity="sha384-tViUqPwi0AA0Nl8cICCFyDFMnw3dGAB3Rcr+RNxfgqHE1gzSH3XRSdhMMnhHT1N"
        crossorigin="anonymous">
  <link href="{{ url_for('static', filename='css/kvpl.css') }}" rel="stylesheet">
</head>
<body>

<!-- ═══ SIDEBAR ══════════════════════════════════════════════════ -->
<div class="kvpl-sidebar" id="sidebar">

  <div class="sidebar-brand">
    <div class="brand-icon">
      <i class="bi bi-leaf-fill"></i>
    </div>
    <div>
      <div class="brand-name">KVPL</div>
      <div class="brand-sub">Rubber Contracts</div>
    </div>
  </div>

  <nav class="sidebar-nav">
    <div class="nav-section-label">Main</div>
    <ul class="nav flex-column gap-1">
      <li class="nav-item">
        <a href="{{ url_for('dashboard') }}" class="nav-link {% if request.endpoint=='dashboard' %}active{% endif %}">
          <i class="bi bi-grid-1x2"></i>
          <span>Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="{{ url_for('contracts') }}" class="nav-link {% if request.endpoint in ['contracts','view_contract','new_contract','edit_contract'] %}active{% endif %}">
          <i class="bi bi-file-earmark-text"></i>
          <span>Contracts</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="{{ url_for('report') }}" class="nav-link {% if request.endpoint=='report' %}active{% endif %}">
          <i class="bi bi-bar-chart-line"></i>
          <span>Report</span>
        </a>
      </li>
    </ul>

    <div class="nav-section-label mt-3">Reference</div>
    <ul class="nav flex-column gap-1">
      <li class="nav-item">
        <a href="{{ url_for('customers') }}" class="nav-link {% if request.endpoint=='customers' %}active{% endif %}">
          <i class="bi bi-people"></i>
          <span>Customers</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="{{ url_for('materials') }}" class="nav-link {% if request.endpoint=='materials' %}active{% endif %}">
          <i class="bi bi-box-seam"></i>
          <span>Materials</span>
        </a>
      </li>
    </ul>

    {% if can_admin() %}
    <div class="nav-section-label mt-3">Admin</div>
    <ul class="nav flex-column gap-1">
      <li class="nav-item">
        <a href="{{ url_for('admin_users') }}" class="nav-link {% if 'admin' in request.endpoint %}active{% endif %}">
          <i class="bi bi-shield-check"></i>
          <span>Users</span>
        </a>
      </li>
    </ul>
    {% endif %}
  </nav>

  <div class="sidebar-footer">
    {% if g.user %}
    <div class="user-card">
      <div class="user-avatar">{{ g.user.full_name[0].upper() }}</div>
      <div class="user-info">
        <div class="user-name">{{ g.user.full_name }}</div>
        <div class="user-role">{{ ROLES.get(g.user.role, g.user.role) }}</div>
      </div>
      <div class="user-actions dropdown">
        <button class="btn btn-link p-0 text-secondary" data-bs-toggle="dropdown">
          <i class="bi bi-three-dots-vertical"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
          <li><a class="dropdown-item" href="{{ url_for('profile') }}"><i class="bi bi-person me-2"></i>Profile</a></li>
          <li><hr class="dropdown-divider"></li>
          <li>
            <form method="post" action="{{ url_for('logout') }}">
              <button type="submit" class="dropdown-item text-danger">
                <i class="bi bi-box-arrow-right me-2"></i>Sign out
              </button>
            </form>
          </li>
        </ul>
      </div>
    </div>
    {% endif %}
  </div>
</div>

<!-- Mobile overlay -->
<div class="sidebar-backdrop" id="sidebarBackdrop" onclick="closeSidebar()"></div>

<!-- ═══ TOPBAR (mobile) ══════════════════════════════════════════ -->
<div class="kvpl-topbar d-lg-none">
  <button class="btn btn-link text-dark p-2" onclick="openSidebar()">
    <i class="bi bi-list fs-5"></i>
  </button>
  <span class="fw-semibold">KVPL Contracts</span>
</div>

<!-- ═══ MAIN CONTENT ═════════════════════════════════════════════ -->
<main class="kvpl-main">
  <div class="content-wrapper">

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'error' else ('warning' if category == 'warn' else category) }} alert-dismissible fade show d-flex align-items-center gap-2 mb-4" role="alert">
          <i class="bi bi-{% if category == 'success' %}check-circle{% elif category == 'error' %}exclamation-triangle{% else %}info-circle{% endif %}-fill flex-shrink-0"></i>
          <span>{{ message }}</span>
          <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endwith %}

    {% block content %}{% endblock %}
  </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmrN1Q48tL4B5OFzFAiLlqkbAWK"
        crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='js/kvpl.js') }}"></script>
<script>
// SCRIPT_ROOT: used by JS to prefix all fetch/form URLs correctly
// when app is served under a sub-path (e.g. /contract)
window.SCRIPT_ROOT = {{ request.script_root | tojson }};
</script>
<script>
function openSidebar()  { document.getElementById('sidebar').classList.add('open'); document.getElementById('sidebarBackdrop').classList.add('show'); }
function closeSidebar() { document.getElementById('sidebar').classList.remove('open'); document.getElementById('sidebarBackdrop').classList.remove('show'); }
setTimeout(() => { document.querySelectorAll('.alert').forEach(a => { try { bootstrap.Alert.getOrCreateInstance(a).close(); } catch(e){} }); }, 5000);
</script>
{% block scripts %}{% endblock %}
</body>
</html>
