@extends('dashboard.layouts.master')


@section('css')


@section('title')
    الصفحة الرئيسية
@stop
@endsection
@section('content')
<div class="page-content-wrapper">
    <div class="row mt-4">
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-info"><svg focusable="false" class="" data-icon="line-chart"
                        width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                        <path
                            d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM305.8 637.7c3.1 3.1 8.1 3.1 11.3 0l138.3-137.6L583 628.5c3.1 3.1 8.2 3.1 11.3 0l275.4-275.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6a8.03 8.03 0 00-11.3 0l-230 229.9L461.4 404a8.03 8.03 0 00-11.3 0L266.3 586.7a8.03 8.03 0 000 11.3l39.5 39.7z">
                        </path>
                    </svg></span>

                <div class="info-box-content">
                    <span class="info-box-text info-box-number">
                        {{ \App\Models\Owner::count() }}
                    </span>
                    <span class=""> مالك

                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-success"><svg focusable="false" class="" data-icon="shopping"
                        width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                        <path
                            d="M832 312H696v-16c0-101.6-82.4-184-184-184s-184 82.4-184 184v16H192c-17.7 0-32 14.3-32 32v536c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V344c0-17.7-14.3-32-32-32zm-432-16c0-61.9 50.1-112 112-112s112 50.1 112 112v16H400v-16zm392 544H232V384h96v88c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-88h224v88c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-88h96v456z">
                        </path>
                    </svg></span>
                <div class="info-box-content">
                    <span class="info-box-text info-box-number">
                        {{ \App\Models\RealEstate::count() }}
                    </span>
                    <span class=" "> عقار

                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-warning"><svg focusable="false" class="" data-icon="tag"
                        width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                        <path
                            d="M938 458.8l-29.6-312.6c-1.5-16.2-14.4-29-30.6-30.6L565.2 86h-.4c-3.2 0-5.7 1-7.6 2.9L88.9 557.2a9.96 9.96 0 000 14.1l363.8 363.8c1.9 1.9 4.4 2.9 7.1 2.9s5.2-1 7.1-2.9l468.3-468.3c2-2.1 3-5 2.8-8zM459.7 834.7L189.3 564.3 589 164.6 836 188l23.4 247-399.7 399.7zM680 256c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm0 120c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z">
                        </path>
                    </svg></span>
                <div class="info-box-content">
                    <span class="info-box-text info-box-number">
                        {{ \App\Models\Contract::where('status',1)->count() }}
                    </span>
                    <span class=""> موجر
                    </span>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <span class="info-box-icon bg-primary"><svg focusable="false" class="" data-icon="bank"
                        width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
                        <path
                            d="M894 462c30.9 0 43.8-39.7 18.7-58L530.8 126.2a31.81 31.81 0 00-37.6 0L111.3 404c-25.1 18.2-12.2 58 18.8 58H192v374h-72c-4.4 0-8 3.6-8 8v52c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-52c0-4.4-3.6-8-8-8h-72V462h62zM512 196.7l271.1 197.2H240.9L512 196.7zM264 462h117v374H264V462zm189 0h117v374H453V462zm307 374H642V462h118v374z">
                        </path>
                    </svg></span>

                <div class="info-box-content">
                    <span class="info-box-text info-box-number">
                        {{ \App\Models\Payment::sum('payment_amount') }} رس
                     </span>
                    <span class=" "> التحصيل</span>
                </div>
            </div>
        </div>

    </div>
    <div class="row">

        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-4 float-sm-start"> التحصيل</h4>
                    <div class="float-sm-end">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link" href="#">اليوم</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">الاسبوع</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">الشهر</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="#">السنه</a>
                            </li>
                        </ul>
                    </div>

                    <div class="clearfix"></div>
                    <div class="row align-items-center">
                        <div class="col-xl-9">
                            <div>
                                <div id="stacked-column-chart" class="apex-charts" dir="ltr">
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="dash-info-widget mt-4 mt-lg-0 py-4 px-3 rounded">
                                <div class="media dash-main-border pb-2 mb-3 mt-2">
                                    <div class="avatar-sm mb-3 mt-2">
                                        <span class="avatar-title rounded-circle bg-white shadow">
                                            <i class="mdi mdi-currency-inr text-primary font-size-18"></i>
                                        </span>
                                    </div>
                                    <div class="media-body ps-3">

                                        <h5 class="font-size-20">{{ \App\Models\Payment::sum('payment_amount') }} رس</h5>
                                        <p class="text-muted">اجمالي التحصيل
                                        </p>
                                    </div>
                                </div>

                                <div class="media dash-main-border pb-2 mb-3 mt-2">
                                    <div class="avatar-sm mb-3 mt-2">
                                        <span class="avatar-title rounded-circle bg-white shadow">
                                            <i class="mdi mdi-currency-inr text-primary font-size-18"></i>
                                        </span>
                                    </div>
                                    <div class="media-body ps-3">
                                        <h5 class="font-size-20">{{ \App\Models\Contract::sum('contract_value') }} رس</h5>
                                        <p class="text-muted"> المبلغ المطلوب سداده
                                        </p>
                                    </div>
                                </div>

                                <div class="media dash-main-border mb-4 pb-2 mt-2">
                                    <div class="avatar-sm mb-3 mt-2">
                                        <span class="avatar-title rounded-circle bg-white shadow">
                                            <i class="mdi mdi-currency-inr text-primary font-size-18"></i>
                                        </span>
                                    </div>
                                    <div class="media-body ps-3">

                                        <h5 class="font-size-20">{{(\App\Models\Contract::sum('contract_value')) - (\App\Models\Payment::sum('payment_amount')) }} رس</h5>
                                        <p class="text-muted"> متبقي المبلغ
                                        </p>

                                    </div>

                                </div>


                            </div>
                        </div>


                    </div>


                </div>
            </div>
        </div>


        <div class="col-xl-4">
            <div class="row">
                <div class="col-xl-6 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center">
                                <p class="font-size-16">العقارات المؤجرة</p>
                                <div class="mini-stat-icon mx-auto mb-4 mt-3">
                                    <span class="avatar-title rounded-circle bg-soft-primary">
                                        <i class="mdi mdi-cart-outline text-primary font-size-20"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-22">{{ $rentalRealEstateCount }}</h5>

                                {{-- <p class="text-muted"> {{number_format(($rentalRealEstateCount)/ (\App\Models\RealEstate::count()) * 100, 2) }}% </p> --}}

                                <div class="progress mt-3" style="height: 4px;">
                                    <div class="progress-bar progress-bar bg-primary" role="progressbar"
                                        style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="text-center">
                                <p class="font-size-16"> العقودات </p>
                                <div class="mini-stat-icon mx-auto mb-4 mt-3">
                                    <span class="avatar-title rounded-circle bg-soft-primary">
                                        <i class="mdi mdi-cart-outline text-primary font-size-20"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-22">{{ \App\Models\Contract::count() }}</h5>
                                <div class="progress mt-3" style="height: 4px;">
                                    <div class="progress-bar progress-bar bg-primary" role="progressbar"
                                        style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center">
                                <p class="font-size-16"> المشرفين </p>
                                <div class="mini-stat-icon mx-auto mb-4 mt-1">
                                    <span class="avatar-title rounded-circle bg-soft-primary">
                                        <i class="mdi mdi-cart-outline text-primary font-size-20"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-22">{{ \App\Models\Supervisor::count() }}</h5>


                                <div class="progress mt-3" style="height: 4px;">
                                    <div class="progress-bar progress-bar bg-primary" role="progressbar"
                                        style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="70">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-xl-6 col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center">
                                <p class="font-size-16">التحصيل الشهري</p>
                                <div class="mini-stat-icon mx-auto mb-4 mt-3">
                                    <span class="avatar-title rounded-circle bg-soft-success">
                                        <i class="mdi mdi-account-outline text-success font-size-20"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-22">{{ $monthly_dues}} </h5>

                                <p class="text-muted">
                                    @if($monthly_dues == 0)
                                    0%
                                    <div class="progress mt-3" style="height: 4px;">
                                        <div class="progress-bar progress-bar bg-success" role="progressbar"
                                            style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="80">
                                        </div>
                                    </div>
                                    @else
                                    {{-- {{number_format( ($monthly_dues) /($total_monthly_dues ) * 100, 2) }}%  --}}
                                    <div class="progress mt-3" style="height: 4px;">
                                        <div class="progress-bar progress-bar bg-success" role="progressbar"
                                            style="width: {{number_format(($monthly_dues) /($total_monthly_dues ) * 100, 2) }}% " aria-valuenow="{{number_format(($total_monthly_dues )/ ($monthly_dues) * 100, 2) }}" aria-valuemin="0" aria-valuemax="80">
                                        </div>
                                    </div>

                                    @endif

                                    </p>


                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center">
                                <p class="font-size-16"> المستاجرين</p>
                                <div class="mini-stat-icon mx-auto mb-4 mt-3">
                                    <span class="avatar-title rounded-circle bg-soft-success">
                                        <i class="mdi mdi-account-outline text-success font-size-20"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-22">
                                    {{ \App\Models\Tenant::count() }}
                                </h5>
                                <div class="progress mt-3" style="height: 4px;">
                                    <div class="progress-bar progress-bar bg-success" role="progressbar"
                                        style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="80">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="text-center">
                                <p class="font-size-16"> العقود المنتهية</p>
                                <div class="mini-stat-icon mx-auto mb-4 mt-3">
                                    <span class="avatar-title rounded-circle bg-soft-success">
                                        <i class="mdi mdi-account-outline text-success font-size-20"></i>
                                    </span>
                                </div>
                                <h5 class="font-size-22"> {{ \App\Models\Contract::where('status',3)->count() }}
                                </h5>
                                <div class="progress mt-3" style="height: 4px;">
                                    <div class="progress-bar progress-bar bg-success" role="progressbar"
                                        style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="80">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>


        </div>

    </div>
    <div class="row">
        <div class="col-md-4 mt-4">
            <div class="card">
                <div class="card-header ">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title info-box-number   ">اكثر العقارات اجار

                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <canvas id="myChart1" height="190"></canvas>

                </div>
            </div>
        </div>

        <div class="col-md-8  mt-4">
            <div class="card">
                <div class="card-header ">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title  ">اكثر المناطق تفاعل
                        </h3>
                    </div>
                </div>
                <div class="card-body ">

                    <canvas height="90" id="meuGrafico1"></canvas>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{ asset('dashboard/plugins/chart.js/Chart.min.js') }}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{ asset('dashboard/dist/js/pages/dashboard3.js') }} "></script>
<!-- apexcharts -->
<script src="{{ asset('dashboard/dist/libs/apexcharts/apexcharts.min.js') }}"></script>
<!-- Plugins js-->
<script src="{{ asset('dashboard/dist/js/index/js/pages/dashboard.init.js') }} "></script>
<script>
    // a var ctx é acronimo de context que ao final foi passado como 2d que é nosso grafico
    // e atraves do getElementById localizamos o id passado na tag canvas logo a cima
    var ctx = document.getElementById('meuGrafico1').getContext('2d');

    // Type, Data e options

    var chart = new Chart(ctx, {
        // type é o tipo de grafico que será mostrado, nosso caso é bar de barra ou colunas
        type: 'bar',
        // config dos dados que será mostra
        data: {
            // seria a linha do tempo
            labels: ['جده', 'الرياض', 'الدمام', 'الخبر', 'المدينة', 'الرياض', 'الرياض', 'الرياض', 'الرياض',
                'الرياض', 'الرياض'
            ],
            // informacoes que vao compor o grafico
            datasets: [{
                    //label = titulo ou rotulo que ficara no top do grafico
                    label: 'شقة',
                    // data = são os dados que aqui estao fixos, na sua aplicação deve chegar em um formato especifico "Ex: JSON"
                    data: [5, 10, 45, 7, 20, 30, 45, 38, 35, 75, 50, 20],
                    // config a expessura da borda
                    borderWidth: 2,
                    // cor da borda
                    borderColor: 'rgba(77,166,253,0.85)',
                    // cor da barra
                    backgroundColor: 'rgba(77,166,253,1)',
                },
                // abaixo temos a mesma construção, mas com dados direntes
                {
                    label: 'فيلا',
                    data: [18, 3, 15, 35, 40, 80, 30, 55, 85, 95, 15, 10],
                    borderWidth: 2,
                    borderColor: '#525ce5',
                    backgroundColor: '#525ce5',
                },
            ]
        },
        // options = seria o cabeçalho, mas tem diversas customizações
        options: {
            // aqui o display do title é true então vai aparecer
            title: {
                display: false,
                // tamanho da font
                fontSize: 40,
                // texto do nosso titulo
                text: 'تقرير المخزون'
            }
        }
    });
</script>
<script>
    var ctx = document.getElementById("myChart1");

    var data = {
        labels: [
            "  شقة ",
            " فيلا   ",

            "   استراحه ",
        ],
        datasets: [{
            data: [300, 50, 100, ],
            backgroundColor: [
                "#525ce5",
                "#4da6fd",
                "#8a8a8f",

            ],
            hoverBackgroundColor: [
                "#FF4394",
                "#36A2EB",
                "#FFCE56",

            ]


        }]
    };

    var options = {
        cutoutPercentage: 50,
    };


    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: options
    });
</script>
@endsection