@extends('layouts.app')

@section('title', 'Customer Details')
@section('page-title', 'Customer Management')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <div class="flex items-center gap-3">
                <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xl">
                    {{ substr($customer->name, 0, 1) }}
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-gray-800">{{ $customer->name }}</h3>
                    <p class="text-gray-500 text-sm flex items-center gap-2">
                        <i class="fas fa-building text-gray-400"></i> {{ $customer->company_name ?? 'Individual' }}
                        <span class="mx-1">•</span>
                        <span class="{{ $customer->is_active ? 'text-green-600' : 'text-red-600' }} text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100">
                            {{ $customer->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </p>
                </div>
            </div>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('customers.edit', $customer) }}" class="inline-flex items-center justify-center bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-lg shadow-sm transition-all duration-200 font-medium">
                <i class="fas fa-edit mr-2"></i> Edit Profile
            </a>
            <a href="{{ route('bookings.create', ['customer_id' => $customer->id]) }}" class="inline-flex items-center justify-center bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg shadow-sm transition-all duration-200 font-medium">
                <i class="fas fa-plus mr-2"></i> New Booking
            </a>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Bookings</p>
                    <h4 class="text-2xl font-bold text-gray-900 mt-1">{{ $stats['total_bookings'] }}</h4>
                </div>
                <div class="p-2 bg-blue-50 rounded-lg text-blue-600">
                    <i class="fas fa-box"></i>
                </div>
            </div>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Spent</p>
                    <h4 class="text-2xl font-bold text-gray-900 mt-1">{{ \App\Helpers\CurrencyHelper::format($stats['total_amount']) }}</h4>
                </div>
                <div class="p-2 bg-purple-50 rounded-lg text-purple-600">
                    <i class="fas fa-wallet"></i>
                </div>
            </div>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Paid</p>
                    <h4 class="text-2xl font-bold text-green-600 mt-1">{{ \App\Helpers\CurrencyHelper::format($stats['total_paid']) }}</h4>
                </div>
                <div class="p-2 bg-green-50 rounded-lg text-green-600">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Outstanding Due</p>
                    <h4 class="text-2xl font-bold text-red-600 mt-1">{{ \App\Helpers\CurrencyHelper::format($stats['total_due']) }}</h4>
                </div>
                <div class="p-2 bg-red-50 rounded-lg text-red-600">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column: Customer Details -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Contact Info -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h4 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-address-card text-indigo-500 mr-2"></i> Contact Details
                </h4>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <i class="fas fa-envelope mt-1 w-5 text-gray-400"></i>
                        <div class="ml-3">
                            <p class="text-xs text-gray-500 uppercase">Email</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->email }}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-phone mt-1 w-5 text-gray-400"></i>
                        <div class="ml-3">
                            <p class="text-xs text-gray-500 uppercase">Phone</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->phone }}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-id-card mt-1 w-5 text-gray-400"></i>
                        <div class="ml-3">
                            <p class="text-xs text-gray-500 uppercase">CNIC</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->cnic ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Address Info -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h4 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-map-marker-alt text-indigo-500 mr-2"></i> Address
                </h4>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <i class="fas fa-home mt-1 w-5 text-gray-400"></i>
                        <div class="ml-3">
                            <p class="text-xs text-gray-500 uppercase">Address</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->address }}</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="ml-8">
                            <p class="text-xs text-gray-500 uppercase">City</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->city }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 uppercase">State</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->state }}</p>
                        </div>
                        <div class="ml-8">
                            <p class="text-xs text-gray-500 uppercase">Postal Code</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->postal_code }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 uppercase">Country</p>
                            <p class="text-sm font-medium text-gray-900">{{ $customer->country }}</p>
                        </div>
                    </div>
                </div>
            </div>

            @if($customer->notes)
            <!-- Notes -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <h4 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-sticky-note text-indigo-500 mr-2"></i> Notes
                </h4>
                <p class="text-sm text-gray-600 italic bg-yellow-50 p-3 rounded-lg border border-yellow-100">
                    {{ $customer->notes }}
                </p>
            </div>
            @endif
        </div>

        <!-- Right Column: Shipment & Payment History -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="p-5 border-b border-gray-100 flex justify-between items-center bg-gray-50">
                    <h4 class="text-lg font-bold text-gray-800">
                        <i class="fas fa-history text-indigo-500 mr-2"></i> Recent Shipments & Invoices
                    </h4>
                    <span class="text-xs text-gray-500">Last 10 Records</span>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CNTR / Date</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Route</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($bookings as $booking)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-bold text-indigo-600">{{ $booking->cntr_no }}</div>
                                    <div class="text-xs text-gray-500">{{ $booking->booking_date->format('d M, Y') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ $booking->pickup_location }}</div>
                                    <div class="text-xs text-gray-500"><i class="fas fa-arrow-down mr-1"></i> {{ $booking->delivery_location }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    <div class="text-sm font-bold text-gray-900">{{ \App\Helpers\CurrencyHelper::format($booking->total_amount) }}</div>
                                    @if($booking->due_payment > 0)
                                        <div class="text-xs text-red-600 font-medium">Due: {{ \App\Helpers\CurrencyHelper::format($booking->due_payment) }}</div>
                                    @else
                                        <div class="text-xs text-green-600 font-medium">Paid</div>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    @php
                                        $statusClasses = [
                                            'Pending' => 'bg-yellow-100 text-yellow-800',
                                            'Loaded' => 'bg-blue-100 text-blue-800',
                                            'In Transit' => 'bg-indigo-100 text-indigo-800',
                                            'Arrived' => 'bg-purple-100 text-purple-800',
                                            'Delivered' => 'bg-green-100 text-green-800',
                                            'Damaged' => 'bg-red-100 text-red-800',
                                        ];
                                        $class = $statusClasses[$booking->status] ?? 'bg-gray-100 text-gray-800';
                                    @endphp
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $class }}">
                                        {{ $booking->status }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                                    <a href="{{ route('bookings.show', $booking) }}" class="text-indigo-600 hover:text-indigo-900 mr-3" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('bookings.invoice', $booking) }}" target="_blank" class="text-gray-600 hover:text-gray-900" title="Invoice">
                                        <i class="fas fa-file-invoice"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-6 py-10 text-center text-gray-500">
                                    <i class="fas fa-box-open text-4xl mb-3 text-gray-300"></i>
                                    <p>No shipment history found.</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($bookings->hasPages())
                <div class="px-6 py-4 border-t border-gray-100 bg-gray-50">
                    {{ $bookings->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection