@extends('layouts.index')
@section('page-style')
    <link rel="stylesheet" href="{{ asset('css/pages/dashboard.css') }}">
@endsection
@section('content')

<style>
    .notification-well {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Scrollable body */
.notification-well .card-body {
    flex: 1;
    overflow-y: auto;
    max-height: 500px; /* Adjust this to match other div heights */
}

/* Optional: nicer scrollbar */
.notification-well .card-body::-webkit-scrollbar {
    width: 6px;
}
.notification-well .card-body::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}


</style>
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="panel-heading">
                    @include('partials.flash')
                    <h1>{{ __('Dashboards') }} <small>Statistics</small></h1>
                </div>
                <div class="panel-body">
                    <div class="box box-success">
                        <div class="box-header with-border">
                            {{-- <h4>{{ __('Sale & Receive Flow') }}</h4> --}}
                        </div>

                    </div>

                    <div class="row" style="display: flex; align-items: stretch; min-height: 100%;">
                        <div class="col-md-8" style="display: flex; flex-direction: column;">
                            <!-- Left section content remains unchanged -->
                            <div class="row">
                                <div class="col-md-4">
                                    <a href="/employees">
                                        <div class="purple well">
                                            <i class="fa fa-user" aria-hidden="true"></i><br>
                                            <span> Total Employees : {{ $employees }}</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a href="/Backoffice/customers">
                                        <div class="chocolate well">
                                            <i class="fa fa-users" aria-hidden="true"></i><br>
                                            <span> Total Customers : {{ $customers }}</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <a href="/agents">
                                        <div class="well yellow">
                                            <i class="fa fa-cubes" aria-hidden="true"></i><br>
                                            <span> Total Agents : {{ $agents }}</span>
                                        </div>
                                    </a>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <a href="/Backoffice/prodcts">
                                        <div class="well green">
                                            <i class="fa fa-bars" aria-hidden="true"></i><br>
                                            <span> Total Product : {{ $product }}</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <a href="/Backoffice/Agents/Commission">
                                        <div class="well blue">
                                            <i class="fa fa-list" aria-hidden="true"></i><br>
                                            <span> Agent Commission : {{ $commission }}</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <a href="/Backoffice/Meter-readnig">
                                        <div class="violet well">
                                            <i class="fa fa-sitemap" aria-hidden="true"></i><br>
                                            <span> Month units : {{ $units }}</span>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-md-3">
                                    <a href="/Purchase/orders">
                                        <div class="brown well">
                                            <i class="fa fa-shopping-cart" aria-hidden="true"></i><br>
                                            <span> Total request : {{ $agentrequests }}</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4" style="display: flex; flex-direction: column;">
                            <!-- Updated Notification List -->
                           <div class="card notification-well shadow-sm"
        style="flex: 1; display: flex; flex-direction: column; border: none; background-color: #f8f9fa;">
        <div class="card-header text-white d-flex align-items-center justify-content-between" style="background-color: #0c3d55">
           <h4 class="mb-0">
                                        <i class="fa fa-bell me-2" aria-hidden="true"></i> Notifications
                                    </h4>
                                    @if ($notifications->count() > 0)
                                        <span class="badge bg-danger">{{ $notifications->count() }}</span>
                                    @endif
                                </div>
                                <div class="card-body p-0" style="flex: 1; overflow-y: auto;">
                                 @forelse($notifications as $notification)
    <form method="POST" action="{{ route('notifications.read', $notification->id) }}" class="notification-item p-3 border-bottom {{ $notification->read_at ? '' : 'bg-light' }}" style="transition: background-color 0.2s;">
        @csrf
        <button type="submit" class="btn btn-link text-start p-0 w-100" style="text-decoration: none; color: #333;">
            <span class="d-block fw-medium">{{ $notification->message }}</span>

            @if ($notification->data)
                <div class="mt-1">
                    @foreach ($notification->data as $key => $value)
                        <small class="text-muted">
                            {{ ucfirst(str_replace('_', ' ', $key)) }}: {{ $value }}
                        </small>
                        @if (!$loop->last)
                            <span class="text-muted">, </span>
                        @endif
                    @endforeach
                </div>
            @endif

            <small class="d-block text-muted mt-1">
                {{ $notification->created_at ? $notification->created_at->diffForHumans() : 'Just now' }}
            </small>
        </button>
    </form>
@empty
                                        <div class="notification-item p-3 text-center text-muted">
                                            <i class="fa fa-bell-slash fa-2x mb-2" aria-hidden="true"></i><br>
                                            No new notifications
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                     <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card shadow-sm">
                                <div class="card-header  text-white text-center" style="background-color: #0c3d55"> 
                                    <h2 class="mb-0" style="font-weight: bold; font-size: 24px;">Suspended Customers
                                    </h2>
                                </div>
                                <div class="" id="customerTable">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Customer Name</th>
                                                <th>Customer Email</th>
                                                <th class="hidden-xs">Customer Phone number</th>
                                                <th class="hidden-xs">Location</th>
                                                <th class="hidden-xs">Building</th>
                                                <th class="hidden-xs">Date</th>
                                                <th class="text-center">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($suspendedcustomers as $value)
                                                <tr>
                                                    <td>{{ $value->name }}</td>
                                                    <td>{{ $value->email }}</td>
                                                    <td class="hidden-xs">{{ $value->phone_number }}</td>
                                                    <td class="hidden-xs">{{ $value->location }}</td>
                                                    <td class="hidden-xs">{{ $value->building }}</td>
                                                    <td class="hidden-xs">{{ $value->created_at }}</td>
                                                   <td class="item_btn_group">
              @php
                $actions = [
                    ['url'=>'/Backoffice/customers/view/' . $value->id,'name'=>'View Customer'],
                  ];
                @endphp
                @include('partials.actions', ['actions'=>$actions])
              </td>

                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    @include('partials.pagination', [
                                        'items' => $suspendedcustomers,
                                        'index_route' => route('customers.leads'),
                                    ])
                                </div>
                            </div>
                        </div>
                    </div>

                    

                    <!-- Chart Section -->
                    <div class="row mt-5">
                        <div class="col-md-12">
                            <div class="card shadow-sm">
                                <div class="card-header  text-white text-center" style="background-color: #0c3d55">
                                    <h2 class="mb-0" style="font-weight: bold; font-size: 24px;">Water Consumption vs Days
                                    </h2>
                                </div>
                                <div class="card-body p-3">
                                    <div id="water-consumption-chart" style="height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card shadow-sm">
                                <div class="card-header  text-white text-center" style="background-color: #0c3d55">
                                    <h2 class="mb-0" style="font-weight: bold; font-size: 24px;">Product Orders vs Days
                                    </h2>
                                </div>
                                <div class="card-body p-3">
                                    <div id="product-orders-chart" style="height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card shadow-sm">
                                <div class="card-header  text-white text-center" style="background-color: #0c3d55">
                                    <h2 class="mb-0" style="font-weight: bold; font-size: 24px;">Stock Requested vs Days
                                    </h2>
                                </div>
                                <div class="card-body p-3">
                                    <div id="stock-requested-chart" style="height: 250px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                   

                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ asset('js/dashboard.js') }}"></script>
    <!-- Morris.js Chart Scripts -->
    <script>
        new Morris.Bar({
            element: 'water-consumption-chart',
            data: {!! json_encode($waterConsumption->map(fn($w) => ['day' => $w->day, 'value' => $w->total])) !!},
            xkey: 'day',
            ykeys: ['value'],
            labels: ['Litres'],
            barColors: ['#00a65a'], // Green, matching the dashboard
            hoverCallback: function(index, options, content, row) {
                return `<div class="morris-hover-row-label">${row.day}</div>
                    <div class="morris-hover-point" style="color: #00a65a;">
                        Litres: ${row.value}
                    </div>`;
            },
            resize: true,
            gridTextSize: 12,
            gridTextColor: '#666',
            axes: true,
            grid: true
        });

        new Morris.Bar({
            element: 'product-orders-chart',
            data: {!! json_encode($productOrders->map(fn($o) => ['day' => $o['day'], 'value' => $o['total']])) !!},
            xkey: 'day',
            ykeys: ['value'],
            labels: ['Product Orders'],
            barColors: ['#17a2b8'], // Blue, matching the "info" theme
            hoverCallback: function(index, options, content, row) {
                return `<div class="morris-hover-row-label">${row.day}</div>
                    <div class="morris-hover-point" style="color: #17a2b8;">
                        Product Orders: ${row.value}
                    </div>`;
            },
            resize: true,
            gridTextSize: 12,
            gridTextColor: '#666',
            axes: true,
            grid: true
        });

        new Morris.Bar({
            element: 'stock-requested-chart',
            data: {!! json_encode($stockRequests->map(fn($s) => ['day' => $s->day, 'value' => $s->total])) !!},
            xkey: 'day',
            ykeys: ['value'],
            labels: ['Requests'],
            barColors: ['#f39c12'], // Orange, retained as specified
            hoverCallback: function(index, options, content, row) {
                return `<div class="morris-hover-row-label">${row.day}</div>
                    <div class="morris-hover-point" style="color: #f39c12;">
                        Requests: ${row.value}
                    </div>`;
            },
            resize: true,
            gridTextSize: 12,
            gridTextColor: '#666',
            axes: true,
            grid: true
        });
    </script>
@endsection