@extends('layouts.master')
@section('title', __('layout.dashboard'))
@section('plugin_css')
    @include('layouts.scripts.autocomplete-css')
@endsection
@section('content')
    <x-header title="{{ __('layout.dashboard') }}" subtitle="{{ __('dashboard.agent.agent') }}" 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">
                <div class="col-md-6 mb-3">
                    <div id="autocomplete"></div>
                </div>
                <div class="col-md-6">
                    <a class="btn btn-secondary btn-lg mb-3 float-end"
                       href="{{ route('zoom-appointments.create') }}">{{ __('dashboard.agent.book_appointments') }}</a>
                </div>
            </div>
            <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.agent.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.agent.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>{{ __('layout.created_at') }}</th>
                                    <th>{{ __('dashboard.agent.table1.action') }}</th>
                                    <th>{{ __('dashboard.agent.table1.date_time') }}</th>
                                    <th>{{ __('dashboard.agent.table1.status') }}</th>
                                    <th>{{ __('dashboard.agent.table1.client') }}</th>
                                    <th>{{ __('dashboard.agent.table1.object') }}</th>
                                    <th>{{ __('dashboard.agent.table1.description') }}</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.agent.table3.title') }}
                        </div>
                        <div class="card-body">
                            <table id="reminders" class="table table-hover nowrap table-bordered">
                                <thead>
                                <tr>
                                    <th>{{ __('reminders.fields.created_at') }}</th>
                                    <th>{{ __('reminders.fields.id') }}</th>
                                    <th>{{ __('reminders.fields.to_user_id') }}</th>
                                    <th>{{ __('reminders.fields.phone') }}</th>
                                    <th>{{ __('reminders.fields.datetime') }}</th>
                                    <th>{{ __('reminders.fields.direction') }}</th>
                                    <th>{{ __('reminders.fields.status') }}</th>
                                    <th>{{ __('reminders.fields.description') }}</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.agent.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("appointments-with-clients.dt")}}";
            let columns = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', orderable: false},
                {data: 'date_time', name: 'date_time',},
                {data: 'status', name: 'status',},
                {data: 'from_user.name', name: 'from_user.name', orderable: false, searchable: false},
                {data: 'object', name: 'object'},
                {data: 'description', name: 'description'},
            ];

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

            let ajaxRoute1 = "{{route("zoom-appointments.dt")}}";
            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("reminders.dt")}}";
            let columns2 = [
                /*{data: 'actions', class: "text-center", orderable: false, searchable: false},*/
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'id', name: 'id'},
                {data: 'to_user_id', name: 'to_user_id', orderable: false, searchable: false},
                {data: 'phone', name: 'phone', orderable: false, searchable: false},
                {data: 'datetime', name: 'datetime'},
                {data: 'direction', name: 'direction'},
                {data: 'status', name: 'status'},
                {data: 'description', name: 'description'},

            ];

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

            $(document).on('click', '.CHANGE_STATUS', function (e) {
                e.preventDefault();
                let deleteUrl = $(this).data('href');
                myStatusChange('{{ __('agent-side.book-appointment.change_status_msg') }}', '{{ __('layout.change') }}', function () {
                    $.ajax({
                        type: "post",
                        url: deleteUrl,
                        data: {'_token': document.head.querySelector("meta[name=csrf-token]").content}, // serializes the form's elements.
                        success: function (response) {
                            Swal.fire(response.message, "", "success");
                            $("#datatable1").DataTable().ajax.reload(null, false);
                        }
                    });
                })
            });
        });
    </script>
    @include('layouts.scripts.autocomplete-js')
@endsection