{% extends "base.html" %}

{% set heading = "Schengen Area Compliance Report" %}

{% block title %}{{ heading }} - Edward Betts{% endblock %}

{% block content %}
<div class="container-fluid">
  <h1>Schengen Area Compliance Report</h1>
  
  <div class="row">
    <div class="col-md-8">
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="card-title">Current Status</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <h6>Compliance Status</h6>
              {% if current_compliance.is_compliant %}
                <span class="badge bg-success fs-6">✅ COMPLIANT</span>
              {% else %}
                <span class="badge bg-danger fs-6">❌ NON-COMPLIANT</span>
              {% endif %}
            </div>
            <div class="col-md-6">
              <h6>Days Used</h6>
              <div class="fs-4">{{ current_compliance.total_days_used }}/90</div>
            </div>
          </div>
          
          <div class="row mt-3">
            <div class="col-md-6">
              {% if current_compliance.is_compliant %}
                <h6>Days Remaining</h6>
                <div class="fs-5 text-success">{{ current_compliance.days_remaining }}</div>
              {% else %}
                <h6>Days Over Limit</h6>
                <div class="fs-5 text-danger">{{ current_compliance.days_over_limit }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              {% if current_compliance.next_reset_date %}
                <h6>Next Reset Date</h6>
                <div class="fs-6">{{ current_compliance.next_reset_date.strftime('%Y-%m-%d') }}</div>
              {% endif %}
            </div>
          </div>
          
          <div class="mt-3">
            <h6>Current 180-day Period</h6>
            <div class="text-muted">
              {{ current_compliance.current_180_day_period[0].strftime('%Y-%m-%d') }} to 
              {{ current_compliance.current_180_day_period[1].strftime('%Y-%m-%d') }}
            </div>
          </div>
        </div>
      </div>

      {% if current_compliance.stays_in_period %}
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="card-title">Stays in Current 180-day Period</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Entry Date</th>
                  <th>Exit Date</th>
                  <th>Country</th>
                  <th>Days</th>
                </tr>
              </thead>
              <tbody>
                {% for stay in current_compliance.stays_in_period %}
                <tr>
                  <td>{{ stay.entry_date.strftime('%Y-%m-%d') }}</td>
                  <td>
                    {% if stay.exit_date %}
                      {{ stay.exit_date.strftime('%Y-%m-%d') }}
                    {% else %}
                      <span class="text-muted">ongoing</span>
                    {% endif %}
                  </td>
                  <td>{{ stay.country | country_flag }} {{ stay.country.upper() }}</td>
                  <td>{{ stay.days }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% endif %}
    </div>

    <div class="col-md-4">
      {% if warnings %}
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="card-title">Warnings</h5>
        </div>
        <div class="card-body">
          {% for warning in warnings %}
          <div class="alert alert-{{ 'danger' if warning.severity == 'error' else 'warning' }} alert-dismissible fade show" role="alert">
            <strong>{{ warning.date.strftime('%Y-%m-%d') }}</strong><br>
            {{ warning.message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      <div class="card">
        <div class="card-header">
          <h5 class="card-title">Compliance History</h5>
        </div>
        <div class="card-body">
          <div class="chart-container" style="height: 300px;">
            <canvas id="complianceChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if trips_with_compliance %}
  <div class="card mt-4">
    <div class="card-header">
      <h5 class="card-title">Trip Compliance History</h5>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Trip Date</th>
              <th>Days Used</th>
              <th>Days Remaining</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for trip_date, calculation in trips_with_compliance.items() %}
            <tr>
              <td>{{ trip_date.strftime('%Y-%m-%d') }}</td>
              <td>{{ calculation.total_days_used }}/90</td>
              <td>{{ calculation.days_remaining }}</td>
              <td>
                {% if calculation.is_compliant %}
                  <span class="badge bg-success">Compliant</span>
                {% else %}
                  <span class="badge bg-danger">Non-compliant</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('complianceChart').getContext('2d');
const complianceHistory = {{ compliance_history | tojson }};

const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: complianceHistory.map(item => item.date),
        datasets: [{
            label: 'Days Used',
            data: complianceHistory.map(item => item.days_used),
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                max: 90,
                ticks: {
                    callback: function(value) {
                        return value + '/90';
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: true
            }
        }
    }
});
</script>
{% endblock %}