@extends('layouts.admin')

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

@section('page-title', 'Quotation Report')

@section('breadcrumbs')
    <a href="#" class="hover:text-primary">Reports</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">Quotation Report</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto">
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Quotations</p>
                    <p class="text-2xl font-bold text-gray-900 text-gray-900 mt-1">{{ $totalQuotations ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-blue-600">request_quote</span>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Accepted</p>
                    <p class="text-2xl font-bold text-green-600 mt-1">{{ $acceptedQuotations ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-green-600">check_circle</span>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Pending</p>
                    <p class="text-2xl font-bold text-yellow-600 mt-1">{{ $pendingQuotations ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-yellow-600">schedule</span>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Rejected</p>
                    <p class="text-2xl font-bold text-red-600 mt-1">{{ $rejectedQuotations ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                    <span class="material-symbols-outlined text-red-600">cancel</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter and Export -->
    <div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
        <div class="flex gap-3">
            <input type="date" class="h-10 px-4 rounded-lg border border-gray-200 bg-white text-gray-900 text-gray-900">
            <input type="date" class="h-10 px-4 rounded-lg border border-gray-200 bg-white text-gray-900 text-gray-900">
            <button class="px-4 h-10 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium">Filter</button>
        </div>
        <div class="flex gap-2">
            <button class="flex items-center gap-2 px-4 h-10 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
                <span class="material-symbols-outlined text-lg">description</span>
                Export CSV
            </button>
            <button class="flex items-center gap-2 px-4 h-10 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
                <span class="material-symbols-outlined text-lg">picture_as_pdf</span>
                Export PDF
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Quotation #</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Customer</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Date</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Valid Until</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Amount</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr>
                        <td colspan="7" class="py-12 px-6 text-center text-gray-500">
                            <span class="material-symbols-outlined text-4xl mb-2 block">request_quote</span>
                            <p>No quotation data available</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection