@extends('layouts.master')
@section('title', __('clients.show_page_title'))
@section('content')
    <x-header title="{{ __('layout.clients') }}" subtitle="{{ __('layout.view') }}" icon="users"
              tab="{{ __('layout.view') }}" tab-icon="view"/>

    <div class="page-content-wrapper my-show-page">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-12 mb-4">
                    <div class="card card-flush rounded-8 mb-0">
                        <div class="card-body">
                            <div class="row gx-3">
                                <div class="col-xl-8 p-1 client-name-header">
                                    <h2 class="">{{ $client->name }} {{ $client->last_name }}</h2>
                                    <h4>{{ __('clients.show_p.system_id') }}: {{ $client->system_id }}</h4>
                                    <div class="btn {{$client->approved_status->getCssClass('btn-')}}" style="cursor: default;">
                                        {{$client->approved_status->getLangLabel()}}
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="w-100 pt-3 d-flex justify-content-between" style="text-align: start;">
                                        @if(auth()->user()->hasRole(\App\Enum\UserRoleEnum::AGENT))
                                            <button type="button" class="btn btn-success btn-lg NEW_CALL_BTN my-top-btn mr-5 text-truncate"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#callLogModal1">{{ __('clients.show_p.new_call_btn') }}
                                            </button>
                                        <a href="{{ route('zoom-appointments.create',['client'=>$client->id]) }}"
                                           class="btn btn-warning btn-lg my-top-btn text-truncate">{{ __('clients.show_p.book_expert_btn') }}</a>
                                        @endif
                                        <div class="dropdown" style="display: ruby;">
                                            <button class="btn btn-lg dropdown-toggle" type="button"
                                                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item"
                                                       href="{{ route('clients.edit',$client) }}">{{ __('layout.edit') }}</a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="row pt-4">
                                <div class="col-lg-8 dotted-bottom">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h2 class="mb-3 text-secondary fw-semibold">{{ __('clients.show_info_title') }}</h2>
                                        </div>
                                                                                <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.system_id') }} :</span>
                                            <span class="my-value">{{ $client->system_id }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.bande_number') }} :</span>
                                            <span class="my-value">{{ $client->bande_number }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.name') }} :</span>
                                            <span class="my-value">{{ $client->name }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.last_name') }} :</span>
                                            <span class="my-value">{{ $client->last_name }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.dob') }} :</span>
                                            <span class="my-value">{{ $client->date_of_birth?->format('Y-m-d') }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.gender') }} :</span>
                                            <span class="my-value">{{ $client->gender?->getLangLabel() }}</span>
                                        </div>

                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.status') }} :</span>
                                            <span class="my-value">{{ $client->status?->getLangLabel() }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.born_zone_id') }} :</span>
                                            <span class="my-value">{{ $client->bornZone->name }}</span>
                                        </div>

                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.age') }} :</span>
                                            <span class="my-value">{{ $client->getAge() }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.email') }} :</span>
                                            <span class="my-value">{{ $client->email }}</span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.phone') }} :</span>
                                            <span class="my-value">
                                                {{ $client->phone }}
                                                @if($client->phone) <br> @endif
                                                {{ $client->phone_2 }}
                                            </span>

                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.address') }} :</span>
                                            <span class="my-value">
                                                {{ $client->address_line_1 }} <br>
                                                {{ $client->address_line_2 }}
                                            </span>
                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.native_languages') }} :</span>
                                            <span class="my-value">

                                                @php
                                                    $i = 1;
                                                @endphp
                                                @foreach(\App\Enum\UserNativeLanguageEnum::cases() as $enum)
                                                    @if(in_array($enum->value,old('native_languages',optional($client)->native_languages??[])))
                                                        @if($i > 1)
                                                            ,
                                                        @endif
                                                        {{ $enum->getLangLabel() }}
                                                        @php
                                                            $i++;
                                                        @endphp
                                                    @endif
                                                @endforeach
                                                &nbsp;
                                            </span>
                                            <span class="my-label">{{ __('clients.fields.spoken_languages') }} :</span>
                                            <span class="my-value">
                                                @php
                                                    $i = 1;
                                                @endphp
                                                @foreach(\App\Enum\UserNativeLanguageEnum::cases() as $enum)
                                                    @if(in_array($enum->value,old('spoken_languages',optional($client)->spoken_languages??[])))
                                                        @if($i > 1)
                                                            ,
                                                        @endif
                                                        {{ $enum->getLangLabel() }}
                                                        @php
                                                            $i++;
                                                        @endphp
                                                    @endif
                                                @endforeach
                                                &nbsp;
                                            </span>
                                            <span class="my-label">{{ __('clients.fields.hobbies') }} :</span>
                                            <span class="my-value">
                                                @foreach(old('hobbies',optional($client)->hobbies??[]) as $hobby)
                                                    {{ $hobby }}
                                                    @if(!$loop->last)
                                                        ,
                                                    @endif
                                                @endforeach
                                                &nbsp;
                                            </span>
                                            <span class="my-label">{{ __('clients.fields.driver_license') }} :</span>
                                            <span class="my-value">
                                                @foreach(old('driver_license',optional($client)->driver_license??[]) as $dl)
                                                    {{ $dl }}
                                                    @if(!$loop->last)
                                                        ,
                                                    @endif
                                                @endforeach&nbsp;
                                            </span>

                                        </div>
                                        <div class="{{$userInfoCol}}">
                                            <span class="my-label">{{ __('clients.fields.city') }} :</span>
                                            <span class="my-value">{{ $client->city }}</span><br>
                                            <span class="my-label">{{ __('clients.fields.state') }} :</span>
                                            <span class="my-value">{{ $client->state?->getLangLabel() }}</span><br>
                                            <span class="my-label">{{ __('clients.fields.postal_code') }} :</span>
                                            <span class="my-value">{{ $client->postal_code }}</span><br>
                                            <span class="my-label">{{ __('clients.fields.country') }} :</span>
                                            <span class="my-value">{{ $client->country }}</span><br>
                                        </div>


                                    </div>
                                </div>
                                <div class="col-lg-4 text-center">
                                    <img src="{{ $client->userImageUrl() }}" class="img-fluid w-100">
                                </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>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mb-5">
                    <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>{{ __('layout.created_at') }}</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.id') }}</th>
                                            <th>{{ __('calls.fields.phone') }}</th>
                                            <th>{{ __('calls.fields.datetime') }}</th>
                                            <th>{{ __('calls.fields.direction') }}</th>
                                            <th>{{ __('calls.fields.status') }}</th>
                                            <th>{{ __('calls.fields.description') }}</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>


    <!-- Modal -->
    <div class="modal fade" id="callLogModal1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title"><i class="far fa-list-alt"></i> {{ __('clients.show_p.m.model_title') }}
                        (1/4)</h2>
                    {{--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--}}
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <i class="fas fa-exclamation-circle text-primary" style="font-size: 100px;"></i><br>
                            <h3 class="mt-2 dotted-bottom ">{!! __('clients.show_p.m.Avez-vous eu le contact') !!}
                                {{ $client->role->getLangLabel() }}</h3>
                            <h3>{{ $client->name }} {{ $client->last_name }}</h3>
                            <h3 style="font-weight: lighter">{{ $client->phone }}</h3>
                        </div>
                        <div class="col-md-12 text-center mt-1">
                            <button type="button"
                                    class="w-25 btn btn-primary btn-lg OPEN_MODAL_2">{{ __('clients.show_p.m.yes') }}</button>
                            <button type="button" class="w-25 btn btn-outline-primary btn-lg" data-bs-dismiss="modal">
                                {{ __('clients.show_p.m.no') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-lg fade" id="callLogModal2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title"><i class="far fa-list-alt"></i> {{ __('clients.show_p.m.model_title') }}
                        (2/4)</h2>
                    {{--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--}}
                </div>
                <div class="modal-body">
                    <div class="row pt-1 mb-1" style="border-top: 2px solid #000;border-bottom: 2px solid #000;">
                        <div class="col-2">
                            <img src="{{ $client->userImageUrl() }}" class="img-fluid img-rounded"
                                 style="height: 75px;">
                        </div>
                        <div class="col-5">
                            <h5>{{ $client->name }}<br>{{ $client->last_name }}<br><span
                                    style="font-weight: lighter">{{ $client->role->getLangLabel() }}</span>
                            </h5>

                        </div>
                        <div class="col-5">
                            <h3 class="mt-2 mb-0">{{ $client->system_id }}</h3>
                            <p class="mb-0">{{ __('clients.show_p.m.Customer reference') }}</p>
                        </div>
                    </div>
                    <form method="post" action="{{ route('calls.ajax-store') }}">
                        <input type="hidden" name="to_user_id" value="{{ $client->id }}">
                        <div class="row">
                            <x-form.select col="col-6"
                                           name="direction"
                                           label="{{ __('calls.fields.direction') }}"
                                           required="true"
                                           default-option-value="">
                                @foreach(\App\Enum\CallDirectionEnum::cases() as $status)
                                    <option value="{{ $status->value }}">{{ $status->getLangLabel() }}</option>
                                @endforeach
                            </x-form.select>
                            <x-form.select col="col-6"
                                           name="status"
                                           label="{{ __('calls.fields.status') }}"
                                           required="true"
                                           default-option-value="">
                                @foreach(\App\Enum\CallStatusEnum::cases() as $status)
                                    <option value="{{ $status->value }}">{{ $status->getLangLabel() }}</option>
                                @endforeach
                            </x-form.select>
                            <x-form.input
                                col="col-12"
                                name="datetime"
                                label="{!! __('calls.fields.datetime') !!}"
                                placeholder="{!! __('calls.fields.datetime') !!}"
                                required="true"/>
                            <x-form.textarea
                                col="col-12"
                                name="description"
                                label="{{ __('calls.fields.description') }}"
                                placeholder="{{ __('calls.fields.description') }}"
                                :value="old('description')"
                                required="true"/>
                            <div class="col-md-12 text-center mt-1">
                                <button type="submit" class="my-ladda ladda-button w-75 btn btn-primary btn-lg"
                                        dir="ltr" data-style="zoom-in">{{ __('clients.show_p.m.Continuer') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="callLogModal3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title"><i class="far fa-list-alt"></i> {{ __('clients.show_p.m.model_title') }}
                        (3/4)</h2>
                    {{--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--}}
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <i class="fas fa-phone-square-alt text-primary" style="font-size: 100px;"></i><br>
                            <h3 class="mt-2 dotted-bottom ">{!! __('clients.show_p.m.Programmer un rappel pour le contact profile')  !!}</h3>
                            <h3>{{ $client->name }} {{ $client->last_name }}</h3>
                            <h3 style="font-weight: lighter">{{ $client->phone }}</h3>
                        </div>
                        <div class="col-md-12 text-center mt-1">
                            <button type="button" class="w-75 btn btn-primary btn-lg OPEN_MODAL_4 mb-1">
                                <i class="far fa-calendar-alt"></i>
                                {{ __('clients.show_p.m.Oui_programmer rappel') }}
                            </button>
                            <button type="button" class="w-75 btn btn-outline-primary btn-lg" data-bs-dismiss="modal">
                                {{ __('clients.show_p.m.Non merci') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-lg fade" id="callLogModal4" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title"><i class="far fa-list-alt"></i> {{ __('clients.show_p.m.model_title') }} (4
                        /4)</h2>
                    {{--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>--}}
                </div>
                <div class="modal-body">
                    <div class="row pt-1 mb-1" style="border-top: 2px solid #000;border-bottom: 2px solid #000;">
                        <div class="col-2">
                            <img src="{{ $client->userImageUrl() }}" class="img-fluid img-rounded"
                                 style="height: 75px;">
                        </div>
                        <div class="col-6">
                            <h5>{{ $client->name }}<br>{{ $client->last_name }}<br><span
                                    style="font-weight: lighter">{{ __('clients.show_p.m.Customer') }}</span>
                            </h5>

                        </div>
                    </div>
                    <form method="post" action="{{ route('reminders.ajax-store') }}">
                        <input type="hidden" name="to_user_id" value="{{ $client->id }}">
                        <div class="row">
                            <x-form.input
                                col="col-12"
                                name="datetime"
                                label="{!! __('calls.fields.datetime') !!}"
                                placeholder="{!! __('calls.fields.datetime') !!}"
                                required="true"/>
                            <x-form.textarea
                                col="col-12"
                                name="description"
                                label="{{ __('calls.fields.description') }}"
                                placeholder="{{ __('calls.fields.description') }}"
                                :value="old('description')"
                                required="true"/>
                            <div class="col-md-12 text-center mt-1">
                                {{--<button type="button" class="w-75 btn btn-primary btn-lg OPEN_MODAL_3" >Continuer</button>--}}
                                {{--<button type="button" class="w-75 btn btn-primary btn-lg" data-bs-dismiss="modal">Terminer</button>--}}
                                <button type="submit" class="my-ladda ladda-button w-75 btn btn-primary btn-lg"
                                        dir="ltr" data-style="zoom-in">{{ __('clients.show_p.m.Terminer') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <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>

@endsection
@section('plugin_css')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/daterangepicker/daterangepicker.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>
        .client-name-header {
            border-top: 1px dashed #000;
            border-bottom: 1px dashed #000;
        }

        .dotted-bottom {
            border-bottom: 1px dashed #000;
            padding-bottom: 5px;
        }
        .my-top-btn{
            height: 60px !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            font-size: 30px !important;
            width: 100%;
        }
        .my-top-btn:first-child{
            margin-right: 10px;
        }
        /*.NEW_CALL_BTN{
            margin-right: 12px;
        }*/
        #dropdownMenuButton1{
            font-size: 45px !important;
            color: #000 !important;
        }
    </style>
@endsection
@section('plugins_js')
    <script src="{{ asset('assets/libs/quill/quill.min.js')}}"></script>
    <!-- Daterangepicker JS -->
    <script src="{{ asset('vendors/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('vendors/daterangepicker/daterangepicker.js') }}"></script>
    <script>
        window.addEventListener("load", (event) => {
            $("#status,#direction").select2();
        })
        $('input[name="datetime"]').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 5,
            minDate: "{{ now()->format('Y-m-d') }}",
            "cancelClass": "btn-secondary",
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            }
        });
    </script>
    <script>
        $(function () {
            $(document).on("submit", "#callLogModal2 form", function (event) {
                event.preventDefault();
                let ajax_ladda = Ladda.create(document.querySelector('.my-ladda'));
                ajax_ladda.start();
                let $this = $(this);
                setTimeout(function () {
                    let thisRoute = $this.attr('action');
                    var this_form = {};
                    var form_data = new FormData($this[0]);
                    submit_form(thisRoute, form_data, this_form, function (result) {
                        if (result.status == true) {
                            $('#callLogModal2').modal('hide');
                            setTimeout(function () {
                                $('#callLogModal3').modal('show');
                            }, 500);
                        } else {
//ajaxErrorAlert(result.msg);
                        }
                        ajax_ladda.stop();
                    });
                }, 100);

            });
            $(document).on("submit", "#callLogModal4 form", function (event) {
                event.preventDefault();
                let ajax_ladda = Ladda.create(document.querySelector('.my-ladda'));
                ajax_ladda.start();
                let $this = $(this);
                setTimeout(function () {
                    let thisRoute = $this.attr('action');
                    var this_form = {};
                    var form_data = new FormData($this[0]);
                    submit_form(thisRoute, form_data, this_form, function (result) {
                        if (result.status == true) {
                            $('#callLogModal4').modal('hide');
                            Swal.fire(result.msg, "", "success");
                        } else {
//ajaxErrorAlert(result.msg);
                        }
                        ajax_ladda.stop();
                    });
                }, 100);

            });
            $('.OPEN_MODAL_2').on('click', function () {
                $('#callLogModal1').modal('hide');
                setTimeout(function () {
                    $('#callLogModal2').modal('show');
                }, 500);
            });
            $('.OPEN_MODAL_3').on('click', function () {
                $('#callLogModal2').modal('hide');
                setTimeout(function () {
                    $('#callLogModal3').modal('show');
                }, 500);
            });
            $('.OPEN_MODAL_4').on('click', function () {
                $('#callLogModal3').modal('hide');
                setTimeout(function () {
                    $('#callLogModal4').modal('show');
                }, 500);
            });

            let ajaxRoute1 = "{{route("zoom-appointments.dt.role",['id'=>$client->id])}}";
            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'},
                /*{data: 'created_at', name: 'created_at'},*/

            ];
            initDatatables("#zoom_appointment", ajaxRoute1, columns1, [0, 'desc']);
            let ajaxRoute2 = "{{route("appointments-with-agent.dt.role",['id'=>$client->id])}}";
            let columns2 = [
                /*{data: 'actions', orderable: false, visible:false},*/
                {data: 'created_at', name: 'created_at', visible: 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.role",['id'=>$client->id])}}";
            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},
                // {data: 'notes', name: 'notes'},
                //{data: 'rating', name: 'rating'},
                /*{data: 'created_at', name: 'created_at'},*/
            ];

            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: 'id', name: 'id'},
                {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("#call_log", ajaxRoute4, columns4, [0, 'desc']);

            const quillView = new Quill('#bubble-editor-2', {
                theme: 'bubble',
                placeholder: 'Write 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