@extends('layouts.app')

@section('content')

{{--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
--}}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    body {
        font-size: 14px;
    }

    h3,
    h4,
    h5 {
        font-size: 16px;
        font-weight: 600;
    }

    h2 {
        font-size: 22px;
    }

    .table th,
    .table td {
        padding: 6px 10px;
        font-size: 13px;
    }

    .progress {
        height: 8px;
    }

    .progress-bar {
        font-size: 10px;
    }

    .status-badge {
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        color: white;
    }

    .status-active {
        background-color: #28a745;
    }

    .status-draft {
        background-color: #fd7e14;
    }

    .status-review {
        background-color: #007bff;
    }

    canvas {
        max-height: 250px;
    }

    .row {
        margin-bottom: 1rem;
    }

    .container-fluid {
        padding: 10px 20px;
    }

    .notice-banner {
        background: linear-gradient(to right, #e0eafc, #cfdef3);
        /* Light blue gradient */
        padding: 5px 0;
        /* Top & Bottom only */
        width: 100%;
        border-top: 1px solid #cbd5e0;
        border-bottom: 1px solid #cbd5e0;
    }

    .notice-card {
        background: transparent;
        margin: 0;
        padding: 0 20px;
    }

    .notice-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }

    .notice-description {
        font-size: 1rem;
        line-height: 1.4;
        color: #555;
        margin-bottom: 0;
    }
</style>

<div class="container-fluid mt-4">
    <div>
        <h1 class="page-title">Dashboard</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>
    <div class="notice-banner shadow-sm">
        <div class="card notice-card border-0">
            <div class="card-body text-dark">
                <h5 class="notice-title"><i class="fas fa-bullhorn me-2"></i>{{ $notice->title }}</h5>
                <p class="notice-description">{{ $notice->description }}</p>
            </div>
        </div>
    </div>







    <!-- Top Stats -->
    <div class="row text-center my-4">
        <div class="col-md-4">
            <h4 class="fs-6">Invoice Amount</h4>
            <h2 class="fs-4">₹&nbsp;{{ number_format($stats['accepted']) }}</h2>
        </div>
        <div class="col-md-4">
            <h4 class="fs-6">Payment Received</h4>
            <h2 class="fs-4">₹&nbsp;{{ number_format($stats['in_contract']) }}</h2>
        </div>
        <div class="col-md-4">
            <h4 class="fs-6">Pending Amount</h4>
            <h2 class="fs-4">₹&nbsp;{{ number_format($stats['in_approval']) }}</h2>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="row text-center">

        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body">
                    <a href="{{ url('/project-leads') }}" title="View project leads">
                        <h6>Total Leads</h6>
                    </a>
                    <h3>{{ $stats['leads'] }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body">
                    <a href="{{ url('/Project/AllSites') }}" title="View All Sites">
                        <h6>Active Sites</h6>
                    </a>
                    <h3>{{ $stats['sites'] }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body">
                    <a href="{{ url('/srequests') }}" title="View All Service Request">
                        <h6>New Service Requests</h6>
                    </a>
                    <h3>{{ $stats['requests'] }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body">
                    <a href="{{ url('/approve_request') }}" title="View All Service Request">
                        <h6>New Reimbursements</h6>
                    </a>
                    <h3>{{ $stats['reimbursements'] }}</h3>
                </div>
            </div>
        </div>

    </div>

    <!-- Latest Activity -->
    <div class="row mt-4">
        <div class="col-md-6">
            <h5>Recent Reimbursements</h5>
            <table class="table table table-bordered">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>User</th>
                        <th>Amount</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($latestReimbursements as $r)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ ucwords($r->user->name ?? '-') }}</td>

                        <td>₹{{ $r->amount }}</td>
                        <td>{{ $r->created_at ? $r->created_at->diffForHumans() : '_' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="col-md-6">
            <h5>New Service Requests</h5>
            <table class="table table table-bordered">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Customer Name</th>
                        <th>Issue</th>
                        <th>Created at</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingServices as $s)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ ucwords($s->user->name ?? '-') }}</td>
                        <td>{{ $s->Issue ?? 'No Issue' }}</td>
                        <td>{{ $s->created_at ? $s->created_at->diffForHumans() : '_' }}</td>
                    </tr>

                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Charts -->
    <div class="row mt-4">
        <div class="col-md-6">
            <h5>Leads by Month</h5>
            <canvas id="leadsChart"></canvas>
        </div>
        <div class="col-md-6">
            <h5>Service Requests</h5>
            <canvas id="serviceChart"></canvas>
        </div>

    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <h5>Revenue Over Last 6 Months</h5>
            <canvas id="revenueChart"></canvas>
        </div>
        <div class="col-md-6">
            <h5>Reimbursement Requests</h5>
            <canvas id="requestChart"></canvas>
        </div>
    </div>


</div>
@stop

@section('scripting')
<script>
    const leadsChart = document.getElementById('leadsChart');
    if (leadsChart) {
        new Chart(leadsChart, {
            type: 'bar',
            data: {
                labels: @json($leadChart['labels']),
                datasets: [{
                    label: 'Leads',
                    data: @json($leadChart['data']),
                    backgroundColor: '#007bff'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    const serviceChart = document.getElementById('serviceChart');
    if (serviceChart) {
        new Chart(serviceChart, {
            type: 'doughnut',
            data: {
                labels: @json($serviceChart['labels']),
                datasets: [{
                    data: @json($serviceChart['data']),
                    backgroundColor: ['#007bff', '#28a745', '#6c757d', '#ffc107', '#17a2b8']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }

    const requestChart = document.getElementById('requestChart');
    if (requestChart) {
        new Chart(requestChart, {
            type: 'doughnut',
            data: {
                labels: @json($requestChart['labels']),
                datasets: [{
                    data: @json($requestChart['data']),
                    backgroundColor: ['#007bff', '#28a745', '#6c757d', '#17a2b8']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }

    const revenueChart = document.getElementById('revenueChart');
    if (revenueChart) {
        new Chart(revenueChart, {
            type: 'line',
            data: {
                labels: @json($revenueChart['labels']),
                datasets: [{
                    label: 'Revenue',
                    data: @json($revenueChart['data']),
                    borderColor: '#4e73df',
                    fill: false,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
</script>
@stop