@extends('layouts.app')

@section('title', 'Import Clients from Excel')

@section('content')
<div class="container-fluid" style="max-width: 900px;">
    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="fas fa-file-excel text-success me-2"></i>Import Clients from Excel</h2>
            <p class="text-muted">Upload an Excel file to bulk import multiple clients at once</p>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-exclamation-triangle me-2"></i>Errors Found:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-check-circle me-2"></i>Success!</strong>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-exclamation-circle me-2"></i>Import Completed with Issues:</strong>
            <p class="mb-2">{{ session('warning') }}</p>
            
            @if(session('warnings_detail'))
                @if(!empty(session('warnings_detail')['duplicates']))
                    <div class="mt-3">
                        <strong class="d-block mb-2">Duplicate Records (Skipped):</strong>
                        <div class="ms-3" style="max-height: 200px; overflow-y: auto; border-left: 3px solid #ffc107; padding-left: 10px;">
                            @foreach(session('warnings_detail')['duplicates'] as $duplicate)
                                <small class="d-block text-muted">{{ $duplicate }}</small>
                            @endforeach
                        </div>
                    </div>
                @endif
                
                @if(!empty(session('warnings_detail')['errors']))
                    <div class="mt-3">
                        <strong class="d-block mb-2">Errors:</strong>
                        <div class="ms-3" style="max-height: 200px; overflow-y: auto; border-left: 3px solid #dc3545; padding-left: 10px;">
                            @foreach(session('warnings_detail')['errors'] as $error)
                                <small class="d-block text-muted">{{ $error }}</small>
                            @endforeach
                        </div>
                    </div>
                @endif
            @endif
            
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Upload Section -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-cloud-upload-alt me-2"></i>Upload File
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('clients.import.store') }}" enctype="multipart/form-data">
                        @csrf

                        @if(auth()->user()->isSuperAdmin())
                            <div class="mb-3">
                                <label for="company_id" class="form-label">Select Company <span class="text-danger">*</span></label>
                                <select class="form-control @error('company_id') is-invalid @enderror" id="company_id" name="company_id" required>
                                    <option value="">-- Select Company --</option>
                                    @foreach ($companies as $comp)
                                        <option value="{{ $comp->id }}" {{ old('company_id') == $comp->id ? 'selected' : '' }}>
                                            {{ $comp->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('company_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif

                        <div class="mb-3">
                            <label for="excel_file" class="form-label">Excel File <span class="text-danger">*</span></label>
                            <input type="file" class="form-control @error('excel_file') is-invalid @enderror" 
                                   id="excel_file" name="excel_file" accept=".xlsx,.xls,.csv" required 
                                   onchange="previewFile(this)">
                            <small class="form-text text-muted d-block mt-2">
                                Supported formats: .xlsx, .xls, .csv
                            </small>
                            @error('excel_file')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="tier_group_id" class="form-label">Default Tier Group <span class="text-danger">*</span> (Required)</label>
                            <select class="form-control @error('tier_group_id') is-invalid @enderror" id="tier_group_id" name="tier_group_id" required onchange="updateTierGroupSelect()">
                                <option value="" selected disabled>-- Please Select A Tier Group --</option>
                                @if(auth()->user()->isSuperAdmin())
                                    <option value="" disabled>(Select company first to see tier groups)</option>
                                @else
                                    @foreach(auth()->user()->company->tierGroups()->where('is_active', true)->get() as $group)
                                        <option value="{{ $group->id }}" {{ old('tier_group_id') == $group->id ? 'selected' : '' }}>
                                            {{ $group->name }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <small class="form-text text-muted d-block mt-2">
                                This will be used for all imported clients. You can change individual tiers after import.
                            </small>
                            @error('tier_group_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-success btn-block">
                            <i class="fas fa-upload me-2"></i>Import Clients
                        </button>
                        <a href="{{ route('clients.index') }}" class="btn btn-secondary btn-block mt-2">
                            <i class="fas fa-arrow-left me-2"></i>Back to Clients
                        </a>
                    </form>
                </div>
            </div>
        </div>

        <!-- Template & Instructions -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-info-circle me-2"></i>Instructions & Template
                </div>
                <div class="card-body">
                    <h6 class="mb-3"><strong>Required Columns:</strong></h6>
                    <ul class="small">
                        <li><code>name</code> - Client full name <span class="text-danger">*</span></li>
                    </ul>

                    <h6 class="mb-3 mt-4"><strong>Optional Columns:</strong></h6>
                    <ul class="small">
                        <li><code>account_number</code> - Account number suffix (auto-generated with company ID if empty. Final format: companyID-suffix)</li>
                        <li><code>email</code> - Email address</li>
                        <li><code>phone</code> - Phone number</li>
                        <li><code>address</code> - Street address</li>
                        <li><code>barangay</code> - Barangay name</li>
                        <li><code>city</code> - City/Municipality</li>
                        <li><code>province</code> - Province name</li>
                        <li><code>postal_code</code> - Postal code</li>
                        <li><code>meter_number</code> - Meter identification number</li>
                        <li><code>meter_start_reading</code> - Initial meter reading</li>
                    </ul>

                    <h6 class="mb-3 mt-4"><strong>Example Format:</strong></h6>
                    <div class="table-responsive" style="font-size: 0.85rem;">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>name</th>
                                    <th>account_number</th>
                                    <th>email</th>
                                    <th>phone</th>
                                    <th>city</th>
                                    <th>meter_number</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Juan Dela Cruz</td>
                                    <td>001</td>
                                    <td></td>
                                    <td></td>
                                    <td>Manila</td>
                                    <td>M001</td>
                                </tr>
                                <tr>
                                    <td>Maria Santos</td>
                                    <td></td>
                                    <td>maria@example.com</td>
                                    <td>09281234567</td>
                                    <td>Quezon City</td>
                                    <td>M002</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="alert alert-info mt-4 mb-0">
                        <small>
                            <strong>Note:</strong> Make sure your Excel file has headers in the first row. 
                            Email and phone are not required. Account numbers will be auto-generated if not provided. 
                            If you provide account_number, it will be prefixed with company ID (e.g., Company 1 + "001" = "1-001").
                        </small>
                    </div>

                    <a href="{{ route('clients.template') }}" class="btn btn-sm btn-outline-primary mt-4 w-100">
                        <i class="fas fa-download me-2"></i>Download Template
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function previewFile(input) {
    const file = input.files[0];
    if (file) {
        const fileName = file.name;
        const fileSize = (file.size / 1024).toFixed(2);
        console.log(`Selected file: ${fileName} (${fileSize} KB)`);
        
        // Show file info to user
        const feedback = input.nextElementSibling;
        if (feedback) {
            feedback.textContent = `✓ Selected: ${fileName} (${fileSize} KB)`;
            feedback.classList.remove('text-muted');
            feedback.classList.add('text-success', 'fw-bold');
        }
    }
}

// Handle form submission - validate tier group is selected
document.querySelector('form')?.addEventListener('submit', function(e) {
    const tierGroupId = document.getElementById('tier_group_id').value;
    if (!tierGroupId) {
        e.preventDefault();
        alert('Please select a Tier Group before importing clients.');
        document.getElementById('tier_group_id').focus();
        return false;
    }
});

// Update tier groups when company is selected
document.getElementById('company_id')?.addEventListener('change', async function() {
    const companyId = this.value;
    const tierGroupSelect = document.getElementById('tier_group_id');
    
    if (!companyId) {
        tierGroupSelect.innerHTML = '<option value="" selected disabled>-- Please Select A Tier Group --</option>';
        return;
    }
    
    try {
        const response = await fetch(`{{ url('api/companies') }}/${companyId}/tier-groups`);
        if (!response.ok) throw new Error('Failed to fetch tier groups');
        const tierGroups = await response.json();
        
        tierGroupSelect.innerHTML = '<option value="" selected disabled>-- Please Select A Tier Group --</option>';
        tierGroups.forEach(group => {
            const option = document.createElement('option');
            option.value = group.id;
            option.textContent = group.name;
            tierGroupSelect.appendChild(option);
        });
    } catch (error) {
        console.error('Error loading tier groups:', error);
        tierGroupSelect.innerHTML = '<option value="">-- Error loading tier groups. Please try again. --</option>';
    }
});

function updateTierGroupSelect() {
    // This function can be used if needed for additional updates
}
</script>
@endsection