@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Allocation Details</h1>
            <p class="text-gray-600 mt-1">View and manage allocation</p>
        </div>
        <a href="{{ route('inventory.allocations') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
            <i class="fas fa-arrow-left mr-2"></i> Back
        </a>
    </div>

    <!-- Allocation Information -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Lead Info -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Lead Information</h2>
            @if($allocation->lead)
            <div class="space-y-3">
                <div>
                    <p class="text-gray-600 text-sm">Company Name</p>
                    <p class="text-lg font-semibold text-gray-900">
                        <a href="{{ route('leads.show', $allocation->lead) }}" class="text-blue-600 hover:text-blue-700">
                            {{ $allocation->lead->company_name }}
                        </a>
                    </p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Contact Person</p>
                    <p class="text-gray-900">{{ $allocation->lead->contact_person_name }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Email</p>
                    <p class="text-gray-900">{{ $allocation->lead->email }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Mobile</p>
                    <p class="text-gray-900">{{ $allocation->lead->mobile_number }}</p>
                </div>
            </div>
            @else
            <p class="text-gray-500">Lead information not available (deleted)</p>
            @endif
        </div>

        <!-- Item Info -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Item Information</h2>
            @if($allocation->item)
            <div class="space-y-3">
                <div>
                    <p class="text-gray-600 text-sm">Item Name</p>
                    <p class="text-lg font-semibold text-gray-900">
                        <a href="{{ route('inventory.items.show', $allocation->item) }}" class="text-blue-600 hover:text-blue-700">
                            {{ $allocation->item->name }}
                        </a>
                    </p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Category</p>
                    <p class="text-gray-900">{{ $allocation->item->category->name ?? 'Uncategorized' }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Unit Cost</p>
                    <p class="text-gray-900 font-semibold">₹{{ number_format($allocation->item->unit_cost, 2) }}/{{ $allocation->item->unit }}</p>
                </div>
                <div>
                    <p class="text-gray-600 text-sm">Available Quantity</p>
                    <p class="text-gray-900">{{ $allocation->item->quantity }} {{ $allocation->item->unit }}</p>
                </div>
            </div>
            @else
            <p class="text-gray-500">Item information not available (deleted)</p>
            @endif
        </div>
    </div>

    <!-- Allocation Details -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Allocation Details</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-blue-50 rounded p-4 border border-blue-200">
                <p class="text-gray-600 text-sm">Allocated Quantity</p>
                <p class="text-3xl font-bold text-blue-600 mt-2">{{ $allocation->quantity_allocated }}</p>
            </div>
            <div class="bg-green-50 rounded p-4 border border-green-200">
                <p class="text-gray-600 text-sm">Status</p>
                <span class="inline-block mt-2 px-3 py-1 rounded-full text-sm font-semibold
                    @if($allocation->status === 'pending') bg-yellow-100 text-yellow-800
                    @elseif($allocation->status === 'allocated') bg-green-100 text-green-800
                    @elseif($allocation->status === 'returned') bg-blue-100 text-blue-800
                    @else bg-red-100 text-red-800
                    @endif">
                    {{ ucfirst($allocation->status) }}
                </span>
            </div>
            <div class="bg-purple-50 rounded p-4 border border-purple-200">
                <p class="text-gray-600 text-sm">Allocated On</p>
                <p class="text-lg font-semibold text-purple-600 mt-2">{{ $allocation->created_at->format('M d, Y') }}</p>
            </div>
        </div>
    </div>

    <!-- Notes -->
    @if($allocation->notes)
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-3">Notes</h2>
        <p class="text-gray-700">{{ $allocation->notes }}</p>
    </div>
    @endif

    <!-- Status Update Form -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Update Status</h2>
        <form method="POST" action="{{ route('inventory.allocations.update-status', $allocation) }}" class="flex gap-3">
            @csrf
            @method('PATCH')
            <select name="status" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="pending" {{ $allocation->status === 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="allocated" {{ $allocation->status === 'allocated' ? 'selected' : '' }}>Allocated</option>
                <option value="returned" {{ $allocation->status === 'returned' ? 'selected' : '' }}>Returned</option>
                <option value="damaged" {{ $allocation->status === 'damaged' ? 'selected' : '' }}>Damaged</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                <i class="fas fa-sync mr-2"></i> Update
            </button>
        </form>
    </div>

    <!-- Delete -->
    <div class="mt-8">
        <form method="POST" action="{{ route('inventory.allocations.destroy', $allocation) }}" onsubmit="return confirm('Are you sure?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                <i class="fas fa-trash mr-2"></i> Delete Allocation
            </button>
        </form>
    </div>
</div>
@endsection