{% extends 'layout/base.html' %}
{% block content %}
<style>
  body {
    background-color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .breadcrumb-tabs {
    display: flex;
    gap: 2px;
    background-color: #f0f2f8;
    border-radius: 10px;
    overflow: hidden;
    margin: 40px 0 30px 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
  }

  .breadcrumb-tab {
    padding: 12px 20px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    display: inline-block;
  }

  .breadcrumb-tab:hover {
    background-color: #f6f9ff;
  }

  .breadcrumb-tab.active {
    color: #2b2b2b;
    font-weight: 600;
    border-bottom: 2px solid #6366f1;
  }

  .folder-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 10px 0;
  }

  .folder-card {
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .folder-card:hover {
    transform: scale(1.06);
  }

  .folder-icon {
    width: 64px;
    margin-bottom: 10px;
  }

  .folder-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
  }

  .upload-form input[type="file"] {
    border: 1px solid #d1d5db;
    padding: 8px;
    border-radius: 6px;
  }

  .upload-form .btn {
    padding: 8px 16px;
  }

  .doc-card {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease;
  }

  .doc-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }

  .doc-card img {
    width: 60px;
    margin: 0 auto 10px auto;
    display: block;
  }

  .doc-card small {
    display: block;
    font-size: 12px;
    text-align: center;
    color: #444;
    font-weight: 500;
  }

  .btn-reupload, .btn-verify {
    font-size: 13px;
    padding: 5px 10px;
  }

  .btn-submit-replacement {
    padding: 5px 12px;
    font-size: 13px;
  }
</style>

<div class="container">
  <!-- Breadcrumb Navigation -->
  <div class="breadcrumb-tabs">
    <a href="{{ url_for('dashboard.home') }}" class="breadcrumb-tab">🏠 Dashboard</a>
    <a href="{{ url_for('uploader.uploader_years', company_id=company.id) }}" class="breadcrumb-tab">📁 {{ company.name }}</a>
    <a href="{{ url_for('uploader.uploader_categories', company_id=company.id, year_id=year.id) }}" class="breadcrumb-tab">📂 {{ year.year }}</a>
    <a href="{{ url_for('uploader.uploader_months', company_id=company.id, year_id=year.id, category_id=category.id) }}" class="breadcrumb-tab">📅 {{ category.name }}</a>
    <span class="breadcrumb-tab active">🗂 {{ month.name }} → {{ folder.name }}</span>
  </div>

  {% if current_user.role == 'operator' %}
<div class="upload-form mt-4">
  <small class="danger">(Max File Size 5 MB)</small>
  <form method="POST" enctype="multipart/form-data" class="d-flex flex-wrap align-items-center gap-3" id="upload-expense-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="file" name="document" class="form-control w-50" required id="expense-upload-file">
    <button type="submit" class="btn btn-primary">📤 Upload Document</button>
  </form>
</div>
{% endif %}

  <h5 class="mt-3">📁 Uploaded Expense Documents  </h5>
  {% if documents %}
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3 doc-grid">
{% for doc in documents %}
  {% if current_user.role == 'admin' %}
    {% set show_doc = True %}
  {% elif current_user.role == 'accounts' %}
    {% set show_doc = doc.status_of_audit in ['pending', 'reupload'] %}
  {% elif current_user.role == 'operator' %}
    {% set show_doc = doc.status_of_audit == 'pending' %}
  {% elif current_user.role == 'ca' %}
    {% set show_doc = doc.status_of_audit == 'audited' %}
  {% else %}
    {% set show_doc = False %}
  {% endif %}

      {% if show_doc %}
      {% if doc.bill_path %}
  {% set cleaned_path = url_for('static', filename=doc.bill_path.replace('\\', '/')) %}
{% else %}
  {% set cleaned_path = '' %}
{% endif %}
      <div class="col">
        <div class="doc-card h-100 d-flex flex-column justify-content-between">
          {% if current_user.role == 'admin' and doc.status_of_audit in ['pending'] %}
            <a href="#" onclick="showAuditAlert()" class="text-decoration-none text-dark d-block">
              <img src="{{ url_for('static', filename='images/document.png') }}" alt="File Icon" class="img-fluid">
              <small>{{ doc.filename }}</small>
              <small class="text-muted">({{ doc.filename.split('.')[-1]|lower }})</small>
            </a>
          {% else %}
            <a href="{{ cleaned_path }}" target="_blank" class="text-decoration-none text-dark d-block">
              <img src="{{ url_for('static', filename='images/document.png') }}" alt="File Icon" class="img-fluid">
              <small>{{ doc.filename }}</small>
              <small class="text-muted">({{ doc.filename.split('.')[-1]|lower }})</small>
            </a>
          {% endif %}

          {% if current_user.role == 'accounts' and doc.status_of_audit in ['pending', 'reupload'] %}
          <form method="POST" action="{{ url_for('uploader.audit_expense', expense_id=doc.id) }}" enctype="multipart/form-data" class="mt-2"><small class="danger">(Max File Size 5 MB)</small>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <input type="file" name="replacement_file" class="form-control form-control-sm mb-1 replacement-file" style="display: none;">
  <div class="d-flex flex-wrap gap-2 justify-content-center">
    <button type="button" class="btn btn-sm btn-outline-warning btn-reupload">🔁 Reupload</button>
    <button type="submit" class="btn btn-sm btn-success">✅ Verify</button>
  </div>
</form>
          {% else %}
          <div class="text-muted small mt-2">Status: {{ doc.status_of_audit|capitalize }}</div>
          {% endif %}

          {% if current_user.role in ['admin', 'accounts'] %}
          <button class="btn btn-sm btn-secondary mt-2 btn-move-doc" data-doc-id="{{ doc.id }}">📦 Move</button>
          {% endif %}
        </div>
      </div>
      {% endif %}
    {% endfor %}
  </div>
  {% else %}
    <p class="text-muted">No documents uploaded yet.</p>
  {% endif %}
</div>

<!-- 📦 Move Modal -->
<div class="modal fade" id="moveDocModal" tabindex="-1" aria-labelledby="moveDocLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" id="move-expense-form" action="">
<<<<<<< HEAD
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
=======
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
>>>>>>> 4dac66533867dde9d0bc9fb1f90d8f61d142b1fa
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Move Document</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="document_id" id="move-doc-id">

          <div class="mb-3">
            <label class="form-label">Select Month</label>
            <select id="month-select" name="target_month_id" class="form-select" required>
              <option value="">-- Select Month --</option>
              {% for m in all_months %}
                <option value="{{ m.id }}">{{ m.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Select Subcategory</label>
            <select name="target_subcategory_id" id="subcategory-select" class="form-select" required disabled>
              <option value="">-- Select Subcategory --</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">📦 Move</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  function showAuditAlert() {
    Swal.fire({
      icon: 'info',
      title: 'Not Audited Yet',
      text: 'The file is not audited yet. Please wait for the Auditor to review it.',
      confirmButtonText: 'Okay'
    });
  }

  const subcategoriesByMonth = {{ subcategories_by_month | default({}) | tojson }};

  document.addEventListener("DOMContentLoaded", function () {
    // 🔁 Toggle reupload file input
    document.querySelectorAll('.btn-reupload').forEach(button => {
      button.addEventListener('click', function () {
        const input = this.closest('form').querySelector('.replacement-file');
        input.style.display = input.style.display === 'none' ? 'block' : 'none';
        if (input.style.display === 'block') {
          input.focus();
        }
      });
    });

    // 🔁 Handle reupload file selection with validation
    document.querySelectorAll('.replacement-file').forEach(input => {
      input.addEventListener('change', function () {
        const file = input.files[0];
        if (file) {
          if (file.size > 5 * 1024 * 1024) {
            Swal.fire({
              icon: 'error',
              title: 'File Too Large',
              text: 'Please upload a file smaller than 5 MB.',
              confirmButtonText: 'Okay'
            });
            input.value = '';
          } else {
            Swal.fire({
              title: 'Reuploading...',
              text: 'Please wait while we replace the document.',
              didOpen: () => {
                Swal.showLoading();
              },
              allowOutsideClick: false,
              allowEscapeKey: false,
              allowEnterKey: false,
              backdrop: true
            });

            input.closest('form').submit();
          }
        }
      });
    });

    // 📦 Move document logic
    document.querySelectorAll('.btn-move-doc').forEach(button => {
      button.addEventListener('click', function () {
        const docId = this.getAttribute('data-doc-id');
        document.getElementById('move-doc-id').value = docId;
        document.getElementById('move-expense-form').setAttribute('action', `/uploader/move/expense/${docId}`);
        document.getElementById('month-select').selectedIndex = 0;

        const subcatSelect = document.getElementById('subcategory-select');
        subcatSelect.innerHTML = '<option value="">-- Select Subcategory --</option>';
        subcatSelect.disabled = true;

        const modal = new bootstrap.Modal(document.getElementById('moveDocModal'));
        modal.show();
      });
    });

    // 📅 Populate subcategories by month
    document.getElementById('month-select').addEventListener('change', function () {
      const selectedMonthId = this.value;
      const subcatSelect = document.getElementById('subcategory-select');
      subcatSelect.innerHTML = '<option value="">-- Select Subcategory --</option>';
      subcatSelect.disabled = true;

      if (subcategoriesByMonth[selectedMonthId]) {
        subcategoriesByMonth[selectedMonthId].forEach(subcat => {
          const option = document.createElement('option');
          option.value = subcat.id;
          option.textContent = subcat.name;
          subcatSelect.appendChild(option);
        });
        subcatSelect.disabled = false;
      }
    });

    // 📤 Expense file upload check
    const expenseFileInput = document.getElementById('expense-upload-file');
    const expenseForm = document.getElementById('upload-expense-form');

    if (expenseFileInput && expenseForm) {
      expenseFileInput.addEventListener('change', function () {
        const file = this.files[0];
        if (file && file.size > 5 * 1024 * 1024) {
          Swal.fire({
            icon: 'error',
            title: 'File Too Large',
            text: 'Please upload a file smaller than 5 MB.',
            confirmButtonText: 'Okay'
          });
          this.value = '';
        }
      });

      expenseForm.addEventListener('submit', function (e) {
        const file = expenseFileInput.files[0];
        if (file && file.size > 5 * 1024 * 1024) {
          e.preventDefault();
          Swal.fire({
            icon: 'error',
            title: 'File Too Large',
            text: 'Please upload a file smaller than 5 MB.',
            confirmButtonText: 'Okay'
          });
        } else {
          Swal.fire({
            title: 'Uploading...',
            text: 'Please wait while your document uploads.',
            didOpen: () => {
              Swal.showLoading();
            },
            allowOutsideClick: false,
            allowEscapeKey: false,
            allowEnterKey: false,
            backdrop: true
          });
        }
      });
    }
  });
</script>
{% endblock %}