@extends('layouts.app')
@section('title', 'Reports')
@section('breadcrumb')<span class="text-white">Reports & Analytics</span>@endsection

@section('content')
<div class="space-y-6" x-data="{}">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
            <h1>Reports &amp; Analytics</h1>
            <p class="text-sm text-slate-400 mt-1">Pipeline performance, revenue trends, and conversion metrics</p>
        </div>
        <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="btn btn-secondary">
            <i class="fas fa-download mr-2"></i>Export CSV
        </a>
    </div>

   
    <div class="card p-5">
        <div class="flex items-center justify-between mb-5">
            <h3 class="flex items-center gap-2"><i class="fas fa-file-pdf text-purple-400"></i> PDF Reports</h3>
            <span class="text-xs text-slate-500">Date-range filtered reports exportable to PDF</span>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-store text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Leads by Showroom</div>
                        <div class="text-xs text-slate-500 mt-0.5">Lead breakdown grouped by showroom location</div>
                    </div>
                </div>
                <a href="{{ route('reports.leads-by-showroom') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-pencil-ruler text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Leads by Designer</div>
                        <div class="text-xs text-slate-500 mt-0.5">Leads to sales grouped by assigned designer</div>
                    </div>
                </div>
                <a href="{{ route('reports.leads-by-designer') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-ruler-combined text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Check Measure Appointments</div>
                        <div class="text-xs text-slate-500 mt-0.5">By scheduled date, grouped by measurer</div>
                    </div>
                </div>
                <a href="{{ route('reports.check-measure') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-industry text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Manufacture Schedule</div>
                        <div class="text-xs text-slate-500 mt-0.5">By manufacture date from Check Measure panel</div>
                    </div>
                </div>
                <a href="{{ route('reports.manufacture-schedule') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-tag text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Manufacture by Brand</div>
                        <div class="text-xs text-slate-500 mt-0.5">Manufacture schedule grouped by lead brand</div>
                    </div>
                </div>
                <a href="{{ route('reports.manufacture-schedule-brand') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-clipboard-list text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Works Order Report</div>
                        <div class="text-xs text-slate-500 mt-0.5">Works orders with line items per job</div>
                    </div>
                </div>
                <a href="{{ route('reports.works-order') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

             <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-dollar-sign text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Sales by Brand</div>
                        <div class="text-xs text-slate-500 mt-0.5">Sales grouped by brand with subtotals and grand total</div>
                    </div>
                </div>
                <a href="{{ route('reports.sales-by-brand') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-check-double text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Completed Kitchens</div>
                        <div class="text-xs text-slate-500 mt-0.5">Jobs from Completion panel with delivery &amp; completion dates</div>
                    </div>
                </div>
                <a href="{{ route('reports.completed-kitchens') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

             <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-cogs text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Jobs Processed</div>
                        <div class="text-xs text-slate-500 mt-0.5">Check measured jobs currently in Processing stage</div>
                    </div>
                </div>
                <a href="{{ route('reports.job-processed') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-hourglass-half text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Jobs Not Processed</div>
                        <div class="text-xs text-slate-500 mt-0.5">Check measured jobs awaiting processing submission</div>
                    </div>
                </div>
                <a href="{{ route('reports.job-not-processed') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

             <div class="p-4 rounded-xl flex flex-col gap-3" style="background:#1a0a2e; border:1px solid #7c3aed;">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#2d1a5e;">
                        <i class="fas fa-truck text-purple-300"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">Delivery Schedule</div>
                        <div class="text-xs text-slate-500 mt-0.5">Weekly summary of deliveries grouped by scheduled date</div>
                    </div>
                </div>
                <a href="{{ route('reports.delivery-schedule') }}" class="btn text-xs justify-center w-full" style="background:#7c3aed;color:#ede9fe;">
                    <i class="fas fa-arrow-right mr-1.5"></i>Open Report
                </a>
            </div>

            

        </div>
    </div>

 

</div>
@endsection