<div>
    <x-layouts.app title="{{ __('Import Data') }}">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">{{ __('Import Data') }}</h1>
                <p class="text-muted mb-0">{{ __('Upload CSV files to import products, partners, or inventory') }}</p>
            </div>
        </div>

        <div class="row">
            <!-- Import Form -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('Upload CSV') }}</h5>
                    </div>
                    <div class="card-body">
                        <form wire:submit="import">
                            <div class="mb-3">
                                <label class="form-label">{{ __('Import Type') }}</label>
                                <select class="form-select" wire:model="importType">
                                    <option value="products">{{ __('Products') }}</option>
                                    <option value="partners">{{ __('Partners') }}</option>
                                    <option value="inventory">{{ __('Inventory Quantities') }}</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{{ __('CSV File') }}</label>
                                <input type="file" class="form-control @error('file') is-invalid @enderror"
                                       wire:model="file" accept=".csv,.txt">
                                @error('file') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <small class="form-text text-muted">{{ __('Max 5 MB. UTF-8 encoded CSV.') }}</small>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary" wire:loading.attr="disabled">
                                    <span wire:loading.remove wire:target="import">
                                        <i class="fas fa-upload me-2"></i>{{ __('Import') }}
                                    </span>
                                    <span wire:loading wire:target="import">
                                        <i class="fas fa-spinner fa-spin me-2"></i>{{ __('Processing...') }}
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Templates -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('Download Templates') }}</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">{{ __('Download a sample CSV template to see the expected format.') }}</p>
                        <div class="list-group">
                            <button wire:click="downloadTemplate('products')" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-box me-2 text-primary"></i>
                                    <strong>{{ __('Products Template') }}</strong>
                                    <small class="text-muted d-block ms-4">{{ __('SKU, name, prices, category, barcode') }}</small>
                                </div>
                                <i class="fas fa-download text-muted"></i>
                            </button>
                            <button wire:click="downloadTemplate('partners')" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-handshake me-2 text-success"></i>
                                    <strong>{{ __('Partners Template') }}</strong>
                                    <small class="text-muted d-block ms-4">{{ __('Name, type, phone, email, address') }}</small>
                                </div>
                                <i class="fas fa-download text-muted"></i>
                            </button>
                            <button wire:click="downloadTemplate('inventory')" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-warehouse me-2 text-info"></i>
                                    <strong>{{ __('Inventory Template') }}</strong>
                                    <small class="text-muted d-block ms-4">{{ __('SKU, quantity, branch') }}</small>
                                </div>
                                <i class="fas fa-download text-muted"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Import Results -->
                @if($showResults)
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('Import Results') }}</h5>
                    </div>
                    <div class="card-body">
                        @if($importedCount > 0)
                            <div class="alert alert-success">
                                <i class="fas fa-check-circle me-2"></i>
                                {{ __(':count records imported successfully.', ['count' => $importedCount]) }}
                            </div>
                        @endif

                        @if($errorCount > 0)
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {{ __(':count errors encountered.', ['count' => $errorCount]) }}
                            </div>
                            <ul class="list-unstyled mb-0">
                                @foreach(array_slice($errors, 0, 20) as $error)
                                    <li class="text-danger mb-1"><small>{{ $error }}</small></li>
                                @endforeach
                                @if(count($errors) > 20)
                                    <li class="text-muted"><small>{{ __('...and :more more errors.', ['more' => count($errors) - 20]) }}</small></li>
                                @endif
                            </ul>
                        @endif

                        @if($importedCount === 0 && $errorCount === 0)
                            <div class="alert alert-info mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                {{ __('No records were processed. Check your file format.') }}
                            </div>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
    </x-layouts.app>
</div>
