<?php $__env->startSection('title'); ?>
Dashboard
<?php $__env->stopSection(); ?>
<?php $__env->startSection('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>
                    <?php $__currentLoopData = $dashboard; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $d): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <!-- Content Row -->
                    <div class="row">
                        <!-- Earnings (Monthly) Card Example -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <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"><?php echo e($d->countTenants); ?></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Earnings (Monthly) Card Example -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <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">
                                                Total Space</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo e($d->countSpace); ?></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-layer-group fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                           <!-- Earnings (Monthly) Card Example -->
                           <div class="col-xl-3 col-md-6 mb-4">
                            <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"><?php echo e($d->countFloors); ?></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-invoice fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pending Requests Card Example -->
                        <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-warning text-uppercase mb-1">
                                                Total Rooms</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo e($d->countRooms); ?></div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-city 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: [<?php echo e($d->countTenants); ?>, <?php echo e($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: [<?php echo e($d->countRooms); ?>, <?php echo e($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: [
                    <?php echo e($d->countTenants + $d->countFloors); ?>,  // Combined tenants & floors count
                    <?php echo e($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>




                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    <!-- Content Row -->
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.nav', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/melsoftrealestat/public_html/re.pro/resources/views//Dashboard.blade.php ENDPATH**/ ?>