@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şturmak veya mevcut müşterileri aramak için
                            telefon numarası, ad veya soyad giriniz.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="relative">
            <input id="phone" type="number" name="phone" placeholder="Telefon Numarası (Arama için yazın...)"
                class="block w-full px-5 py-3 text-xl border rounded-md bg-stone-50 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ı (Arama için yazın...)"
                    class="block w-full rounded-md bg-stone-50 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ı (Arama için yazın...)"
                    class="block w-full rounded-md bg-stone-50 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="px-3 py-2 text-sm font-semibold text-right text-stone-900">
                            Bakiye
                        </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="px-3 py-3.5 text-right text-sm">
                            @php
                            $balance = $customer->getBalance(session('selected_pos_service_id'));
                            @endphp
                            @if($balance > 0)
                            <div class="font-medium text-emerald-600">₺{{ number_format($balance, 2, ',', '.') }}</div>
                            @else
                            <div class="text-stone-400">₺0,00</div>
                            @endif
                        </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>
                                @if($isPrepayment)
                                <a href="{{ route('customers.add-credit', $customer->id) }}"
                                    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">
                                    BAKİYE YÜKLE
                                </a>
                                @endif
                                <a href="{{ route('customers.show', $customer->id) }}"
                                    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">
                                    GÖRÜNTÜLE
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr id="no-customers-row">
                        <td colspan="7" 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 nameInput = document.getElementById('name');
            const surnameInput = document.getElementById('surname');
            const tbody = document.getElementById('customers-tbody');
            const phoneFilterInfo = document.getElementById('phone-filter-info');
            const paginationEl = document.getElementById('customers-pagination');
            const searchByNameUrl = '{{ route('customers.search-by-name') }}';
            const searchByPhoneUrl = '{{ route('customers.search-by-phone') }}';
            const isPrepayment = @json($isPrepayment);
            const balanceLoadHtml = isPrepayment ? '<a href="/customers/${c.id}/add-credit" 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">BAKİYE YÜKLE</a>' : '';

            if (!tbody) return;

            let nameDebounceTimer = null;
            let phoneDebounceTimer = null;

            // Name search functionality - using the existing name input
            if (nameInput) {
                nameInput.addEventListener('input', function() {
                    const searchValue = this.value.trim();
                    const surnameValue = surnameInput ? surnameInput.value.trim() : '';
                    const fullSearchValue = (searchValue + ' ' + surnameValue).trim();

                    clearTimeout(nameDebounceTimer);

                    if (searchValue === '' && surnameValue === '') {
                        if (phoneFilterInfo) phoneFilterInfo.classList.add('hidden');
                        // Reset to original list when search is cleared
                        window.location.href = '{{ route('customers.index') }}';
                        return;
                    }

                    if (fullSearchValue.length < 2) {
                        if (phoneFilterInfo) {
                            phoneFilterInfo.textContent = (2 - fullSearchValue.length) + ' karakter daha';
                            phoneFilterInfo.classList.remove('hidden');
                        }
                        return;
                    }

                    nameDebounceTimer = setTimeout(function() {
                        fetch(searchByNameUrl + '?name=' + encodeURIComponent(fullSearchValue), {
                                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="7" 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="px-3 py-3.5 text-right text-sm">
                                        ${c.balance > 0 ? `<div class="font-medium text-emerald-600">₺${parseFloat(c.balance).toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>` : '<div class="text-stone-400">₺0,00</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-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>
                                            ${balanceLoadHtml}
                                            <a href="/customers/show/${c.id}"
                                                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">
                                                GÖRÜNTÜLE
                                            </a>
                                        </div>
                                    </td>
                                </tr>`;
                                    });
                                }

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

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

            // Surname search functionality - also triggers name search
            if (surnameInput) {
                surnameInput.addEventListener('input', function() {
                    // Trigger the same handler as name input
                    if (nameInput) {
                        nameInput.dispatchEvent(new Event('input'));
                    }
                });
            }

            // Phone search functionality - using the existing phone input
            if (phoneInput) {
                phoneInput.addEventListener('input', function() {
                    const searchValue = this.value.trim();

                    clearTimeout(phoneDebounceTimer);

                    if (searchValue === '') {
                        if (phoneFilterInfo) phoneFilterInfo.classList.add('hidden');
                        // Reset to original list when search is cleared
                        window.location.href = '{{ route('customers.index') }}';
                        return;
                    }

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

                    phoneDebounceTimer = setTimeout(function() {
                        fetch(searchByPhoneUrl + '?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="7" 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="px-3 py-3.5 text-right text-sm">
                                        ${c.balance > 0 ? `<div class="font-medium text-emerald-600">₺${parseFloat(c.balance).toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>` : '<div class="text-stone-400">₺0,00</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-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>
                                            ${balanceLoadHtml}
                                            <a href="/customers/show/${c.id}"
                                                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">
                                                GÖRÜNTÜLE
                                            </a>
                                        </div>
                                    </td>
                                </tr>`;
                                    });
                                }

                                if (phoneFilterInfo) {
                                    phoneFilterInfo.textContent = customers.length + ' müşteri bulundu';
                                    phoneFilterInfo.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