@extends('layouts.admin')

@section('title', 'Customer Profile: ' . $customer->full_name . ' – Admin CRM')
@section('page_title', 'Customer 360: ' . $customer->full_name)

@section('content')
<div class="space-y-6 max-w-7xl">
    
    <!-- Top Back Navigation -->
    <div class="flex items-center justify-between">
        <a href="{{ route('admin.customers.index') }}" class="text-xs font-bold text-slate-400 hover:text-white flex items-center gap-1.5">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Back to All Customers</span>
        </a>
        <span class="font-mono text-xs text-red-400 font-bold">Code: {{ $customer->customer_code }}</span>
    </div>

    <!-- 2 Columns: Client Card & Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        
        <!-- Left 4 Cols: Profile Card & Internal CRM Notes -->
        <div class="lg:col-span-4 space-y-6">
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl space-y-5">
                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 rounded-2xl bg-red-600 text-white font-extrabold text-xl flex items-center justify-center shadow-lg">
                        {{ strtoupper(substr($customer->full_name, 0, 1)) }}
                    </div>
                    <div>
                        <h3 class="text-base font-bold text-white font-heading">{{ $customer->full_name }}</h3>
                        <p class="text-xs text-slate-400">{{ $customer->phone }}</p>
                        <span class="inline-block text-[10px] uppercase font-bold px-2 py-0.5 rounded-full mt-1 {{ $customer->status === 'verified' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-amber-500/20 text-amber-400' }}">
                            {{ $customer->status }}
                        </span>
                    </div>
                </div>

                <div class="border-t border-white/10 pt-4 space-y-2.5 text-xs">
                    <div class="flex justify-between">
                        <span class="text-slate-400">Email:</span>
                        <span class="font-semibold text-white">{{ $customer->email }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-400">Alternate Phone:</span>
                        <span class="text-slate-300">{{ $customer->alternate_phone ?? 'None' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-400">Preferred Contact:</span>
                        <span class="font-bold text-emerald-400 uppercase">{{ $customer->preferred_contact ?? 'whatsapp' }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-400">City / District:</span>
                        <span class="text-slate-300">{{ $customer->city ?? 'Dhaka' }}, {{ $customer->district ?? 'Dhaka' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-400 block mb-0.5">Address:</span>
                        <p class="text-slate-300">{{ $customer->address ?? 'Showroom Collection' }}</p>
                    </div>
                </div>

                <!-- WhatsApp Quick Action -->
                <div class="pt-2">
                    <a href="https://wa.me/{{ $customer->phone }}" target="_blank" class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs shadow transition">
                        <i class="fa-brands fa-whatsapp text-sm"></i>
                        <span>Message Client on WhatsApp</span>
                    </a>
                </div>
            </div>

            <!-- Internal Staff CRM Notes -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-6 shadow-xl space-y-4">
                <h4 class="text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center gap-2">
                    <i class="fa-solid fa-note-sticky text-amber-400"></i> Internal Sales & CRM Notes
                </h4>
                <form method="POST" action="{{ route('admin.customers.notes', $customer->id) }}" class="space-y-3">
                    @csrf
                    <textarea name="internal_notes" rows="4" class="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-white text-xs focus:border-red-500 focus:outline-none" placeholder="Add confidential notes on client preferences, budget, or creditworthiness...">{{ $customer->internal_notes }}</textarea>
                    <button type="submit" class="w-full py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                        Save Internal Notes
                    </button>
                </form>

                <!-- Update Status Form -->
                <form method="POST" action="{{ route('admin.customers.status', $customer->id) }}" class="pt-3 border-t border-white/10 flex items-center gap-2">
                    @csrf
                    <select name="status" class="bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs flex-1">
                        <option value="new" {{ $customer->status === 'new' ? 'selected' : '' }}>New</option>
                        <option value="verified" {{ $customer->status === 'verified' ? 'selected' : '' }}>Verified Client</option>
                        <option value="vip" {{ $customer->status === 'vip' ? 'selected' : '' }}>VIP Corporate</option>
                        <option value="suspended" {{ $customer->status === 'suspended' ? 'selected' : '' }}>Suspended</option>
                    </select>
                    <button type="submit" class="px-3 py-1.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs">
                        Update
                    </button>
                </form>
            </div>
        </div>

        <!-- Right 8 Cols: All Bids & Orders History -->
        <div class="lg:col-span-8 space-y-6">
            
            <!-- Confirmed Orders -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
                <div class="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between">
                    <h4 class="text-sm font-bold text-white font-heading flex items-center gap-2">
                        <i class="fa-solid fa-ship text-blue-400"></i> Vehicle Orders ({{ $customer->orders->count() }})
                    </h4>
                </div>
                @if($customer->orders->count() > 0)
                    <div class="divide-y divide-white/5">
                        @foreach($customer->orders as $order)
                            <div class="p-4 flex items-center justify-between gap-4 text-xs">
                                <div>
                                    <span class="font-bold text-white">#{{ $order->order_number }}</span>
                                    <p class="text-slate-400">{{ $order->car_title }} (Chassis: {{ $order->chassis_number ?? 'Pending' }})</p>
                                </div>
                                <div class="text-right">
                                    <span class="font-bold text-emerald-400 uppercase text-[10px] block">{{ str_replace('_', ' ', $order->status) }}</span>
                                    <span class="text-slate-300 font-bold">৳{{ number_format($order->total_amount_bdt) }}</span>
                                </div>
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold transition">
                                    Manage
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-xs text-slate-500 p-6 text-center">No confirmed vehicle orders on record for this customer.</p>
                @endif
            </div>

            <!-- Bids Placed -->
            <div class="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-xl">
                <div class="p-4 sm:p-5 border-b border-white/10 flex items-center justify-between">
                    <h4 class="text-sm font-bold text-white font-heading flex items-center gap-2">
                        <i class="fa-solid fa-gavel text-amber-400"></i> Auction Bid Authorizations ({{ $customer->bids->count() }})
                    </h4>
                </div>
                @if($customer->bids->count() > 0)
                    <div class="divide-y divide-white/5">
                        @foreach($customer->bids as $bid)
                            <div class="p-4 flex items-center justify-between gap-4 text-xs">
                                <div>
                                    <span class="font-bold text-white">{{ $bid->auctionVehicle->brand ?? '' }} {{ $bid->auctionVehicle->model ?? 'Vehicle' }}</span>
                                    <p class="text-slate-400">Lot #{{ $bid->auctionVehicle->lot_number ?? 'N/A' }} · {{ $bid->created_at->format('M d, Y') }}</p>
                                </div>
                                <div class="text-right">
                                    <span class="font-bold text-amber-400">¥{{ number_format($bid->max_bid_jpy) }}</span>
                                    <span class="text-slate-500 block text-[10px]">Landed: ৳{{ number_format($bid->estimated_landed_cost_bdt) }}</span>
                                </div>
                                <div>
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $bid->status === 'won' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-800 text-slate-300' }}">
                                        {{ $bid->status }}
                                    </span>
                                </div>
                                <a href="{{ route('admin.bids.show', $bid->id) }}" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold transition">
                                    Review
                                </a>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-xs text-slate-500 p-6 text-center">No auction bids placed by this client yet.</p>
                @endif
            </div>

        </div>

    </div>

</div>
@endsection