@extends('layouts.app')

@section('content')
<div class="">
    <div class="max-w-5xl px-4 mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <a href="{{ route('customers.index') }}"
                class="inline-flex items-center mb-3 text-sm font-medium text-stone-600 hover:text-stone-900">
                <span class="mr-1 material-symbols-rounded" style="font-size:18px">arrow_back</span>
                Müşteri Listesi
            </a>
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-stone-900">
                        {{ $customer->name }} {{ $customer->surname }}
                        <span class="text-base font-normal text-stone-500">#{{ $customer->id }}</span>
                    </h1>
                </div>
                <div class="flex items-center gap-2">
                    <a href="{{ route('customers.edit', $customer->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white rounded-md shadow-sm bg-violet-600 hover:bg-violet-500">
                        <span class="mr-1.5 material-symbols-rounded" style="font-size:18px">edit</span>
                        Düzenle
                    </a>
                    <a href="{{ route('customers.qr-code', $customer->id) }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium bg-white border rounded-md shadow-sm border-stone-300 text-stone-700 hover:bg-stone-50">
                        <span class="mr-1.5 material-symbols-rounded" style="font-size:18px">qr_code</span>
                        QR Kod
                    </a>
                    @if($customer->phone)
                    <button type="button" onclick="openQrSendModal()"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md shadow-sm hover:bg-green-500">
                        <span class="mr-1.5 material-symbols-rounded" style="font-size:18px">send</span>
                        QR GÖNDER
                    </button>
                    @else
                    <button type="button" disabled
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white rounded-md shadow-sm cursor-not-allowed bg-stone-300"
                        title="Telefon numarası olmayan müşterilere QR gönderilemez">
                        <span class="mr-1.5 material-symbols-rounded" style="font-size:18px">send</span>
                        QR GÖNDER
                    </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-2 gap-4 mb-6 lg:grid-cols-4">
            @if($isPrepayment)
            <!-- Balance Card -->
            <div class="p-5 text-white rounded-lg shadow bg-gradient-to-r from-violet-600 to-violet-700">
                <p class="text-sm font-medium text-violet-100">Bakiye</p>
                <p class="mt-1 text-2xl font-bold">₺{{ number_format($currentBalance, 2, ',', '.') }}</p>
                <a href="{{ route('customers.add-credit', $customer->id) }}"
                    class="inline-flex items-center mt-2 text-base font-medium text-violet-100 hover:text-white">
                    <span class="mr-1 text-base material-symbols-rounded">add_circle</span>
                    Bakiye Yükle
                </a>
            </div>
            @endif
            <!-- Total Sales -->
            <div class="p-5 bg-white rounded-lg shadow">
                <p class="text-sm font-medium text-stone-500">Toplam Satış</p>
                <p class="mt-1 text-2xl font-bold text-stone-900">{{ $salesStats['total_sales'] }}</p>
            </div>
            <!-- Total Revenue -->
            <div class="p-5 bg-white rounded-lg shadow">
                <p class="text-sm font-medium text-stone-500">Toplam Gelir</p>
                <p class="mt-1 text-2xl font-bold text-stone-900">₺{{ number_format($salesStats['total_revenue'], 2,
                    ',', '.') }}</p>
            </div>
            <!-- Average Order -->
            <div class="p-5 bg-white rounded-lg shadow">
                <p class="text-sm font-medium text-stone-500">Ortalama Sipariş</p>
                <p class="mt-1 text-2xl font-bold text-stone-900">₺{{ number_format($salesStats['average_order_value'],
                    2, ',', '.') }}</p>
            </div>
        </div>

        <!-- Customer Info Card -->
        <div class="p-6 mb-6 bg-white rounded-lg shadow">
            <h2 class="mb-4 text-lg font-semibold text-stone-900">Müşteri Bilgileri</h2>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <p class="text-xs font-medium uppercase text-stone-500">İsim Soyisim</p>
                    <p class="mt-1 text-sm font-medium text-stone-900">{{ $customer->name }} {{ $customer->surname }}
                    </p>
                </div>
                <div>
                    <p class="text-xs font-medium uppercase text-stone-500">Telefon</p>
                    <p class="mt-1 text-sm font-medium text-stone-900">{{ $customer->phone ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-xs font-medium uppercase text-stone-500">Adres</p>
                    <p class="mt-1 text-sm font-medium text-stone-900">{{ $customer->address ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-xs font-medium uppercase text-stone-500">Kayıt Tarihi</p>
                    <p class="mt-1 text-sm font-medium text-stone-900">{{ $customer->created_at ?
                        $customer->created_at->format('d.m.Y H:i') : '-' }}</p>
                </div>
                <div>
                    <p class="text-xs font-medium uppercase text-stone-500">Son Sipariş</p>
                    <p class="mt-1 text-sm font-medium text-stone-900">{{ $salesStats['last_sale_date'] ?
                        \Carbon\Carbon::parse($salesStats['last_sale_date'])->format('d.m.Y') : 'Sipariş yok' }}</p>
                </div>
            </div>
        </div>

        <!-- Recent Balance Transactions -->
        <div class="mb-6 overflow-hidden bg-white rounded-lg shadow">
            <div class="flex items-center justify-between px-6 py-4 border-b border-stone-200">
                <h2 class="text-lg font-semibold text-stone-900">Son Bakiye Hareketleri</h2>
                <a href="{{ route('customers.balance-history', $customer->id) }}"
                    class="text-sm font-medium text-violet-600 hover:text-violet-500">Tümünü Gör →</a>
            </div>
            @if ($recentTransactions->isNotEmpty())
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-stone-200">
                    <thead class="bg-stone-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                Tarih</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                İşlem</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                Tutar</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                Bakiye</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                Açıklama</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-stone-200">
                        @foreach ($recentTransactions as $tx)
                        <tr class="hover:bg-stone-50">
                            <td class="px-6 py-4 text-sm whitespace-nowrap text-stone-900">{{
                                $tx->created_at->format('d.m.Y H:i') }}</td>
                            <td class="px-6 py-4 text-sm whitespace-nowrap">
                                @switch($tx->transaction_type)
                                @case('credit_load')
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Yükleme</span>
                                @break
                                @case('order_payment')
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Ödeme</span>
                                @break
                                @case('adjustment')
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-stone-100 text-stone-800">Düzeltme</span>
                                @break
                                @case('credit_use')
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">İadesiz
                                    Tutar</span>
                                @break
                                @case('credit_refund')
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">İade</span>
                                @break
                                @default
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-stone-100 text-stone-800">{{
                                    $tx->transaction_type }}</span>
                                @endswitch
                            </td>
                            <td
                                class="px-6 py-4 text-sm font-semibold text-right whitespace-nowrap {{ $tx->amount >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                {{ $tx->amount >= 0 ? '+' : '' }}₺{{ number_format(abs($tx->amount), 2, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap text-stone-900">
                                ₺{{ number_format($tx->balance_after, 2, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 text-sm text-stone-500">{{ $tx->description ?? '-' }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="px-6 py-12 text-center">
                <span class="text-5xl text-stone-300 material-symbols-rounded">receipt_long</span>
                <p class="mt-4 text-sm text-stone-500">Henüz bakiye hareketi bulunmuyor.</p>
            </div>
            @endif
        </div>

        <!-- Recent Sales -->
        <div class="overflow-hidden bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-stone-200">
                <h2 class="text-lg font-semibold text-stone-900">Son Siparişler</h2>
            </div>
            @if ($customer->sales && $customer->sales->count() > 0)
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-stone-200">
                    <thead class="bg-stone-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                Satış No</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                Tarih</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                Tutar</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                Ödeme</th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                Sipariş Sayısı</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-stone-200">
                        @foreach ($customer->sales->take(10) as $sale)
                        <tr class="hover:bg-stone-50">
                            <td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-stone-900">#{{ $sale->id }}
                            </td>
                            <td class="px-6 py-4 text-sm whitespace-nowrap text-stone-900">{{ $sale->started_at ?
                                \Carbon\Carbon::parse($sale->started_at)->format('d.m.Y H:i') : '-' }}</td>
                            <td class="px-6 py-4 text-sm font-semibold text-right whitespace-nowrap text-stone-900">₺{{
                                number_format($sale->net_price ?? 0, 2, ',', '.') }}</td>
                            <td class="px-6 py-4 text-sm whitespace-nowrap">
                                @if ($sale->payment_type == 5)
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-violet-100 text-violet-800">Bakiye</span>
                                @else
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-stone-100 text-stone-800">Kasa</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-right whitespace-nowrap text-stone-900">{{
                                $sale->num_orders ?? 0 }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="px-6 py-12 text-center">
                <span class="text-5xl text-stone-300 material-symbols-rounded">shopping_cart</span>
                <p class="mt-4 text-sm text-stone-500">Henüz sipariş bulunmuyor.</p>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

{{-- WhatsApp QR Send Modal --}}
@if($customer->phone)
<div id="qrSendModal" class="fixed inset-0 z-50 items-center justify-center hidden bg-black/50"
    onclick="if(event.target===this) closeQrSendModal()">
    <div class="relative w-full max-w-md mx-4 bg-white rounded-lg shadow-2xl">
        {{-- Modal Header --}}
        <div class="flex items-center justify-between px-6 py-4 border-b border-stone-200">
            <h3 class="text-lg font-semibold text-stone-900">QR Kodunu WhatsApp ile Gönder</h3>
            <button onclick="closeQrSendModal()" class="text-stone-400 hover:text-stone-600">
                <span class="material-symbols-rounded">close</span>
            </button>
        </div>

        {{-- Modal Body --}}
        <div class="p-6">
            {{-- Customer Info --}}
            <div class="flex items-center gap-3 mb-4">
                <div class="flex items-center justify-center w-10 h-10 bg-green-100 rounded-full">
                    <span class="text-green-600 material-symbols-rounded">person</span>
                </div>
                <div>
                    <p class="text-sm font-medium text-stone-900">{{ $customer->name }} {{ $customer->surname }}</p>
                    <p class="text-sm text-stone-500">{{ $customer->phone }}</p>
                </div>
            </div>

            {{-- Source Toggle --}}
            <div class="grid grid-cols-2 gap-2 p-1 mb-4 rounded-lg bg-stone-100">
                <button type="button" id="tabCustomerQr" onclick="switchQrSource('customer')"
                    class="px-3 py-2 text-sm font-medium transition rounded-md">
                    Müşteri QR
                </button>
                <button type="button" id="tabTableQr" onclick="switchQrSource('table')"
                    class="px-3 py-2 text-sm font-medium transition rounded-md text-stone-500">
                    Masa QR
                </button>
            </div>

            {{-- === Customer QR Panel === --}}
            <div id="panelCustomerQr">
                @if($customerMenuUrl)
                {{-- Menu Link Display --}}
                <div class="p-3 mb-4 break-all border rounded-md bg-stone-50 border-stone-200">
                    <p class="mb-1 text-xs font-medium text-stone-400">Menü Bağlantısı</p>
                    <p class="text-sm select-all text-stone-700" id="qrMenuUrlText">{{ $customerMenuUrl }}</p>
                </div>
                @else
                <div class="py-4 text-center">
                    <span class="text-4xl text-stone-300 material-symbols-rounded">qr_code_2</span>
                    <p class="mt-3 text-sm text-stone-500">Bu müşteriye ait aktif QR kodu bulunamadı.</p>
                    <p class="mt-1 text-sm text-stone-500">Önce QR kod oluşturun.</p>
                    <a href="{{ route('customers.qr-code', $customer->id) }}"
                        class="inline-flex items-center px-4 py-2 mt-4 text-sm font-medium text-white rounded-md bg-violet-600 hover:bg-violet-500">
                        <span class="mr-1.5 material-symbols-rounded" style="font-size:18px">qr_code</span>
                        QR Kod Oluştur
                    </a>
                </div>
                @endif
            </div>

            {{-- === Table QR Panel === --}}
            <div id="panelTableQr" class="hidden">
                @if($tablesWithQr->isNotEmpty())
                {{-- Table Selector --}}
                <div class="mb-4">
                    <label class="block mb-1 text-sm font-medium text-stone-700">Masa Seçin</label>
                    <select id="tableSelect" onchange="onTableSelected()"
                        class="w-full px-3 py-2 text-sm border rounded-md border-stone-300 focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        <option value="">-- Masa Seçin --</option>
                        @foreach($tablesWithQr as $table)
                        <option value="{{ url('/menu/' . $table->qr_code) }}" data-name="{{ $table->name }}">Masa {{
                            $table->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div id="tableLinkBox" class="hidden p-3 mb-4 break-all border rounded-md bg-stone-50 border-stone-200">
                    <p class="mb-1 text-xs font-medium text-stone-400">Menü Bağlantısı</p>
                    <p class="text-sm select-all text-stone-700" id="tableMenuUrlText"></p>
                </div>
                @else
                <div class="py-4 text-center">
                    <span class="text-4xl text-stone-300 material-symbols-rounded">table_restaurant</span>
                    <p class="mt-3 text-sm text-stone-500">QR kodu olan masa bulunamadı.</p>
                </div>
                @endif
            </div>

            {{-- Editable Message (shared) --}}
            <div id="messageSection" class="mb-4">
                <label class="block mb-1 text-sm font-medium text-stone-700">Mesaj</label>
                <textarea id="waMessage" rows="4"
                    class="w-full px-3 py-2 text-sm border rounded-md resize-none border-stone-300 focus:ring-2 focus:ring-green-500 focus:border-green-500"></textarea>
            </div>
        </div>

        {{-- Modal Footer --}}
        <div class="flex gap-3 px-6 py-4 border-t border-stone-200">
            <a id="waSendBtn" href="#" target="_blank"
                class="inline-flex items-center justify-center flex-1 px-4 py-2.5 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                    <path
                        d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
                </svg>
                WhatsApp'tan Gönder
            </a>
            <button onclick="closeQrSendModal()"
                class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-stone-100 border rounded-md border-stone-300 text-stone-700 hover:bg-stone-200">
                Kapat
            </button>
        </div>
    </div>
</div>

<script>
    const CUSTOMER_MENU_URL = @json($customerMenuUrl);
    const TABLES_WITH_QR = @json($tablesWithQr->map(fn($t) => ['name' => $t->name, 'url' => url('/menu/' . $t->qr_code)]));
    let currentSource = 'customer';
    let currentUrl = CUSTOMER_MENU_URL;

    function openQrSendModal() {
        const modal = document.getElementById('qrSendModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        switchQrSource('customer');
    }

    function closeQrSendModal() {
        const modal = document.getElementById('qrSendModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function sanitizePhone(phone) {
        let digits = phone.replace(/\D/g, '');
        if (digits.startsWith('00')) digits = digits.substring(2);
        if (digits.startsWith('0')) digits = '90' + digits.substring(1);
        return digits;
    }

    function buildMessage(url) {
        if (!url) return '';
        return 'Merhaba {{ $customer->name }}, dijital menümüze aşağıdaki bağlantıdan erişebilir ve sipariş verebilirsiniz:\n\n' + url;
    }

    function syncMessage() {
        const msg = document.getElementById('waMessage');
        if (!msg) return;
        if (!currentUrl) { msg.value = ''; updateWhatsAppLink(); return; }
        const edited = msg.value;
        const oldMsg = buildMessage(currentUrl);
        if (edited.trim() === '' || edited.trim() === oldMsg.trim()) {
            msg.value = buildMessage(currentUrl);
        }
        updateWhatsAppLink();
    }

    function updateWhatsAppLink() {
        const phone = sanitizePhone('{{ $customer->phone }}');
        const msg = document.getElementById('waMessage');
        const btn = document.getElementById('waSendBtn');
        const url = currentUrl;
        if (!url) {
            btn.style.opacity = '0.5';
            btn.style.pointerEvents = 'none';
            btn.href = '#';
            return;
        }
        btn.style.opacity = '1';
        btn.style.pointerEvents = 'auto';
        if (btn && msg) {
            btn.href = 'https://wa.me/' + phone + '?text=' + encodeURIComponent(msg.value);
        }
    }

    function switchQrSource(source) {
        currentSource = source;
        const tabCustomer = document.getElementById('tabCustomerQr');
        const tabTable = document.getElementById('tabTableQr');
        const panelCustomer = document.getElementById('panelCustomerQr');
        const panelTable = document.getElementById('panelTableQr');
        const messageSection = document.getElementById('messageSection');

        if (source === 'customer') {
            tabCustomer.classList.add('bg-white', 'text-stone-900', 'shadow-sm');
            tabCustomer.classList.remove('text-stone-500');
            tabTable.classList.remove('bg-white', 'text-stone-900', 'shadow-sm');
            tabTable.classList.add('text-stone-500');
            panelCustomer.classList.remove('hidden');
            panelTable.classList.add('hidden');
            currentUrl = CUSTOMER_MENU_URL;
            messageSection.classList.toggle('hidden', !CUSTOMER_MENU_URL);
        } else {
            tabTable.classList.add('bg-white', 'text-stone-900', 'shadow-sm');
            tabTable.classList.remove('text-stone-500');
            tabCustomer.classList.remove('bg-white', 'text-stone-900', 'shadow-sm');
            tabCustomer.classList.add('text-stone-500');
            panelTable.classList.remove('hidden');
            panelCustomer.classList.add('hidden');
            const tableSelect = document.getElementById('tableSelect');
            if (tableSelect) tableSelect.value = '';
            currentUrl = null;
            const linkBox = document.getElementById('tableLinkBox');
            if (linkBox) linkBox.classList.add('hidden');
            messageSection.classList.add('hidden');
        }
        syncMessage();
    }

    function onTableSelected() {
        const select = document.getElementById('tableSelect');
        const linkBox = document.getElementById('tableLinkBox');
        const urlText = document.getElementById('tableMenuUrlText');
        const messageSection = document.getElementById('messageSection');
        const selectedUrl = select.value;
        if (selectedUrl) {
            currentUrl = selectedUrl;
            urlText.textContent = selectedUrl;
            linkBox.classList.remove('hidden');
            messageSection.classList.remove('hidden');
        } else {
            currentUrl = null;
            linkBox.classList.add('hidden');
            messageSection.classList.add('hidden');
        }
        syncMessage();
    }

    document.addEventListener('DOMContentLoaded', function() {
        const msg = document.getElementById('waMessage');
        if (msg) {
            msg.addEventListener('input', updateWhatsAppLink);
        }
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeQrSendModal();
    });
</script>
@endif