@extends('layouts.app')
@section('title', 'POSM Analytics')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Analytics Dashboard</div>
        <div class="d-flex align-items-center ms-auto">
            <!-- Mandatory Action Set (Right) -->
            <!-- Add -->
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

            <!-- Save -->
            <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save" style="cursor: default;"></i>

            <!-- Edit -->
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

            <!-- Delete -->
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

            <!-- Close -->
            <a href="{{ route('posm.index') }}" class="mx-1">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Close"></i>
            </a>

            <!-- Column Visibility -->
            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
        </div>
    </div>

    <!-- KPIs -->
    <div class="row mt-4 mb-3">
        <div class="col-md-3 mb-4">
            <div class="card border-0 shadow-sm h-100 rounded-border">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">Total Orders</h6>
                        <h2 class="mb-0 fw-bold display-5 text-primary">{{ $totalOrders }}</h2>
                    </div>
                    <div class="avatar-lg bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 80px; height: 80px;">
                        <i class="fa-solid fa-cart-shopping fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card border-0 shadow-sm h-100 rounded-border">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">Total Inventory</h6>
                        <h2 class="mb-0 fw-bold display-4 text-success">{{ number_format($totalStock) }}</h2>
                    </div>
                    <div class="avatar-lg bg-soft-success text-success rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 80px; height: 80px;">
                        <i class="fa-solid fa-warehouse fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card border-0 shadow-sm h-100 rounded-border">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">Low Stock Items</h6>
                        <h2 class="mb-0 fw-bold display-4 text-warning">{{ $lowStockItems }}</h2>
                    </div>
                    <div class="avatar-lg bg-soft-warning text-warning rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 80px; height: 80px;">
                        <i class="fa-solid fa-triangle-exclamation fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card border-0 shadow-sm h-100 rounded-border">
                <div class="card-body p-4 d-flex align-items-center justify-content-between">
                    <div>
                        <h6 class="fw-bold mb-1 text-muted small uppercase">Pending Depletions</h6>
                        <h2 class="mb-0 fw-bold display-4 text-info">{{ $pendingDepletions }}</h2>
                    </div>
                    <div class="avatar-lg bg-soft-info text-info rounded-circle d-flex align-items-center justify-content-center"
                        style="width: 80px; height: 80px;">
                        <i class="fa-solid fa-clock-rotate-left fs-1"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Links -->
    <div class="row">
        <div class="col-12 mb-3 mt-4">
            <h4 class="fw-bold text-dark mb-3 ps-1">Operational Reports</h4>
        </div>

        <div class="col-md-4 mb-4">
            <a href="{{ route('posm.reports.outlet-visits') }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 report-card hover-lift rounded-border">
                    <div class="card-body p-4 text-center">
                        <div class="avatar-xl bg-soft-primary text-primary rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center"
                            style="width: 96px; height: 96px;">
                            <i class="fa-solid fa-map-location-dot fs-1"></i>
                        </div>
                        <h5 class="fw-bold text-dark fs-20 mb-2">Outlet Visit Report</h5>
                        <p class="text-muted small mb-0 px-3">Track TM visits, frequency, and geo-compliance across
                            territories.</p>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 mb-4">
            <a href="{{ route('posm.reports.availability') }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 report-card hover-lift rounded-border">
                    <div class="card-body p-4 text-center">
                        <div class="avatar-xl bg-soft-success text-success rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center"
                            style="width: 96px; height: 96px;">
                            <i class="fa-solid fa-clipboard-check fs-1"></i>
                        </div>
                        <h5 class="fw-bold text-dark fs-20 mb-2">Availability Report</h5>
                        <p class="text-muted small mb-0 px-3">Monitor stock levels, norm compliance, and identify red flags.
                        </p>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 mb-4">
            <a href="{{ route('posm.reports.order-performance') }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 report-card hover-lift rounded-border">
                    <div class="card-body p-4 text-center">
                        <div class="avatar-xl bg-soft-info text-info rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center"
                            style="width: 96px; height: 96px;">
                            <i class="fa-solid fa-truck-fast fs-1"></i>
                        </div>
                        <h5 class="fw-bold text-dark fs-20 mb-2">Order Performance</h5>
                        <p class="text-muted small mb-0 px-3">Analyze order status summary, delivery times, and completion
                            rates.</p>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-4 mb-4">
            <a href="{{ route('posm.reports.inventory-audit') }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 report-card hover-lift rounded-border">
                    <div class="card-body p-4 text-center">
                        <div class="avatar-xl bg-soft-warning text-warning rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center"
                            style="width: 96px; height: 96px;">
                            <i class="fa-solid fa-boxes-stacked fs-1"></i>
                        </div>
                        <h5 class="fw-bold text-dark fs-20 mb-2">Inventory Report</h5>
                        <p class="text-muted small mb-0 px-3">Detailed stock levels, location-wise breakdown, and availability tracking.
                        </p>
                    </div>
                </div>
            </a>
        </div>


    </div>
@endsection

@push('css')
    <style>
        .hover-lift {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
        }

        .fs-20 {
            font-size: 20px;
        }
    </style>
@endpush