@extends('layouts.admin')

@section('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 -->
  <div class="breadcrumb-tabs" role="tablist">
    <a href="{{ route('dashboard') }}" class="breadcrumb-tab">🏠 Dashboard</a>
    <a href="{{ route('uploader.year.show', ['company' => $company->id, 'year' => $year->id]) }}" class="breadcrumb-tab">📁 {{ $company->name }}</a>
    <a href="{{ route('uploader.category.show', ['company' => $company->id, 'year' => $year->id, 'category' => $category->id]) }}" class="breadcrumb-tab">📂 {{ $year->display_year }}</a>
    <a href="{{ route('uploader.month.show', ['company' => $company->id, 'year' => $year->id, 'category' => $category->id, 'month' => $month->id]) }}" class="breadcrumb-tab">📅 {{ $category->name }}</a>
    <span class="breadcrumb-tab active">🗂 {{ $month->name }} → {{ $purchase->title ?? 'Purchase' }}</span>
  </div>

  @if (in_array(auth()->user()->role, ['operator']))
  <div class="upload-form mt-4">
    <small class="text-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-form">
      @csrf
      <input type="hidden" name="purchase_id" value="{{ $purchase->id }}">
      <input type="file" name="document" class="form-control w-50" required id="upload-file-input">
      <button type="submit" class="btn btn-primary">📤 Upload Document</button>
    </form>
  </div>
  @endif

  <h5 class="mt-3">📁 Uploaded Documents</h5>
  @if(isset($documents) && $documents->count() > 0)
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3 doc-grid">
    @foreach($documents as $doc)
      @php
        $show_doc = false;
        if (auth()->user()->role == 'admin') {
          $show_doc = true;
        } elseif (auth()->user()->role == 'accounts') {
          $show_doc = in_array($doc->status, ['pending', 'reupload']);
        } elseif (auth()->user()->role == 'operator') {
          $show_doc = $doc->status == 'pending';
        } elseif (auth()->user()->role == 'ca') {
          $show_doc = $doc->status == 'approved';
        }
      @endphp

      @if($show_doc)
        @php $fname = basename($doc->bill_path); @endphp
        <div class="col">
          <div class="doc-card h-100 d-flex flex-column justify-content-between">
            @if (auth()->user()->role == 'admin' && $doc->status == 'pending')
              <a href="#" onclick="showAuditAlert()" class="text-decoration-none text-dark d-block">
                <img src="{{ asset('images/document.png') }}" alt="File Icon" class="img-fluid">
                <small>{{ $fname }}</small>
                <small class="text-muted">({{ strtolower(pathinfo($fname, PATHINFO_EXTENSION)) }})</small>
              </a>
            @else
              <a href="{{ asset($doc->bill_path) }}" target="_blank" class="text-decoration-none text-dark d-block">
                <img src="{{ asset('images/document.png') }}" alt="File Icon" class="img-fluid">
                <small>{{ $fname }}</small>
                <small class="text-muted">({{ strtolower(pathinfo($fname, PATHINFO_EXTENSION)) }})</small>
              </a>
            @endif

            @if (auth()->user()->role == 'accounts' && in_array($doc->status, ['pending', 'reupload']))
              <form method="POST" action="{{ route('uploader.audit_purchase', $doc->id) }}" enctype="multipart/form-data" class="mt-2">
                @csrf
                <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: {{ ucfirst($doc->status) }}</div>
            @endif

            @if (in_array(auth()->user()->role, ['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
    @endforeach
  </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="{{ route('uploader.move_purchase_document') }}">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="moveDocLabel">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>
              @foreach($all_months as $m)
                <option value="{{ $m->id }}">{{ $m->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Select Company Subfolder</label>
            <select name="target_folder_id" id="subfolder-select" class="form-select" required disabled>
              <option value="">-- Select Subfolder --</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>
  const subfoldersByMonth = {!! json_encode($subfolders_by_month ?? []) !!};
  
  function showAuditAlert() {
    Swal.fire({
      icon: 'info',
      title: 'Not Audited Yet',
      text: 'The file is not audited yet. Please wait for the Auditor department to review it.',
      confirmButtonText: 'Okay'
    });
  }

  document.addEventListener("DOMContentLoaded", function () {
    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();
      });
    });

    document.querySelectorAll('.replacement-file').forEach(input => {
      input.addEventListener('change', function () {
        if (input.files.length > 0) {
          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();
        }
      });
    });

    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 subfolderSelect = document.getElementById('subfolder-select');
        subfolderSelect.innerHTML = '<option value="">-- Select Subfolder --</option>';
        subfolderSelect.disabled = true;
        const modal = new bootstrap.Modal(document.getElementById('moveDocModal'));
        modal.show();
      });
    });

    document.getElementById('month-select').addEventListener('change', function () {
      const selectedMonthId = this.value;
      const subfolderSelect = document.getElementById('subfolder-select');
      subfolderSelect.innerHTML = '<option value="">-- Select Subfolder --</option>';
      subfolderSelect.disabled = true;
      if (subfoldersByMonth[selectedMonthId]) {
        subfoldersByMonth[selectedMonthId].forEach(folder => {
          const option = document.createElement('option');
          option.value = folder.id;
          option.textContent = folder.name;
          subfolderSelect.appendChild(option);
        });
        subfolderSelect.disabled = false;
      }
    });

    const fileInput = document.getElementById('upload-file-input');
    const uploadForm = document.getElementById('upload-form');
    if (fileInput && uploadForm) {
      fileInput.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.' });
          this.value = '';
        }
      });
      uploadForm.addEventListener('submit', function (e) {
        const file = fileInput.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.' });
        } else {
          Swal.fire({
            title: 'Uploading...', text: 'Please wait while your document uploads.',
            didOpen: () => { Swal.showLoading(); }, allowOutsideClick: false,
            allowEscapeKey: false, allowEnterKey: false, backdrop: true
          });
        }
      });
    }
  });
</script>
@endsection