@extends('backEnd.layouts.master')
@section('title','Dashboard')
@section('css')
<!-- Plugins css -->
<link href="{{asset('public/backEnd/')}}/assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />
<link href="{{asset('public/backEnd/')}}/assets/libs/selectize/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css" />

<style>
    :root {
        --premium-blue: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --premium-green: linear-gradient(135deg, #2af598 0%, #009efd 100%);
        --premium-orange: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --premium-cyan: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        --premium-purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        --premium-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(255, 255, 255, 0.2);
    }

    .premium-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
        animation: fadeIn 0.8s ease-out;
    }

    .premium-card {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 22px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 10px 20px rgba(0,0,0,0.03);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 140px;
    }

    .premium-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    }

    .card-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        transition: transform 0.3s ease;
    }

    .premium-card:hover .card-icon-box {
        transform: scale(1.1) rotate(5deg);
    }

    .card-icon-box i {
        font-size: 24px;
        color: #fff;
    }

    .card-metric-value {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 5px 0;
        letter-spacing: -0.5px;
    }

    .card-metric-title {
        font-size: 13px;
        color: #718096;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .card-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .badge-up { background: rgba(16, 185, 129, 0.1); color: #10b981; }
    .badge-down { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

    .pulse-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #10b981;
        display: inline-block;
        margin-right: 6px;
        box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Glow overlays on hover */
    .premium-card::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

    .premium-card:hover::after {
        opacity: 1;
    }

    /* Row adjustments */
    @media (max-width: 1400px) {
        .premium-stats-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 992px) {
        .premium-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 576px) {
        .premium-stats-grid { grid-template-columns: 1fr; }
    }
</style>
@endsection
@section('content')
<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <div class="d-flex align-items-center">
                        <span class="pulse-indicator"></span>
                        <span class="text-muted fw-medium small">System Live: Real-time Analytics</span>
                    </div>
                </div>
                <h4 class="page-title">Enterprise Dashboard</h4>
            </div>
        </div>
    </div>     
    <!-- end page title --> 

    <div class="premium-stats-grid">
        <!-- 1. Today's Orders -->
        <div class="premium-card">
            <div class="card-icon-box" style="background: var(--premium-blue)">
                <i class="fe-shopping-cart"></i>
            </div>
            <div class="card-badge {{ $order_trend >= 0 ? 'badge-up' : 'badge-down' }}">
                <i class="fe-trending-{{ $order_trend >= 0 ? 'up' : 'down' }}"></i> {{ abs(round($order_trend)) }}%
            </div>
            <div>
                <div class="card-metric-title">Today's Orders</div>
                <div class="card-metric-value"><span data-plugin="counterup">{{$today_order}}</span></div>
            </div>
        </div>

        <!-- 2. Total Sales -->
        <a href="{{ route('admin.financial_report') }}" style="text-decoration: none;">
            <div class="premium-card">
                <div class="card-icon-box" style="background: var(--premium-green)">
                    <i class="fe-dollar-sign"></i>
                </div>
                <div class="card-badge {{ $sales_trend >= 0 ? 'badge-up' : 'badge-down' }}">
                    <i class="fe-trending-{{ $sales_trend >= 0 ? 'up' : 'down' }}"></i> {{ abs(round($sales_trend)) }}%
                </div>
                <div>
                    <div class="card-metric-title">Total Sales</div>
                    <div class="card-metric-value">৳<span data-plugin="counterup">{{number_format($total_sales)}}</span></div>
                </div>
            </div>
        </a>

        <!-- 3. Returned Orders -->
        <div class="premium-card">
            <div class="card-icon-box" style="background: var(--premium-orange)">
                <i class="fe-refresh-cw"></i>
            </div>
            <div>
                <div class="card-metric-title">Returned Orders</div>
                <div class="card-metric-value"><span data-plugin="counterup">{{$returned_order}}</span></div>
            </div>
        </div>

        <!-- 4. Total Customers -->
        <div class="premium-card">
            <div class="card-icon-box" style="background: var(--premium-cyan)">
                <i class="fe-users"></i>
            </div>
            <div>
                <div class="card-metric-title">Total Customers</div>
                <div class="card-metric-value"><span data-plugin="counterup">{{$total_customer}}</span></div>
            </div>
        </div>

        <!-- 5. Stock Products -->
        <div class="premium-card">
            <div class="card-icon-box" style="background: var(--premium-purple)">
                <i class="fe-package"></i>
            </div>
            <div>
                <div class="card-metric-title">Stock Products</div>
                <div class="card-metric-value"><span data-plugin="counterup">{{$stock_products}}</span></div>
            </div>
        </div>

        <!-- 6. Conversion Rate -->
        <div class="premium-card">
            <div class="card-icon-box" style="background: var(--premium-dark)">
                <i class="fe-activity"></i>
            </div>
            <div>
                <div class="card-metric-title">Conversion Rate</div>
                <div class="card-metric-value"><span data-plugin="counterup">{{$conversion_rate}}</span>%</div>
            </div>
        </div>

        <!-- 7. Total Profit -->
        <a href="{{ route('admin.financial_report') }}" style="text-decoration: none;">
            <div class="premium-card">
                <div class="card-icon-box" style="background: var(--premium-blue); filter: hue-rotate(45deg);">
                    <i class="fe-trending-up"></i>
                </div>
                <div>
                    <div class="card-metric-title">Total Profit</div>
                    <div class="card-metric-value">৳<span data-plugin="counterup">{{number_format($total_profit)}}</span></div>
                </div>
            </div>
        </a>

        <!-- 8. Total Balance -->
        <a href="{{ route('admin.financial_report') }}" style="text-decoration: none;">
            <div class="premium-card">
                <div class="card-icon-box" style="background: var(--premium-green); filter: saturate(1.5);">
                    <i class="fe-credit-card"></i>
                </div>
                <div>
                    <div class="card-metric-title">Total Balance</div>
                    <div class="card-metric-value">৳<span data-plugin="counterup">{{number_format($total_balance)}}</span></div>
                </div>
            </div>
        </a>
    </div>


    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Edit Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Action</a>
                        </div>
                    </div>

                    <h4 class="header-title mb-3">Latest 5 Orders</h4>

                    <div class="table-responsive">
                        <table class="table table-borderless table-hover table-nowrap table-centered m-0">

                            <thead class="table-light">
                                <tr>
                                    <th colspan="2">Id</th>
                                    <th>Invoice</th>
                                    <th>Amount</th>
                                    <th>Customer</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($latest_order as $order)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td style="width: 36px;">
                                        <img src="{{asset($order->product?$order->product->image->image:'')}}" alt="contact-img" title="contact-img" class="rounded-circle avatar-sm" />
                                    </td>

                                    <td>
                                        {{$order->invoice_id}}
                                    </td>

                                    <td>
                                        {{$order->amount}}
                                    </td>

                                    <td>
                                        {{$order->customer?$order->customer->name:''}}
                                    </td>
                                    <td>
                                        {{$order->order_status}}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->

        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="dropdown float-end">
                        <a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="mdi mdi-dots-vertical"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Edit Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                            <!-- item-->
                            <a href="javascript:void(0);" class="dropdown-item">Action</a>
                        </div>
                    </div>

                    <h4 class="header-title mb-3">Latest Customers</h4>

                    <div class="table-responsive">
                        <table class="table table-borderless table-nowrap table-hover table-centered m-0">

                            <thead class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($latest_customer as $customer)
                                <tr>
                                    <td>
                                        <h5 class="m-0 fw-normal">{{$loop->iteration}}</h5>
                                    </td>

                                    <td>
                                        {{$customer->name}}
                                    </td>

                                    <td>
                                        {{$customer->phone}}
                                    </td>

                                    <td>
                                        {{$customer->created_at->format('d-m-Y')}}
                                    </td>

                                    <td>
                                        {{$customer->status}}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div> <!-- end .table-responsive-->
                </div>
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>
    <!-- end row -->
    
</div> <!-- container -->
@endsection
@section('script')
 <!-- Plugins js-->
        <script src="{{asset('public/backEnd/')}}/assets/libs/flatpickr/flatpickr.min.js"></script>
        <script src="{{asset('public/backEnd/')}}/assets/libs/apexcharts/apexcharts.min.js"></script>
        <script src="{{asset('public/backEnd/')}}/assets/libs/selectize/js/standalone/selectize.min.js"></script>

    <script>
    // Premium Counter Animation
    document.querySelectorAll('[data-plugin="counterup"]').forEach(counter => {
        const target = +counter.innerText.replace(/,/g, '');
        const duration = 1500; // 1.5 seconds
        const startTime = performance.now();
        
        const updateCounter = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            // Easing function (easeOutExpo)
            const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
            
            const currentValue = Math.floor(easeProgress * target);
            counter.innerText = currentValue.toLocaleString();
            
            if (progress < 1) {
                requestAnimationFrame(updateCounter);
            } else {
                counter.innerText = target.toLocaleString();
            }
        };
        
        // Initial reset for animation start
        counter.innerText = '0';
        requestAnimationFrame(updateCounter);
    });

    // Simulated real-time refresh effect
    setInterval(() => {
        const indicators = document.querySelectorAll('.pulse-indicator');
        indicators.forEach(ind => {
            ind.style.transform = 'scale(1.2)';
            setTimeout(() => ind.style.transform = 'scale(1)', 200);
        });
    }, 5000);

    // Chart logic (existing)
    var colors = ["#f1556c"],
    dataColors = $("#total-revenue").data("colors");
    dataColors && (colors = dataColors.split(","));
    var options = {
          
          chart: {
             height: 242,
             type: "radialBar"
          },
          plotOptions: {
             radialBar: {
                hollow: {
                   size: "65%"
                }
             }
          },
          colors: colors,
          labels: ["Delivery"]
       },
        chart = new ApexCharts(document.querySelector("#total-revenue"), options);
        chart.render();
        colors = ["#1abc9c", "#4a81d4"];
        (dataColors = $("#sales-analytics").data("colors")) && (colors = dataColors.split(","));
        options = {
           series: [{
              name: "Revenue",
              type: "column",
              data: [@foreach($monthly_sale as $sale) {{$sale->amount}}, @endforeach]
           }, {
              name: "Sales",
              type: "line",
              data: [@foreach($monthly_sale as $sale) {{$sale->amount}}, @endforeach]
           }],
           chart: {
              height: 378,
              type: "line",
              toolbar: { show: false }
           },
           stroke: {
              width: [2, 3],
              curve: 'smooth'
           },
           plotOptions: {
              bar: {
                 columnWidth: "40%",
                 borderRadius: 4
              }
           },
           colors: colors,
           dataLabels: {
              enabled: !0,
              enabledOnSeries: [1]
           },
           labels: [@foreach($monthly_sale as $sale) "{{date('d M', strtotime($sale->date))}}", @endforeach],
           legend: {
              position: 'top',
              horizontalAlign: 'right'
           },
           grid: {
              borderColor: '#f1f3fa',
              padding: {
                 bottom: 10
              }
           },
           fill: {
              type: "gradient",
              gradient: {
                 shade: "light",
                 type: "horizontal",
                 shadeIntensity: .25,
                 gradientToColors: void 0,
                 inverseColors: !0,
                 opacityFrom: .75,
                 opacityTo: .75,
                 stops: [0, 0, 0]
              }
           },
           yaxis: [{
              title: {
                 text: "Net Revenue"
              }
           }]
        };
        (chart = new ApexCharts(document.querySelector("#sales-analytics"), options)).render(), $("#dash-daterange").flatpickr({
           altInput: !0,
           mode: "range",
        });
    </script>
@endsection
