@extends('layouts.master')
@section('title', __('specialists.show_page_title'))
@section('content')
    <x-header title="{{ __('layout.specialists') }}" 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-6 p-1 client-name-header">
                                    <h2 class="">{{ $client->name }} {{ $client->last_name }}</h2>
                                    <h4>Fiche expert N°: {{ $client->generateSystemId() }}</h4>
                                    <div class="btn {{$client->approved_status->getCssClass('btn-')}}" style="cursor: default;">
                                        {{$client->approved_status->getLangLabel()}}
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="mt-3 w-100 d-flex justify-content-between bd-highlight mb-3">
                                        @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',['expert'=>$client->id]) }}"
                                           class="btn btn-warning btn-lg my-top-btn text-truncate">{{ __('clients.show_p.book_expert_btn') }}</a>
                                        @endif
                                        @if(auth()->user()->hasRoles([\App\Enum\UserRoleEnum::ADMIN, \App\Enum\UserRoleEnum::COORDINATOR, \App\Enum\UserRoleEnum::CHIEF_COORDINATOR]))
                                            <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('specialists.edit',$client) }}">{{ __('layout.edit') }}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        @endif
                                    </div>


                                </div>
                            </div>
                            <div class="row pt-4">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h2 class="mb-3 text-secondary fw-semibold">{{ __('specialists.show_info_title') }}</h2>
                                        </div>
                                        <div class="col-md-6">
                                            <span class="my-label">{{ __('specialists.fields.company_name') }} :</span>
                                            <span class="my-value">{{ $client->company_name }}</span>

                                            <span class="my-label">{{ __('specialists.fields.legal_form') }} :</span>
                                            <span class="my-value">{{ $client->legal_form }}</span>

                                            <span class="my-label">{{ __('specialists.fields.neq') }} :</span>
                                            <span class="my-value">{{ $client->neq }}</span>

                                            <span class="my-label">{{ __('specialists.fields.registration_date') }} :</span>
                                            <span class="my-value">{{ $client->registration_date }}</span>

                                            <span class="my-label">{{ __('specialists.fields.company_status') }} :</span>
                                            <span class="my-value">{{ $client->company_status?->getLangLabel() }}</span>

                                            <span class="my-label">{{ __('specialists.fields.activity_code') }} :</span>
                                            <span class="my-value">{{ $client->activity_code }}</span>

                                            <span class="my-label">{{ __('specialists.fields.activity_prof') }} :</span>
                                            <span class="my-value">{{ $client->activity_prof }}</span>

                                            <span class="my-label">{{ __('specialists.fields.indigenous_business_registered') }} :</span>
                                            <span class="my-value">{{ $client->indigenous_business_registered?->getLangLabel() }}</span>

                                            <span class="my-label">{{ __('specialists.fields.document_received') }} :</span>
                                            <span class="my-value">{{ $client->document_received?->getLangLabel() }}</span>

                                            <span class="my-label">{{ __('specialists.fields.speciality') }} :</span>
                                            <span class="my-value">
                                                @forelse($client->specialities as $speciality)
                                                    {{ $speciality->name }}
                                                    @if(!$loop->last)
                                                        ,
                                                    @endif
                                                @empty
                                                    &nbsp;
                                                @endforelse
                                            </span>

                                            <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">Adresse professionnelle :</span>
                                            <span class="my-value">
                                                {{ $client->address_line_1 }} <br>
                                                {{ $client->address_line_2 }}
                                            </span>

                                        </div>
                                        <div class="col-md-6">
                                            <span class="my-label">{{ __('specialists.fields.name') }} :</span>
                                            <span class="my-value">{{ $client->name }}</span>

                                            <span class="my-label">{{ __('specialists.fields.last_name') }} :</span>
                                            <span class="my-value">{{ $client->last_name }}</span>

                                            <span class="my-label">{{ __('clients.fields.dob') }} :</span>
                                            <span
                                                class="my-value">{{ optional($client->date_of_birth)->format('Y-m-d') }}</span>

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

                                            <span class="my-label">Statuts expert :</span>
                                            <span class="my-value">{{ $client->is_approved?'Approuve':'Non approuve' }}</span>

                                            <span class="my-label">{{ __('specialists.fields.gender') }} :</span>
                                            <span class="my-value">{{ $client->gender?->getLangLabel() }}</span>

                                            <span class="my-label">{{ __('specialists.fields.city') }} :</span>
                                            <span class="my-value">{{ $client->city }}</span>

                                            <span class="my-label">Communauté (De) :</span>
                                            <span class="my-value">{{ $client->bornZone?->name }}</span>

                                            <span class="my-label">{{ __('specialists.fields.email') }} :</span>
                                            <span class="my-value">{{ $client->email }}</span>

                                            <span class="my-label">{{ __('specialists.fields.state') }} :</span>
                                            <span class="my-value">{{ optional($client->state)->getLangLabel() }}</span>
                                            <span class="my-label">{{ __('specialists.fields.postal_code') }} :</span>
                                            <span class="my-value">{{ $client->postal_code }}</span>
                                            <span class="my-label">{{ __('specialists.fields.country') }} :</span>
                                            <span class="my-value">{{ $client->country }}</span>

                                            <span class="my-label">{{ __('specialists.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">{{ __('specialists.fields.additional_information') }} :</span>
                                            <span class="my-value">{{ $client->additional_information }}</span>




                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="row pt-4">
                                <div class="col-md-12 col-lg-6">
                                    <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">
                                                    @if($client->user)
                                                        {{ optional($client->user)->name. ' '.optional($client->user)->last_name }}
                                                        (Votre agent de suivi)<br>
                                                        Courriel: {{ optional($client->user)->email }}<br>
                                                        Téléphone: {{ optional($client->user)->phone }}
                                                    @else
                                                        <div class="text-center text-danger">
                                                            No Agent Assigned
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-lg-6">
                                    <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">
                                                    Adresse CSEF de référence:<br>
                                                    {{ $client->zone->name }}<br>
                                                    {{ $client->zone->address }},<br>
                                                    {{ $client->zone->locality }} ({{ $client->zone->province }}
                                                    ) {{ $client->postal_code }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="row pt-4 mb-5">
                                <div class="col-12 mb-4">
                                    <h3 class="mb-1 text-secondary fw-semibold text-center">+ Chiffres de l'expert</h3>
                                </div>

                                @foreach($cards as $card)
                                    <div class="col-lg-6 col-xl-3">
                                        <div class="my-dark-card">
                                            <h1 class="text-center text-truncate">{!!  $card['value']  !!}</h1>
                                            <h4 class="text-center text-truncate">{!!  $card['text']  !!}</h4>
                                        </div>
                                    </div>
                                @endforeach

                            </div>

                            <!-- FIRST -> Content + Image -->
                            <div class="row first-content-image">
                                <div class="col-md-8 rectangle-one-content">
                                    <h3>{{__('zoom-meeting.page_label.expert_biography')}}</h3>
                                    <p class="text-justify">
                                        {{ $client->expert_biography }}
                                    </p>
                                    <br>
                                    <p>
                                        <strong>{{ $client->name.' '.$client->last_name }}</strong>
                                        - {{ $client->role->getLangLabel() }}
                                    </p>
                                </div>
                                <div class="col-md-4 rectangle-one-image">
                                    <img src="{{ $client->userImageUrl() }}" class="img img-responsive w-100">
                                </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> Call Log (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 ">Avez-vous eu <br> 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">Yes</button>
                            <button type="button" class="w-25 btn btn-outline-primary btn-lg" data-bs-dismiss="modal">
                                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> Call Log (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">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">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> Call Log (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 ">Programmer <br>un rappel pour le<br> 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>
                                Oui, programmer rappel
                            </button>
                            <button type="button" class="w-75 btn btn-outline-primary btn-lg" data-bs-dismiss="modal">
                                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> Call Log (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">{{ $client->role->getLangLabel() }}</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">Terminer
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('plugin_css')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/daterangepicker/daterangepicker.css') }}"/>
    <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;
        }
        .my-dark-card{
            background-color: #342619;
            border-radius: 10px;
            padding: 20px;
            margin: 5px;
        }
        .my-dark-card h1,.my-dark-card h4{
            color: #fff !important;
        }
        .my-dark-card h1{
            font-size: 60px;
        }
        .my-dark-card h4{
            font-size: 30px;
        }
        .my-dark-card h1 small{
            font-size: 30px;
        }
        #dropdownMenuButton1{
            font-size: 45px !important;
            color: #000 !important;
        }
    </style>
@endsection
@section('plugins_js')
    <!-- 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,
            "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);
            });
        });
    </script>
@endsection