@extends('layouts.dashboard')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">

    @if(session('success'))
        <div class="alert alert-success rounded-3xl">
            <span>✅</span>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <a
                href="{{ route('customers.index') }}"
                class="btn btn-sm btn-ghost rounded-xl"
            >
                ← Back to Customers
            </a>

            <div class="flex flex-wrap items-center gap-3 mt-3">
                <h1 class="text-4xl font-black">
                    {{ $customer->shop_name }}
                </h1>

                <span class="badge badge-lg {{
                    $customer->status === 'active'
                        ? 'badge-success'
                        : ($customer->status === 'prospect'
                            ? 'badge-warning'
                            : 'badge-error')
                }}">
                    {{ ucfirst($customer->status) }}
                </span>
            </div>

            <p class="text-base-content/50 mt-1 font-mono">
                {{ $customer->customer_code }}
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            @if($customer->phone)
                <a
                    href="tel:{{ $customer->phone }}"
                    class="btn btn-outline rounded-2xl"
                >
                    📞 Call
                </a>
            @endif

            @if($customer->whatsapp)
                @php
                    $whatsapp = preg_replace('/\D+/', '', $customer->whatsapp);
                @endphp

                <a
                    href="https://wa.me/{{ $whatsapp }}"
                    target="_blank"
                    class="btn btn-success rounded-2xl"
                >
                    💬 WhatsApp
                </a>
            @endif

            <a
                href="{{ route('customers.edit', $customer) }}"
                class="btn btn-primary rounded-2xl"
            >
                ✏️ Edit
            </a>
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <div class="rounded-3xl border border-base-300 bg-base-100 p-4">
            <div class="text-xs text-base-content/50">Orders</div>
            <div class="text-3xl font-black">{{ number_format($orderStats['all']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4">
            <div class="text-xs text-base-content/50">Draft Orders</div>
            <div class="text-3xl font-black text-warning">{{ number_format($orderStats['draft']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4">
            <div class="text-xs text-base-content/50">Confirmed Orders</div>
            <div class="text-3xl font-black text-success">{{ number_format($orderStats['confirmed']) }}</div>
        </div>

        <div class="rounded-3xl border border-base-300 bg-base-100 p-4">
            <div class="text-xs text-base-content/50">Confirmed Sales</div>
            <div class="text-xl font-black text-success">
                AED {{ number_format($orderStats['sales_total'], 2) }}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div class="xl:col-span-2 space-y-6">
            <div class="rounded-3xl border border-base-300 bg-base-100 shadow-sm overflow-hidden">
                <div class="p-5 border-b border-base-300">
                    <h2 class="text-2xl font-black">
                        🧾 Recent Orders
                    </h2>
                </div>

                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Order</th>
                                <th>Status</th>
                                <th>Items</th>
                                <th>Total</th>
                                <th>Date</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($customer->orders as $order)
                                <tr>
                                    <td class="font-black">
                                        {{ $order->order_number }}
                                    </td>

                                    <td>
                                        <span class="badge">
                                            {{ ucfirst($order->status) }}
                                        </span>
                                    </td>

                                    <td>
                                        {{ $order->items_count }}
                                    </td>

                                    <td class="font-black whitespace-nowrap">
                                        AED {{ number_format((float) $order->grand_total, 2) }}
                                    </td>

                                    <td class="whitespace-nowrap">
                                        {{ $order->created_at?->format('d M Y') }}
                                    </td>

                                    <td>
                                        <a
                                            href="{{ route('orders.show', $order) }}"
                                            class="btn btn-sm btn-primary rounded-xl"
                                        >
                                            Open
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td
                                        colspan="6"
                                        class="py-12 text-center text-base-content/50"
                                    >
                                        No linked orders yet.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if($customer->notes)
                <div class="rounded-3xl border border-base-300 bg-base-100 p-6 shadow-sm">
                    <h2 class="text-2xl font-black">
                        📝 Notes
                    </h2>

                    <div class="whitespace-pre-line mt-4">
                        {{ $customer->notes }}
                    </div>
                </div>
            @endif
        </div>

        <div class="space-y-6">
            <div class="rounded-3xl border border-base-300 bg-base-100 p-6 shadow-sm">
                <h2 class="text-xl font-black">
                    👤 Contact
                </h2>

                <div class="space-y-4 mt-5">
                    <div>
                        <div class="text-xs text-base-content/40">
                            Contact Person
                        </div>

                        <div class="font-bold">
                            {{ $customer->contact_person ?: '—' }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            Phone
                        </div>

                        <div class="font-bold">
                            {{ $customer->phone ?: '—' }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            Email
                        </div>

                        <div class="font-bold break-all">
                            {{ $customer->email ?: '—' }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="rounded-3xl border border-base-300 bg-base-100 p-6 shadow-sm">
                <h2 class="text-xl font-black">
                    📍 Assignment & Location
                </h2>

                <div class="space-y-4 mt-5">
                    <div>
                        <div class="text-xs text-base-content/40">
                            Salesman
                        </div>

                        <div class="font-black">
                            {{ $customer->salesman?->name ?: 'Unassigned' }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            Area
                        </div>

                        <div class="font-bold">
                            {{ $customer->area?->name ?: '—' }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            City
                        </div>

                        <div class="font-bold">
                            {{ $customer->city ?: '—' }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            Address
                        </div>

                        <div class="font-bold whitespace-pre-line">
                            {{ $customer->address ?: '—' }}
                        </div>
                    </div>

                    @if($customer->google_maps_url)
                        <a
                            href="{{ $customer->google_maps_url }}"
                            target="_blank"
                            class="btn btn-outline w-full rounded-2xl"
                        >
                            🗺 Open Google Maps
                        </a>
                    @elseif($customer->latitude && $customer->longitude)
                        <a
                            href="https://www.google.com/maps?q={{ $customer->latitude }},{{ $customer->longitude }}"
                            target="_blank"
                            class="btn btn-outline w-full rounded-2xl"
                        >
                            🗺 Open Coordinates
                        </a>
                    @endif
                </div>
            </div>

            <div class="rounded-3xl border border-base-300 bg-base-100 p-6 shadow-sm">
                <h2 class="text-xl font-black">
                    💳 Credit
                </h2>

                <div class="space-y-4 mt-5">
                    <div>
                        <div class="text-xs text-base-content/40">
                            Opening Balance
                        </div>

                        <div class="font-black">
                            AED {{ number_format((float) $customer->opening_balance, 2) }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            Credit Limit
                        </div>

                        <div class="font-black">
                            {{ $customer->credit_limit !== null
                                ? 'AED '.number_format((float) $customer->credit_limit, 2)
                                : '—'
                            }}
                        </div>
                    </div>

                    <div>
                        <div class="text-xs text-base-content/40">
                            Credit Days
                        </div>

                        <div class="font-black">
                            {{ $customer->credit_days !== null
                                ? $customer->credit_days.' days'
                                : '—'
                            }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection