@extends('layouts.app')

@section('content')
<div class="min-h-screen py-8 bg-stone-100">
    <div class="max-w-4xl px-4 mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-stone-900">Müşteri QR Kod</h1>
                    <p class="mt-1 text-sm text-stone-600">Dijital menü erişimi için QR kod</p>
                </div>
                <a href="{{ route('customers.index') }}"
                    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-2 material-symbols-rounded">arrow_back</span>
                    Geri Dön
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
            <!-- Customer Info Card -->
            <div class="p-6 bg-white rounded-lg shadow">
                <h2 class="flex items-center mb-4 text-lg font-semibold text-stone-900">
                    <span class="mr-2 text-blue-600 material-symbols-rounded">person</span>
                    Müşteri Bilgisi
                </h2>

                <div class="space-y-3">
                    <div>
                        <label class="text-xs font-medium uppercase text-stone-500">İsim Soyisim</label>
                        <p class="mt-1 text-base text-stone-900">{{ $customer->name }} {{ $customer->surname }}</p>
                    </div>

                    @if($customer->phone)
                    <div>
                        <label class="text-xs font-medium uppercase text-stone-500">Telefon</label>
                        <p class="mt-1 text-base text-stone-900">{{ $customer->phone }}</p>
                    </div>
                    @endif

                    @if($customer->address)
                    <div>
                        <label class="text-xs font-medium uppercase text-stone-500">Adres</label>
                        <p class="mt-1 text-sm text-stone-700">{{ $customer->address }}</p>
                    </div>
                    @endif

                    <div class="pt-4 border-t border-stone-200">
                        <label class="text-xs font-medium uppercase text-stone-500">QR Kod Durumu</label>
                        <div class="flex items-center mt-1">
                            @if($qrCode->is_active)
                            <span
                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <span class="w-2 h-2 bg-green-500 rounded-full mr-1.5"></span>
                                Aktif
                            </span>
                            @else
                            <span
                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                <span class="w-2 h-2 bg-red-500 rounded-full mr-1.5"></span>
                                Pasif
                            </span>
                            @endif
                        </div>
                    </div>

                    @if($qrCode->table_id)
                    <div>
                        <label class="text-xs font-medium uppercase text-stone-500">Atanan Masa</label>
                        <p class="mt-1 text-base text-stone-900">Masa #{{ $qrCode->table_id }}</p>
                    </div>
                    @endif

                    <div>
                        <label class="text-xs font-medium uppercase text-stone-500">Oluşturulma Tarihi</label>
                        <p class="mt-1 text-sm text-stone-700">{{ $qrCode->created_at->format('d.m.Y H:i') }}</p>
                    </div>
                </div>
            </div>

            <!-- QR Code Card -->
            <div class="p-6 bg-white rounded-lg shadow">
                <h2 class="flex items-center mb-4 text-lg font-semibold text-stone-900">
                    <span class="mr-2 text-purple-600 material-symbols-rounded">qr_code_2</span>
                    QR Kod
                </h2>

                <!-- QR Code Image -->
                <div class="flex flex-col items-center space-y-4">
                    <div class="p-4 bg-white border-2 rounded-lg border-stone-200">
                        <img src="data:image/png;base64,{{ $qrImageBase64 }}" alt="QR Code" class="w-64 h-64">
                    </div>

                    <div class="text-center">
                        <p class="mb-2 text-xs text-stone-500">Menü URL:</p>
                        <code class="block px-3 py-2 text-xs break-all rounded bg-stone-100 text-stone-700">
                            {{ $menuUrl }}
                        </code>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="mt-6 space-y-3">
                    <button onclick="window.print()"
                        class="inline-flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white bg-purple-600 border border-transparent rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        <span class="mr-2 material-symbols-rounded">print</span>
                        QR Kodu Yazdır
                    </button>

                    <!-- BAKİYE EKLE BUTONU -->
                    <a href="{{ route('customers.add-credit', $customer->id) }}"
                        class="inline-flex items-center justify-center w-full px-4 py-3 text-base text-white font-medium bg-teal-600 border border-transparent rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
                        <span class="mr-2 material-symbols-rounded">add</span>
                        Bakiye Ekle
                    </a>

                    @if($qrCode->is_active)
                    <form action="{{ route('customers.qr-deactivate', $qrCode->id) }}" method="POST"
                        onsubmit="return confirm('Bu QR kodu iptal etmek istediğinizden emin misiniz?')">
                        @csrf
                        <button type="submit"
                            class="inline-flex items-center justify-center w-full px-4 py-3 text-base font-medium bg-stone-100 border rounded-md border-stone-300 text-stone-700 hover:bg-stone-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500">
                            <span class="mr-2 material-symbols-rounded">refresh</span>
                            Kodu Yenile
                        </button>
                    </form>
                    @endif
                </div>
            </div>
        </div>

        <!-- Instructions Card -->
        <div class="p-6 mt-6 border border-blue-200 rounded-lg bg-blue-50">
            <h3 class="flex items-center mb-3 text-base font-semibold text-blue-900">
                <span class="mr-2 material-symbols-rounded">info</span>
                Kullanım Talimatları
            </h3>
            <ol class="space-y-2 text-sm text-blue-800 list-decimal list-inside">
                <li>Bu QR kodu müşteriye okutun veya yazdırın</li>
                <li>Müşteri QR kodu okuttuğunda dijital menü açılır</li>
                <li>İlk siparişte müşteri boş bir masa seçer</li>
                <li>Sonraki siparişlerde aynı masadan devam eder</li>
                <li>Masa kapatıldığında QR kod otomatik olarak geçersiz kalır</li>
                <li>Kodu devre dışı bırakmak için "Kodu Yenile" butonunu kullanın</li>
            </ol>
        </div>
    </div>
</div>

<!-- Print Styles -->
<style media="print">
    body * {
        visibility: hidden;
    }

    .print-area,
    .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .print-area img {
        width: 50mm !important;
        height: 50mm !important;
    }

    .print-area h1 {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }

    .print-area p {
        font-size: 16px !important;
    }

    @page {
        size: 80mm 210mm;
        margin: 5mm;
    }
</style>

<!-- Print Area (hidden by default, shown when printing) -->
<div class="hidden print-area">
    <div class="text-center">
        <h1 class="mb-4 text-2xl font-bold">
            @php
            $maskName = function($word) {
            if (mb_strlen($word) <= 1) return $word; return mb_strtoupper(mb_substr($word, 0, 1)) . str_repeat('*',
                mb_strlen($word) - 1); }; @endphp {{ $maskName($customer->name) }} {{ $maskName($customer->surname) }}
        </h1>
        @if($customer->phone)
        <p class="mb-6 text-lg">Tel: {{ mb_substr($customer->phone, 0, 3) . str_repeat('*', mb_strlen($customer->phone)
            - 2) . mb_substr($customer->phone, -2) }}</p>
        @endif
        <img src="data:image/png;base64,{{ $qrImageBase64 }}" alt="QR Code" class="mx-auto mb-4 w-80 h-80">
        <p class="text-gray-600 text-xl/5">QR kodu okutarak menüyü görüntüleyin</p>
        <p class="mt-6 text-xs text-gray-500">{{ now()->format('d.m.Y') }}</p>
    </div>
</div>

<script>
    // Show print area when printing
window.addEventListener('beforeprint', function() {
    document.querySelector('.print-area').classList.remove('hidden');
});

window.addEventListener('afterprint', function() {
    document.querySelector('.print-area').classList.add('hidden');
});
</script>
@endsection