@extends('layouts.nav')
@section('title')
Dashboard
@endsection
@section('content')

                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>

                    </div>
                    @foreach ($dashboard as $d)
                    <!-- Content Row -->
                    <div class="row">
                        <!-- Earnings (Monthly) Card Example -->
                        <div class="col-xl-3 col-md-6 mb-4">
                        <a href="{{route('Affiliateslisting',['Type'=>'Tenant'])}}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-primary shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                Total Tenants</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->countTenants}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        </div>
 <!-- Total suppliers-->
                        <div class="col-xl-3 col-md-6 mb-4">
                        <a href="{{route('Affiliateslisting',['Type'=>'Supplier'])}}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-primary shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                Total Suppliers</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->countSuppliers}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        </div>
                        <!-- Total Space -->
                        <div class="col-xl-3 col-md-6 mb-4">
                          <a href="{{route('rooms')}}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-dark shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">
                                                Total Space</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->countSpace}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-layer-group fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>

                           <!-- Earnings (Monthly) Card Example -->
                           <div class="col-xl-3 col-md-6 mb-4">
                            <a href="{{route('floors')}}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-primary shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                Total Floors</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->countFloors}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-invoice fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>

                        <!-- Pending Requests Card Example -->
                        <div class="col-xl-3 col-md-6 mb-4">
                             <a href="{{route('rooms')}}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-info shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                                Total Rooms</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->countRooms}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-city fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
                         <!-- Monthly Rent Summary -->
                           <div class="col-xl-3 col-md-6 mb-4">
                            <a href="{{ route('RentSummaryReport') }}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-warning shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                Monthly Rent Summary</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->RentSummary}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
 <!-- Monthly Rent Collection -->
                           <div class="col-xl-3 col-md-6 mb-4">
                            <a href="{{ route('RentCollectionReport') }}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                Monthly Rent Collection</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->totalIncome}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </div>
 <!-- Outstanding Rent -->
                        <div class="col-xl-3 col-md-6 mb-4">
                         <a href="{{ route('OutstandingRentReport') }}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-danger shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                              Outstanding Rent</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->OutstandingRent}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                         </a>
                        </div>
<!-- OpCosts Summary -->
                        <div class="col-xl-3 col-md-6 mb-4">
                        <a href="{{ route('OpCostSummaryReport') }}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-secondary shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                              Op Costs Summary</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->OpcostSummary}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-invoice-dollar fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        </div>

                        <!-- OpCosts Summary -->
                        <div class="col-xl-3 col-md-6 mb-4">
                        <a href="{{ route('OpCostCollectionReport') }}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">

                                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                              Op Costs Collection</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->totalOptcosts}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-cash-register fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        </div>
                         <!-- Outstanding Opcosts -->
                        <div class="col-xl-3 col-md-6 mb-4">
                        <a href="{{ route('OpCostOutstandingReport') }}" class="card-link" style="text-decoration: none;">
                            <div class="card border-left-danger shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                              Outstanding Op costs</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->Outstandingopcosts}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-exclamation-circle fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        </div>
                        <!-- Outstanding Opcosts -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card border-left-warning shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                              Monthly Expenses</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $d->Expenses}}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-lightbulb fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
 <div class="row">
    <!-- Bar Chart for Tenants vs Floors -->
    <div class="col-lg-10 mx-auto">
        <div class="card shadow-sm bg-light text-dark">
            <div class="card-header py-2 bg-primary text-center">
                <h6 class="m-0 font-weight-bold text-white">Tenants & Floors Summary</h6>
            </div>
            <div class="card-body">
                <canvas id="tenantsFloorsChart" style="width: 100% !important;"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row mt-3">
    <!-- Bar Chart for Total Rooms and Total Space -->
    <div class="col-lg-10 mx-auto">
        <div class="card shadow-sm bg-light text-dark">
            <div class="card-header py-2" style="background-color: #3498db; text-align: center;"> <!-- Blue background -->
                <h6 class="m-0 font-weight-bold text-white">Total Rooms and Space Overview</h6>
            </div>
            <div class="card-body">
                <canvas id="roomsSpaceBarChart" style="width: 100% !important;"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Line Graph Summarizing the Data -->
<div class="row mt-3">
    <div class="col-lg-10 mx-auto">
        <div class="card shadow-sm bg-light text-dark">
            <div class="card-header py-2 bg-success text-center">
                <h6 class="m-0 font-weight-bold text-white">Summary Trends: Tenants, Floors, Rooms & Space</h6>
            </div>
            <div class="card-body">
                <canvas id="summaryLineChart" style="width: 100% !important;"></canvas>
            </div>
        </div>
    </div>
</div>


<script>
document.addEventListener("DOMContentLoaded", function () {
    // Bar Chart for Tenants vs Floors
    const tenantsFloorsCtx = document.getElementById('tenantsFloorsChart').getContext('2d');
    new Chart(tenantsFloorsCtx, {
        type: 'bar',
        data: {
            labels: ['Tenants', 'Floors'],
            datasets: [{
                label: 'Count',
                data: [{{ $d->countTenants }}, {{ $d->countFloors }}],
                backgroundColor: [
                    'rgba(3, 71, 116, 0.7)', // Lighter blue with transparency
                    'rgba(46, 204, 113, 0.7)' // Lighter green with transparency
                ],
                borderColor: ['#03243A', '#27ae60'], // Darker borders
                borderWidth: 1,
                borderRadius: 10, // Rounded corners for bars
                barThickness: 50 // Thicker bars for more impact
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        fontSize: 14,
                        fontColor: '#333' // Darker text for y-axis
                    }
                },
                x: {
                    ticks: {
                        fontSize: 14,
                        fontColor: '#333' // Darker text for x-axis
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        fontColor: '#000', // Dark text for legend
                        fontSize: 16
                    }
                },
                tooltip: {
                    backgroundColor: '#fff',
                    titleColor: '#333',
                    bodyColor: '#333',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    cornerRadius: 4,
                    xPadding: 10,
                    yPadding: 10
                }
            },
            animation: {
                duration: 1000, // Smooth animation
                easing: 'easeInOutQuart'
            }
        }
    });

    // Bar Chart for Total Rooms and Total Space
    const roomsSpaceCtx = document.getElementById('roomsSpaceBarChart').getContext('2d');
    new Chart(roomsSpaceCtx, {
        type: 'bar',
        data: {
            labels: ['Total Rooms', 'Total Space'],
            datasets: [{
                label: 'Count',
                data: [{{ $d->countRooms }}, {{ $d->countSpace }}],
                backgroundColor: [
                    'rgba(255, 87, 51, 0.7)', // Warm orange with transparency
                    'rgba(52, 152, 219, 0.7)' // Cool blue with transparency
                ],
                borderColor: ['#C0392B', '#2980B9'], // Darker borders
                borderWidth: 1,
                borderRadius: 10, // Rounded corners for bars
                barThickness: 50 // Thicker bars for better visibility
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        fontSize: 14,
                        fontColor: '#333' // Darker text for y-axis
                    }
                },
                x: {
                    ticks: {
                        fontSize: 14,
                        fontColor: '#333' // Darker text for x-axis
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        fontColor: '#000', // Dark text for legend
                        fontSize: 16
                    }
                },
                tooltip: {
                    backgroundColor: '#fff',
                    titleColor: '#333',
                    bodyColor: '#333',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    cornerRadius: 4,
                    xPadding: 10,
                    yPadding: 10
                }
            },
            animation: {
                duration: 1000, // Smooth animation
                easing: 'easeInOutQuart'
            }
        }
    });

    // Line Graph for Summary Trends (Tenants, Floors, Rooms & Space)
    const summaryLineCtx = document.getElementById('summaryLineChart').getContext('2d');
    new Chart(summaryLineCtx, {
        type: 'line',
        data: {
            labels: ['Tenants & Floors', 'Rooms & Space'],
            datasets: [{
                label: 'Total Count',
                data: [
                    {{ $d->countTenants + $d->countFloors }},  // Combined tenants & floors count
                    {{ $d->countRooms + $d->countSpace }}    // Combined rooms & space count
                ],
                backgroundColor: 'rgba(52, 152, 219, 0.2)', // Light blue with transparency
                borderColor: '#2980B9', // Dark blue
                borderWidth: 2,
                tension: 0.4, // Smooth curve for the line
                pointBackgroundColor: '#2980B9',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        fontSize: 14,
                        fontColor: '#333' // Darker text for y-axis
                    }
                },
                x: {
                    ticks: {
                        fontSize: 14,
                        fontColor: '#333' // Darker text for x-axis
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        fontColor: '#000', // Dark text for legend
                        fontSize: 16
                    }
                },
                tooltip: {
                    backgroundColor: '#fff',
                    titleColor: '#333',
                    bodyColor: '#333',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    cornerRadius: 4,
                    xPadding: 10,
                    yPadding: 10
                }
            },
            animation: {
                duration: 1000, // Smooth animation
                easing: 'easeInOutQuart'
            }
        }
    });
});
</script>




                    @endforeach

                    <!-- Content Row -->
@endsection