@extends('Partners.Layouts.Page')

@section('styles')
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />

    <style>
        .dashboard-button{
            display: flex;
            padding: 10px;
            height: 65px;
            background-color: #fff;
            align-items: center;
            margin-top: .5rem;
            border-right: 3px solid #4ebeb2;
            font-weight: 600;
            color: #4ebeb2;

            transition: all .15s ease-in;
            -webkit-transition: all .15s ease-in;
            -moz-transition: all .15s ease-in;
            -o-transition: all .15s ease-in;
        }

        .dark-theme .dashboard-button{
            background-color: #1f2940;
        }
        .dashboard-button:hover,
        .dashboard-button:focus {
            transform: translateX(-5px);
            -webkit-transform: translateX(-5px);
            -moz-transform: translateX(-5px);
            -o-transform: translateX(-5px);
        }
        .dashboard-button span.icon{
            width: 50px;
            font-size: 25px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-left: 10px;
        }

        .statics .card{
            margin-bottom: .5rem;
        }

        .delay-1 {
            animation-delay: .1s;
        }
        .delay-2 {
            animation-delay: .2s;
        }
        .delay-3 {
            animation-delay: .3s;
        }
        .delay-4 {
            animation-delay: .5s;
        }
        .delay-5 {
            animation-delay: .5s;
        }
        .delay-6 {
            animation-delay: .6s;
        }
        .delay-7 {
            animation-delay: .7s;
        }
        .delay-8 {
            animation-delay: .8s;
        }
        .delay-9 {
            animation-delay: .9s;
        }

        @media (max-width: 767px) {
            .col-6 {
                padding: 3px !important;
            }
            .statics .card {
                margin-bottom: 3px !important;
                font-size: 80%;
            }
            .dashboard-button {
                margin-top: 0 !important;
            }
            .text-small{
                font-size: 80%;
            }
        }
    </style>
@endsection

@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 -->

    <h5 class="text-muted mt-4">الإحصائيات</h5>

    <div class="row row-sm statics">
        <div class="col-6 col-sm-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('units.index')}}" class="card-body">
                    <div class="card-order">
                        <h6 class="text-dark mb-2">العقارات</h6>
                        <h2 class="text-end text-muted"><i class="si si-home icon-size float-start text-primary text-primary-shadow"></i><b>{{$units}}</b></h2>
                        <p class="text-muted mb-0">اجمالي العقارات المضافة</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('contracts.index')}}" class="card-body">
                    <div class="card-order">
                        <h6 class="text-dark mb-2">العقود</h6>
                        <h2 class="text-muted text-end"><i class="si si-docs icon-size float-start text-primary text-primary-shadow"></i><b>{{$contracts}}</b></h2>
                        <p class="text-muted mb-0">إجمالي العقود</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('bookings.index')}}" class="card-body">
                    <div class="card-order">
                        <h6 class="text-dark text-small mb-2">الحجوزات</h6>
                        <h2 class="text-end text-muted"><i class="si si-calendar icon-size float-start text-primary text-primary-shadow"></i><b>{{$bookings}}</b></h2>
                        <p class="mb-0 text-muted">جمالي الحجوزات</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-md-4 col-lg-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('bookings.index')}}" class="card-body">
                    <div class="card-order">
                        <h6 class="text-dark text-small mb-2">حجوزات بانتظار اكمال المبلغ</h6>
                        <h2 class="text-end text-muted"><i class="si si-check icon-size float-start text-primary text-primary-shadow"></i><b>{{$valid_contracts}}</b></h2>
                        <p class="mb-0 text-muted">الحجوزات المدفوعة بالكامل</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="row row-sm statics">
        <div class="col-6 col-sm-4 col-lg-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('units.index')}}" class="card-body">
                    <div class="row">
                        <div class="col-auto align-self-center ">
                            <div class="feature mt-0 mb-0">
                                <i class="si si-exclamation project bg-warning-transparent mx-auto text-warning"></i>
                            </div>
                        </div>

                        <div class="col">
                            <div class="text-muted">عقارات منتهية</div>
                            <div class="h3 mt-2 mb-2"><b>{{$expired}}</b></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-sm-4 col-lg-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('invoices.index')}}" class="card-body">
                    <div class="row">
                        <div class="col-auto align-self-center ">
                            <div class="feature mt-0 mb-0">
                                <i class="si si-calculator project bg-primary-transparent mx-auto text-primary"></i>
                            </div>
                        </div>

                        <div class="col">
                            <div class="text-muted">الفواتير</div>
                            <div class="h3 mt-2 mb-2"><b>{{$invoices}}</b></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-sm-4 col-lg-4 col-xl-3">
            <div class="card">
                <a href="{{partner_route('wallet.index')}}" class="card-body">
                    <div class="row">
                        <div class="col-auto align-self-center ">
                            <div class="feature mt-0 mb-0">
                                <i class="si si-wallet project bg-teal-transparent mx-auto text-teal"></i>
                            </div>
                        </div>

                        <div class="col">
                            <div class="text-muted">اجمالي المحفظة</div>
                            <div class="h3 mt-2 mb-2"><b>{{currency($credits)}}</b></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

{{--        <div class="col-sm-6 col-lg-6 col-xl-3">--}}
{{--            <div class="card">--}}
{{--                <a href="{{partner_route('invoices.index')}}" class="card-body">--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-auto align-self-center ">--}}
{{--                            <div class="feature mt-0 mb-0">--}}
{{--                                <i class="si si-check project bg-success-transparent mx-auto text-success"></i>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="col">--}}
{{--                            <div class="text-muted">الفواتير المدفوعة</div>--}}
{{--                            <div class="h3 mt-2 mb-2"><b>{{$paid}}</b></div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </a>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

    <h5 class="text-muted mt-4">الأوامر</h5>

    <div class="row mb-5">
        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-1" href="{{route('partner.bookings.index')}}" style="position:relative;overflow:initial!important">
                <span class="icon bg-primary-transparent text-primary"><i class="si si-layers"></i></span>
                <span class="text">حجوزات أونلاين</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-2" href="{{route('partner.prices.index')}}" style="position:relative;overflow:initial!important">
                <span class="icon bg-orange-transparent text-orange"><i class="si si-calendar"></i></span>
                <span class="text">الأسعار و التوافر</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-3" href="{{route('partner.gallery.index')}}" style="position:relative;overflow:initial!important">
                <span class="icon bg-danger-transparent text-danger"><i class="si si-picture"></i></span>
                <span class="text">صور العقارات</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-4" href="{{route('partner.units.create')}}">
                <span class="icon bg-success-transparent text-success"><i class="far fa-hospital"></i></span>
                <span class="text">أضف عقار جديد</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-1" href="{{route('partner.contracts.create')}}">
                <span class="icon bg-primary-transparent text-primary"><i class="si si-plus"></i></span>
                <span class="text">إنشاء عقد</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-2" href="{{partner_route('contracts.index')}}">
                <span class="icon bg-teal-transparent text-teal"><i class="si si-docs"></i></span>
                <span class="text">العقود</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-3" href="{{investor_url('contracts?type=active')}}">
                <span class="icon bg-pink-transparent text-pink"><i class="si si-check"></i></span>
                <span class="text">العقود القائمة</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-4" href="{{url('services')}}">
                <span class="icon bg-info-transparent text-info"><i class="si si-handbag"></i></span>
                <span class="text">الخدمات</span>
            </a>
        </div>

        <div class="col-6 col-xs-6 col-md-3">
            <a class="dashboard-button animate__animated animate__fadeInRight delay-1" href="{{partner_route('units.index')}}">
                <span class="icon bg-success-transparent text-success"><i class="si si-energy"></i></span>
                <span class="text">حالة العقار</span>
            </a>
        </div>

{{--        <div class="col-xs-6 col-md-3">--}}
{{--            <a class="dashboard-button" href="{{partner_route('wallet.index')}}">--}}
{{--                <span class="icon bg-purple-transparent text-purple"><i class="si si-wallet"></i></span>--}}
{{--                <span class="text">المحفظة</span>--}}
{{--            </a>--}}
{{--        </div>--}}

{{--        <div class="col-xs-6 col-md-3">--}}
{{--            <a class="dashboard-button" href="{{route('partner.invoices.index')}}" style="position:relative;overflow:initial!important">--}}
{{--                <span class="icon bg-secondary-transparent text-secondary"><i class="si si-notebook"></i></span>--}}
{{--                <span class="text">الفواتير الشهرية</span>--}}
{{--            </a>--}}
{{--        </div>--}}
    </div>
@endsection