@extends('layouts.app')

@section('title', $supplier->display_name)

@section('content')
<div class="px-4 py-6 sm:px-0">
    <div class="mb-6">
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">{{ $supplier->display_name }}</h1>
                <p class="text-gray-600">Supplier Details</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('suppliers.edit', $supplier) }}"
                   class="bg-orange-600 text-white px-4 py-2 rounded-md hover:bg-orange-700">
                    Edit Supplier
                </a>
                <a href="{{ route('suppliers.index') }}"
                   class="bg-gray-300 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-400">
                    Back to List
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Supplier Information Card -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Supplier Information</h3>
            </div>
            <div class="p-6">
                <dl class="space-y-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Company Name</dt>
                        <dd class="mt-1 text-lg text-gray-900">{{ $supplier->name }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Codename</dt>
                        <dd class="mt-1">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
                                {{ $supplier->codename }}
                            </span>
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Contact Person</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($supplier->contact_person)
                                {{ $supplier->contact_person }}
                            @else
                                <span class="text-gray-400">Not specified</span>
                            @endif
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Contact Number</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($supplier->contact_number)
                                <a href="tel:{{ $supplier->contact_number }}" class="text-orange-600 hover:text-orange-900">
                                    {{ $supplier->contact_number }}
                                </a>
                            @else
                                <span class="text-gray-400">Not provided</span>
                            @endif
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Location</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($supplier->location)
                                <i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>
                                {{ $supplier->location }}
                            @else
                                <span class="text-gray-400">Not specified</span>
                            @endif
                        </dd>
                    </div>

                    @if($supplier->notes)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Notes</dt>
                        <dd class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ $supplier->notes }}</dd>
                    </div>
                    @endif
                </dl>
            </div>
        </div>

        <!-- Expanded Quick Actions Card -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Quick Actions</h3>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <a href="{{ route('price-records.create', ['supplier_id' => $supplier->id]) }}"
                       class="bg-orange-50 text-orange-700 p-4 rounded-md text-center hover:bg-orange-100 border border-orange-200 transition-colors">
                        <i class="fas fa-plus-circle text-xl mb-2"></i>
                        <p class="font-semibold">Add New Quote</p>
                        <p class="text-xs text-orange-600 mt-1">Create price record</p>
                    </a>

                    <a href="{{ route('price-records.index', ['supplier_id' => $supplier->id]) }}"
                       class="bg-teal-50 text-teal-700 p-4 rounded-md text-center hover:bg-teal-100 border border-teal-200 transition-colors">
                        <i class="fas fa-history text-xl mb-2"></i>
                        <p class="font-semibold">View All Quotes</p>
                        <p class="text-xs text-teal-600 mt-1">{{ $supplier->priceRecords->count() }} records</p>
                    </a>

                    <a href="tel:{{ $supplier->contact_number }}"
                       class="bg-blue-50 text-blue-700 p-4 rounded-md text-center hover:bg-blue-100 border border-blue-200 transition-colors {{ !$supplier->contact_number ? 'opacity-50 cursor-not-allowed' : '' }}"
                       {{ !$supplier->contact_number ? 'onclick="return false;"' : '' }}>
                        <i class="fas fa-phone text-xl mb-2"></i>
                        <p class="font-semibold">Call Supplier</p>
                        @if($supplier->contact_number)
                            <p class="text-sm mt-1 font-medium">{{ $supplier->contact_number }}</p>
                        @else
                            <p class="text-xs text-gray-500 mt-1">No number provided</p>
                        @endif
                    </a>

                    <a href="mailto:?subject=Quote%20Request&body=Hi,%20please%20provide%20quote%20for..."
                       class="bg-green-50 text-green-700 p-4 rounded-md text-center hover:bg-green-100 border border-green-200 transition-colors">
                        <i class="fas fa-envelope text-xl mb-2"></i>
                        <p class="font-semibold">Request Quote</p>
                        <p class="text-xs text-green-600 mt-1">Email template</p>
                    </a>

                    <a href="{{ route('suppliers.edit', $supplier) }}"
                       class="bg-indigo-50 text-indigo-700 p-4 rounded-md text-center hover:bg-indigo-100 border border-indigo-200 transition-colors">
                        <i class="fas fa-edit text-xl mb-2"></i>
                        <p class="font-semibold">Edit Details</p>
                        <p class="text-xs text-indigo-600 mt-1">Update information</p>
                    </a>

                    <a href="{{ route('price-records.create') . '?supplier_id=' . $supplier->id . '&item_type=' . urlencode('Quick Quote') }}"
                       class="bg-purple-50 text-purple-700 p-4 rounded-md text-center hover:bg-purple-100 border border-purple-200 transition-colors">
                        <i class="fas fa-bolt text-xl mb-2"></i>
                        <p class="font-semibold">Quick Quote</p>
                        <p class="text-xs text-purple-600 mt-1">Fast entry</p>
                    </a>
                </div>

                <div class="mt-8 pt-6 border-t border-gray-200">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Total Quotes</p>
                            <p class="text-2xl font-bold text-gray-900">{{ $supplier->priceRecords->count() }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">Item Types</p>
                            <p class="text-2xl font-bold text-gray-900">{{ $supplier->priceRecords->groupBy('item_type')->count() }}</p>
                        </div>
                    </div>

                    <div class="mt-6">
                        <p class="text-sm text-gray-500 mb-2">Supplier Created</p>
                        <p class="text-sm text-gray-900">{{ $supplier->created_at->format('M d, Y \a\t h:i A') }}</p>

                        <p class="text-sm text-gray-500 mb-2 mt-4">Last Updated</p>
                        <p class="text-sm text-gray-900">{{ $supplier->updated_at->format('M d, Y \a\t h:i A') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Price Records -->
    <div class="mt-6 bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Price Records</h3>
                <a href="{{ route('price-records.index', ['supplier_id' => $supplier->id]) }}"
                   class="text-sm text-orange-600 hover:text-orange-900">
                    View All
                </a>
            </div>
        </div>
        <div class="overflow-x-auto">
            @if($supplier->priceRecords->count() > 0)
                <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">Item Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quoted Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($supplier->priceRecords->sortByDesc('quoted_at')->take(5) as $record)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">{{ $record->item_type }}</div>
                                @if($record->size_display)
                                    <div class="text-xs text-gray-500">{{ $record->size_display }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 truncate max-w-xs">{{ $record->short_description }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $record->quantity_with_uom }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-semibold text-gray-900">{{ $record->unit_price_formatted }}</div>
                                <div class="text-xs text-gray-500">{{ $record->postage_display }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $record->quoted_at->format('M d, Y') }}</div>
                                <div class="text-xs text-gray-500">{{ $record->quoted_at->diffForHumans() }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <div class="flex space-x-2">
                                    <a href="{{ route('price-records.show', $record) }}" class="text-blue-600 hover:text-blue-900">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('price-records.edit', $record) }}" class="text-indigo-600 hover:text-indigo-900">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('price-records.duplicate', $record) }}" method="POST" class="inline">
                                        @csrf
                                        <button type="submit" class="text-green-600 hover:text-green-900">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="p-6 text-center text-gray-500">
                    <i class="fas fa-tag text-gray-400 text-4xl mb-3"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No price records found</h3>
                    <p class="text-gray-500 mb-4">This supplier doesn't have any price records yet.</p>
                    <a href="{{ route('price-records.create', ['supplier_id' => $supplier->id]) }}"
                       class="bg-orange-600 text-white px-4 py-2 rounded-md hover:bg-orange-700">
                        <i class="fas fa-plus mr-2"></i> Add First Price Record
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- Item Type Summary -->
    @if($supplier->priceRecords->count() > 0)
    <div class="mt-6 bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Item Type Summary</h3>
        </div>
        <div class="p-6">
            <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">Item Type</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Latest Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Postage</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Quoted</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Records</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @php
                            $itemTypes = $supplier->priceRecords->groupBy('item_type')->map(function($records, $type) {
                                $latestRecord = $records->sortByDesc('quoted_at')->first();

                                return [
                                    'type' => $type,
                                    'count' => $records->count(),
                                    'latest_record' => $latestRecord,
                                    'latest_price' => $latestRecord->unit_price_formatted,
                                    'latest_quantity' => $latestRecord->quantity_with_uom,
                                    'latest_postage' => $latestRecord->postage_display,
                                    'latest_date' => $latestRecord->quoted_at->format('M d, Y'),
                                    'latest_date_full' => $latestRecord->quoted_at,
                                ];
                            })->sortByDesc(function($item) {
                                return $item['latest_date_full'];
                            });
                        @endphp

                        @foreach($itemTypes as $item)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="font-medium text-gray-900">{{ $item['type'] }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-lg font-semibold text-gray-900">{{ $item['latest_price'] }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $item['latest_quantity'] }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-600">{{ $item['latest_postage'] }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ $item['latest_date'] }}</div>
                                <div class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($item['latest_date_full'])->diffForHumans() }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                    {{ $item['count'] }} {{ $item['count'] == 1 ? 'record' : 'records' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <div class="flex space-x-2">
                                    <a href="{{ route('price-records.show', $item['latest_record']) }}"
                                       class="text-blue-600 hover:text-blue-900" title="View Latest">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('price-records.create', ['supplier_id' => $supplier->id, 'item_type' => $item['type']]) }}"
                                       class="text-green-600 hover:text-green-900" title="Add New Quote">
                                        <i class="fas fa-plus"></i>
                                    </a>
                                    <a href="{{ route('price-records.index', ['supplier_id' => $supplier->id, 'item_type' => $item['type']]) }}"
                                       class="text-orange-600 hover:text-orange-900" title="View All">
                                        <i class="fas fa-history"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Summary Statistics -->
            <div class="mt-6 pt-6 border-t border-gray-200">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-500 mb-1">Total Item Types</h4>
                        <p class="text-2xl font-semibold text-gray-900">{{ $itemTypes->count() }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-500 mb-1">Most Quoted Type</h4>
                        <p class="text-lg font-semibold text-gray-900">
                            @php
                                $mostQuoted = $itemTypes->sortByDesc('count')->first();
                            @endphp
                            {{ $mostQuoted['type'] ?? 'N/A' }}
                        </p>
                        <p class="text-sm text-gray-500">{{ $mostQuoted['count'] ?? 0 }} records</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-500 mb-1">Price Range</h4>
                        <p class="text-sm text-gray-900">
                            @php
                                $minPrice = $supplier->priceRecords->min('unit_price');
                                $maxPrice = $supplier->priceRecords->max('unit_price');
                            @endphp
                            RM {{ number_format($minPrice, 2) }} - RM {{ number_format($maxPrice, 2) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Danger Zone -->
    <div class="mt-6 bg-white shadow rounded-lg overflow-hidden border border-red-200">
        <div class="px-6 py-4 border-b border-red-200 bg-red-50">
            <h2 class="text-lg font-medium text-red-800">Danger Zone</h2>
        </div>
        <div class="p-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-sm font-medium text-gray-900">Delete this supplier</h3>
                    <p class="text-sm text-gray-500">
                        Once deleted, this supplier and all associated price records will be permanently removed.
                        @if($supplier->priceRecords->count() > 0)
                            <br><span class="text-red-600 font-medium">Warning: This will delete {{ $supplier->priceRecords->count() }} price records!</span>
                        @endif
                    </p>
                </div>
                <form action="{{ route('suppliers.destroy', $supplier) }}" method="POST"
                      onsubmit="return confirm('Are you sure you want to delete this supplier? This will also delete all {{ $supplier->priceRecords->count() }} associated price records. This action cannot be undone.')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">
                        Delete Supplier
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-orange-50 { background-color: #fff7ed; }
    .bg-orange-100 { background-color: #ffedd5; }
    .text-orange-800 { color: #9a3412; }
    .border-orange-200 { border-color: #fed7aa; }
    .hover\:bg-orange-100:hover { background-color: #ffedd5; }

    .bg-teal-50 { background-color: #f0fdfa; }
    .bg-teal-100 { background-color: #ccfbf1; }
    .text-teal-700 { color: #0f766e; }
    .border-teal-200 { border-color: #99f6e4; }
    .hover\:bg-teal-100:hover { background-color: #ccfbf1; }

    .bg-blue-50 { background-color: #eff6ff; }
    .bg-blue-100 { background-color: #dbeafe; }
    .text-blue-700 { color: #1d4ed8; }
    .border-blue-200 { border-color: #bfdbfe; }
    .hover\:bg-blue-100:hover { background-color: #dbeafe; }

    .bg-green-50 { background-color: #f0fdf4; }
    .bg-green-100 { background-color: #dcfce7; }
    .text-green-700 { color: #15803d; }
    .border-green-200 { border-color: #bbf7d0; }
    .hover\:bg-green-100:hover { background-color: #dcfce7; }

    .bg-indigo-50 { background-color: #eef2ff; }
    .bg-indigo-100 { background-color: #e0e7ff; }
    .text-indigo-700 { color: #4338ca; }
    .border-indigo-200 { border-color: #c7d2fe; }
    .hover\:bg-indigo-100:hover { background-color: #e0e7ff; }

    .bg-purple-50 { background-color: #faf5ff; }
    .bg-purple-100 { background-color: #f3e8ff; }
    .text-purple-700 { color: #7c3aed; }
    .border-purple-200 { border-color: #e9d5ff; }
    .hover\:bg-purple-100:hover { background-color: #f3e8ff; }
</style>
@endsection