@extends('contentNavbarLayout')

@section('title', 'Bulk Upload Documents with Metadata')

@section('content')
<div class="container">
  <h4 class="mb-4">
    <i class="mdi mdi-cloud-upload-outline me-2"></i>Bulk Upload Documents with Metadata
  </h4>

  {{-- Instructions Card --}}
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    <i class="mdi mdi-information-outline me-2"></i>
    <strong>How to use Bulk Upload:</strong>
    <ol class="mb-0 mt-2 ps-3">
      <li>Select a record type from the dropdown</li>
      <li>Click "Download Template" to get a ZIP file with metadata.csv and documents folder</li>
      <li>Extract the ZIP, place your document files in the documents folder</li>
      <li>Fill in metadata.csv with information for each document (one row per file)</li>
      <li>Re-zip the folder (must contain metadata.csv and documents folder)</li>
      <li>Upload the complete ZIP file and click "Upload" to process all records</li>
    </ol>
    <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>Whoops!</strong> Please fix the following:
      <ul class="mb-0 mt-1 ps-3">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  {{-- Upload Form --}}
  @hasPermission('document.bulkupload.upload')
  <div class="card mb-4">
    <div class="card-header">
      <h5 class="mb-0">
        <i class="mdi mdi-upload me-2"></i>Upload Documents with Metadata
      </h5>
    </div>
    <div class="card-body">
      <form action="{{ route('bulk-upload.upload') }}" method="POST" enctype="multipart/form-data" id="bulkUploadForm">
        @csrf
        
        {{-- Step 1: Select Record Type --}}
        <div class="mb-4">
          <label for="record_type_id" class="form-label">
            <strong>Step 1:</strong> Select Record Type <span class="text-danger">*</span>
          </label>
          <select class="form-select" id="record_type_id" name="record_type_id" required>
            <option value="">-- Select Record Type --</option>
            @foreach($recordTypes as $type)
              <option value="{{ $type->id }}" {{ old('record_type_id') == $type->id ? 'selected' : '' }}>
                {{ $type->name }}
              </option>
            @endforeach
          </select>
          <div class="form-text">Choose the type of records you want to upload</div>
        </div>

        {{-- Step 2: Download Template --}}
        <div class="mb-4" id="templateSection" style="display: none;">
          <label class="form-label">
            <strong>Step 2:</strong> Download Template Package
          </label>
          <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-success" id="downloadTemplateBtn" disabled>
              <i class="mdi mdi-download me-1"></i> Download ZIP Template
            </button>
            <span class="text-muted" id="templateInfo">ZIP contains metadata.csv and documents folder</span>
          </div>
          <div class="form-text mt-2">
            The ZIP file includes a metadata.csv template with all required columns and a documents folder for your files
          </div>
        </div>

        {{-- Step 3: Upload ZIP Package --}}
        <div class="mb-4" id="metadataSection" style="display: none;">
          <label for="zip_file" class="form-label">
            <strong>Step 3:</strong> Upload Complete ZIP Package <span class="text-danger">*</span>
          </label>
          <input type="file" class="form-control" id="zip_file" name="zip_file" 
                 accept=".zip" {{ old('record_type_id') ? '' : 'disabled' }}>
          <div class="form-text">Upload the ZIP file containing metadata.csv and documents folder with all files</div>
        </div>

        <div class="mb-3" id="filePreviewSection" style="display: none;">
          <div id="fileList" class="border rounded p-3 bg-light">
            <h6 class="mb-2">Selected Files:</h6>
            <ul id="selectedFiles" class="list-unstyled mb-0"></ul>
          </div>
        </div>

        {{-- Submit Buttons --}}
        <div class="d-flex justify-content-between align-items-center" id="submitSection" style="display: none;">
          <button type="submit" class="btn btn-primary" id="uploadBtn" disabled>
            <i class="mdi mdi-upload me-1"></i> Upload All Records
          </button>
          <button type="button" class="btn btn-outline-secondary" id="resetBtn" onclick="resetForm()">
            <i class="mdi mdi-refresh me-1"></i> Reset Form
          </button>
        </div>
      </form>
    </div>
  </div>
  @endhasPermission

  {{-- Upload History --}}
  @hasPermission('document.bulkupload.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>Upload History
      </h5>
      @if($uploadHistory->total() > 0)
      @hasPermission('document.bulkupload.clear_history')
      <form action="{{ route('bulk-upload.clear-history') }}" method="POST" onsubmit="return confirm('Clear all upload history?');">
        @csrf
        <button type="submit" class="btn btn-sm btn-outline-danger">
          <i class="mdi mdi-delete-outline me-1"></i> Clear History
        </button>
      </form>
      @endhasPermission
      @endif
    </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 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>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach($uploadHistory as $index => $upload)
              <tr>
                <td>{{ $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(!empty($upload->column_mismatch))
                    <span class="badge bg-danger">
                      <i class="mdi mdi-alert-circle-outline me-1"></i>Column Mismatch
                    </span>
                  @else
                    <span class="badge bg-success">{{ $upload->successful }} Success</span>
                    @if($upload->failed > 0)
                      <span class="badge bg-danger">{{ $upload->failed }} Failed</span>
                    @endif
                  @endif
                </td>
                <td>
                  <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>
                </td>
              </tr>
              <tr class="collapse" id="details{{ $upload->id }}">
                <td colspan="5">
                  <div class="p-3 bg-light">
                    
                    {{-- Column Mismatch Section --}}
                    @if(!empty($upload->column_mismatch))
                      <div class="alert alert-danger mb-3">
                        <h6 class="alert-heading">
                          <i class="mdi mdi-alert-circle-outline me-1"></i> Column Mismatch Detected
                        </h6>
                        
                        @if(!empty($upload->column_mismatch['missing_columns']))
                          <div class="mt-2">
                            <strong>Missing Columns:</strong>
                            <ul class="mb-0">
                              @foreach($upload->column_mismatch['missing_columns'] as $col)
                                <li>{{ $col }}</li>
                              @endforeach
                            </ul>
                          </div>
                        @endif
                        
                        @if(!empty($upload->column_mismatch['extra_columns']))
                          <div class="mt-2">
                            <strong>Extra/Unknown Columns:</strong>
                            <ul class="mb-0">
                              @foreach($upload->column_mismatch['extra_columns'] as $col)
                                <li>{{ $col }}</li>
                              @endforeach
                            </ul>
                          </div>
                        @endif
                        
                        @if(!empty($upload->column_mismatch['found_columns']))
                          <div class="mt-2">
                            <strong>Columns Found in Excel:</strong>
                            <div class="text-muted">{{ implode(', ', $upload->column_mismatch['found_columns']) }}</div>
                          </div>
                        @endif
                        
                        @if(!empty($upload->column_mismatch['expected_columns']))
                          <div class="mt-2">
                            <strong>Expected Columns:</strong>
                            <div class="text-muted">{{ implode(', ', $upload->column_mismatch['expected_columns']) }}</div>
                          </div>
                        @endif
                      </div>
                    @endif
                    
                    {{-- File Details Section --}}
                    @if(!empty($upload->files_detail))
                    <h6 class="mb-3">File Details:</h6>
                    <div class="table-responsive">
                      <table class="table table-sm table-bordered mb-0">
                        <thead>
                          <tr>
                            <th>File Name</th>
                            <th>Size</th>
                            <th>Status</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach($upload->files_detail as $file)
                          <tr>
                            <td>{{ $file['name'] }}</td>
                            <td>{{ isset($file['size']) ? number_format($file['size'] / 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">No files were processed.</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 sections based on record type selection
  const recordTypeSelect = document.getElementById('record_type_id');
  const templateSection = document.getElementById('templateSection');
  const metadataSection = document.getElementById('metadataSection');
  const submitSection = document.getElementById('submitSection');
  const downloadBtn = document.getElementById('downloadTemplateBtn');
  const zipInput = document.getElementById('zip_file');

  if (recordTypeSelect) {
    recordTypeSelect.addEventListener('change', function() {
      const recordTypeId = this.value;
      
      console.log('Record type changed:', recordTypeId); // Debug log
      
      if (recordTypeId) {
        templateSection.style.display = 'block';
        metadataSection.style.display = 'block';
        submitSection.style.display = 'flex';
        downloadBtn.disabled = false;
        zipInput.disabled = false;
        
        // Update download button URL
        downloadBtn.onclick = function() {
          const url = '{{ route("bulk-upload.download-template") }}?record_type_id=' + recordTypeId;
          console.log('Downloading template:', url); // Debug log
          window.location.href = url;
        };
      } else {
        templateSection.style.display = 'none';
        metadataSection.style.display = 'none';
        submitSection.style.display = 'none';
        downloadBtn.disabled = true;
        zipInput.disabled = true;
      }
    });
  }

  // Enable upload button when ZIP file is selected
  const zipInputElement = document.getElementById('zip_file');
  if (zipInputElement) {
    zipInputElement.addEventListener('change', function() {
      const uploadBtn = document.getElementById('uploadBtn');
      uploadBtn.disabled = !this.files.length;
      
      // Show file info
      if (this.files.length > 0) {
        const file = this.files[0];
        console.log('ZIP file selected:', file.name, 'Size:', (file.size / 1024 / 1024).toFixed(2) + ' MB');
      }
    });
  }

  // Form submit handler
  const bulkUploadForm = document.getElementById('bulkUploadForm');
  if (bulkUploadForm) {
    bulkUploadForm.addEventListener('submit', function(e) {
      const uploadBtn = document.getElementById('uploadBtn');
      uploadBtn.disabled = true;
      uploadBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Processing ZIP file...';
    });
  }
});

// Reset form function (global scope for inline onclick)
function resetForm() {
  document.getElementById('bulkUploadForm').reset();
  document.getElementById('templateSection').style.display = 'none';
  document.getElementById('metadataSection').style.display = 'none';
  document.getElementById('submitSection').style.display = 'none';
  document.getElementById('uploadBtn').disabled = true;
}
</script>
@endsection