@extends('layouts.app')

@section('title', 'Buyer Details')
@section('page-title', $buyer->business_name)

@section('content')
<div class="space-y-6">
    <!-- Header Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ route('buyers.index') }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left text-lg"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">{{ $buyer->business_name }}</h1>
                <p class="text-sm text-gray-500">{{ $buyer->buyer_code }}</p>
            </div>
        </div>
        
        <div class="flex items-center space-x-3 mt-4 sm:mt-0">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $buyer->status === 'active' ? 'bg-green-100 text-green-800' : ($buyer->status === 'inactive' ? 'bg-gray-100 text-gray-800' : 'bg-red-100 text-red-800') }}">
                {{ ucfirst($buyer->status) }}
            </span>
            
            @can('update', $buyer)
            <a href="{{ route('buyers.edit', $buyer) }}" 
               class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                <i class="fas fa-edit mr-2"></i>
                Edit
            </a>
            @endcan
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-shopping-cart text-2xl text-blue-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Orders</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['total_orders'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-2xl text-green-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Completed Orders</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['completed_orders'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-rupee-sign text-2xl text-yellow-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Order Value</dt>
                            <dd class="text-lg font-medium text-gray-900">₹{{ number_format($stats['total_order_value'], 2) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-list-alt text-2xl text-purple-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Active Requirements</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $stats['active_requirements'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Buyer Information -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Buyer Information</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 mb-3">Contact Details</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-sm text-gray-500">Contact Person</dt>
                                    <dd class="text-sm font-medium text-gray-900">{{ $buyer->contact_person }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm text-gray-500">Phone</dt>
                                    <dd class="text-sm font-medium text-gray-900">
                                        <a href="tel:{{ $buyer->phone }}" class="text-blue-600 hover:text-blue-500">
                                            {{ $buyer->phone }}
                                        </a>
                                    </dd>
                                </div>
                                @if($buyer->email)
                                <div>
                                    <dt class="text-sm text-gray-500">Email</dt>
                                    <dd class="text-sm font-medium text-gray-900">
                                        <a href="mailto:{{ $buyer->email }}" class="text-blue-600 hover:text-blue-500">
                                            {{ $buyer->email }}
                                        </a>
                                    </dd>
                                </div>
                                @endif
                                @if($buyer->whatsapp_number)
                                <div>
                                    <dt class="text-sm text-gray-500">WhatsApp</dt>
                                    <dd class="text-sm font-medium text-gray-900">
                                        <a href="https://wa.me/{{ $buyer->whatsapp_number }}" target="_blank" class="text-green-600 hover:text-green-500">
                                            {{ $buyer->whatsapp_number }}
                                        </a>
                                    </dd>
                                </div>
                                @endif
                            </dl>
                        </div>

                        <div>
                            <h4 class="text-sm font-medium text-gray-500 mb-3">Business Details</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-sm text-gray-500">Business Type</dt>
                                    <dd class="text-sm font-medium text-gray-900">{{ ucfirst($buyer->business_type) }}</dd>
                                </div>
                                @if($buyer->gst_number)
                                <div>
                                    <dt class="text-sm text-gray-500">GST Number</dt>
                                    <dd class="text-sm font-medium text-gray-900">{{ $buyer->gst_number }}</dd>
                                </div>
                                @endif
                                @if($buyer->credit_limit)
                                <div>
                                    <dt class="text-sm text-gray-500">Credit Limit</dt>
                                    <dd class="text-sm font-medium text-gray-900">₹{{ number_format($buyer->credit_limit, 2) }}</dd>
                                </div>
                                @endif
                                @if($buyer->assignedAgent)
                                <div>
                                    <dt class="text-sm text-gray-500">Assigned Agent</dt>
                                    <dd class="text-sm font-medium text-gray-900">{{ $buyer->assignedAgent->name }}</dd>
                                </div>
                                @endif
                            </dl>
                        </div>

                        <div class="md:col-span-2">
                            <h4 class="text-sm font-medium text-gray-500 mb-3">Address</h4>
                            <p class="text-sm text-gray-900">
                                {{ $buyer->address }}<br>
                                {{ $buyer->city }}, {{ $buyer->state }} - {{ $buyer->pincode }}
                            </p>
                        </div>

                        @if($buyer->payment_terms)
                        <div class="md:col-span-2">
                            <h4 class="text-sm font-medium text-gray-500 mb-3">Payment Terms</h4>
                            <p class="text-sm text-gray-900">{{ $buyer->payment_terms }}</p>
                        </div>
                        @endif

                        @if($buyer->notes)
                        <div class="md:col-span-2">
                            <h4 class="text-sm font-medium text-gray-500 mb-3">Notes</h4>
                            <p class="text-sm text-gray-900">{{ $buyer->notes }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="space-y-6">
            <!-- Quick Actions Card -->
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Quick Actions</h3>
                    <div class="space-y-3">
                        <a href="{{ route('buyers.orders', $buyer) }}" 
                           class="w-full flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-shopping-cart mr-3 text-blue-500"></i>
                            View Orders
                        </a>
                        <a href="{{ route('buyers.requirements', $buyer) }}" 
                           class="w-full flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-list-alt mr-3 text-purple-500"></i>
                            View Requirements
                        </a>
                        @if($buyer->whatsapp_number)
                        <a href="https://wa.me/{{ $buyer->whatsapp_number }}" 
                           target="_blank"
                           class="w-full flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fab fa-whatsapp mr-3 text-green-500"></i>
                            WhatsApp
                        </a>
                        @endif
                        @if($buyer->phone)
                        <a href="tel:{{ $buyer->phone }}" 
                           class="w-full flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            <i class="fas fa-phone mr-3 text-blue-500"></i>
                            Call
                        </a>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Agent Assignment -->
            @can('update', $buyer)
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Agent Assignment</h3>
                    <form action="{{ route('buyers.assign-agent', $buyer) }}" method="POST">
                        @csrf
                        <div class="space-y-3">
                            <select name="agent_id" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                                <option value="">Select Agent</option>
                                @foreach(\App\Models\User::withRole('agent')->active()->get() as $agent)
                                    <option value="{{ $agent->id }}" {{ $buyer->assigned_agent_id == $agent->id ? 'selected' : '' }}>
                                        {{ $agent->name }}
                                    </option>
                                @endforeach
                            </select>
                            <button type="submit" 
                                    class="w-full px-3 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                Assign Agent
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            @endcan
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Orders -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Orders</h3>
                    <a href="{{ route('buyers.orders', $buyer) }}" class="text-sm text-primary-600 hover:text-primary-500">
                        View all
                    </a>
                </div>
                
                @if($recentOrders->count() > 0)
                    <div class="space-y-3">
                        @foreach($recentOrders as $order)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ $order->order_number }}</p>
                                <p class="text-xs text-gray-500">{{ $order->created_at->format('M d, Y') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-medium text-gray-900">₹{{ number_format($order->total_amount, 2) }}</p>
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $order->status === 'completed' ? 'bg-green-100 text-green-800' : ($order->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800') }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500">No orders found.</p>
                @endif
            </div>
        </div>

        <!-- Recent Requirements -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Requirements</h3>
                    <a href="{{ route('buyers.requirements', $buyer) }}" class="text-sm text-primary-600 hover:text-primary-500">
                        View all
                    </a>
                </div>
                
                @if($recentRequirements->count() > 0)
                    <div class="space-y-3">
                        @foreach($recentRequirements as $requirement)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ $requirement->title }}</p>
                                <p class="text-xs text-gray-500">{{ $requirement->created_at->format('M d, Y') }}</p>
                            </div>
                            <div class="text-right">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $requirement->status === 'active' ? 'bg-blue-100 text-blue-800' : ($requirement->status === 'converted' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') }}">
                                    {{ ucfirst($requirement->status) }}
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500">No requirements found.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection