@extends('admin.layouts.app')

@section('top_css')
    <link href="{{ asset('admins/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="page-titles">
            <ol class="breadcrumb">
                <li>
                    <h5 class="bc-title">Dashboard</h5>
                </li>
            </ol>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 wid-100">
                    <div class="row">
                        <div class="col-xl-3 col-sm-6 same-card">
                            <div class="card">
                                <div class="card-body depostit-card">
                                    <div class="depostit-card-media d-flex justify-content-between style-1">
                                        <div>
                                            <h6>Doctors</h6>
                                            <h3>{{ $totalDoctors }}</h3>
                                        </div>
                                        <div class="icon-box bg-danger-light">
                                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M8.79222 13.9396C12.1738 13.9396 15.0641 14.452 15.0641 16.4989C15.0641 18.5458 12.1931 19.0729 8.79222 19.0729C5.40972 19.0729 2.52039 18.5651 2.52039 16.5172C2.52039 14.4694 5.39047 13.9396 8.79222 13.9396Z"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M8.79223 11.0182C6.57206 11.0182 4.77173 9.21874 4.77173 6.99857C4.77173 4.7784 6.57206 2.97898 8.79223 2.97898C11.0115 2.97898 12.8118 4.7784 12.8118 6.99857C12.8201 9.21049 11.0326 11.0099 8.82064 11.0182H8.79223Z"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path
                                                    d="M15.1095 9.9748C16.5771 9.76855 17.7073 8.50905 17.7101 6.98464C17.7101 5.48222 16.6147 4.23555 15.1782 3.99997"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path
                                                    d="M17.0458 13.5045C18.4675 13.7163 19.4603 14.2149 19.4603 15.2416C19.4603 15.9483 18.9928 16.4067 18.2374 16.6936"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="progress-box mt-0">
                                        <div class="d-flex justify-content-between">
                                            <p class="mb-0">Active / Inactive</p>
                                            <p class="mb-0">{{ $activeDoctors }} / {{ $inActiveDoctors }}</p>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary"
                                                style="width:{{ $doctorPercent }}%; height:5px; border-radius:4px;"
                                                role="progressbar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-sm-6 same-card">
                            <div class="card">
                                <div class="card-body depostit-card">
                                    <div class="depostit-card-media d-flex justify-content-between style-1">
                                        <div>
                                            <h6>Plans</h6>
                                            <h3>{{ $totalPlans }}</h3>
                                        </div>
                                        <div class="icon-box bg-danger-light">
                                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.64111 13.5497L9.38482 9.9837L12.5145 12.4421L15.1995 8.97684"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <ellipse cx="18.3291" cy="3.85021" rx="1.76201" ry="1.76201"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round">
                                                </ellipse>
                                                <path
                                                    d="M13.6808 2.86012H7.01867C4.25818 2.86012 2.54651 4.81512 2.54651 7.57561V14.9845C2.54651 17.7449 4.22462 19.6915 7.01867 19.6915H14.9058C17.6663 19.6915 19.3779 17.7449 19.3779 14.9845V8.53213"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="progress-box mt-0">
                                        <div class="d-flex justify-content-between">
                                            <p class="mb-0">Active / Inactive</p>
                                            <p class="mb-0">{{ $activePlans }} / {{ $inActivePlans }}</p>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary"
                                                style="width:{{ $planPercent }}%; height:5px; border-radius:4px;"
                                                role="progressbar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-sm-6 same-card">
                            <div class="card">
                                <div class="card-body depostit-card">
                                    <div class="depostit-card-media d-flex justify-content-between style-1">
                                        <div>
                                            <h6>Services</h6>
                                            <h3>{{ $totalServices }}</h3>
                                        </div>
                                        <div class="icon-box bg-danger-light">
                                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M14.9732 2.52102H7.0266C4.25735 2.52102 2.52118 4.48177 2.52118 7.25651V14.7438C2.52118 17.5186 4.2491 19.4793 7.0266 19.4793H14.9723C17.7507 19.4793 19.4795 17.5186 19.4795 14.7438V7.25651C19.4795 4.48177 17.7507 2.52102 14.9732 2.52102Z"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round"></path>
                                                <path d="M7.73657 11.0002L9.91274 13.1754L14.2632 8.82493" stroke="#888888"
                                                    stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="progress-box mt-0">
                                        <div class="d-flex justify-content-between">
                                            <p class="mb-0">Active / Inactive</p>
                                            <p class="mb-0">{{ $activeServices }} / {{ $inActiveServices }}</p>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary"
                                                style="width:{{ $servicePercent }}%; height:5px; border-radius:4px;"
                                                role="progressbar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 same-card">
                            <div class="card">
                                <div class="card-body depostit-card">
                                    <div class="depostit-card-media d-flex justify-content-between style-1">
                                        <div>
                                            <h6>Appointments</h6>
                                            <h3>{{ $totalAppointment }}</h3>
                                        </div>
                                        <div class="icon-box bg-danger-light">
                                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M13.5096 2.53165H7.41104C5.50437 2.52432 3.94146 4.04415 3.89654 5.9499V15.7701C3.85437 17.7071 5.38979 19.3121 7.32671 19.3552C7.35512 19.3552 7.38262 19.3561 7.41104 19.3552H14.7343C16.6538 19.2773 18.1663 17.6915 18.1525 15.7701V7.36798L13.5096 2.53165Z"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round">
                                                </path>
                                                <path
                                                    d="M13.2688 2.52084V5.18742C13.2688 6.48909 14.3211 7.54417 15.6228 7.54784H18.1482"
                                                    stroke="#888888" stroke-linecap="round" stroke-linejoin="round">
                                                </path>
                                                <path d="M13.0974 14.0786H8.1474" stroke="#888888" stroke-linecap="round"
                                                    stroke-linejoin="round"></path>
                                                <path d="M11.2229 10.6388H8.14655" stroke="#888888" stroke-linecap="round"
                                                    stroke-linejoin="round"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="progress-box mt-0">
                                        <div class="d-flex justify-content-between">
                                            <p class="mb-0">Completed / Pending</p>
                                            <p class="mb-0">{{ $totalCompleted }} / {{ $totalPending }}</p>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary"
                                                style="width:{{ $apointmentPercent }}%; height:5px; border-radius:4px;" role="progressbar">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card overflow-hidden">
                                <div class="card-header border-0 pb-0 flex-wrap">
                                    <h4 class="heading mb-0">Appointment Stats</h4>
                                        <div class="col-sm-5">
                                            {!! Form::select('year_selection', $yearSelection, $currentYear, ['class' => 'form-control select2', 'onChange' => 'chartData($(this).val())']) !!}
                                        </div>
                                </div>
                                <div class="card-body  p-0">
                                    <div id="overiewChart2"></div>
                                    <div class="ttl-project">
                                        <div class="pr-data">
                                            <h5 class="text-primary">{{$appointmentStats->total_count}}</h5>
                                            <span>Number Of Appointments</span>
                                        </div>
                                        <div class="pr-data">
                                            <h5 class="text-success">Rs {{$appointmentStats->total_amount}}</h5>
                                            <span>Revenue</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 bst-seller">
                    <div class="card">
                        <div class="card-header border-0">
                            <h4 class="heading mb-0">Today Appointments</h4>
                        </div>
                        <div class="card-body p-0">
                            <div
                                class="table-responsive active-projects active-projects ItemsCheckboxSec selling-product shorting ">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Sr No</th>
                                            <th>Appointment Number</th>
                                            <th>Transaction Number</th>
                                            <th>Patient</th>
                                            <th>Timing</th>
                                            <th>Fees</th>
                                            <th>Appointment Status</th>
                                            <th>Doctor</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    @if (isset($appointments) && count($appointments) > 0)
                                    <tbody>