@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">@trans('crm.Import Leads')</h1>
                    <p class="text-black">@trans('crm.Import multiple leads from Excel file easily and effectively')</p>
                </div>
                <a href="{{ route('crm.leads.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300 transition">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>@trans('crm.Back')</span>
                </a>
            </div>
        </div>

        <!-- Alerts -->
        @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg text-right">
                <div class="flex flex-row-reverse">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                    </div>
                    <div class="mr-3">
                        <h3 class="text-red-700 font-bold mb-2">@trans('crm.Errors Occurred'):</h3>
                        <ul class="text-red-600 text-sm space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        @if (session('import_errors'))
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg text-right">
                <div class="flex flex-row-reverse">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                    </div>
                    <div class="mr-3">
                        <h3 class="text-red-700 font-bold mb-2">@trans('crm.Import Errors'):</h3>
                        <div class="mt-2 text-red-600 text-sm space-y-1 max-h-96 overflow-y-auto">
                            @foreach (session('import_errors') as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Sidebar Instructions -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-lg p-6 sticky top-8 text-right">
                    <h3 class="text-lg font-bold text-black mb-4 flex items-center justify-end">
                        <span>@trans('crm.Import Steps')</span>
                        <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                    </h3>

                    <div class="space-y-4">
                        <div class="flex gap-3 flex-row-reverse">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">1</div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">@trans('crm.Download Template')</h4>
                                <p class="text-sm text-black">@trans('crm.Use the standard Excel template to ensure correct data format.')</p>
                            </div>
                        </div>
                        <div class="flex gap-3 flex-row-reverse">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">2</div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">@trans('crm.Fill Data')</h4>
                                <p class="text-sm text-black">@trans('crm.Ensure First Name and Mobile number are provided.')</p>
                            </div>
                        </div>
                        <div class="flex gap-3 flex-row-reverse">
                            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">3</div>
                            <div>
                                <h4 class="font-semibold text-black mb-1">@trans('crm.Preview & Confirm')</h4>
                                <p class="text-sm text-black">@trans('crm.Upload file to preview data then confirm import.')</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Import Form -->
            <div class="lg:col-span-2">
                <!-- Template Card -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-300 rounded-xl p-6 mb-6 text-center">
                    <i class="fas fa-file-excel text-blue-600 text-3xl mb-3"></i>
                    <h3 class="text-lg font-bold text-black mb-2">@trans('crm.Import Template')</h3>
                    <p class="text-sm text-black mb-4">@trans('crm.Download the template and fill it with your lead data.')</p>
                    <a href="{{ route('crm.leads.import.download') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition shadow-md">
                        <i class="fas fa-download ml-2"></i>
                        <span>@trans('crm.Download Template')</span>
                    </a>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-6">
                    <form id="importForm" action="{{ route('crm.leads.import.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-6">
                            <label for="file" class="block text-sm font-semibold text-black mb-3 text-right">
                                <span>@trans('crm.Choose Excel File')</span>
                                <i class="fas fa-file-upload mr-1"></i>
                            </label>
                            
                            <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all" onclick="document.getElementById('file').click()">
                                <input type="file" id="file" name="file" accept=".xlsx,.xls,.csv" class="hidden" required>
                                <div id="fileInfo">
                                    <i class="fas fa-cloud-upload-alt text-4xl text-black mb-3"></i>
                                    <p class="text-black font-semibold mb-1">@trans('crm.Click to choose or drop file here')</p>
                                    <p class="text-sm text-black">@trans('crm.Accepted formats: .xlsx, .xls, .csv')</p>
                                </div>
                                <div id="fileNameDisplay" class="hidden font-bold text-blue-600"></div>
                            </div>
                        </div>

                        <div class="mb-6 bg-gray-50 p-4 rounded-lg text-right">
                            <label class="flex items-center justify-end gap-3 cursor-pointer">
                                <span class="text-sm text-black">@trans('crm.Skip duplicates based on mobile number')</span>
                                <input type="checkbox" name="skip_duplicates" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </label>
                        </div>

                        <!-- Preview Section -->
                        <div id="previewSection" class="mb-6 hidden">
                            <h3 class="font-semibold text-black mb-3 text-right">@trans('crm.Data Preview (First 10 rows)')</h3>
                            <div class="overflow-x-auto border rounded-lg">
                                <table class="min-w-full divide-y divide-gray-200 text-right" dir="rtl">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2 text-xs font-medium text-black uppercase tracking-wider">#</th>
                                            <th class="px-4 py-2 text-xs font-medium text-black uppercase tracking-wider">@trans('crm.First Name')</th>
                                            <th class="px-4 py-2 text-xs font-medium text-black uppercase tracking-wider">@trans('crm.Mobile')</th>
                                            <th class="px-4 py-2 text-xs font-medium text-black uppercase tracking-wider">@trans('crm.Email')</th>
                                            <th class="px-4 py-2 text-xs font-medium text-black uppercase tracking-wider">@trans('crm.Source')</th>
                                        </tr>
                                    </thead>
                                    <tbody id="previewBody" class="bg-white divide-y divide-gray-200">
                                        <!-- Data injected by JS -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="flex justify-between items-center">
                            <div id="loadingIndicator" class="hidden text-blue-600 italic">
                                <i class="fas fa-spinner fa-spin ml-2"></i>
                                @trans('crm.Processing file...')
                            </div>
                            <div class="flex gap-3">
                                <button type="button" id="previewBtn" class="px-6 py-2 bg-gray-600 text-white font-semibold rounded-lg hover:bg-gray-700 transition hidden">
                                    @trans('crm.Browse Data')
                                </button>
                                <button type="submit" id="submitBtn" class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition shadow-lg opacity-50 cursor-not-allowed" disabled>
                                    <i class="fas fa-upload ml-2"></i>
                                    <span>@trans('crm.Start Import')</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    const fileInput = document.getElementById('file');
    const fileNameDisplay = document.getElementById('fileNameDisplay');
    const fileInfo = document.getElementById('fileInfo');
    const previewSection = document.getElementById('previewSection');
    const previewBody = document.getElementById('previewBody');
    const previewBtn = document.getElementById('previewBtn');
    const submitBtn = document.getElementById('submitBtn');
    const loadingIndicator = document.getElementById('loadingIndicator');

    fileInput.onchange = function() {
        if (this.files && this.files[0]) {
            fileNameDisplay.textContent = this.files[0].name;
            fileNameDisplay.classList.remove('hidden');
            fileInfo.classList.add('hidden');
            previewBtn.classList.remove('hidden');
            handlePreview();
        }
    };

    function handlePreview() {
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('_token', '{{ csrf_token() }}');

        loadingIndicator.classList.remove('hidden');
        previewSection.classList.add('hidden');
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');

        fetch('{{ route("crm.leads.import.preview") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            loadingIndicator.classList.add('hidden');
            if (data.success) {
                renderPreview(data.data);
                previewSection.classList.remove('hidden');
                submitBtn.disabled = false;
                submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            } else {
                alert(data.message || 'Error processing file');
            }
        })
        .catch(error => {
            loadingIndicator.classList.add('hidden');
            console.error('Error:', error);
            alert('An error occurred during file processing');
        });
    }

    function renderPreview(data) {
        previewBody.innerHTML = '';
        data.forEach(row => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="px-4 py-2 text-sm text-black">${row.row_number}</td>
                <td class="px-4 py-2 text-sm text-black">${row.first_name} ${row.last_name}</td>
                <td class="px-4 py-2 text-sm text-black">${row.mobile}</td>
                <td class="px-4 py-2 text-sm text-black">${row.email}</td>
                <td class="px-4 py-2 text-sm text-black">${row.source}</td>
            `;
            previewBody.appendChild(tr);
        });
    }

    previewBtn.onclick = handlePreview;
</script>
@endpush