@extends('admin.layout.template')
@section('title','Dashboard')

@section('content')
<style>
    .product-row {
        text-decoration: none;
        padding: 10px 12px;
        border-radius: 8px;
        transition: all .2s ease;
    }

    .product-row:hover {
        background: #f8f9fa;
        transform: translateX(3px);
    }

    .rank-badge {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: #eef2ff;
        color: #4f46e5;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    /* activity feed */
    .activity-timeline {
        list-style: none;
        padding-left: 0;
        margin: 0;
        position: relative;
    }

    .activity-timeline::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
    }

    .timeline-item {
        position: relative;
        padding-left: 40px;
        margin-bottom: 22px;
    }

    .timeline-icon {
        position: absolute;
        left: 0;
        top: 3px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #eef2ff;
        color: #4f46e5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .timeline-content {
        text-align: left;
        max-width: 100%;
    }

    .timeline-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .timeline-item::before {
        width: 0%;
    }

    .dashboard-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 0;
        padding: 12px 6px;
        transition: all .2s ease;
    }

    .dashboard-list:hover {
        background: #f8f9fa;
        border-radius: 8px;
    }

    .list-group-flush>.list-group-item {
        border-bottom: 1px solid #eee;
    }

    .notification-list .notification-item {
    border: 0;
    padding: 14px 10px;
    transition: all .2s ease;
    border-bottom: 1px solid #f1f1f1;
}

.notification-list .notification-item:hover {
    background: #f8f9fa;
    transform: translateX(3px);
}

.notification-item.unread {
    background: #f4f7ff;
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.list-group-item{
    background-color: transparent;
}
</style>
<div class="page-content">
    <div class="container-fluid">

        {{-- ================= DASHBOARD SUMMARY ================= --}}
        <div class="row">

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <p class="text-muted">Today Revenue</p>
                            <h4 class="text-success">₹ {{ number_format($todayRevenue,2) }}</h4>
                        </div>
                        <div class="avatar-md bg-soft-success rounded">
                            <iconify-icon icon="solar:wallet-bold-duotone"
                                class="avatar-title fs-32 text-success"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <p class="text-muted">Today Orders</p>
                            <h4>{{ $todayOrders }}</h4>
                        </div>
                        <div class="avatar-md bg-soft-primary rounded">
                            <iconify-icon icon="solar:cart-5-bold-duotone"
                                class="avatar-title fs-32 text-primary"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <p class="text-muted">Monthly Revenue</p>
                            <h4 class="text-success">₹ {{ number_format($monthlyRevenue,2) }}</h4>
                        </div>
                        <div class="avatar-md bg-soft-info rounded">
                            <iconify-icon icon="solar:chart-bold-duotone"
                                class="avatar-title fs-32 text-info"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <p class="text-muted">Active Projects</p>
                            <h4>{{ $activeProjects }}</h4>
                        </div>
                        <div class="avatar-md bg-soft-warning rounded">
                            <iconify-icon icon="solar:buildings-bold-duotone"
                                class="avatar-title fs-32 text-warning"></iconify-icon>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ================= SECOND ROW ================= --}}
        <div class="row">

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted">Pending Quotations</p>
                        <h4>{{ $pendingQuotations }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted">Low Stock Products</p>
                        <h4 class="text-danger">{{ $lowStockProducts }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted">Pending Approvals</p>
                        <h4 class="text-warning">{{ $pendingApprovals }}</h4>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted">Total Customers</p>
                        <h4>{{ $totalCustomers }}</h4>
                    </div>
                </div>
            </div>

        </div>

        {{-- ================= SALES SNAPSHOT ================= --}}
        <div class="row">

            <div class="col-lg-9">
                <div class="card">
                    <div class="card-body">
                        <h4>Sales Snapshot</h4>
                        <div id="salesChart" style="height:370px;"></div>
                    </div>
                </div>
            </div>


  {{-- ================= ALERTS ================= --}}
            <div class="col-lg-3">
                <div class="card shadow-sm alert alert-primary text-truncate mb-3 border-danger mb-3">

<div class="card-body">

<h5 class="text-danger mb-3">
⚠ Alerts
</h5>

<ul class="list-group list-group-flush small">

{{-- Pending Quotations --}}
@foreach($pendingQuotationList as $quotation)
<li class="list-group-item px-0">

<a href="{{ route('quotations.show',$quotation->id) }}" 
class="text-decoration-none text-danger">

⚠ Quotation #{{ $quotation->quotation_number }}

</a>

</li>
@endforeach


{{-- Project Delays --}}
@foreach($projectDelayList as $project)
<li class="list-group-item px-0">

<a href="{{ route('projects.show',$project->id) }}" 
class="text-decoration-none text-danger">

⚠ Project {{ $project->project_name }} delayed

</a>

</li>
@endforeach


{{-- Low Stock Products --}}
@foreach($lowStockList as $stock)
<li class="list-group-item px-0">

<a href="{{ route('edit-product',$stock->productVariant->product->id) }}" 
class="text-decoration-none text-danger">

⚠ {{ $stock->productVariant->product->name }} (Stock: {{ $stock->available_qty }})

</a>

</li>
@endforeach

</ul>

</div>
</div>
              
                <!-- <div class="card alert alert-primary text-truncate mb-3 border-danger">

                    <div class="card-body">

                        <h4 class="text-danger">Alerts</h4>

                        <ul>

                            @if($pendingQuotations>0)
                            <li class="text-danger">⚠ Quotations Pending Approval</li>
                            @endif

                            @if($projectDelays>0)
                            <li class="text-danger">⚠ Project Delays</li>
                            @endif

                            @if($lowStockProducts>0)
                            <li class="text-danger">⚠ Low Stock Products</li>
                            @endif

                        </ul>

                    </div>
                </div> -->
                {{-- ================= ORDERS QUICK VIEW ================= --}}
               


            </div>

        </div>

         <div class="row">

            <div class="col-lg-12">
 <div class="card">
                    <div class="card-body mb-3">
                        <h4>Orders Quick View</h4>

                        <div class="row text-center">

                            <div class="col bg-light py-1 me-sm-2 mb-sm-2 border">
                                <a href="{{ route('orders.index') }}">
                                    <h5>{{ $todayOrders }}</h5>
                                    <h5>Today</h5>
                                </a>
                            </div>

                            <div class="col  bg-light py-1 me-sm-2 mb-sm-2">
                                <a href="{{ route('orders.index',['status'=>'pending']) }}">
                                    <h5>{{ $pendingOrders }}</h5>
                                    <h5>Pending</h5>
                                </a>
                            </div>
                        </div>
                        <div class="row text-center">
                            <div class="col  bg-light py-1 me-sm-2 mb-sm-2">
                                <a href="{{ route('orders.index',['status'=>'processing']) }}">
                                    <h5>{{ $processingOrders }}</h5>
                                    <h5>Processing</h5>
                                </a>
                            </div>

                            <div class="col  bg-light py-1 me-sm-2 mb-sm-2">
                                <a href="{{ route('orders.index',['status'=>'completed']) }}">
                                    <h5>{{ $completedOrders }}</h5>
                                    <h5>Completed</h5>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
         </div>
        <div class="row">

            {{-- ================= TOP SELLING PRODUCT ================= --}}

            <div class="col-lg-6">

                <div class="card shadow-sm border-0">
                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-semibold mb-0">Top Selling Products</h5>
                            <iconify-icon icon="solar:chart-bold-duotone" width="22"></iconify-icon>
                        </div>

                        <ul class="list-group list-group-flush">

                            @foreach($topProducts as $index => $product)
                            <li class="list-group-item border-0 px-0">

                                <a href="{{ route('edit-product',$product->product_id) }}"
                                    class="product-row d-flex align-items-center justify-content-between">

                                    <div class="d-flex align-items-center gap-3">

                                        {{-- Rank --}}
                                        <span class="rank-badge">
                                            {{ $index + 1 }}
                                        </span>

                                        {{-- Product Name --}}
                                        <span class="fw-medium text-dark">
                                            {{ $product->name }}
                                        </span>

                                    </div>

                                    {{-- Sales Count --}}
                                    <span class="badge bg-success rounded-pill px-3 py-2">
                                        {{ $product->total }}
                                    </span>

                                </a>

                            </li>
                            @endforeach

                        </ul>

                    </div>
                </div>

            </div>
            {{-- ================= ACTIVITY FEED ================= --}}
            <div class="col-lg-6">

                <div class="card shadow-sm border-0">
                    <div class="card-body">

                        <h5 class="fw-semibold mb-4">
                            Activity Feed
                            <iconify-icon icon="solar:bell-bold-duotone"></iconify-icon>
                        </h5>

                        <ul class="activity-timeline">

                            @foreach($activities as $activity)

                            <li class="timeline-item">

                                <div class="timeline-icon">
                                    <iconify-icon icon="solar:check-circle-bold-duotone" width="16"></iconify-icon>
                                </div>

                                <div class="timeline-content text-start">

                                    <div class="timeline-header">
                                        <span class="fw-semibold">
                                            {{ $activity->event_type }}
                                        </span>

                                        <small class="text-muted ms-2">
                                            {{ $activity->created_at->diffForHumans() }}
                                        </small>
                                    </div>

                                    <p class="text-muted small mb-0">
                                        {{ $activity->description }}
                                    </p>

                                </div>

                            </li>

                            @endforeach

                        </ul>

                    </div>
                </div>

            </div>
        </div>

        {{-- ================= QUOTATION SECTION ================= --}}
        <div class="row g-3">

            {{-- ================= QUOTATION QUICK VIEW ================= --}}
            <div class="col-lg-6">

                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-semibold mb-0">Quotation Quick View</h5>
                            <iconify-icon icon="solar:document-text-bold-duotone" width="22"></iconify-icon>
                        </div>

                        <ul class="list-group list-group-flush">

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:send-bold-duotone" class="me-2 text-primary"></iconify-icon>
                                    Sent Today
                                </span>
                                <span class="badge bg-primary-subtle text-primary">
                                    {{ $quotationToday }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:clock-circle-bold-duotone" class="me-2 text-warning"></iconify-icon>
                                    Pending Approval
                                </span>
                                <span class="badge bg-warning-subtle text-warning">
                                    {{ $quotationPending }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:check-circle-bold-duotone" class="me-2 text-success"></iconify-icon>
                                    Approved
                                </span>
                                <span class="badge bg-success-subtle text-success">
                                    {{ $quotationApproved }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:cart-5-bold-duotone" class="me-2 text-info"></iconify-icon>
                                    Converted to Orders
                                </span>
                                <span class="badge bg-info-subtle text-info">
                                    {{ $quotationConverted }}
                                </span>
                            </li>

                        </ul>

                    </div>
                </div>

            </div>


            {{-- ================= PROJECT STATUS ================= --}}
            <div class="col-lg-6">

                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-semibold mb-0">Project Status</h5>
                            <iconify-icon icon="solar:buildings-bold-duotone" width="22"></iconify-icon>
                        </div>

                        <ul class="list-group list-group-flush">

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:layers-bold-duotone" class="me-2 text-primary"></iconify-icon>
                                    Total Projects
                                </span>
                                <span class="badge bg-primary-subtle text-primary">
                                    {{ $totalProjects }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:play-circle-bold-duotone" class="me-2 text-info"></iconify-icon>
                                    In Progress
                                </span>
                                <span class="badge bg-info-subtle text-info">
                                    {{ $projectsProgress }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:check-circle-bold-duotone" class="me-2 text-success"></iconify-icon>
                                    Completed
                                </span>
                                <span class="badge bg-success-subtle text-success">
                                    {{ $projectsCompleted }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:box-bold-duotone" class="me-2 text-warning"></iconify-icon>
                                    Pending Material
                                </span>
                                <span class="badge bg-warning-subtle text-warning">
                                    {{ $pendingMaterial }}
                                </span>
                            </li>

                            <li class="list-group-item dashboard-list">
                                <span>
                                    <iconify-icon icon="solar:tools-bold-duotone" class="me-2 text-danger"></iconify-icon>
                                    Pending Installation
                                </span>
                                <span class="badge bg-danger-subtle text-danger">
                                    {{ $pendingInstallation }}
                                </span>
                            </li>

                        </ul>

                    </div>
                </div>

            </div>

        </div>


    </div>
</div>


@if($hasNotificationPermission && count($notifications))
<div class="modal fade" id="notificationPopup" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow-lg border-0">

            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="bi bi-bell"></i> Notifications
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">

               <ul class="list-group notification-list list-group-flush">

@foreach($notifications as $notification)

@php
$data = is_array($notification->data)
        ? $notification->data
        : json_decode($notification->data, true);

$url = '#';

if(($data['subject_type'] ?? '') == \App\Models\Order::class){
    $url = route('orders.show',$data['subject_id']);
}
@endphp

<a href="{{ $url }}" class="text-decoration-none">
<li class="list-group-item notification-item {{ $notification->read_at ? '' : 'unread' }}">

    <div class="d-flex align-items-start gap-3">

        {{-- Icon --}}
        <div class="notification-icon">
            <iconify-icon icon="solar:bell-bold-duotone"></iconify-icon>
        </div>

        {{-- Content --}}
        <div class="flex-grow-1">

            <div class="d-flex justify-content-between align-items-center">

                <span class="fw-semibold">
                    {{ $data['title'] ?? 'Notification' }}
                </span>

                <small class="text-muted">
                    {{ $notification->created_at->diffForHumans() }}
                </small>

            </div>

            <p class="mb-0 text-muted small">
                {{ $data['message'] ?? '' }}
            </p>

        </div>

    </div>

</li>
</a>
@endforeach

</ul>

            </div>

        </div>
    </div>
</div>
@endif
{{-- ================= CHART ================= --}}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {

        const options = {
            chart: {
                type: 'area',
                height: 320,
                toolbar: {
                    show: false
                }
            },

            series: [{
                name: 'Sales',
                data: @json($salesData)
            }],

            xaxis: {
                categories: @json($salesDates)
            },

            stroke: {
                curve: 'smooth'
            },

            dataLabels: {
                enabled: false
            }
        };

        const chart = new ApexCharts(document.querySelector("#salesChart"), options);
        chart.render();

    });
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    let modalEl = document.getElementById('notificationPopup');

    if (modalEl) {
        let modal = new bootstrap.Modal(modalEl);
        modal.show();
    }

});
</script>
@endsection