@extends('layouts.app')

@section('content')


<!-- YENİ MÜŞTERİ FORMU -->
<form id="customer-create-form" method="POST" action="{{ route('customers.store') }}"
    class="grid gap-4 p-4 mx-auto mb-10 bg-white border rounded-lg border-stone-300 max-w-7xl ring-1 ring-stone-300">
    @csrf
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-lg font-bold text-stone-900">YENİ MÜŞTERİ OLUŞTUR</h1>
            <div class="max-w-2xl p-4 mt-2 border rounded-md bg-violet-50 border-violet-300">
                <div class="flex">
                    <div class="shrink-0">
                        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                            class="text-violet-400 size-5">
                            <path
                                d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                                clip-rule="evenodd" fill-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="flex-1 ml-3 md:flex md:justify-between">
                        <p class="text-sm text-violet-700">Yeni müşteri oluştururken öncelikle telefon numarası girişi
                            yaparak müşterinin daha önce kayıtlı olup olmadığını kontrol ediniz.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="relative">
            <input id="phone" type="number" name="phone" placeholder="Telefon Numarası"
                class="block w-full px-5 py-3 text-xl bg-white border rounded-md text-stone-900 border-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-violet-600" />
            <div id="phone-filter-info"
                class="absolute hidden text-xs font-medium -translate-y-1/2 right-3 top-1/2 text-violet-600 whitespace-nowrap">
            </div>
        </div>
        <div class="grid grid-cols-2 gap-x-2">
            <div class="mt-2">
                <input id="name" type="text" name="name" placeholder="Müşteri Adı"
                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-stone-900 border border-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-violet-600 sm:text-sm/6" />
            </div>
            <div class="mt-2">
                <input id="surname" type="text" name="surname" placeholder="Müşteri Soyadı"
                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-stone-900 border border-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-violet-600 sm:text-sm/6" />
            </div>
        </div>
    </div>
    <!-- OLUŞTUR BUTONU -->
    <div class="flex justify-end">
        <button type="submit"
            class="inline-flex items-center px-5 py-3 text-lg font-semibold text-white rounded-md shadow-sm bg-violet-600 hover:bg-violet-700">
            OLUŞTUR
        </button>
    </div>
</form>

<!-- KAYITLI MÜŞTERİLER -->
<div class="grid gap-6 p-4 mx-auto mb-24 bg-white border rounded-lg border-stone-300 max-w-7xl ring-1 ring-stone-300">
    <div class="">
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h1 class="text-base font-semibold text-stone-900">Müşteri Listesi</h1>
                <p class="mt-2 text-xs text-stone-700">Bu tabloda tüm müşteriler ve son siparişleri listelenmektedir.
                </p>
            </div>
            <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
            </div>
        </div>
        <div class="mt-6 -mx-4 ring-1 ring-stone-200 sm:mx-0 sm:rounded">
            <table class="relative min-w-full divide-y divide-stone-200">
                <thead class="bg-violet-50">
                    <tr>
                        <th scope="col" class="py-2 pl-4 pr-3 text-sm font-semibold text-left text-stone-900 sm:pl-6">
                            No</th>
                        <th scope="col" class="px-3 py-2 text-sm font-semibold text-left text-stone-900">
                            İsim Soyisim</th>
                        <th scope="col"
                            class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                            Telefon</th>
                        <th scope="col"
                            class="hidden px-3 py-2 text-sm font-semibold text-left text-stone-900 lg:table-cell">
                            Son Siparişler</th>
                        <th scope="col" class="px-3 py-2 text-sm font-semibold text-right text-stone-900">
                            Toplam Sipariş
                        </th>
                        <th scope="col" class="py-2 pl-3 pr-4 sm:pr-6">
                            <span class="sr-only">Actions</span>
                        </th>
                    </tr>
                </thead>
                <tbody id="customers-tbody">
                    @if (isset($customers) && $customers->count() > 0)
                    @foreach ($customers as $customer)
                    <tr data-phone="{{ $customer->phone ?? '' }}">
                        <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
                            <div class="font-medium text-stone-900">#{{ $customer->id }}</div>
                        </td>
                        <td class="px-3 py-3.5 text-sm text-stone-900">
                            <div class="font-medium">{{ $customer->name }} {{ $customer->surname }}</div>
                            @if ($customer->address)
                            <div class="max-w-xs mt-1 text-xs truncate text-stone-500">
                                {{ Str::limit($customer->address, 50) }}
                            </div>
                            @endif
                        </td>
                        <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                            {{ $customer->phone ?? '-' }}
                        </td>
                        <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                            @if ($customer->sales && $customer->sales->count() > 0)
                            <div class="space-y-1">
                                @foreach ($customer->sales->take(3) as $sale)
                                <div class="text-xs">
                                    <span class="text-stone-700">#{{ $sale->id }}</span>
                                    <span class="text-stone-500"> - </span>
                                    <span class="text-stone-600">{{ number_format($sale->net_price ?? 0, 2, ',', '.') }}
                                        ₺</span>
                                    @if ($sale->deleted_at)
                                    <div class="text-xs text-stone-400">
                                        {{ $sale->deleted_at->format('d.m.Y') }}</div>
                                    @endif
                                </div>
                                @endforeach
                                @if ($customer->sales->count() > 3)
                                <div class="text-xs text-violet-600">
                                    +{{ $customer->sales->count() - 3 }} daha</div>
                                @endif
                            </div>
                            @else
                            <span class="text-stone-400">Sipariş yok</span>
                            @endif
                        </td>
                        <td class="px-3 py-3.5 text-right text-sm text-stone-500">
                            <div class="font-medium">{{ $customer->sales_count ?? 0 }} adet</div>
                        </td>
                        <td class="relative py-3.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                            <div class="flex items-center justify-end gap-2">
                                <a href="{{ route('customers.qr-code', $customer->id) }}"
                                    class="inline-flex items-center rounded-md bg-violet-600/20 px-2.5 py-1.5 text-sm font-semibold text-violet-700 border border-violet-300 hover:bg-violet-700/30">
                                    <span class="mr-1 text-sm material-symbols-rounded">qr_code_2</span>
                                    QR KOD YAZDIR
                                </a>
                                <button type="button"
                                    class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-stone-300 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white">
                                    DÜZENLE
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr id="no-customers-row">
                        <td colspan="6" class="py-8 text-sm text-center text-stone-500">
                            Müşteri bulunmamaktadır
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div id="customers-pagination">
            @if (isset($customers) && $customers->hasPages())
            <div class="mt-4">
                {{ $customers->links() }}
            </div>
            @endif
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
            const phoneInput = document.getElementById('phone');
            const tbody = document.getElementById('customers-tbody');
            const filterInfo = document.getElementById('phone-filter-info');
            const paginationEl = document.getElementById('customers-pagination');
            const searchUrl = '{{ route('customers.search-by-phone') }}';

            if (!phoneInput || !tbody) return;

            let debounceTimer = null;

            phoneInput.addEventListener('input', function() {
                const searchValue = this.value.trim();

                clearTimeout(debounceTimer);

                if (searchValue === '') {
                    if (filterInfo) filterInfo.classList.add('hidden');
                    window.location.href = '{{ route('customers.index') }}';
                    return;
                }

                if (searchValue.length < 4) {
                    if (filterInfo) {
                        filterInfo.textContent = (4 - searchValue.length) + ' karakter daha';
                        filterInfo.classList.remove('hidden');
                    }
                    return;
                }

                debounceTimer = setTimeout(function() {
                    fetch(searchUrl + '?phone=' + encodeURIComponent(searchValue), {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector(
                                    'meta[name="csrf-token"]')?.getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            const customers = data.customers || [];
                            tbody.innerHTML = '';

                            if (customers.length === 0) {
                                tbody.innerHTML =
                                    '<tr id="no-customers-row"><td colspan="6" class="py-8 text-sm text-center text-stone-500">Eşleşen müşteri bulunamadı</td></tr>';
                            } else {
                                customers.forEach(function(c) {
                                    const salesHtml = buildSalesHtml(c);
                                    const addressHtml = c.address ?
                                        '<div class="max-w-xs mt-1 text-xs truncate text-stone-500">' +
                                        escapeHtml(c.address).substring(0, 50) +
                                        '</div>' :
                                        '';

                                    tbody.innerHTML += `
                            <tr data-phone="${escapeHtml(c.phone || '')}">
                                <td class="relative py-4 pl-4 pr-3 text-sm sm:pl-6">
                                    <div class="font-medium text-stone-900">#${c.id}</div>
                                </td>
                                <td class="px-3 py-3.5 text-sm text-stone-900">
                                    <div class="font-medium">${escapeHtml(c.name)} ${escapeHtml(c.surname || '')}</div>
                                    ${addressHtml}
                                </td>
                                <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                    ${escapeHtml(c.phone || '-')}
                                </td>
                                <td class="hidden px-3 py-3.5 text-sm text-stone-500 lg:table-cell">
                                    ${salesHtml}
                                </td>
                                <td class="px-3 py-3.5 text-right text-sm text-stone-500">
                                    <div class="font-medium">${c.sales_count || 0} adet</div>
                                </td>
                                <td class="relative py-3.5 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="${escapeHtml(c.qrCodeUrl)}"
                                            class="inline-flex items-center rounded-md bg-purple-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-700">
                                            <span class="mr-1 text-sm material-symbols-rounded">qr_code_2</span>
                                            QR Kod
                                        </a>
                                        <button type="button"
                                            class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 hover:bg-stone-50">
                                            Detay
                                        </button>
                                    </div>
                                </td>
                            </tr>`;
                                });
                            }

                            if (filterInfo) {
                                filterInfo.textContent = customers.length + ' müşteri bulundu';
                                filterInfo.classList.remove('hidden');
                            }

                            if (paginationEl) {
                                paginationEl.style.display = 'none';
                            }
                        })
                        .catch(err => {
                            console.error('Phone search error:', err);
                        });
                }, 300);
            });

            function buildSalesHtml(customer) {
                const sales = customer.sales || [];
                if (sales.length === 0) {
                    return '<span class="text-stone-400">Sipariş yok</span>';
                }

                let html = '<div class="space-y-1">';
                const displaySales = sales.slice(0, 3);
                displaySales.forEach(function(s) {
                    const netPrice = parseFloat(s.net_price || 0).toLocaleString('tr-TR', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                    html += `<div class="text-xs">
                <span class="text-stone-700">#${s.id}</span>
                <span class="text-stone-500"> - </span>
                <span class="text-stone-600">${netPrice} ₺</span>`;
                    if (s.deleted_at) {
                        const date = new Date(s.deleted_at).toLocaleDateString('tr-TR');
                        html += `<div class="text-xs text-stone-400">${date}</div>`;
                    }
                    html += '</div>';
                });
                if (sales.length > 3) {
                    html += `<div class="text-xs text-violet-600">+${sales.length - 3} daha</div>`;
                }
                html += '</div>';
                return html;
            }

            function escapeHtml(text) {
                if (!text) return '';
                const div = document.createElement('div');
                div.appendChild(document.createTextNode(text));
                return div.innerHTML;
            }
        });
</script>
@endsection