@extends('Admin.Layouts.Dashboard')

@section('content')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="left-content">
            <div>
                <h2 class="main-content-title tx-24 mg-b-1 mg-b-lg-1">أهلا وسهلا بك</h2>
                <p class="mg-b-0">لوحة تحكم شركاء مبيت</p>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->

    <div class="row row-sm">
        <!-- Active Visitors -->
        <div class="col-xl-3 col-lg-6 col-sm-6 col-md-6">
            <div class="card text-center">
                <div class="card-body ">
                    <div class="feature widget-2 text-center mt-0 mb-3">
                        <i class="ti-bar-chart project bg-primary-transparent mx-auto text-primary "></i>
                    </div>
                    <h6 class="mb-1 text-muted">الحجوزات الفعالة</h6>
                    <h3 class="fw-semibold">{{$active_reservations_count}}</h3>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-sm-6 col-md-6">
            <div class="card text-center">
                <div class="card-body ">
                    <div class="feature widget-2 text-center mt-0 mb-3">
                        <i class="ti-bar-chart project bg-primary-transparent mx-auto text-primary "></i>
                    </div>
                    <h6 class="mb-1 text-muted">إجمالي الليالي المحجوزة</h6>
                    <h3 class="fw-semibold">{{$activeReservationsNights}}</h3>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-sm-6 col-md-6">
            <div class="card text-center">
                <div class="card-body ">
                    <div class="feature widget-2 text-center mt-0 mb-3">
                        <i class="ti-bar-chart project bg-primary-transparent mx-auto text-primary "></i>
                    </div>
                    <h6 class="mb-1 text-muted">العقارات الفعالة</h6>
                    <h3 class="fw-semibold">{{$active_units}}</h3>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-sm-6 col-md-6">
            <div class="card text-center">
                <div class="card-body ">
                    <div class="feature widget-2 text-center mt-0 mb-3">
                        <i class="ti-bar-chart project bg-primary-transparent mx-auto text-primary "></i>
                    </div>
                    <h6 class="mb-1 text-muted">عدد العملاء</h6>
                    <h3 class="fw-semibold">{{$all_users}}</h3>
                </div>
            </div>
        </div>

{{--        <div class="col-xl-3 col-lg-6 col-sm-6 col-md-6">--}}
{{--            <div class="card bg-primary-gradient">--}}
{{--                <div class="card-body">--}}
{{--                    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">--}}
{{--                        <!-- Carousel items -->--}}
{{--                        <div class="carousel-inner">--}}
{{--                            <div class="carousel-item flex-column active">--}}
{{--                                <i class="fas fa-users tx-30 text-white mb-2"></i>--}}
{{--                                <p class="text-white mt-2">المتواجدون الأن</p>--}}
{{--                                <h3 class="text-white font-light">{{$active_visitors}}</h3>--}}
{{--                            </div>--}}

{{--                            <div class="carousel-item flex-column">--}}
{{--                                <i class="fas fa-users tx-30 text-white mb-2"></i>--}}
{{--                                <p class="text-white mt-2">المتواجدون أخر 24 ساعة</p>--}}
{{--                                <h3 class="text-white font-light">{{$active_last_24_visitors}}</h3>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

    <div class="row row-sm">
        <div class="col-md-6">
            <div class="card mg-b-md-20">
                <div class="card-body">
                    <div class="main-content-label mg-b-5">
                        الوصول / الخروج اليوم
                    </div>

                    <p class="mg-b-20">من الساعه 00:00 إلى الساعة 23:59</p>

                    <div class="morris-donut-wrapper-demo" id="morrisDonut1"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mg-b-md-20">
                <div class="card-body">
                    <div class="main-content-label mg-b-5">
                        احصائيات الحجوزات
                    </div>

                    <p class="mg-b-20">الحجوزات في الأيام السابقة</p>
                    <div class="morris-wrapper-demo" id="morrisBar1"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row row-sm">
        <div class="col-12">
            <h5>العقارات</h5>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="card-order">
                        <h6 class="mb-2">العقارات الفعاله</h6>
                        <h2 class="text-end"><i class="mdi mdi-account-multiple icon-size float-start text-primary text-primary-shadow"></i><span>{{$active_units}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">وحدات في الانتظار</h6>
                        <h2 class="text-end"><i class="mdi mdi-cube icon-size float-start text-success text-success-shadow"></i><span>{{$waiting_units}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">وحدات موقوفة</h6>
                        <h2 class="text-end"><i class="icon-size mdi mdi-poll-box   float-start text-warning text-warning-shadow"></i><span>{{$invalid_units}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">وحدات متعثرة</h6>
                        <h2 class="text-end"><i class="fa fa-cart-plus icon-size float-start text-danger text-danger-shadow"></i><span>{{$stumbledUnits}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->
    </div>

    <!-- Bookings -->
    <div class="row row-sm">
        <div class="col-12">
            <h5>الحجوزات</h5>
        </div>

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">مستثمرين مفعلين Tabby</h6>
                        <h2 class="text-end d-flex justify-content-between">
                            <img style="width: 50px" src="{{asset('assets/images/icons/tabby.svg')}}" class="img-fluid" alt="img" />
                            <span>{{$tabbyValidated}}</span>
                        </h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="card-order">
                        <h6 class="mb-2">جميع الحجوزات</h6>
                        <h2 class="text-end "><i class="mdi mdi-account-multiple icon-size float-start text-primary text-primary-shadow"></i><span>{{$all_reservations_count}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">حجوزات جديدة</h6>
                        <h2 class="text-end"><i class="mdi mdi-cube icon-size float-start text-success text-success-shadow"></i><span>{{$new_reservations_count}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">الواصلون اليوم</h6>
                        <h2 class="text-end"><i class="icon-size mdi mdi-poll-box   float-start text-warning text-warning-shadow"></i><span>{{$contactEnterTodayCount}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">المغادرون اليوم</h6>
                        <h2 class="text-end"><i class="fa fa-cart-plus icon-size float-start text-danger text-danger-shadow"></i><span>{{$contactLeaveTodayCount}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2"> حجوزات في انتظار الدفع</h6>
                        <h2 class="text-end"><i class="fa fa-bell icon-size float-start text-primary text-danger-shadow"></i><span>{{$contactLeaveTodayCount}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2"> حجوزات مكتملة</h6>
                        <h2 class="text-end"><i class="fa fa-list icon-size float-start text-success text-danger-shadow"></i><span>{{$reservations_count}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2">حجوزات منتهية </h6>
                        <h2 class="text-end"><i class="fa fa-times icon-size float-start text-dark text-danger-shadow"></i><span>{{$expired_reservations_count}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2"> حجوزات ملغية بعمولة</h6>
                        <h2 class="text-end"><i class="fa fa-trash icon-size float-start text-dark text-danger-shadow"></i><span>{{$cancelled_with_commission}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->

        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card ">
                <div class="card-body">
                    <div class="card-widget">
                        <h6 class="mb-2"> حجوزات ملغية بدون عمولة</h6>
                        <h2 class="text-end"><i class="fa fa-trash icon-size float-start text-danger text-danger-shadow"></i><span>{{$cancelled_without_commission}}</span></h2>
                    </div>
                </div>
            </div>
        </div><!-- COL END -->
    </div>

    {{-- <div class="row mb-5">

        <!-- Pending Payment -->
        <div class="col-lg-4 mt-3">
            <div class="card card-custom wave wave-animate-slow wave-warning mb-8 mb-lg-0">
                <div class="card-body">
                    <div class="d-flex align-items-center p-5">
                        <!--begin::Icon-->
                        <div class="mr-6">
                            <span class="svg-icon svg-icon-warning svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Code\Warning-1-circle.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                        <rect fill="#000000" x="11" y="7" width="2" height="8" rx="1"/>
                                        <rect fill="#000000" x="11" y="16" width="2" height="2" rx="1"/>
                                    </g>
                                </svg><!--end::Svg Icon-->
                            </span>
                        </div>
                        <!--end::Icon-->

                        <!--begin::Content-->
                        <div class="d-flex flex-column">
                            <a href="#" class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
                                حجوزات في انتظار الدفع
                            </a>

                            <div class="text-dark-75 statics-numbers">
                                {{$waiting_reservations_count}}
                            </div>
                        </div>
                        <!--end::Content-->
                    </div>
                </div>
            </div>
        </div>

{{--        @if(can('view active reservations'))--}}
            <!-- Valid Reservations -->
            {{-- <div class="col-lg-4 mt-3">
                <div class="card card-custom wave wave-animate-slow wave-primary mb-8 mb-lg-0">
                    <a href="#" class="card-body">
                        <div class="d-flex align-items-center p-5">
                            <!--begin::Icon-->
                            <div class="mr-6">
                                            <span class="svg-icon svg-icon-success svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\General\Shield-check.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                <rect x="0" y="0" width="24" height="24"/>
                                                                <path d="M4,4 L11.6314229,2.5691082 C11.8750185,2.52343403 12.1249815,2.52343403 12.3685771,2.5691082 L20,4 L20,13.2830094 C20,16.2173861 18.4883464,18.9447835 16,20.5 L12.5299989,22.6687507 C12.2057287,22.8714196 11.7942713,22.8714196 11.4700011,22.6687507 L8,20.5 C5.51165358,18.9447835 4,16.2173861 4,13.2830094 L4,4 Z" fill="#000000" opacity="0.3"/>
                                                                <path d="M11.1750002,14.75 C10.9354169,14.75 10.6958335,14.6541667 10.5041669,14.4625 L8.58750019,12.5458333 C8.20416686,12.1625 8.20416686,11.5875 8.58750019,11.2041667 C8.97083352,10.8208333 9.59375019,10.8208333 9.92916686,11.2041667 L11.1750002,12.45 L14.3375002,9.2875 C14.7208335,8.90416667 15.2958335,8.90416667 15.6791669,9.2875 C16.0625002,9.67083333 16.0625002,10.2458333 15.6791669,10.6291667 L11.8458335,14.4625 C11.6541669,14.6541667 11.4145835,14.75 11.1750002,14.75 Z" fill="#000000"/>
                                                        </g>
                                                </svg><!--end::Svg Icon-->
                                            </span>
                            </div>
                            <!--end::Icon-->

                            <!--begin::Content-->
                            <div class="d-flex flex-column">
                                <h5 class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
                                    حجوزات مكتملة
                                </h5>

                                <div class="text-dark-75 statics-numbers">
                                    {{$reservations_count}}
                                </div>
                            </div>
                            <!--end::Content-->
                        </div>
                    </a>
                </div>
            </div> --}}
{{--        @endif--}}

        <!-- Expired Reservations -->
        {{-- <div class="col-lg-4 mt-3">
            <div class="card card-custom wave wave-animate-slow wave-dark mb-8 mb-lg-0">
                <a href="#" class="card-body">
                    <div class="d-flex align-items-center p-5">
                        <!--begin::Icon-->
                        <div class="mr-6">
                                            <span class="svg-icon svg-icon-dark svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Code\Time-schedule.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                <rect x="0" y="0" width="24" height="24"/>
                                                                <path d="M10.9630156,7.5 L11.0475062,7.5 C11.3043819,7.5 11.5194647,7.69464724 11.5450248,7.95024814 L12,12.5 L15.2480695,14.3560397 C15.403857,14.4450611 15.5,14.6107328 15.5,14.7901613 L15.5,15 C15.5,15.2109164 15.3290185,15.3818979 15.1181021,15.3818979 C15.0841582,15.3818979 15.0503659,15.3773725 15.0176181,15.3684413 L10.3986612,14.1087258 C10.1672824,14.0456225 10.0132986,13.8271186 10.0316926,13.5879956 L10.4644883,7.96165175 C10.4845267,7.70115317 10.7017474,7.5 10.9630156,7.5 Z" fill="#000000"/>
                                                                <path d="M7.38979581,2.8349582 C8.65216735,2.29743306 10.0413491,2 11.5,2 C17.2989899,2 22,6.70101013 22,12.5 C22,18.2989899 17.2989899,23 11.5,23 C5.70101013,23 1,18.2989899 1,12.5 C1,11.5151324 1.13559454,10.5619345 1.38913364,9.65805651 L3.31481075,10.1982117 C3.10672013,10.940064 3,11.7119264 3,12.5 C3,17.1944204 6.80557963,21 11.5,21 C16.1944204,21 20,17.1944204 20,12.5 C20,7.80557963 16.1944204,4 11.5,4 C10.54876,4 9.62236069,4.15592757 8.74872191,4.45446326 L9.93948308,5.87355717 C10.0088058,5.95617272 10.0495583,6.05898805 10.05566,6.16666224 C10.0712834,6.4423623 9.86044965,6.67852665 9.5847496,6.69415008 L4.71777931,6.96995273 C4.66931162,6.97269931 4.62070229,6.96837279 4.57348157,6.95710938 C4.30487471,6.89303938 4.13906482,6.62335149 4.20313482,6.35474463 L5.33163823,1.62361064 C5.35654118,1.51920756 5.41437908,1.4255891 5.49660017,1.35659741 C5.7081375,1.17909652 6.0235153,1.2066885 6.2010162,1.41822583 L7.38979581,2.8349582 Z" fill="#000000" opacity="0.3"/>
                                                        </g>
                                                </svg><!--end::Svg Icon-->
                                            </span>
                            {{--												<span class="svg-icon svg-icon-dark svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\Code\Lock-circle.svg-->--}}
                            {{--													<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">--}}
                            {{--															<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">--}}
                            {{--																	<rect x="0" y="0" width="24" height="24"/>--}}
                            {{--																	<circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>--}}
                            {{--																	<path d="M14.5,11 C15.0522847,11 15.5,11.4477153 15.5,12 L15.5,15 C15.5,15.5522847 15.0522847,16 14.5,16 L9.5,16 C8.94771525,16 8.5,15.5522847 8.5,15 L8.5,12 C8.5,11.4477153 8.94771525,11 9.5,11 L9.5,10.5 C9.5,9.11928813 10.6192881,8 12,8 C13.3807119,8 14.5,9.11928813 14.5,10.5 L14.5,11 Z M12,9 C11.1715729,9 10.5,9.67157288 10.5,10.5 L10.5,11 L13.5,11 L13.5,10.5 C13.5,9.67157288 12.8284271,9 12,9 Z" fill="#000000"/>--}}
                            {{--															</g>--}}
                            {{--													</svg><!--end::Svg Icon-->--}}
                            {{--												</span>--}}
                        {{-- </div>
                        <!--end::Icon-->

                        <!--begin::Content-->
                        <div class="d-flex flex-column">
                            <h5 class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
                                حجوزات منتهية
                            </h5>
                            <div class="text-dark-75 statics-numbers">
                                {{$expired_reservations_count}}
                            </div>
                        </div>
                        <!--end::Content-->
                    </div>
                </a>
            </div> --}}
        {{-- </div>--}}

        <!-- Cancelled Reservations with commission -->
        {{-- <div class="col-lg-4 mt-3">
            <div class="card card-custom wave wave-animate-slow wave-danger mb-8 mb-lg-0">
                <a href="#" class="card-body">
                    <div class="d-flex align-items-center p-5">
                        <!--begin::Icon-->
                        <div class="mr-6">
                            <span class="svg-icon svg-icon-danger svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\General\Trash.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero"/>
                                        <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"/>
                                    </g>
                                </svg><!--end::Svg Icon-->
                            </span>
                        </div>
                        <!--end::Icon-->

                        <!--begin::Content-->
                        <div class="d-flex flex-column">
                            <h5 class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
                                حجوزات ملغية بعمولة
                            </h5>
                            <div class="text-dark-75 statics-numbers">
                                {{$cancelled_with_commission}}
                            </div>
                        </div>
                        <!--end::Content-->
                    </div>
                </a>
            </div>
        </div> --}}

        <!-- Cancelled Reservations without commission -->
        {{-- <div class="col-lg-4 mt-3">
            <div class="card card-custom wave wave-animate-slow wave-danger mb-8 mb-lg-0">
                <a href="#" class="card-body">
                    <div class="d-flex align-items-center p-5">
                        <!--begin::Icon-->
                        <div class="mr-6">
                            <span class="svg-icon svg-icon-danger svg-icon-4x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\themes\metronic\theme\html\demo1\dist/../src/media/svg/icons\General\Trash.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero"/>
                                        <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"/>
                                    </g>
                                </svg><!--end::Svg Icon-->
                            </span>
                        </div>
                        <!--end::Icon-->

                        <!--begin::Content-->
                        <div class="d-flex flex-column">
                            <h5 class="text-dark text-hover-primary font-weight-bold font-size-h4 mb-3">
                                ملغية بدون عمولة
                            </h5>
                            <div class="text-dark-75 statics-numbers">
                                {{$cancelled_without_commission}}
                            </div>
                        </div>
                        <!--end::Content-->
                    </div>
                </a>
            </div>
        </div>
    </div> --}}
@endsection

@section('scripts')
    <script src="{{asset('assets/back/plugins/raphael/raphael.min.js')}}"></script>
    <script src="{{asset('assets/back/plugins/morris.js/morris.min.js')}}"></script>

    <script>
        var morrisData = {!! $dates_arr !!}

        new Morris.Bar({
            element: 'morrisBar1',
            data: morrisData,
            xkey: 'y',
            ykeys: ['a'],
            labels: ['الحجوزات'],
            barColors: ['#6d6ef3'],
            gridTextSize: 11,
            hideHover: 'auto',
            resize: true,
            redraw: true
        });

        new Morris.Donut({
            element: 'morrisDonut1',
            data: {!! $enterLeavingData !!},
            colors: ['#f1c40f', '#2ecc71', '#e74c3c'],
            resize: true,
            redraw: true,
            labelColor:"#8c9fc3"
        });
    </script>
@endsection