@extends('admin.layouts.master')

@section('page_title', 'Dashboard')

@section('page_heading', 'Dashboard')

@section('page_text', 'Dashboard')

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Dashboard')

@section('page_breadcrumb_item2', 'Dashboard')

@section('css')
    <style>
        .same {
            background: linear-gradient(to right, rgb(235, 44, 44) 50%, rgba(9, 9, 121, 1) 50%);
        }

        table tbody tr td p {
            width: 100px;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <div class="card stat-widget">
                <div class="card-body">
                    <h5 class="card-title">Buildings</h5>
                    <h2>{{ $total_buildings }}</h2>
                    <p>Total Buildings</p>
                    <div class="progress">
                        <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: {{ $progress }}%"
                            aria-valuenow="{{ $progress }}%" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card stat-widget">
                <div class="card-body">
                    <h5 class="card-title">Apartment Types</h5>
                    <h2>{{  $total_apartment_types }}</h2>
                    <p>Total Customers</p>
                    <div class="progress">
                        <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 60%"
                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card stat-widget">
                <div class="card-body">
                    <h5 class="card-title">Apartments</h5>
                    <h2>{{$total_apartments}}</h2>
                    <p>Total Bookings</p>
                    <div class="progress">
                        <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%"
                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card stat-widget">
                <div class="card-body">
                    <h5 class="card-title">Current Year</h5>
                    <h2>{{ $current_year_total_apartments }}
                    </h2>
                    <p>Total Apartments </p>
                    <div class="progress">
                        <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%"
                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card stat-widget">
                <div class="card-body">
                    <h5 class="card-title">Current Month</h5>
                    <h2>{{ $current_month_total_apartments }}
                    </h2>
                    <p>Total Apartments </p>
                    <div class="progress">
                        <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%"
                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card stat-widget">
                <div class="card-body">
                    <h5 class="card-title">Today Apartment</h5>
                    <h2>{{$today_total_apartments}}
                    </h2>
                    <p>Today Apartment</p>
                    <div class="progress">
                        <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%"
                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <canvas id="myChart"></canvas>
        </div>
    </div>
    
    @push('script')
    @endpush
@endsection
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ asset('assets_admin/plugins/date/build/vendor/moment.min.js') }}"></script>
    <script src="{{ asset('assets_admin/plugins/date/build/js/caleran.min.js') }}"></script>
    <script>
        const data = { 
           
            labels: @json($data->map(fn ($data) => $data->building->name)),  
            datasets: [{  
                label: 'Registered Apartments',  
                backgroundColor: 'rgb(0,137,196, 0.3)',  
                borderColor: 'rgb(0,137,196)',  
                data: @json($data->map(fn ($data) => $data->aggregate)),  
            }]  
        };  
 
        const config = {  
            type: 'bar',  
            data: data  
        };  
 
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
@endsection