@extends('layouts.dashboard')

@section('content')
@include('customers._theme')
<div class="customer-ui 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
    @if($errors->has('review'))
        <div class="alert alert-error rounded-3xl">{{ $errors->first('review') }}</div>
    @endif

    <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <div class="text-xs font-black uppercase tracking-[0.18em] text-slate-400">Customer onboarding</div>
                <div class="mt-2 flex flex-wrap items-center gap-2">
                    <span class="badge badge-lg badge-outline">{{ str_replace('_', ' ', strtoupper($customer->approval_status ?? 'APPROVED')) }}</span>
                    <span class="badge badge-lg {{ ($customer->account_type ?? 'cash') === 'on_account' ? 'badge-info' : 'badge-success' }}">{{ ($customer->account_type ?? 'cash') === 'on_account' ? 'ON ACCOUNT' : 'CASH' }}</span>
                    <span class="font-mono text-sm text-slate-500">{{ $customer->customer_code ?: $customer->application_number }}</span>
                </div>
                @if($customer->changes_requested_reason)<p class="mt-3 rounded-xl bg-amber-50 p-3 text-sm font-semibold text-amber-900">Changes requested: {{ $customer->changes_requested_reason }}</p>@endif
                @if($customer->rejection_reason)<p class="mt-3 rounded-xl bg-rose-50 p-3 text-sm font-semibold text-rose-900">Rejected: {{ $customer->rejection_reason }}</p>@endif
            </div>
            @if(auth()->user()->canManageOperations() && in_array($customer->approval_status, ['submitted', 'under_review']))
                <div class="flex flex-wrap gap-2">
                    @if($customer->approval_status === 'submitted')<form method="POST" action="{{ route('customers.review.start', $customer) }}">@csrf<button class="btn btn-outline">Start review</button></form>@endif
                    <form method="POST" action="{{ route('customers.review.approve', $customer) }}" class="flex flex-wrap gap-2">@csrf
                        <select name="account_type" class="select select-bordered"><option value="cash">Cash</option><option value="on_account" @selected($customer->requested_account_type === 'on_account')>On Account</option></select>
                        <input name="credit_limit" type="number" step="0.01" class="input input-bordered w-36" placeholder="Credit limit">
                        <input name="max_single_order" type="number" step="0.01" class="input input-bordered w-36" placeholder="Max order">
                        <button class="btn btn-primary">Approve</button>
                    </form>
                    <form method="POST" action="{{ route('customers.review.needs-changes', $customer) }}" class="flex gap-2">@csrf<input required name="reason" class="input input-bordered" placeholder="Required reason"><button class="btn btn-warning">Needs changes</button></form>
                    <form method="POST" action="{{ route('customers.review.reject', $customer) }}" class="flex gap-2">@csrf<input required name="reason" class="input input-bordered" placeholder="Required reason"><button class="btn btn-error">Reject</button></form>
                </div>
            @endif
        </div>
    </section>

    @if(($customer->requested_account_type ?? $customer->account_type) === 'on_account')
        @php
            $securityCheque = $customer->documents
                ->where('document_type', 'security_cheque')
                ->firstWhere('is_current', true);
        @endphp
        <section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <div class="text-xs font-black uppercase tracking-[0.18em] text-slate-400">Credit security</div>
                    <h2 class="mt-1 text-2xl font-black">Security Cheque</h2>
                </div>
                <span class="badge badge-lg {{ $customer->security_cheque_undated ? 'badge-warning' : 'badge-info' }}">
                    {{ $customer->security_cheque_undated ? 'UNDATED' : 'DATED' }}
                </span>
            </div>
            <dl class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div><dt class="text-xs font-bold text-slate-400">Bank</dt><dd class="mt-1 font-black">{{ $customer->security_cheque_bank_name ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-slate-400">Cheque Number</dt><dd class="mt-1 font-mono font-black">{{ $customer->security_cheque_number ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-slate-400">Account Holder</dt><dd class="mt-1 font-black">{{ $customer->security_cheque_account_holder ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-slate-400">Amount</dt><dd class="mt-1 font-black">{{ $customer->security_cheque_amount !== null ? 'AED '.number_format((float) $customer->security_cheque_amount, 2) : '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-slate-400">Cheque Date</dt><dd class="mt-1 font-black">{{ $customer->security_cheque_date?->format('d M Y') ?: 'Not required (undated)' }}</dd></div>
                <div class="sm:col-span-2 lg:col-span-3"><dt class="text-xs font-bold text-slate-400">Notes</dt><dd class="mt-1 whitespace-pre-line font-semibold">{{ $customer->security_cheque_notes ?: '—' }}</dd></div>
            </dl>
            @if($securityCheque)
                <a class="btn btn-outline mt-5" target="_blank" href="{{ route('customers.documents.show', $securityCheque) }}">View secure cheque document</a>
            @else
                <div class="mt-5 rounded-xl bg-amber-50 p-3 text-sm font-bold text-amber-900">Security cheque document is missing.</div>
            @endif
        </section>
    @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