@extends('layouts.master')
@section('title', __('layout.dashboard'))
@section('plugin_css')
    @include('layouts.scripts.autocomplete-css')
@endsection
@section('content')
    <!-- page header -->
    <x-header title="{{ __('layout.dashboard') }}" subtitle="{{ __('dashboard.admin.admin') }}" icon="bar-chart-2"
              tab="{{ __('layout.dashboard') }}" tab-icon="bar-chart-2"/>
    <!-- page content -->
    <div class="page-content-wrapper pt-4">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div id="autocomplete"></div>
                </div>
            </div>
            <div class="row">
                @foreach($totals as $langKey => $total)
                    <div class="col-md-6 col-lg-6 col-xl-4">
                        <div class="card card--agent">
                            <div class="card-body rounded-3 border border-1 border-black border-dashed">
                                <div class="media align-items-center">
                                    <div class="media-body">
                                    <span class="text-black text-uppercase fs-14 fw-medium">
                                        {{ __('dashboard.admin.cards.'.$langKey) }}
                                    </span>
                                        <h2 class="text-black mb-0 mt-1 fs-1 fw-medium">{{ number_format($total['value']) }}</h2>
                                    </div>
                                    {{--<div class="text-center">
                                        <div>
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                    </div>--}}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card card--table">
                        <div class="text-secondary card-header my-card-title">
                            {{ __('dashboard.c_coordinator.table1.title') }}
                        </div>
                        <div class="card-body">
                            <table class="table-bordered table  table-hover nowrap table-bordered" id="datatable1">
                                <thead class="thead-info">
                                <tr>
                                    <th>{{ __('clients.fields.created_at') }}</th>
                                    <th>{{ __('layout.action') }}</th>
                                    <th>{{ __('clients.fields.approved_status') }}</th>
                                    <th>{{ __('clients.fields.csef') }}</th>
                                    <th>{{ __('clients.fields.name') }}</th>
                                    <th>{{ __('clients.fields.last_name') }}</th>
                                    <th>{{ __('clients.fields.date_of_birth') }}</th>
                                    <th>{{ __('clients.fields.gender') }}</th>
                                    <th>{{ __('clients.fields.bande_number') }}</th>
                                    <th>{{ __('clients.fields.email') }}</th>
                                    <th>{{ __('clients.fields.phone') }}</th>
                                    <th>{{ __('clients.fields.role') }}</th>
                                    <th>{{ __('clients.fields.image') }}</th>
                                    <th>{{ __('clients.fields.id') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card card--table">
                        <div class="text-secondary card-header my-card-title">
                            {{ __('dashboard.c_coordinator.table3.title') }}
                        </div>
                        <div class="card-body">
                            <table id="new_specialist" class="table table-hover nowrap table-bordered">
                                <thead>
                                <tr>
                                    <th>{{ __('specialists.fields.created_at') }}</th>
                                    <th>{{ __('layout.action') }}</th>
                                    <th>{{ __('specialists.fields.approved_status') }}</th>
                                    <th>{{ __('specialists.fields.csef') }}</th>
                                    <th>{{ __('specialists.fields.name') }}</th>
                                    <th>{{ __('specialists.fields.last_name') }}</th>
                                    <th>{{ __('specialists.fields.speciality') }}</th>
                                    <th>{{ __('specialists.fields.email') }}</th>
                                    <th>{{ __('specialists.fields.phone') }}</th>
                                    <th>{{ __('specialists.fields.role') }}</th>
                                    <th>{{ __('specialists.fields.image') }}</th>
                                    <th>{{ __('specialists.fields.id') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card card--table">
                        <div class="text-secondary card-header my-card-title">
                            {{ __('dashboard.c_coordinator.table2.title') }}
                        </div>
                        <div class="card-body">
                            <table id="zoom_appointment" class="table table-hover nowrap table-bordered">
                                <thead>
                                <tr>
                                    <th>{{ __('zoom-appointments.fields.created_at') }}</th>
                                    <th>{{ __('layout.action') }}</th>
                                    <th>{{ __('zoom-appointments.fields.title') }}</th>
                                    <th>{{ __('zoom-appointments.fields.csefs') }}</th>
                                    <th>{{ __('zoom-appointments.fields.user_id') }}</th>
                                    <th>{{ __('zoom-appointments.fields.specialist_id') }}</th>
                                    <th>{{ __('zoom-appointments.fields.date_time') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('plugins_js')
    <script>
        $(function () {
            let ajaxRoute = "{{route("clients.dt")}}?dashboard=yes";
            let columns = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', class: "text-center", orderable: false},
                {data: 'approved_status', name: 'approved_status'},
                {data: 'csef', name: 'csef', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'last_name', name: 'last_name'},
                {data: 'date_of_birth', name: 'date_of_birth'},
                {data: 'gender', name: 'gender'},
                {data: 'bande_number', name: 'bande_number'},
                {data: 'email', name: 'email'},
                {data: 'phone', name: 'phone'},
                {data: 'role', name: 'role'},
                {data: 'image', name: 'image', orderable: false, searchable: false},
                {data: 'id', name: 'id'},
                /*{data: 'created_at', name: 'created_at', class: "text-center"},*/
            ];

            initDatatables("#datatable1", ajaxRoute, columns, [0, 'desc']);

            let ajaxRoute1 = "{{route("zoom-appointments.dt")}}?dashboard=yes";
            let columns1 = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', class: "text-center", orderable: false},
                {data: 'title', name: 'title'},
                {data: 'csefs', name: 'csefs', orderable: false, searchable: false},
                {data: 'user.name', name: 'user.name'},
                {data: 'specialist.name', name: 'specialist.name', orderable: false, searchable: false},
                {data: 'date_time', name: 'date_time'},
                /*{data: 'created_at', name: 'created_at'},*/
            ];

            initDatatables("#zoom_appointment", ajaxRoute1, columns1, [0, 'desc']);

            let ajaxRoute2 = "{{route("specialists.dt")}}?dashboard=yes";
            let columns2 = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions',class: "text-center", orderable: false},
                {data: 'approved_status', name: 'approved_status'},
                {data: 'csef', name: 'csef', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'last_name', name: 'last_name'},
                {data: 'speciality', name: 'speciality',orderable: false, searchable: false},
                {data: 'email', name: 'email'},
                {data: 'phone', name: 'phone'},
                {data: 'role', name: 'role'},
                {data: 'image', name: 'image',orderable: false, searchable: false},
                {data: 'id', name: 'id'},
                /*{data: 'created_at', name: 'created_at', class: "text-center"},*/

            ];

            initDatatables("#new_specialist", ajaxRoute2, columns2, [0, 'desc']);

        });
    </script>
    @include('layouts.scripts.autocomplete-js')
@endsection