@extends('layouts.main')

@section('title', 'Quotation Details')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <a href="{{ route('quotations.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> Back to Quotations
    </a>
    <div class="flex items-center space-x-3">
        <a href="{{ route('pdf.quotation.view', $quotation) }}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
            <i class="fas fa-eye mr-2"></i> View PDF
        </a>
        <a href="{{ route('quotations.edit', $quotation) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
            <i class="fas fa-edit mr-2"></i> Edit
        </a>
        <form action="{{ route('quotations.convert', $quotation) }}" method="POST">
            @csrf
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center" onclick="return confirm('Convert this quotation to an invoice?')">
                <i class="fas fa-file-invoice mr-2"></i> Convert to Invoice
            </button>
        </form>
    </div>
</div>

@php
$statusClass = match($quotation->status) {
    'draft' => 'bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300',
    'sent' => 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300',
    'accepted' => 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300',
    'rejected' => 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300',
    'expired' => 'bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300',
    default => 'bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300'
};
@endphp

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center">
            <div class="h-14 w-14 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-file-alt text-indigo-600 dark:text-indigo-400 text-xl"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Quotation Number</p>
                <p class="text-xl font-bold text-gray-800 dark:text-white font-mono">{{ $quotation->quotation_number }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center">
            <div class="h-14 w-14 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-user text-indigo-600 dark:text-indigo-400 text-xl"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Customer</p>
                <p class="text-xl font-bold text-gray-800 dark:text-white">{{ $quotation->customer->name }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <div class="flex items-center">
            <div class="h-14 w-14 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-money-bill-wave text-indigo-600 dark:text-indigo-400 text-xl"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Total</p>
                <p class="text-xl font-bold text-gray-800 dark:text-white">${{ number_format($quotation->total, 2) }}</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6">
    <div class="grid grid-cols-4 gap-6">
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Quotation Date</p>
            <p class="font-medium text-gray-800 dark:text-white">{{ $quotation->quotation_date->format('M d, Y') }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Valid Until</p>
            <p class="font-medium text-gray-800 dark:text-white">{{ $quotation->valid_until->format('M d, Y') }}</p>
        </div>
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Status</p>
            <span class="px-3 py-1 rounded-full text-sm font-medium {{ $statusClass }}">
                {{ ucfirst($quotation->status) }}
            </span>
        </div>
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Created At</p>
            <p class="font-medium text-gray-800 dark:text-white">{{ $quotation->created_at->format('M d, Y H:i') }}</p>
        </div>
    </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Quotation Items</h3>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50 dark:bg-gray-700">
            <tr class="text-left text-gray-500 dark:text-gray-400 text-sm">
                <th class="px-6 py-4 font-semibold">Product</th>
                <th class="px-6 py-4 font-semibold text-center">Quantity</th>
                <th class="px-6 py-4 font-semibold text-right">Unit Price</th>
                <th class="px-6 py-4 font-semibold text-right">Total</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            @forelse($quotation->items as $item)
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4">
                    <span class="font-medium text-gray-800 dark:text-white">{{ $item->product->name }}</span>
                </td>
                <td class="px-6 py-4 text-center text-gray-600 dark:text-gray-400">
                    {{ $item->quantity }}
                </td>
                <td class="px-6 py-4 text-right text-gray-600 dark:text-gray-400">
                    ${{ number_format($item->price, 2) }}
                </td>
                <td class="px-6 py-4 text-right font-medium text-gray-800 dark:text-white">
                    ${{ number_format($item->quantity * $item->price, 2) }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="4" class="px-6 py-8 text-center">
                    <i class="fas fa-box text-gray-300 dark:text-gray-600 text-4xl mb-3"></i>
                    <p class="text-gray-500 dark:text-gray-400">No items found</p>
                </td>
            </tr>
            @endforelse
        </tbody>
        <tfoot class="bg-gray-50 dark:bg-gray-700">
            <tr>
                <td colspan="3" class="px-6 py-4 text-right font-medium text-gray-600 dark:text-gray-400">Subtotal</td>
                <td class="px-6 py-4 text-right font-medium text-gray-800 dark:text-white">${{ number_format($quotation->subtotal, 2) }}</td>
            </tr>
            <tr>
                <td colspan="3" class="px-6 py-4 text-right font-medium text-gray-600 dark:text-gray-400">Tax</td>
                <td class="px-6 py-4 text-right font-medium text-gray-800 dark:text-white">${{ number_format($quotation->tax, 2) }}</td>
            </tr>
            <tr class="border-t-2 border-gray-200 dark:border-gray-600">
                <td colspan="3" class="px-6 py-4 text-right font-bold text-gray-800 dark:text-white">Total</td>
                <td class="px-6 py-4 text-right font-bold text-indigo-600 dark:text-indigo-400 text-xl">${{ number_format($quotation->total, 2) }}</td>
            </tr>
        </tfoot>
    </table>
</div>
@endsection