@extends('contentNavbarLayout')

@section('title', 'Paired Bulk Upload - Documents with CSV Files')

@section('page-style')
<style>
  #uploadLoadingOverlay {
    backdrop-filter: blur(5px);
  }
  
  #uploadLoadingOverlay .spinner-border {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .paired-example {
    background: #f8f9fa;
    border-left: 4px solid #28a745;
    padding: 10px;
    margin: 5px 0;
  }

  .unpaired-example {
    background: #fff3cd;
    border-left: 4px solid #dc3545;
    padding: 10px;
    margin: 5px 0;
  }
</style>
@endsection

@section('content')
<div class="container">
  {{-- Loading Screen Overlay --}}
  <div id="uploadLoadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; justify-content: center; align-items: center;">
    <div style="text-align: center; background: white; padding: 40px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: 500px;">
      <div class="spinner-border text-primary" role="status" style="width: 4rem; height: 4rem; border-width: 0.3em;">
        <span class="visually-hidden">Loading...</span>
      </div>
      <h4 class="mt-4 mb-2" id="uploadTitle">Processing Paired Upload...</h4>
      <p class="text-muted mb-3" id="uploadSubtitle">Validating file pairs and uploading</p>
      
      {{-- Progress Bar --}}
      <div id="progressBarContainer" style="display: none;" class="mb-3">
        <div class="progress" style="height: 30px;">
          <div id="uploadProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
               role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            <span id="progressText">0%</span>
          </div>
        </div>
        <p class="mt-2 mb-0 text-muted" style="font-size: 0.9em;" id="progressMessage">Starting...</p>
      </div>
      
      <p class="mt-3 mb-0 text-muted" style="font-size: 0.9em;">
        <i class="mdi mdi-information-outline me-1"></i>
        <span id="uploadHint">This may take a few moments for large uploads</span>
      </p>
    </div>
  </div>

  <h4 class="mb-4">
    <i class="mdi mdi-file-document-multiple-outline me-2"></i>Paired Bulk Upload - Documents with CSV Files
  </h4>

  {{-- Instructions Card --}}
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    <h5 class="alert-heading">
      <i class="mdi mdi-folder-upload me-2"></i>
      <strong>Folder-Based Periodic Upload System</strong>
    </h5>
    <hr>
    <p class="mb-2">This system automatically processes paired files from designated folders. <strong>EACH document must have a corresponding .csv file with the SAME NAME</strong>.</p>
    
    <div class="paired-example">
      <strong>✅ CORRECT - Complete Pairs:</strong><br>
      • contract.pdf + contract.csv (same name, different extensions)<br>
      • report_2025.docx + report_2025.csv (same name, different extensions)
    </div>
    
    <div class="unpaired-example">
      <strong>❌ INCORRECT - Incomplete/Wrong Pairs:</strong><br>
      • contract.pdf + contract_data.csv (names don't match) - WILL FAIL<br>
      • report.pdf (missing report.csv) - WILL FAIL
    </div>

    <hr>
    <strong>How to use Folder-Based Upload:</strong>
    <ol class="mb-0 mt-2 ps-3">
      <li>Download the template for your record type (see below)</li>
      <li>Prepare your documents and their paired .csv files with MATCHING NAMES</li>
      <li>Upload files to the designated folder on the server (see folder path below)</li>
      <li>System automatically processes files every <strong>{{ config('periodic_upload.schedule') }}</strong></li>
      <li>Check upload history below to see processing results</li>
    </ol>
    <div class="alert alert-success mt-2 mb-1">
      <i class="mdi mdi-information-outline me-1"></i>
      <strong>Upload Folder:</strong> {{ config('periodic_upload.upload_folder') }}<br>
      <small class="text-muted">Each record type has its own subfolder (e.g., contracts/, reports/)</small>
    </div>
    <div class="alert alert-warning mt-2 mb-0">
      <i class="mdi mdi-clock-outline me-1"></i>
      <strong>Processing Schedule:</strong> Files are automatically processed {{ config('periodic_upload.schedule') }}<br>
      <small class="text-muted">Successful uploads → <strong>done/</strong> folder | Failed uploads → <strong>failed/</strong> folder | Logs → <strong>logs/</strong> folder</small>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>

  {{-- Flash Messages --}}
  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <i class="mdi mdi-check-circle-outline me-1"></i>
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <i class="mdi mdi-alert-circle-outline me-1"></i>
      <strong>Upload Failed!</strong> Please fix the following:
      <ul class="mb-0 mt-1 ps-3">
        @foreach ($errors->all() as $error)
          <li style="white-space: pre-line;">{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  {{-- Template Download Section --}}
  <div class="card mb-4">
    <div class="card-header">
      <h5 class="mb-0">
        <i class="mdi mdi-download me-2"></i>Download Templates
      </h5>
    </div>
    <div class="card-body">
      <div class="mb-3">
        <label for="record_type_id" class="form-label">
          <strong>Select Record Type</strong> <span class="text-danger">*</span>
        </label>
        <select class="form-select" id="record_type_id" name="record_type_id">
          <option value="">-- Select Record Type --</option>
          @foreach($recordTypes as $type)
            <option value="{{ $type->id }}">{{ $type->name }}</option>
          @endforeach
        </select>
        <div class="form-text">Choose the type of records you want to upload</div>
      </div>

      <div id="templateSection" style="display: none;">
        <div class="d-flex align-items-center gap-3 mb-3">
          <button type="button" class="btn btn-success btn-lg" id="downloadTemplateBtn" disabled>
            <i class="mdi mdi-download me-1"></i> Download Template Package (ZIP)
          </button>
          <span class="badge bg-success p-2">
            <i class="mdi mdi-package-variant me-1"></i>Excel + Instructions + Example Files
          </span>
        </div>
        
        <div class="alert alert-info mb-0">
          <strong><i class="mdi mdi-lightbulb-outline me-1"></i>Template package contains:</strong>
          <ul class="mb-0 mt-2">
            <li><strong>contract.pdf</strong> - Example document file (replace with yours)</li>
            <li><strong>contract.csv</strong> - Example paired CSV with headers, example row, and data row</li>
            <li><strong>README.txt</strong> - Detailed pairing instructions and step-by-step guide</li>
          </ul>
          <hr class="my-2">
          <strong>After downloading:</strong>
          <ol class="mb-0 mt-1">
            <li>Extract the ZIP file</li>
            <li>Use contract.csv as template for your paired CSV files</li>
            <li>Upload files to: <code>{{ config('periodic_upload.upload_folder') }}/[record-type-folder]/</code></li>
            <li>System will automatically process files {{ config('periodic_upload.schedule') }}</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  {{-- Active Upload Progress Status - REMOVED FOR FOLDER-BASED SYSTEM --}}
  {{-- Users no longer upload via web interface --}}

  {{-- Active/In-Progress Uploads - REMOVED FOR FOLDER-BASED SYSTEM --}}
  {{-- Processing happens automatically in background via scheduled command --}}

  {{-- Upload History --}}
  @hasPermission('document.pairedbulkupload.view_history')
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">
        <i class="mdi mdi-history me-2"></i>Paired Upload History
      </h5>
    </div>
    <div class="card-body">
      @if($uploadHistory->total() == 0)
        <div class="text-center py-5">
          <i class="mdi mdi-file-upload-outline" style="font-size: 48px; color: #ccc;"></i>
          <p class="text-muted mt-2 mb-0">No paired upload history available</p>
        </div>
      @else
        <div class="table-responsive">
          <table class="table table-hover">
            <thead class="table-light">
              <tr>
                <th>Timestamp</th>
                <th>Record Type</th>
                <th>Total Files</th>
                <th>Queue Status</th>
                <th>Upload Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach($uploadHistory as $index => $upload)
              <tr>
                <td>{{ \Carbon\Carbon::parse($upload->created_at)->format('Y-m-d H:i:s') }}</td>
                <td>
                  <span class="badge bg-info">{{ ucfirst($upload->record_type_name) }}</span>
                </td>
                <td>{{ $upload->total_files }}</td>
                <td>
                  @if(isset($upload->status))
                    @if($upload->status === 'pending')
                      <span class="badge bg-secondary">⏳ Pending</span>
                    @elseif($upload->status === 'processing')
                      <span class="badge bg-warning">🔄 Processing ({{ round($upload->progress_percentage ?? 0) }}%)</span>
                    @elseif($upload->status === 'completed')
                      <span class="badge bg-success">✓ Completed</span>
                    @elseif($upload->status === 'failed')
                      <span class="badge bg-danger">✗ Failed</span>
                    @endif
                  @else
                    <span class="badge bg-success">✓ Completed</span>
                  @endif
                </td>
                <td>
                  @if(isset($upload->successful))
                    <span class="badge bg-success">{{ $upload->successful }} Success</span>
                    @if($upload->failed > 0)
                      <span class="badge bg-danger">{{ $upload->failed }} Failed</span>
                    @endif
                  @else
                    <span class="text-muted">Processing...</span>
                  @endif
                </td>
                <td>
                  @if(isset($upload->files_detail) || isset($upload->result))
                    <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#details{{ $upload->id }}">
                      <i class="mdi mdi-eye-outline me-1"></i> View Details
                    </button>
                  @else
                    <span class="text-muted">-</span>
                  @endif
                </td>
              </tr>
              <tr class="collapse" id="details{{ $upload->id }}">
                <td colspan="6">
                  <div class="p-3 bg-light">
                    @php
                      // Handle both queue uploads (result field) and history uploads (files_detail field)
                      $details = null;
                      if (isset($upload->result)) {
                        $details = is_string($upload->result) ? json_decode($upload->result, true) : $upload->result;
                      } elseif (isset($upload->files_detail)) {
                        $details = is_string($upload->files_detail) ? json_decode($upload->files_detail, true) : $upload->files_detail;
                      }
                      
                      // Extract file details
                      $files = [];
                      if (is_array($details)) {
                        $files = $details['files'] ?? $details;
                      }
                    @endphp
                    
                    @if(!empty($files) && is_array($files))
                      <h6 class="mb-3">Paired File Details:</h6>
                      <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                          <thead>
                            <tr>
                              <th>Document File</th>
                              <th>CSV File</th>
                              <th>Doc Size</th>
                              <th>CSV Size</th>
                              <th>Status</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach($files as $file)
                            <tr>
                              <td>{{ $file['name'] ?? 'N/A' }}</td>
                              <td>
                                @if(isset($file['csv_file']))
                                  <i class="mdi mdi-check-circle text-success me-1"></i>{{ $file['csv_file'] }}
                                @elseif(isset($file['xlsx_file']))
                                  <i class="mdi mdi-check-circle text-success me-1"></i>{{ $file['xlsx_file'] }}
                                @else
                                  <span class="text-muted">N/A</span>
                                @endif
                              </td>
                              <td>{{ isset($file['size']) && is_numeric($file['size']) ? number_format($file['size'] / 1024, 2) . ' KB' : 'N/A' }}</td>
                              <td>
                                @php
                                  $csvSize = $file['csv_size'] ?? $file['xlsx_size'] ?? null;
                                @endphp
                                {{ isset($csvSize) && is_numeric($csvSize) ? number_format($csvSize / 1024, 2) . ' KB' : 'N/A' }}
                              </td>
                              <td>
                                @if(($file['status'] ?? '') == 'success')
                                  <span class="badge bg-success">
                                    <i class="mdi mdi-check"></i> Success
                                  </span>
                                @else
                                  <span class="badge bg-danger">
                                    <i class="mdi mdi-close"></i> Failed
                                  </span>
                                  @if(isset($file['error']))
                                    <br><small class="text-danger">{{ $file['error'] }}</small>
                                  @endif
                                @endif
                              </td>
                            </tr>
                            @endforeach
                          </tbody>
                        </table>
                      </div>
                    @else
                      <p class="text-muted mb-0">
                        @if(isset($upload->status) && in_array($upload->status, ['pending', 'processing']))
                          <i class="mdi mdi-progress-clock me-1"></i>Upload is still processing. Details will be available when complete.
                        @elseif(isset($upload->message))
                          {{ $upload->message }}
                        @else
                          No details available for this upload.
                        @endif
                      </p>
                    @endif
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        
        {{-- Pagination Links --}}
        @if($uploadHistory->hasPages())
        <div class="d-flex justify-content-between align-items-center mt-3">
          <div class="text-muted">
            Showing {{ $uploadHistory->firstItem() }} to {{ $uploadHistory->lastItem() }} of {{ $uploadHistory->total() }} entries
          </div>
          <div>
            {{ $uploadHistory->links() }}
          </div>
        </div>
        @endif
      @endif
    </div>
  </div>
  @endhasPermission
</div>
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Show template section based on record type selection
  const recordTypeSelect = document.getElementById('record_type_id');
  const templateSection = document.getElementById('templateSection');
  const downloadBtn = document.getElementById('downloadTemplateBtn');

  if (recordTypeSelect) {
    recordTypeSelect.addEventListener('change', function() {
      const recordTypeId = this.value;
      
      if (recordTypeId) {
        templateSection.style.display = 'block';
        downloadBtn.disabled = false;
        
        // Update download button URL
        downloadBtn.onclick = function() {
          const url = '{{ route("paired-bulk-upload.download-template") }}?record_type_id=' + recordTypeId;
          window.location.href = url;
        };
      } else {
        templateSection.style.display = 'none';
        downloadBtn.disabled = true;
      }
    });
  }
});
</script>
@endsection