@extends('layouts.admin')

@section('title', 'Import Purchase Prices')

@section('content')
<div class="admin-page-header">
    <h1>Import Purchase Prices</h1>
    <div class="admin-page-actions">
        <a href="{{ route('admin.products.purchase-prices.template') }}" class="btn btn-secondary">
            <i class="bi bi-download"></i> Download Template
        </a>
        <a href="{{ route('admin.products.index') }}" class="admin-btn-primary">
            <i class="bi bi-arrow-left"></i> Back to Products
        </a>
    </div>
</div>

<!-- Instructions -->
<div class="admin-card mb-4">
    <div class="card-header">
        <h5><i class="bi bi-info-circle"></i> Import Instructions</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-8">
                <h6>CSV Format Requirements:</h6>
                <ul class="mb-3">
                    <li><strong>Required columns:</strong> <code>id</code>, <code>purchase_price</code></li>
                    <li><strong>Product ID:</strong> Must be a valid product ID from your system</li>
                    <li><strong>Purchase Price:</strong> Must be a positive number (decimal allowed)</li>
                    <li><strong>File format:</strong> CSV file with comma-separated values</li>
                    <li><strong>File size:</strong> Maximum 2MB</li>
                </ul>
                
                <h6>Import Options:</h6>
                <ul class="mb-0">
                    <li><strong>Update Existing:</strong> If checked, will update products that already have purchase prices</li>
                    <li><strong>Skip Existing:</strong> If unchecked, will skip products that already have purchase prices</li>
                </ul>
            </div>
            <div class="col-md-4">
                <div class="bg-light p-3 rounded">
                    <h6>Sample CSV Format:</h6>
                    <pre class="mb-0"><code>id,purchase_price,notes
1,45.50,Sample product
2,120.00,Another product</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Form -->
<div class="admin-card">
    <div class="card-header">
        <h5><i class="bi bi-upload"></i> Upload CSV File</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.products.purchase-prices.import.process') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="row">
                <div class="col-md-8">
                    <div class="mb-3">
                        <label class="admin-form-label">CSV File *</label>
                        <input type="file" name="csv_file" class="admin-form-control form-control" accept=".csv,.txt" required>
                        <div class="form-text">Select a CSV file containing product IDs and purchase prices</div>
                        @error('csv_file')
                            <div class="text-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="admin-form-label">Import Options</label>
                        <div class="form-check">
                            <input type="checkbox" name="update_existing" value="1" class="form-check-input" id="updateExisting">
                            <label class="form-check-label" for="updateExisting">
                                Update products that already have purchase prices
                            </label>
                        </div>
                        <div class="form-text">If unchecked, existing purchase prices will be skipped</div>
                    </div>
                </div>
            </div>
            
            <div class="d-flex gap-2">
                <button type="submit" class="admin-btn-primary">
                    <i class="bi bi-upload"></i> Import Purchase Prices
                </button>
                <a href="{{ route('admin.products.purchase-prices.template') }}" class="btn btn-secondary">
                    <i class="bi bi-download"></i> Download Template
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Recent Import History (if available) -->
<div class="admin-card mt-4">
    <div class="card-header">
        <h5><i class="bi bi-clock-history"></i> Import Tips</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>Before Importing:</h6>
                <ul>
                    <li>Download and use the provided CSV template</li>
                    <li>Ensure all product IDs exist in your system</li>
                    <li>Verify purchase prices are accurate</li>
                    <li>Backup your data (recommended)</li>
                </ul>
            </div>
            <div class="col-md-6">
                <h6>After Importing:</h6>
                <ul>
                    <li>Review the import summary for any errors</li>
                    <li>Check profit reports to verify calculations</li>
                    <li>Update any products that had errors</li>
                    <li>Export updated data for your records</li>
                </ul>
            </div>
        </div>
        
        <div class="alert alert-info mt-3">
            <i class="bi bi-lightbulb"></i>
            <strong>Pro Tip:</strong> You can export your current products with 
            <a href="{{ route('admin.products.purchase-prices.export-csv') }}" class="alert-link">Export CSV</a> 
            to get the correct product IDs, then add purchase prices and re-import.
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
.admin-page-actions {
    display: flex;
    gap: 0.5rem;
}

pre code {
    font-size: 0.85rem;
    color: #495057;
}

.bg-light {
    border: 1px solid #e9ecef;
}

.form-check {
    padding: 0.5rem 0;
}

.alert-info {
    border-left: 4px solid #0dcaf0;
}

@media (max-width: 768px) {
    .admin-page-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .admin-page-actions .btn {
        width: 100%;
    }
}
</style>
@endsection

@section('scripts')
<script>
// File validation
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const fileSize = file.size / 1024 / 1024; // Convert to MB
        const fileName = file.name.toLowerCase();
        
        if (fileSize > 2) {
            alert('File size must be less than 2MB');
            e.target.value = '';
            return;
        }
        
        if (!fileName.endsWith('.csv') && !fileName.endsWith('.txt')) {
            alert('Please select a CSV file');
            e.target.value = '';
            return;
        }
    }
});

// Form submission confirmation
document.querySelector('form').addEventListener('submit', function(e) {
    const fileInput = document.querySelector('input[type="file"]');
    if (!fileInput.files.length) {
        e.preventDefault();
        alert('Please select a CSV file to import');
        return;
    }
    
    const updateExisting = document.getElementById('updateExisting').checked;
    const message = updateExisting 
        ? 'This will update existing purchase prices. Continue?' 
        : 'This will import purchase prices for products that don\'t have them. Continue?';
    
    if (!confirm(message)) {
        e.preventDefault();
    }
});
</script>
@endsection