@extends('layouts.main')

@section('title', 'Quotations')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Quotations</h2>
        <p class="text-gray-500 dark:text-gray-400">Manage customer quotations</p>
    </div>
    <a href="{{ route('quotations.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
        <i class="fas fa-plus mr-2"></i> Create Quotation
    </a>
</div>

@if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg mb-4 flex items-center">
        <i class="fas fa-check-circle mr-2"></i>
        {{ session('success') }}
    </div>
@endif

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
    <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">Quotation #</th>
                <th class="px-6 py-4 font-semibold">Customer</th>
                <th class="px-6 py-4 font-semibold">Date</th>
                <th class="px-6 py-4 font-semibold">Valid Until</th>
                <th class="px-6 py-4 font-semibold text-right">Total</th>
                <th class="px-6 py-4 font-semibold">Status</th>
                <th class="px-6 py-4 font-semibold">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
            @forelse($quotations as $quotation)
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4">
                    <span class="font-mono text-gray-600 dark:text-gray-400">{{ $quotation->quotation_number }}</span>
                </td>
                <td class="px-6 py-4">
                    <span class="font-medium text-gray-800 dark:text-white">{{ $quotation->customer->name }}</span>
                </td>
                <td class="px-6 py-4 text-gray-600 dark:text-gray-400">
                    {{ $quotation->quotation_date->format('M d, Y') }}
                </td>
                <td class="px-6 py-4 text-gray-600 dark:text-gray-400">
                    {{ $quotation->valid_until->format('M d, Y') }}
                </td>
                <td class="px-6 py-4 text-right font-medium text-gray-800 dark:text-white">
                    ${{ number_format($quotation->total, 2) }}
                </td>
                <td class="px-6 py-4">
                    @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
                    <span class="px-3 py-1 rounded-full text-xs font-medium {{ $statusClass }}">
                        {{ ucfirst($quotation->status) }}
                    </span>
                </td>
                <td class="px-6 py-4">
                    <a href="{{ route('quotations.show', $quotation) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mr-3">
                        <i class="fas fa-eye"></i>
                    </a>
                    <a href="{{ route('quotations.edit', $quotation) }}" class="text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-300 mr-3">
                        <i class="fas fa-edit"></i>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" class="px-6 py-8 text-center">
                    <i class="fas fa-file-alt text-gray-300 dark:text-gray-600 text-4xl mb-3"></i>
                    <p class="text-gray-500 dark:text-gray-400">No quotations found</p>
                    <a href="{{ route('quotations.create') }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 text-sm">Create your first quotation</a>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection