@extends('layouts.admin')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">OCR Bulk Upload Test</h3>
        </div>
        <div class="card-body">
          <div class="upload-container border rounded p-4 text-center">
            <div id="drop-zone" class="drop-zone p-5 mb-3 border-2 border-dashed rounded">
              <i class="fas fa-cloud-upload-alt fa-3x mb-3"></i>
              <h4>Drag & Drop ZIP File Here</h4>
              <p>or</p>
              <label for="file-input" class="btn btn-primary">Choose File</label>
              <input type="file" id="file-input" accept=".zip" class="d-none">
            </div>
            <button id="submit-btn" class="btn btn-success" disabled>Upload and Process</button>
          </div>
          <div id="results" class="mt-4 d-none">
            <h4>Processing Results</h4>
            <div id="results-content" class="border rounded p-3 bg-light"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .drop-zone {
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
  }

  .drop-zone.dragover {
    background-color: #e9ecef;
    border-color: #6c757d;
  }

  .drop-zone i {
    color: #6c757d;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const url = "{{ route('ocr.bulk.test.process') }}";
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const submitBtn = document.getElementById('submit-btn');
    const results = document.getElementById('results');
    const resultsContent = document.getElementById('results-content');
    let selectedFile = null;

    // Drag and drop handlers
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        const file = e.dataTransfer.files[0];
        handleFileSelection(file);
    });

    // Click to upload handler
    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        handleFileSelection(file);
    });

    function handleFileSelection(file) {
        if (file && (file.type === 'application/zip' || file.type === 'application/x-zip-compressed' || file.name.toLowerCase().endsWith('.zip'))) {
            selectedFile = file;
            submitBtn.disabled = false;
            
            // Update UI to show selected file
            const dropZoneContent = dropZone.innerHTML;
            dropZone.innerHTML = `
                <i class="fas fa-file-archive fa-3x mb-3 text-success"></i>
                <h4 class="text-success">File Selected</h4>
                <p class="mb-2"><strong>${file.name}</strong></p>
                <p class="text-muted">Size: ${(file.size / 1024 / 1024).toFixed(2)} MB</p>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFileSelection()">
                    <i class="fas fa-times"></i> Clear Selection
                </button>
            `;
        } else {
            alert('Please select a ZIP file');
            submitBtn.disabled = true;
            clearFileSelection();
        }
    }

    // Add function to clear file selection and reset UI
    window.clearFileSelection = function() {
        selectedFile = null;
        submitBtn.disabled = true;
        fileInput.value = '';
        
        // Reset drop zone to original state
        dropZone.innerHTML = `
            <i class="fas fa-cloud-upload-alt fa-3x mb-3"></i>
            <h4>Drag & Drop ZIP File Here</h4>
            <p>or</p>
            <label for="file-input" class="btn btn-primary">Choose File</label>
            <input type="file" id="file-input" accept=".zip" class="d-none">
        `;
        
        // Re-attach event listener to new file input
        const newFileInput = document.getElementById('file-input');
        newFileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            handleFileSelection(file);
        });
    };

    // Submit handler
    submitBtn.addEventListener('click', async () => {
        if (!selectedFile) return;

        const formData = new FormData();
        formData.append('zip_file', selectedFile);

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        results.classList.add('d-none');
        try {
          const token = "{{ $token }}";
            const response = await fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'accept' : 'application/json',
                    'x-access-token' : `${ token }`
                }
            });

            const data = await response.json();
            
            results.classList.remove('d-none');
            if (response.ok) {
                resultsContent.innerHTML = `
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle"></i> Success!
                        <br>Extract path: ${data.extract_path}
                    </div>
                `;
                
                // Clear fields after successful upload
                setTimeout(() => {
                    clearFileSelection();
                    results.classList.add('d-none');
                }, 3000); // Hide results and clear form after 3 seconds
            } else {
                resultsContent.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i> Error:
                        <br>${data.message || 'Failed to process the ZIP file'}
                    </div>
                `;
            }
        } catch (error) {
            results.classList.remove('d-none');
            resultsContent.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i> Error:
                    <br>${error.message || 'Failed to connect to the server'}
                </div>
            `;
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Upload and Process';
        }
    });
});
</script>
@endsection