{% extends "base_authenticated.html" %}
{% block title %}Import Batch Details - {{ COMPANY_NAME }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/time_attendance.css') }}">
<style>
.batch-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.summary-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.summary-card .value {
  font-size: 2rem;
  font-weight: 700;
  color: #4299e1;
  margin-bottom: 0.5rem;
}

.summary-card .label {
  color: #718096;
  font-size: 0.875rem;
}

.detail-section {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.detail-section h3 {
  color: #2d3748;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f7fafc;
  border-radius: 8px;
}

.employee-list {
  max-height: 400px;
  overflow-y: auto;
}

.employee-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.employee-item:last-child {
  border-bottom: none;
}
</style>
{% endblock %}

{% block page_title %}Import Batch Details{% endblock %}

{% block content %}
<div class="batch-detail-page">
  <!-- Header -->
  <div class="time-attendance-header">
    <div class="header-navigation">
      <a href="{{ url_for('time_attendance.time_attendance_dashboard') }}" class="back-button">
        <i class="fas fa-arrow-left"></i>
        Back to Dashboard
      </a>
    </div>
    
    <div class="header-content">
      <h1>
        <i class="fas fa-database"></i>
        Import Batch Details
      </h1>
      <p class="header-description">
        Batch ID: <code>{{ batch_summary.batch_id }}</code>
      </p>
    </div>
    
    <div class="header-actions">
      <a href="{{ url_for('time_attendance.time_attendance_records', import_batch=batch_summary.batch_id) }}" 
         class="btn btn-primary">
        <i class="fas fa-eye"></i>
        View All Records
      </a>
      {% if session.role == 'admin' %}
      <button onclick="deleteBatch()" class="btn btn-danger">
        <i class="fas fa-trash"></i>
        Delete Batch
      </button>
      {% endif %}
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="summary-grid">
    <div class="summary-card">
      <div class="value">{{ batch_summary.total_records }}</div>
      <div class="label">Total Records</div>
    </div>
    
    <div class="summary-card">
      <div class="value">{{ batch_summary.unique_employees }}</div>
      <div class="label">Unique Employees</div>
    </div>
    
    <div class="summary-card">
      <div class="value">{{ batch_summary.unique_locations }}</div>
      <div class="label">Locations</div>
    </div>
    
    <div class="summary-card">
      <div class="value">{{ batch_summary.date_range.start.strftime('%Y-%m-%d') }}</div>
      <div class="label">Start Date</div>
    </div>
    
    <div class="summary-card">
      <div class="value">{{ batch_summary.date_range.end.strftime('%Y-%m-%d') }}</div>
      <div class="label">End Date</div>
    </div>
  </div>

  <!-- Import Information -->
  <div class="detail-section">
    <h3>
      <i class="fas fa-info-circle"></i>
      Import Information
    </h3>
    <p><strong>Import Date:</strong> {{ batch_summary.import_date.strftime('%Y-%m-%d %H:%M:%S') if batch_summary.import_date else 'Unknown' }}</p>
    <p><strong>Import Source:</strong> {{ batch_summary.import_source or 'Not specified' }}</p>
    <p><strong>Batch ID:</strong> <code>{{ batch_summary.batch_id }}</code></p>
  </div>

  <!-- Action Breakdown -->
  <div class="detail-section">
    <h3>
      <i class="fas fa-chart-bar"></i>
      Actions Breakdown
    </h3>
    <div class="action-breakdown">
      {% for action, count in batch_summary.actions.items() %}
      <div class="action-item">
        <span><strong>{{ action }}</strong></span>
        <span>{{ count }} records</span>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Employee Summary -->
  <div class="detail-section">
    <h3>
      <i class="fas fa-users"></i>
      Employee Summary
    </h3>
    <div class="employee-list">
      {% for emp_id, emp_data in batch_summary.employee_summary.items() %}
      <div class="employee-item">
        <span><strong>{{ emp_data.name }}</strong> (ID: {{ emp_id }})</span>
        <span>{{ emp_data.count }} records</span>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<script>
function deleteBatch() {
  if (confirm('Are you sure you want to delete this entire import batch? This will remove all {{ batch_summary.total_records }} records. This action cannot be undone.')) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/time-attendance/import/batch/{{ batch_summary.batch_id }}/delete';
    
    document.body.appendChild(form);
    form.submit();
  }
}
</script>
{% endblock %}