@extends('layouts.app')

@section('content')
<x-slot name="header">
    <h2 class="text-xl font-semibold leading-tight text-gray-800">
        {{ __('Firma İçe Aktarma') }}
    </h2>
</x-slot>

<div class="py-12">
    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="p-6 overflow-hidden bg-white shadow-xl sm:rounded-lg">

            @if (session('success'))
            <div class="relative px-4 py-3 mb-4 text-green-700 bg-green-100 border border-green-400 rounded"
                role="alert">
                <span class="block sm:inline">{{ session('success') }}</span>
            </div>
            @endif

            @if ($errors->any())
            <div class="relative px-4 py-3 mb-4 text-red-700 bg-red-100 border border-red-400 rounded" role="alert">
                @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
                @endforeach
            </div>
            @endif

            <!-- Şablon İndirme -->
            <div class="p-4 mb-6 rounded-lg bg-blue-50">
                <h3 class="mb-2 text-lg font-semibold">📋 Adım 1: Excel Şablonunu İndirin</h3>
                <p class="mb-3 text-gray-600">
                    Önce şablonu indirip firma bilgilerinizi doldurun.
                </p>
                <a href="{{ route('companies.import.template') }}"
                    class="inline-flex items-center px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    Şablonu İndir
                </a>
            </div>

            <!-- Dosya Yükleme Formu -->
            <div class="mb-6">
                <h3 class="mb-4 text-lg font-semibold">📤 Adım 2: Doldurduğunuz Dosyayı Yükleyin</h3>

                <form action="{{ route('companies.import.store') }}" method="POST" enctype="multipart/form-data"
                    id="importForm">
                    @csrf

                    <!-- İşletme Seçimi -->
                    <div class="mb-4">
                        <label for="team_id" class="block mb-2 text-sm font-medium text-gray-700">
                            İşletme Seçin *
                        </label>
                        <select name="team_id" id="team_id" required
                            class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Bir işletme seçin...</option>
                            @foreach ($teams_all as $team)
                            <option value="{{ $team->id }}" {{ auth()->user()->currentTeam->id == $team->id ?
                                'selected' : '' }}>
                                {{ $team->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Dosya Yükleme -->
                    <div class="mb-4">
                        <label class="block mb-2 text-sm font-medium text-gray-700">
                            Excel Dosyası *
                        </label>
                        <div
                            class="flex justify-center px-6 pt-5 pb-6 mt-1 transition border-2 border-gray-300 border-dashed rounded-md hover:border-blue-400">
                            <div class="space-y-1 text-center">
                                <svg class="w-12 h-12 mx-auto 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">
                                    <label for="file-upload"
                                        class="relative font-medium text-blue-600 bg-white rounded-md cursor-pointer hover:text-blue-500">
                                        <span>Dosya seçin</span>
                                        <input id="file-upload" name="file" type="file" class="sr-only"
                                            accept=".xlsx,.xls,.csv" required onchange="showFileName(this)">
                                    </label>
                                    <p class="pl-1">veya sürükleyip bırakın</p>
                                </div>
                                <p class="text-xs text-gray-500">XLSX, XLS, CSV dosyaları (maks. 10MB)</p>
                                <p id="file-name" class="mt-2 text-sm font-semibold text-green-600"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Önizleme Butonu -->
                    <div class="flex gap-3">
                        <button type="button" onclick="previewData()"
                            class="px-4 py-2 text-white bg-gray-600 rounded hover:bg-gray-700">
                            Önizleme
                        </button>
                        <button type="submit" class="px-6 py-2 text-white bg-green-600 rounded hover:bg-green-700">
                            İçe Aktar
                        </button>
                    </div>
                </form>
            </div>

            <!-- Önizleme Bölümü -->
            <div id="preview-section" class="hidden p-4 mt-6 rounded-lg bg-gray-50">
                <h3 class="mb-3 text-lg font-semibold">Veri Önizleme</h3>
                <div id="preview-content"></div>
            </div>

            <!-- Sonuçlar -->
            @if (session('import_results'))
            <div class="p-4 mt-6 rounded-lg bg-gray-50">
                <h3 class="mb-3 text-lg font-semibold">📊 İçe Aktarma Sonuçları</h3>

                @php $results = session('import_results'); @endphp

                <div class="grid grid-cols-3 gap-4 mb-4">
                    <div class="p-3 bg-white rounded shadow">
                        <div class="text-2xl font-bold">{{ $results['total'] }}</div>
                        <div class="text-gray-600">Toplam</div>
                    </div>
                    <div class="p-3 bg-green-100 rounded shadow">
                        <div class="text-2xl font-bold text-green-700">{{ $results['success'] }}</div>
                        <div class="text-gray-600">Başarılı</div>
                    </div>
                    <div class="p-3 bg-red-100 rounded shadow">
                        <div class="text-2xl font-bold text-red-700">{{ $results['failed'] }}</div>
                        <div class="text-gray-600">Başarısız</div>
                    </div>
                </div>

                @if ($results['failed'] > 0)
                <div class="mt-4">
                    <h4 class="mb-2 font-semibold text-red-700">Hatalar:</h4>
                    <div class="overflow-y-auto bg-white rounded shadow max-h-64">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Satır</th>
                                    <th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Firma</th>
                                    <th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Hata</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($results['details'] as $detail)
                                @if (!$detail['success'])
                                <tr>
                                    <td class="px-4 py-2 text-sm">{{ $detail['row'] }}</td>
                                    <td class="px-4 py-2 text-sm">{{ $detail['name'] }}</td>
                                    <td class="px-4 py-2 text-sm text-red-600">{{ $detail['error'] }}</td>
                                </tr>
                                @endif
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif
            </div>
            @endif

        </div>
    </div>
</div>

<script>
    function showFileName(input) {
            const fileName = input.files[0]?.name;
            if (fileName) {
                document.getElementById('file-name').textContent = '📄 ' + fileName;
            }
        }

        async function previewData() {
            const fileInput = document.getElementById('file-upload');
            const file = fileInput.files[0];

            if (!file) {
                alert('Lütfen bir dosya seçin');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);
            formData.append('_token', '{{ csrf_token() }}');

            try {
                const response = await fetch('{{ route("companies.import.preview") }}', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();

                if (result.success) {
                    showPreview(result.data, result.count);
                } else {
                    alert('Hata: ' + result.error);
                }
            } catch (error) {
                alert('Önizleme hatası: ' + error.message);
            }
        }

        function showPreview(data, count) {
            const previewSection = document.getElementById('preview-section');
            const previewContent = document.getElementById('preview-content');

            let html = `<p class="mb-2 font-semibold">${count} kayıt bulundu</p>`;
            html += '<div class="overflow-x-auto"><table class="min-w-full bg-white rounded shadow">';
            html += '<thead class="bg-gray-100"><tr>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Firma Adı</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Vergi No</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Adres (Satır 1)</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Adres (Satır 2)</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">İlçe</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">İl</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Posta Kodu</th>';
            html += '<th class="px-4 py-2 text-xs font-medium text-left text-gray-500">Bakiye</th>';
            html += '</tr></thead><tbody>';

            data.slice(0, 10).forEach(row => {
                html += '<tr class="border-t">';
                html += `<td class="px-4 py-2 text-sm">${row.name || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.tax_number || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.line_1 || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.line_2 || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.district || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.city || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.zip || '-'}</td>`;
                html += `<td class="px-4 py-2 text-sm">${row.balance || 0}</td>`;
                html += '</tr>';
            });

            if (count > 10) {
                html += `<tr><td colspan="8" class="px-4 py-2 text-center text-gray-500">... ve ${count - 10} kayıt daha</td></tr>`;
            }

            html += '</tbody></table></div>';

            previewContent.innerHTML = html;
            previewSection.classList.remove('hidden');
        }
</script>
@endsection