@extends('layouts.master')
@section('title', __('layout.dashboard'))
@section('content')
    <x-header title="{{ __('layout.dashboard') }}" subtitle="{{ __('dashboard.user.workforce_profile') }}" icon="bar-chart-2"
              tab="{{ __('layout.dashboard') }}" tab-icon="bar-chart-2"/>
    <div class="page-content-wrapper">
        <div class="container-fluid">
            <div class="row dotted-bottom mt-4">
                <div class="col-md-6">
                    <div class="row">
                        @foreach($totals as $langKey => $total)
                            <div class="col-md-12 col-lg-6 col-xl-6">
                                <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.user.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">
                            <a class="btn btn-secondary btn-lg mb-3 w-100" href="{{ route('client.book-appointment-with-agent') }}">{{ __('dashboard.user.book_appointments') }}</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h4 class="fs-4 fw-semibold text-secondary">+ Ta Biographie</h4>
                    <p class="text-justify">
                        <img src="{{ $client->userImageUrl() }}" class="img-fluid w-25 float-start mb-3 me-3">
                        {{ $client->expert_biography }}
                    </p>
                </div>
            </div>
            <div class="row pt">
                <div class="col-md-12 col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div
                                    class="col-3 bg-primary d-flex align-items-center justify-content-center"
                                    style="height: 100px;border-radius: 10px;">
                                    <div>
                                        <i class="fa fa-users text-white" style="font-size: 50px;"></i>
                                    </div>
                                </div>
                                <div class="col-8 text-primary fst-italic">
                                    @if($client->user)
                                        {{ optional($client->user)->name. ' '.optional($client->user)->last_name }}
                                        ({{ __('clients.show_p.Your follow-up agent') }})<br>
                                        {{ __('clients.show_p.Email') }}
                                        : {{ optional($client->user)->email }}<br>
                                        {{ __('clients.show_p.Phone') }}
                                        : {{ optional($client->user)->phone }}
                                    @else
                                        <div class="text-center text-danger">
                                            {{ __('clients.show_p.No Agent Assigned') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div
                                    class="col-3 bg-primary d-flex align-items-center justify-content-center"
                                    style="height: 100px;border-radius: 10px;">
                                    <div>
                                        <i class="fa fa-users text-white" style="font-size: 50px;"></i>
                                    </div>
                                </div>
                                <div class="col-8 text-primary">
                                    {{ __('clients.show_p.Reference CSEF address') }}:<br>
                                    {{ $client->zone->name }}<br>
                                    {{ $client->zone->address }},<br>
                                    {{ $client->zone->locality }} ({{ $client->zone->province }}
                                    ) {{ $client->postal_code }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-6 col-xl-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div
                                    class="col-3 bg-primary d-flex align-items-center justify-content-center"
                                    style="height: 100px;border-radius: 10px;">
                                    <div>
                                        <i class="fa fa-users text-white" style="font-size: 50px;"></i>
                                    </div>
                                </div>
                                <div class="col-8 text-primary">
                                    {{ __('clients.show_p.Address Born Reference CSEF') }}:<br>
                                    {{ $client->bornZone->name }}<br>
                                    {{ $client->bornZone->address }},<br>
                                    {{ $client->bornZone->locality }} ({{ $client->bornZone->province }}
                                    ) {{ $client->postal_code }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mb-5 mt-3">
                    <ul class="nav nav-pills nav-justified border-radius my-tablist" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a href="#tab1" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" aria-selected="true" role="tab">
                                <span class="title">{{ __('clients.show_p.tab1_title') }}</span>
                                <span class="sub-title">{{ __('clients.show_p.tab1_subtitle') }}</span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="#tab2" data-bs-toggle="tab" aria-expanded="true" class="nav-link" aria-selected="false" role="tab" tabindex="-1">
                                <span class="title">{{ __('clients.show_p.tab2_title') }}</span>
                                <span class="sub-title">{{ __('clients.show_p.tab2_subtitle') }}</span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="#tab3" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" role="tab" tabindex="-1">
                                <span class="title">{{ __('clients.show_p.tab3_title') }}</span>
                                <span class="sub-title">{{ __('clients.show_p.tab3_subtitle') }}</span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="#tab4" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" role="tab" tabindex="-1">
                                <span class="title">{{ __('clients.show_p.tab4_title') }}</span>
                                <span class="sub-title">{{ __('clients.show_p.tab4_subtitle') }}</span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="#tab5" data-bs-toggle="tab" aria-expanded="false" class="nav-link"
                               aria-selected="false" role="tab" tabindex="-1">
                                <span class="title">{{ __('clients.show_p.tab5_title') }}</span>
                                <span class="sub-title">{{ __('clients.show_p.tab5_subtitle') }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-12">
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1" role="tabpanel">
                            <div class="card">
                                <div class="card-header my-card-title">
                                    {{ __('dashboard.user.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.specialist_id') }}</th>
                                            <th>{{ __('zoom-appointments.fields.date_time') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane" id="tab2" role="tabpanel">
                            <div class="card">
                                <div class="card-header my-card-title">
                                    {{ __('dashboard.user.table1.title') }}
                                </div>
                                <div class="card-body">
                                    <table class="table-bordered table table-hover table-striped nowrap" id="agent_appointment">
                                        <thead class="thead-info">
                                        <tr>
                                            <th>{{ __('zoom-appointments.fields.created_at') }}</th>
                                            <th>{{ __('dashboard.user.table1.action') }}</th>
                                            <th>{{ __('dashboard.user.table1.date_time') }}</th>
                                            <th>{{ __('dashboard.user.table1.status') }}</th>
                                            <th>{{ __('dashboard.user.table1.agent') }}</th>
                                            <th>{{ __('dashboard.user.table1.object') }}</th>
                                            <th>{{ __('dashboard.user.table1.description') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab3" role="tabpanel">
                            <div class="card">
                                <div class="card-header my-card-title">
                                    {{ __('dashboard.user.table3.title') }}
                                </div>
                                <div class="card-body">
                                    <table id="my_notes" class="table-bordered table table-hover table-striped nowrap">
                                        <thead>
                                        <tr>
                                            <th>{{ __('notes.fields.created_at') }}</th>
                                            <th>{{ __('layout.action') }}</th>
                                            <th>{{ __('notes.fields.note_from') }}</th>
                                            <th>{{ __('notes.fields.zoom_appointment_title') }}</th>
                                            <th>{{ __('notes.fields.client') }}</th>
                                            <th>{{ __('notes.fields.specialist') }}</th>
                                            <th>{{ __('notes.fields.agent') }}</th>
                                            <th>{{ __('notes.fields.date') }}</th>
                                            <th>{{ __('notes.fields.time') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab4" role="tabpanel">
                            <div class="card">
                                <div class="card-header my-card-title">
                                    {{ __('dashboard.user.table4.title') }}
                                </div>
                                <div class="card-body">
                                    <table id="call_log" class="table-bordered table table-hover table-striped  nowrap">
                                        <thead>
                                        <tr>
                                            <th>{{ __('calls.fields.created_at') }}</th>
                                            <th>{{ __('calls.fields.datetime') }}</th>
                                            <th>{{ __('calls.fields.user_id') }}</th>
                                            <th>{{ __('calls.fields.phone') }}</th>
                                            <th>{{ __('calls.fields.direction') }}</th>
                                            <th>{{ __('calls.fields.status') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab5" role="tabpanel">
                            <div class="card">
                                <div class="card-header my-card-title">
                                    {{ __('clients.show_p.tab5_title') }}
                                </div>
                                <div class="card-body">
                                    <h4 class="text-center text-danger">{{ __('clients.show_p.tab5_temp_msg') }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--Start edit model--}}
    <div class="modal modal-lg modal-sm fade" id="editModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="overflow-y: initial !important;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">{{__('notes.edit_notes')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="alert alert-danger" id="app-user-error-container" style="display: none;">
                    <ul id="app-user-error-list">
                    </ul>
                </div>
                <div class="editor">
                    <div id="bubble-editor" style="height: 370px;">
                    </div>
                    <div class="button mt-3 mb-3 mx-3">
                        <input type="hidden" id="note_id" name="note_id">
                        <button type="button" class="btn btn-primary btn-md" id="saveNote">{{__('notes.save_note')}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--End edit mode--}}
    {{--Start view model--}}
    <div class="modal modal-lg modal-sm fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" style="overflow-y: initial !important;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">{{__('notes.show_notes')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="editor">
                    <div id="bubble-editor-2" style="height: 370px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--End view model--}}
@endsection
@section('plugin_css')
    <link href="{{ asset('assets/libs/quill/quill.core.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/libs/quill/quill.bubble.css')}}" rel="stylesheet"/>
    <link href="{{ asset('assets/libs/quill/quill.snow.css') }}" rel="stylesheet" />
    <style>
        .dotted-bottom {
            border-bottom: 1px dashed #000;
            padding-bottom: 5px;
        }
    </style>
@endsection
@section('plugins_js')
    <script src="{{ asset('assets/libs/quill/quill.min.js')}}"></script>
    <script>
        $(function () {

            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: 'specialist.name', name: 'specialist.name',orderable: false, searchable: false},
                {data: 'date_time', name: 'date_time'},
            ];
            initDatatables("#zoom_appointment", ajaxRoute1, columns1, [0, 'desc']);
            let ajaxRoute2 = "{{route("appointments-with-agent.dt")}}";
            let columns2 = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', orderable: false},
                {data: 'date_time', name: 'date_time'},
                {data: 'status', name: 'status'},
                {data: 'to_user.name', name: 'to_user.name',orderable: false, searchable: false},
                {data: 'object', name: 'object'},
                {data: 'description', name: 'description'},
            ];
            initDatatables("#agent_appointment", ajaxRoute2, columns2,[0, 'desc']);

            let ajaxRoute3 = "{{route("notes.dt")}}";
            let columns3 = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'actions', class: "text-center", orderable: false},
                {data: 'note_from', name: 'note_from', orderable: false, searchable: false},
                {data: 'title', name: 'zoomAppointment.title', orderable: false, searchable: true},
                {data: 'client', name: 'client', orderable: false, searchable: false},
                {data: 'specialist', name: 'specialist', orderable: false, searchable: false},
                {data: 'agent', name: 'agent', orderable: false, searchable: false},
                {data: 'date', name: 'date', orderable: false, searchable: false},
                {data: 'time', name: 'time', orderable: false, searchable: false},
            ];
            initDatatables("#my_notes", ajaxRoute3, columns3, [0, 'desc']);

            let ajaxRoute4 = "{{route("calls.dt",['id'=>$client->id])}}";
            let columns4 = [
                {data: 'created_at', name: 'created_at', visible: false},
                {data: 'datetime', name: 'datetime'},
                {data: 'agent_name', name: 'user_id',orderable: false, searchable: false},
                {data: 'phone', name: 'phone', orderable: false, searchable: false},
                {data: 'direction', name: 'direction'},
                {data: 'status', name: 'status'},
            ];

            initDatatables("#call_log", ajaxRoute4, columns4, [0, 'desc']);

            $(document).on('click','.CHANGE_STATUS', function (e) {
                e.preventDefault();
                let deleteUrl = $(this).data('href');
                myStatusChange('{{ __('client-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");
                            $("#agent_appointment").DataTable().ajax.reload(null, false);
                        }
                    });
                })
            });


            //Saving Notes
            $(document).on('click', '#saveNote', function(e) {
                e.preventDefault();
                console.log('clicked');
                var id = $("#note_id").val();
                var url = "{{ route('notes.update', ':id') }}";
                url = url.replace(':id', id);
                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        '_method' : 'PUT',
                        '_token' : document.head.querySelector("meta[name=csrf-token]").content,
                        'notes': quill.root.innerHTML
                    },
                    success: function (data) {
                        $('#editModal').modal('hide');
                        successNotify(data.message);
                        $("#datatable").DataTable().ajax.reload(null, false);
                    }
                });
            });

            const quill = new Quill('#bubble-editor', {
                theme: "snow",
                modules: {
                    toolbar: [
                        [{ font: [] }, { size: [] }],
                        ["bold", "italic", "underline", "strike"],
                        [{ color: [] }, { background: [] }],
                        [{ script: "super" }, { script: "sub" }],
                        [
                            { header: [!1, 1, 2, 3, 4, 5, 6] },
                            "blockquote",
                            "code-block",
                        ],
                        [
                            { list: "ordered" },
                            { list: "bullet" },
                            { indent: "-1" },
                            { indent: "+1" },
                        ],
                        ["direction", { align: [] }],
                        ["link"],
                        ["clean"],
                    ],
                },
                placeholder: 'Write Notes...',
            });
            //Fetch Notes
            $(document).on('click', '.ACTION_EDIT', function(e){
                e.preventDefault();
                var id = $(this).data('id');
                $("#note_id").val(id);
                var url = "{{ route('notes.show', ':id') }}";
                url = url.replace(':id', id);

                $('#editModal').modal('show');
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {
                        '_token' : document.head.querySelector("meta[name=csrf-token]").content,
                        'id': id
                    },
                    success: function (data) {
                        quill.root.innerHTML = data.notes;
                    }
                })
            });

            const quillView = new Quill('#bubble-editor-2', {
                theme: 'bubble',
                placeholder: 'Write Notes...',
            });

            // View Notes
            $(document).on('click', '.ACTION_VIEW', function (e) {
                e.preventDefault();
                let id = $(this).data('id');
                let url = "{{ route('notes.show', ':id') }}";
                url = url.replace(':id', id);
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {
                        '_token': document.head.querySelector("meta[name=csrf-token]").content,
                        'id': id
                    },
                    success: function (data) {
                        quillView.root.innerHTML = data.notes;
                        $('#viewModal').modal('show');
                    }
                })
            });
        });

    </script>
@endsection