@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                Bulk Shipment Upload
            </h2>
        </div>

        <div class="p-6">
            <!-- Instructions -->
            <div class="bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                            Instructions
                        </h3>
                        <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                            <ul class="list-disc pl-5 space-y-1">
                                <li>Upload a CSV file with shipment tracking information</li>
                                <li>Required columns: order_number, tracking_number, carrier</li>
                                <li>Optional columns: shipment_method, shipping_cost, notes, warehouse_code</li>
                                <li>Maximum 1000 rows per upload</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Upload Form -->
            <form id="bulkUploadForm" method="POST" action="{{ route('shipment.bulk') }}" enctype="multipart/form-data">
                @csrf
                
                <div class="space-y-6">
                    <!-- Warehouse Selection -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Default Warehouse
                        </label>
                        <select name="warehouse" required
                                class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                            <option value="">Select Warehouse</option>
                            @foreach(\App\Helpers\WarehouseHelper::getWarehouses() as $code => $name)
                                <option value="{{ $code }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            This warehouse will be used for rows without a warehouse_code column
                        </p>
                    </div>

                    <!-- Shipping Provider Toggle -->
                    @if(!empty($showGoPartsShip))
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Shipping Provider
                        </label>
                        <div class="space-y-2">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="shipping_provider" value="shipstation" checked
                                       class="text-indigo-600 border-gray-300 dark:border-gray-600 focus:ring-indigo-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">Shipstation (Default)</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="shipping_provider" value="gopartsship"
                                       class="text-orange-600 border-gray-300 dark:border-gray-600 focus:ring-orange-500">
                                <span class="text-sm text-orange-600 dark:text-orange-400 font-medium">Go-Parts Ship</span>
                            </label>
                        </div>
                        <p id="gps-warning" class="hidden mt-1 text-sm text-orange-500 dark:text-orange-400">
                            All orders in this bulk upload will be sent to Go-Parts Ship instead of Shipstation.
                        </p>
                    </div>
                    @endif

                    <!-- File Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            CSV File
                        </label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-md">
                            <div class="space-y-1 text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="flex text-sm text-gray-600 dark:text-gray-400">
                                    <label for="csv_file" class="relative cursor-pointer bg-white dark:bg-gray-800 rounded-md font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                        <span>Upload a file</span>
                                        <input id="csv_file" name="csv_file" type="file" accept=".csv" class="sr-only" required>
                                    </label>
                                    <p class="pl-1">or drag and drop</p>
                                </div>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    CSV up to 10MB
                                </p>
                            </div>
                        </div>
                        <div id="fileInfo" class="mt-2 hidden">
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                Selected: <span id="fileName" class="font-medium"></span>
                            </p>
                        </div>
                    </div>

                    <!-- Processing Options -->
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="skip_errors" name="skip_errors" type="checkbox" value="1"
                                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="skip_errors" class="font-medium text-gray-700 dark:text-gray-300">
                                    Skip rows with errors
                                </label>
                                <p class="text-gray-500 dark:text-gray-400">
                                    Continue processing even if some rows have errors
                                </p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="validate_only" name="validate_only" type="checkbox" value="1"
                                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="validate_only" class="font-medium text-gray-700 dark:text-gray-300">
                                    Validate only
                                </label>
                                <p class="text-gray-500 dark:text-gray-400">
                                    Check the file for errors without creating shipments
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex items-center justify-between">
                        <div>
                            <button type="submit" id="uploadButton"
                                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Upload and Process
                            </button>
                            <a href="{{ asset('templates/bulk_shipment_template.csv') }}" download
                               class="ml-3 inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Download Template
                            </a>
                        </div>
                    </div>
                </div>
            </form>

            <!-- Progress Bar (hidden by default) -->
            <div id="progressSection" class="mt-8 hidden">
                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Processing...</h3>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                    <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
                </div>
                <p id="progressText" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                    Processing row 0 of 0
                </p>
            </div>

            <!-- Results Section (hidden by default) -->
            <div id="resultsSection" class="mt-8 hidden">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Upload Results</h3>
                
                <!-- Summary -->
                <div class="bg-gray-50 dark:bg-gray-700 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 rounded-lg mb-4">
                    <div class="text-center">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Rows</dt>
                        <dd id="totalRows" class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">0</dd>
                    </div>
                    <div class="text-center">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Successful</dt>
                        <dd id="successRows" class="mt-1 text-3xl font-semibold text-green-600 dark:text-green-400">0</dd>
                    </div>
                    <div class="text-center">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Failed</dt>
                        <dd id="failedRows" class="mt-1 text-3xl font-semibold text-red-600 dark:text-red-400">0</dd>
                    </div>
                </div>

                <!-- Error Details -->
                <div id="errorDetails" class="hidden">
                    <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Errors</h4>
                    <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-md p-4">
                        <ul id="errorList" class="list-disc pl-5 space-y-1 text-sm text-red-700 dark:text-red-200">
                        </ul>
                    </div>
                </div>

                <!-- Success Details -->
                <div id="successDetails" class="hidden mt-4">
                    <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">Successfully Processed</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-700">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Row</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tracking</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Carrier</th>
                                </tr>
                            </thead>
                            <tbody id="successTable" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-6">
                    <button onclick="resetForm()" 
                            class="inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Upload Another File
                    </button>
                    <a href="{{ route('shipment.track') }}"
                       class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        View Shipments
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// File input handling
document.getElementById('csv_file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileInfo').classList.remove('hidden');
    }
});

// Drag and drop handling
const dropZone = document.querySelector('.border-dashed');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900');
});

dropZone.addEventListener('dragleave', (e) => {
    e.preventDefault();
    dropZone.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('border-indigo-500', 'bg-indigo-50', 'dark:bg-indigo-900');
    
    const files = e.dataTransfer.files;
    if (files.length > 0 && files[0].type === 'text/csv') {
        document.getElementById('csv_file').files = files;
        document.getElementById('fileName').textContent = files[0].name;
        document.getElementById('fileInfo').classList.remove('hidden');
    }
});

// Form submission
document.getElementById('bulkUploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const uploadButton = document.getElementById('uploadButton');
    const progressSection = document.getElementById('progressSection');
    const resultsSection = document.getElementById('resultsSection');
    
    // Disable button and show progress
    uploadButton.disabled = true;
    uploadButton.textContent = 'Processing...';
    progressSection.classList.remove('hidden');
    resultsSection.classList.add('hidden');
    
    // Simulate progress (in real implementation, use server-sent events or websockets)
    let progress = 0;
    const progressInterval = setInterval(() => {
        progress += Math.random() * 15;
        if (progress > 90) progress = 90;
        updateProgress(progress);
    }, 500);
    
    // Submit form
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        clearInterval(progressInterval);
        updateProgress(100);
        
        setTimeout(() => {
            progressSection.classList.add('hidden');
            showResults(data);
            uploadButton.disabled = false;
            uploadButton.textContent = 'Upload and Process';
        }, 500);
    })
    .catch(error => {
        clearInterval(progressInterval);
        progressSection.classList.add('hidden');
        uploadButton.disabled = false;
        uploadButton.textContent = 'Upload and Process';
        
        alert('Error uploading file: ' + error.message);
    });
});

function updateProgress(percent) {
    document.getElementById('progressBar').style.width = percent + '%';
    document.getElementById('progressText').textContent = `Processing... ${Math.round(percent)}%`;
}

function showResults(data) {
    const resultsSection = document.getElementById('resultsSection');
    resultsSection.classList.remove('hidden');
    
    // Update summary
    document.getElementById('totalRows').textContent = data.total || 0;
    document.getElementById('successRows').textContent = data.success || 0;
    document.getElementById('failedRows').textContent = data.failed || 0;
    
    // Show errors if any
    if (data.errors && data.errors.length > 0) {
        const errorDetails = document.getElementById('errorDetails');
        const errorList = document.getElementById('errorList');
        errorDetails.classList.remove('hidden');
        
        errorList.innerHTML = '';
        data.errors.forEach(error => {
            const li = document.createElement('li');
            li.textContent = `Row ${error.row}: ${error.message}`;
            errorList.appendChild(li);
        });
    }
    
    // Show success details if any
    if (data.processed && data.processed.length > 0) {
        const successDetails = document.getElementById('successDetails');
        const successTable = document.getElementById('successTable');
        successDetails.classList.remove('hidden');
        
        successTable.innerHTML = '';
        data.processed.forEach(item => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">${item.row}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">${item.order_number}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">${item.tracking_number}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">${item.carrier}</td>
            `;
            successTable.appendChild(tr);
        });
    }
}

function resetForm() {
    document.getElementById('bulkUploadForm').reset();
    document.getElementById('fileInfo').classList.add('hidden');
    document.getElementById('resultsSection').classList.add('hidden');
    document.getElementById('errorDetails').classList.add('hidden');
    document.getElementById('successDetails').classList.add('hidden');
    // Reset GPS warning
    var warning = document.getElementById('gps-warning');
    if (warning) warning.classList.add('hidden');
}

// Go-Parts Ship provider toggle with warehouse filtering
(function() {
    var gpsWarehouses = @json($gpsWarehouseCodes ?? []);
    var warehouseSelect = document.querySelector('select[name="warehouse"]');
    var allOptions = warehouseSelect ? Array.from(warehouseSelect.options) : [];

    document.querySelectorAll('input[name="shipping_provider"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            var isGps = this.value === 'gopartsship';

            // Toggle warning
            var warning = document.getElementById('gps-warning');
            if (warning) {
                warning.classList.toggle('hidden', !isGps);
            }

            // Filter warehouse dropdown to GPS-enabled warehouses only
            if (warehouseSelect && gpsWarehouses.length > 0) {
                var currentVal = warehouseSelect.value;
                warehouseSelect.innerHTML = '';

                allOptions.forEach(function(opt) {
                    if (!isGps || opt.value === '' || gpsWarehouses.indexOf(opt.value) !== -1) {
                        warehouseSelect.appendChild(opt.cloneNode(true));
                    }
                });

                var stillExists = Array.from(warehouseSelect.options).some(function(o) { return o.value === currentVal; });
                warehouseSelect.value = stillExists ? currentVal : '';
            }
        });
    });
})();
</script>
@endpush