@extends('layouts.master')
@section('title')
    {{ __('layout.dashboard') }} | {{ __('dashboard.coordinator.coordinator') }} | {{ $user->name }} {{ $user->last_name }}
@endsection
@section('plugin_css')
    @include('layouts.scripts.autocomplete-css')
@endsection
@section('content')
    <x-header title="{{ __('layout.dashboard') }}" subtitle="{{ __('dashboard.coordinator.coordinator') }} | {{ $user->name }} {{ $user->last_name }}" icon="bar-chart-2"
              tab="{{ __('layout.dashboard') }}" tab-icon="bar-chart-2"/>

    <div class="page-content-wrapper pt-4">
        <div class="container-fluid">
            <div class="row">
                @foreach($totals as $langKey => $total)
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <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.coordinator.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-12">
                    <div class="card card--table">
                        <div class="text-secondary card-header my-card-title">
                            {{ __('dashboard.coordinator.table1.title') }}
                        </div>
                        <div class="card-body">
                            <table id="clients_dt" class="table-bordered table table-hover table-striped nowrap">
                                <thead>
                                <tr>
                                    <th>{{ __('clients.fields.created_at') }}</th>
                                    <th>{{ __('layout.action') }}</th>
                                    <th>{{ __('clients.fields.id') }}</th>
                                    <th>{{ __('clients.fields.image') }}</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.is_approved') }}</th>
                                    <th>{{ __('clients.fields.role') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card card--table">
                        <div class="text-secondary card-header my-card-title">
                            {{ __('dashboard.coordinator.table2.title') }}
                        </div>
                        <div class="card-body">
                            <table id="zoom_appointment" class="table-bordered table table-hover table-striped nowrap">
                                <thead>
                                <tr>
                                    <th>{{ __('zoom-appointments.fields.created_at') }}</th>
                                    <th>{{ __('layout.action') }}</th>
                                    <th>{{ __('zoom-appointments.fields.title') }}</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 ajaxRoute1 = "{{route("zoom-appointments.dt.role",[ 'id' => $user->id ])}}";
            let columns1 = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', class: "text-center", orderable: false},
                {data: 'title', name: 'title'},
                {data: 'user.name', name: 'user.name'},
                {data: 'specialist.name', name: 'specialist.name',orderable: false, searchable: false},
                {data: 'date_time', name: 'date_time'},
            ];

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

            let ajaxRoute = "{{route("clients.dt",[ 'id' => $user->id ])}}";
            let columns = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', class: "text-center", orderable: false},
                {data: 'id', name: 'id'},
                {data: 'image', name: 'image', 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: 'is_approved', name: 'is_approved'},
                {data: 'role', name: 'role'},
            ];

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

            $(document).on('click', '.ACTION_DELETE', function (e) {
                e.preventDefault();
                let deleteUrl = $(this).data('href');
                myDelete('{{ __('layout.delete_confirm_msg') }}', '{{ __('layout.delete') }}', function () {
                    $.ajax({
                        type: "post",
                        url: deleteUrl,
                        data: {
                            '_method': 'delete',
                            '_token': document.head.querySelector("meta[name=csrf-token]").content
                        }, // serializes the form's elements.
                        success: function (response) {
                            Swal.fire(response.message, "", "success");
                            $("#clients_dt").DataTable().ajax.reload(null, false);
                        }
                    });
                })
            });
        });

    </script>
@endsection