{% extends 'layout/base.html' %}
{% block content %}
<style>
  .breadcrumb-container {
    margin-top: 20px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
  .breadcrumb {
    margin-bottom: 0;
    font-size: 14px;
    gap: 6px;
  }
  .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    margin: 0 6px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #007bff;
    border-right: 2px solid #007bff;
    transform: rotate(45deg);
  }
  .breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
  }
  .breadcrumb-item a:hover {
    color: #0056b3;
  }
  .breadcrumb-item.active {
    color: #2c3e50;
    font-weight: 600;
  }
  .upload-form {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 30px;
  }
  .doc-grid .doc-card {
    text-align: center;
    padding: 10px 5px;
    border-radius: 10px;
    transition: transform 0.2s ease;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  }
  .doc-grid .doc-card:hover {
    transform: scale(1.05);
  }
  .doc-grid img {
    max-height: 64px;
    margin-bottom: 6px;
  }
  .doc-grid small {
    font-size: 13px;
    display: block;
    word-break: break-word;
  }
  .doc-card .form-control-sm {
    font-size: 12px;
  }
  .text-muted.small {
    font-size: 12px;
  }
  .text-dark {
    color: #212529 !important;
  }
  .text-decoration-none {
    text-decoration: none !important;
  }
</style>

<div class="container">
  <!-- Breadcrumb -->
  <div class="breadcrumb-container mt-5">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.home') }}">🏠 Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('uploader.uploader_companies') }}">🏢 Companies</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('uploader.uploader_years', company_id=company.id) }}">📁 {{ company.name }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('uploader.uploader_categories', company_id=company.id, year_id=year.id) }}">📂 {{ year.year }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('uploader.uploader_months', company_id=company.id, year_id=year.id, category_id=category.id) }}">📅 {{ category.name }}</a></li>
        <li class="breadcrumb-item active">🗂 {{ month.name }} → {{ folder.name }}</li>
      </ol>
    </nav>
  </div>

  <!-- Upload Form -->
  {% if current_user.role in ['operator', 'accounts'] %}
  <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-banking-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <input type="file" name="document" class="form-control w-50" required id="banking-upload-file">
  <button type="submit" class="btn btn-primary">📤 Upload Banking Document</button>
</form>
  </div>
  {% endif %}

  <!-- Uploaded Documents -->
  <h5 class="mt-3">🏦 Uploaded Banking 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 in ['pending', 'reupload'] %}
      {% elif current_user.role == 'operator' %}
        {% set show_doc = doc.status in ['pending'] %}
      {% elif current_user.role == 'ca' %}
        {% set show_doc = doc.status == 'approved' %}
      {% else %}
        {% set show_doc = False %}
      {% endif %}

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

          {% if current_user.role == 'accounts' and doc.status in ['pending', 'reupload'] %}
          <form method="POST" action="{{ url_for('uploader.audit_banking', banking_id=doc.id) }}" enctype="multipart/form-data" class="mt-2">
            <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 name="action" value="audit" class="btn btn-sm btn-success">✅ Verify</button>
            </div>
          </form>
          {% else %}
          <div class="text-muted small mt-2">Status: {{ doc.status|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" action="{{ url_for('uploader.move_banking_document') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Move Banking 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 Target Month</label>
            <select name="target_month_id" id="month-select" 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>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">📦 Move</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- SweetAlert + JS -->
<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'
    });
  }

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

    document.querySelectorAll('.replacement-file').forEach(input => {
      input.addEventListener('change', function () {
        if (input.files.length > 0) input.closest('form').submit();
      });
    });

    // 📦 Move modal 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('month-select').selectedIndex = 0;

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

    // 📤 Banking upload file size check (max 5MB)
    const bankingFileInput = document.getElementById('banking-upload-file');
    const bankingForm = document.getElementById('upload-banking-form');

    if (bankingFileInput && bankingForm) {
      bankingFileInput.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 = ''; // Clear the file input
        }
      });

      bankingForm.addEventListener('submit', function (e) {
        const file = bankingFileInput.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'
          });
        }
      });
    }
  });
</script>
{% endblock %}