@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>
                    @php
                        $displayAccountType = $customer->approval_status === 'approved'
                            ? ($customer->account_type ?? 'on_account')
                            : ($customer->requested_account_type ?? 'on_account');
                    @endphp
                    <span class="badge badge-lg {{ $displayAccountType === 'on_account' ? 'badge-info' : 'badge-success' }}">
                        {{ $customer->approval_status === 'approved' ? 'FINAL' : 'REQUESTED' }} {{ $displayAccountType === 'on_account' ? 'ON ACCOUNT' : 'CASH' }}
                    </span>
                    <span class="font-mono text-sm text-slate-500">{{ $customer->customer_code ?: $customer->application_number }}</span>
                    <span class="badge badge-lg {{ count($customer->profileMissingInformation()) ? 'badge-warning' : 'badge-success' }}">{{ count($customer->profileMissingInformation()) ? 'PROFILE INCOMPLETE' : 'PROFILE COMPLETE' }}</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="w-full space-y-3 lg:max-w-2xl">
                    @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="grid grid-cols-1 gap-2 sm:grid-cols-2" data-account-approval-form>@csrf
                        <input type="hidden" name="account_type" value="{{ $customer->requested_account_type === 'cash' ? 'cash' : 'on_account' }}">
                        <div class="sm:col-span-2 rounded-2xl bg-sky-50 p-3 font-black text-sky-900">Final account type: {{ $customer->requested_account_type === 'cash' ? 'CASH (no credit approval)' : 'ON ACCOUNT (credit approval)' }}</div>
                        @if($customer->requested_account_type !== 'cash')
                        <div class="contents" data-credit-approval-fields>
                            <input name="credit_limit" value="{{ old('credit_limit', $customer->requested_credit_limit) }}" type="number" step="0.01" class="input input-bordered" placeholder="Credit limit">
                            <input name="max_single_order" value="{{ old('max_single_order', $customer->requested_max_order) }}" type="number" step="0.01" class="input input-bordered" placeholder="Maximum single order">
                            <input name="credit_days" value="{{ old('credit_days', $customer->requested_credit_days) }}" type="number" class="input input-bordered" placeholder="Payment terms (days)">
                        </div>
                        @endif
                        <input name="admin_notes" class="input input-bordered" placeholder="Admin notes (optional)">
                        <button class="btn btn-primary sm:col-span-2">Approve & Activate</button>
                    </form>
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                        <form method="POST" action="{{ route('customers.review.needs-changes', $customer) }}" class="flex min-w-0 gap-2">@csrf<input required name="reason" class="input input-bordered min-w-0 flex-1" placeholder="Required changes reason"><button class="btn btn-warning">Needs Changes</button></form>
                        <form method="POST" action="{{ route('customers.review.reject', $customer) }}" class="flex min-w-0 gap-2">@csrf<input required name="reason" class="input input-bordered min-w-0 flex-1" placeholder="Required rejection reason"><button class="btn btn-error">Reject</button></form>
                    </div>
                </div>
            @endif
        </div>
    </section>

    @if(true)
        <section class="rounded-3xl border border-base-300 bg-base-100 p-5 shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div><div class="text-xs font-black uppercase tracking-[0.18em] text-base-content/50">Application data</div><h2 class="mt-1 text-2xl font-black">Onboarding Review</h2></div>
                @if(auth()->user()->canManageOperations())<a href="{{ route('customers.applications') }}" class="btn btn-sm btn-outline">Customer Applications</a>@endif
            </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-base-content/50">Application</dt><dd class="mt-1 font-mono font-black">{{ $customer->application_number ?: 'Legacy / Not Provided' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Shop</dt><dd class="mt-1 font-black">{{ $customer->shop_name }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Owner</dt><dd class="mt-1 font-black">{{ $customer->owner_name ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Owner Phone</dt><dd class="mt-1 font-black">{{ $customer->owner_phone ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Salesman</dt><dd class="mt-1 font-black">{{ $customer->salesman?->name ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Territory</dt><dd class="mt-1 font-black">{{ $customer->area?->name ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Requested Account</dt><dd class="mt-1 font-black">{{ $customer->requested_account_type === 'on_account' ? 'On Account' : 'Cash' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Final Account</dt><dd class="mt-1 font-black">{{ $customer->approval_status === 'approved' ? ($customer->account_type === 'on_account' ? 'On Account' : 'Cash') : 'Pending decision' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Trade License</dt><dd class="mt-1 font-black">{{ $customer->trade_license_number ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">License Expiry</dt><dd class="mt-1 font-black">{{ $customer->trade_license_expiry?->format('d M Y') ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">VAT / TRN</dt><dd class="mt-1 font-black">{{ $customer->vat_registered ? ($customer->trn ?: 'Registered') : 'Not registered' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Profile</dt><dd class="mt-1 font-black">{{ count($customer->profileMissingInformation()) ? 'Missing: '.implode(', ', $customer->profileMissingInformation()) : 'Complete' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">ID Holder Type</dt><dd class="mt-1 font-black">{{ $customer->id_holder_type ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">ID Expiry</dt><dd class="mt-1 font-black">{{ $customer->id_expiry?->format('d M Y') ?: '—' }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Location</dt><dd class="mt-1 font-black">{{ $customer->google_maps_url ?: (($customer->latitude && $customer->longitude) ? $customer->latitude.', '.$customer->longitude : 'Not Provided') }}</dd></div>
                <div><dt class="text-xs font-bold text-base-content/50">Submitted</dt><dd class="mt-1 font-black">{{ $customer->submitted_at?->format('d M Y H:i') ?: 'Not submitted' }}</dd></div>
                <div class="sm:col-span-2 lg:col-span-4"><dt class="text-xs font-bold text-base-content/50">Address</dt><dd class="mt-1 font-semibold">{{ $customer->address ?: '—' }}</dd></div>
                <div class="sm:col-span-2 lg:col-span-4"><dt class="text-xs font-bold text-base-content/50">Salesman Notes</dt><dd class="mt-1 whitespace-pre-line font-semibold">{{ $customer->salesman_notes ?: '—' }}</dd></div>
            </dl>
        </section>

        <section class="rounded-3xl border border-base-300 bg-base-100 p-5 shadow-sm">
            <div class="text-xs font-black uppercase tracking-[0.18em] text-base-content/50">Protected files</div>
            <h2 class="mt-1 text-2xl font-black">Documents</h2>
            <div class="mt-4 overflow-x-auto">
                <table class="table">
                    <thead><tr><th>Type</th><th>Filename</th><th>Uploaded</th><th>Expiry</th><th>Version</th><th></th></tr></thead>
                    <tbody>
                    @forelse($customer->documents->sortByDesc('id') as $document)
                        <tr>
                            <td class="font-bold">{{ match($document->document_type) { 'trade_license' => 'Trade License', 'owner_id' => 'Owner / Contact ID', 'vat_certificate' => 'VAT Certificate', 'security_cheque' => 'Security Cheque', default => ucwords(str_replace('_', ' ', $document->document_type)) } }}</td>
                            <td>{{ $document->original_name }}</td>
                            <td>{{ $document->created_at?->format('d M Y H:i') ?: '—' }}</td>
                            <td>{{ $document->expires_at?->format('d M Y') ?: ($document->document_type === 'trade_license' ? ($customer->trade_license_expiry?->format('d M Y') ?: '—') : ($document->document_type === 'owner_id' ? ($customer->id_expiry?->format('d M Y') ?: '—') : '—')) }}</td>
                            <td>v{{ $document->version }} @if($document->is_current)<span class="badge badge-success badge-sm ml-1">Current</span>@endif</td>
                            <td><a href="{{ route('customers.documents.show', $document) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline">View / Download</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="py-8 text-center text-base-content/50">No documents uploaded.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @endif

    @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 {{ $securityCheque ? ($customer->security_cheque_undated ? 'badge-warning' : 'badge-info') : 'badge-ghost' }}">
                    {{ $securityCheque ? ($customer->security_cheque_undated ? 'UNDATED' : 'DATED') : 'NOT PROVIDED' }}
                </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') ?: ($customer->security_cheque_undated ? 'Not required (undated)' : 'Missing date') }}</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: Not Provided. This does not block an existing active customer.</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">
            <a href="{{ route('orders.index', ['search' => $customer->shop_name]) }}" class="btn btn-outline rounded-2xl">Orders</a>
            <a href="{{ route('returns.index', ['search' => $customer->shop_name]) }}" class="btn btn-outline rounded-2xl">Returns</a>
            @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>
@if(auth()->user()->canManageOperations() && in_array($customer->approval_status, ['submitted', 'under_review']))
<script>
document.addEventListener('DOMContentLoaded', () => {
    const select = document.querySelector('[data-final-account-type]');
    const fields = document.querySelector('[data-credit-approval-fields]');
    const sync = () => {
        const onAccount = select?.value === 'on_account';
        fields?.querySelectorAll('input').forEach((input) => {
            input.disabled = !onAccount;
            input.required = onAccount;
        });
        fields?.classList.toggle('hidden', !onAccount);
    };
    select?.addEventListener('change', sync);
    sync();
});
</script>
@endif
@endsection