@extends('layouts.app')

@section('form-title') {{ __('Article Task') }} @endsection
@section('form-sub-title') {{ __('Details') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('articles') }}">{{ __('Articles') }}</a> </li> 
<li class="breadcrumb-item">
    @if(!empty($task->client))
    <a href="{{ route('organisations.show', $task->client->uuid) }}">{{ $task->client->name }}</a> / 
    @endif       
    @if(!empty($task->project))
    <a href="{{ route('projects.show', $task->project->uuid) }}">{{ $task->project->title }}</a> / 
    @endif
    {{ $task->title }} 
</li> 
@endsection

@section('content')
@if(!empty($task->project))
    @include('partials.modals.project_note')
@endif

<style>
    #show-map {
    height: 200px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
    }
</style>

<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page body start -->
            <div class="page-body">
                <div class="row">
                    <!-- start left section -->
                    <div class="col-sm-6">
                        <div class="row">
                            @if(!empty($task->client) && !empty($task->project))
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-block">
                                        @include('tasks.message_buttons', ['reply' => $reply, 'parent_message_id' => $parent_message_id])
                                    </div>
                                </div>
                            </div>
                            @endif

                            @include('tasks.messages', ['task' => $task])
                            
                        </div>
                    </div>
                    <!-- end left section -->
                    <!-- start right section -->
                    <div class="col-sm-6">
                        <div class="row">
                            @if($task->type === 'article')
                            @include('articles.article')
                            @endif

                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                    <h5>{{ __('Project & task information') }}</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Client') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->client))
                                                    <a class="a-blue" href="{{ route('organisations.show', $task->client->uuid) }}">{{ $task->client->name }}</a>
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Project') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->project))
                                                    <a class="a-blue" href="{{ route('projects.show', $task->project->uuid) }}">{{ $task->project->title }}</a>
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Project status') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($project))
                                                    {{ $project->projectStatus->translated_title }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        @if(!empty($task->project->projectOwner))
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Project owner') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->project))
                                                    <a class="a-blue" href="{{ route('users.show', $task->project->projectOwner->uuid) }}"> {{ $task->project->projectOwner->name }} </a>
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        @endif
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Project number') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->client) && !empty($task->project))
                                                    {{ $task->client->id }}-{{ $task->project->id }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Project deadline') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->project))
                                                    {{ $task->project->deadline }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Project created') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->project))
                                                    {{ $task->project->created_at }}
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Task title') }}</label>
                                            <div class="col-sm-8">
                                                <span><a class="a-blue" href="{{ route('tasks.show', $task->uuid) }}">{{ $task->title }}</a></span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Task owner') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->taskOwner))
                                                    <a class="a-blue" class="a-blue" href="{{ route('users.show', $task->taskOwner->uuid) }}">{{ $task->taskOwner->name }}</a>
                                                    @endif
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Task status') }}</label>
                                            <div class="col-sm-8">
                                                <span>{{ $task->display_status }}</span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Task number') }}</label>
                                            <div class="col-sm-8">
                                                <span>
                                                    @if(!empty($task->client))
                                                    {{ $task->client->id }}-
                                                    @endif
                                                    @if(!empty($task->project))
                                                    {{ $task->project->id }}-
                                                    @endif
                                                    {{ $task->id }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Task deadline') }}</label>
                                            <div class="col-sm-8">
                                                <span>{{ $task->display_deadline }}</span>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label class="col-sm-4 fw-bold">{{ __('Task created') }}</label>
                                            <div class="col-sm-8">
                                                <span>{{ $task->created_at }}</span>
                                            </div>
                                        </div>
                                        @if (canViewUpdate('tasks-edit'))
                                        <div class="row">
                                            <label class=" col-sm-4">
                                                <a href="{{ route('tasks.edit', $task->uuid) }}" class="btn btn-primary m-b-0">{{ __('Edit') }}</a>
                                            </label>
                                            <div class="col-sm-6">
                                                &nbsp;
                                            </div>
                                        </div>  
                                        @endif
                                    </div>
                                </div>
                            </div>

                            @if(!empty($task->project))
                                @if (canViewUpdate('note'))
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header">
                                        <h5>{{ __('Notes') }}</h5>
                                        </div>
                                        <div class="card-block">
                                            <div class="row mb-3">
                                                <div class="col-sm-12">
                                                <span>{!! $task->project->note !!}</span>
                                                </div>
                                            </div>
                                            
                                            <div class="row">
                                                <label class=" col-sm-6">
                                                <button type="button" class="btn btn-primary m-b-0" data-bs-toggle="modal" data-bs-target="#project_note_modal">{{ __('Edit') }}</button>
                                                </label>
                                                <div class="col-sm-6">
                                                &nbsp;
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endif

                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header rounded-bottom" style="background-color: #37474f; color: #fff; padding:10px 10px 10px 20px !important;">
                                        {{ __('Active projects') }}
                                    </div>
                                    <div class="card-block">
                                        <div class="row mb-3">
                                            <div class="col-sm-12" id="active_projects">
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            

                            @if(!empty($project) && !empty($project->endUser))
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>{{ __('End User') }}</h5>
                                    </div>
                                    <div class="card-block">
                                        @if(!empty($project->endUser))
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Name') }}</label>
                                            <div class="col-sm-8">
                                                <span>{{ $project->endUser->name }}</span>
                                            </div>
                                        </div>
                                        @endif
                                        @if(!empty($project->endUser->organisation))
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Organisation') }}</label>
                                            <div class="col-sm-8">
                                                <span>{{ $project->endUser->organisation->name }}</span>
                                            </div>
                                        </div>
                                        @endif
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('House number') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->house_number }}
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Zip code') }} </label>
                                            <div class="col-sm-8">
                                              <span class="messages">
                                                {{ $project->endUser->zip_code }}
                                              </span>
                                            </div>
                                        </div>
          
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Google Maps address') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->gml }}
                                                </span>
                                            </div>
                                        </div>
          
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Street') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->street }}
                                                </span>
                                            </div>
                                        </div>
          
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('City') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    <span>{{ $project->endUser->city }}</span>
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Country') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    <span>{{ $project->endUser->country->country_name }}</span>
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Mobile number') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    <a class="a-blue" href="tel:{{ $project->endUser->dial_mobile_number }}"> {{ $project->endUser->dial_mobile_number }}</a>
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Phone number') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    <a class="a-blue" href="tel:{{ $project->endUser->dial_phone_number }}"> {{ $project->endUser->dial_phone_number }}</a>
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Email address') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    <a class="a-blue" href="mailto:{{ $project->endUser->email }}"> {{ $project->endUser->email }}</a>
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class="col-sm-4 fw-bold">{{ __('Notification via email') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->display_notification_type }}
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class=" col-sm-4 fw-bold">{{ __('Job Title') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->job_title }}
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class=" col-sm-4 fw-bold">{{ __('Status') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->display_status }}
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class=" col-sm-4 fw-bold">{{ __('Role') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->displayRole() }}
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class=" col-sm-4 fw-bold">{{ __('Application Language') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    {{ $project->endUser->display_language }}
                                                </span>
                                            </div>
                                        </div>
                      
                                        <div class="mb-3 row">
                                            <label class=" col-sm-4 fw-bold">{{ __('Photo') }} </label>
                                            <div class="col-sm-8">
                                                <span class="messages">
                                                    <img src="{{ asset('storage/avatars/'.$project->endUser->avatar) }}" alt="user profile image">
                                                </span>
                                            </div>
                                        </div>

                                        <div class="mb-3 row">
                                            @if(allowedToUpdate($project->endUser->id))
                                            <div class="col-sm-4">
                                              <a href="{{ route('users.edit', $project->endUser->uuid) }}" class="btn btn-primary m-b-0">{{ __('Edit') }}</a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>{{ __('End user / project location') }}</h5>
                                    </div>
                                    <div class="card-block">
                                        @if(!empty($project->endUser->latitude) && !empty($project->endUser->longitude))
                                            <div id="show-map" class="set-map"></div>
                                            <a href="https://www.google.com/maps/search/?api=1&query={{ $project->endUser->latitude }},{{ $project->endUser->longitude }}" target="__blank" class="btn btn-primary mt-4">{{ __('More info') }}</a>
                                        @else
                                            <p>{{ __('No map data available. Please update end user map location') }}</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                    <!-- end right section -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('child-scripts')

<script>
    $(document).ready(function() {
        let client_id = {{ $task->client ? $task->client->id : 0 }}
        fetch_data(1, client_id);
        initFooTable();

        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            fetch_data(page, client_id);
        });

        function fetch_data(page, client){
            $.ajax({
                url: "{{ route('active.projects') }}",
                data: {page: page, client: client},
                success: function(data){
                    $('#active_projects').html(data);
                    initFooTable();
                }
            });
        }

        function initFooTable(){
            $('.data-table').footable({
                "paging": {
                    "enabled": false,
                },
                "sorting": {
                    "enabled": true
                }
            });
        }

        document.addEventListener('focusin', function (e) { 
            if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) { 
                e.stopImmediatePropagation(); 
            } 
        });
        // tinymce.init({
        //     selector: ".editor",
        //     height: 530,
        //     plugins: [
        //         "advlist autolink lists link image charmap print preview anchor",
        //         "searchreplace visualblocks code fullscreen",
        //         "insertdatetime media table paste"
        //     ],
        //     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
        // });
        functionInitilizeCkEditor('editor', 500);
    });
</script>

@if(getAuthUser()->can('delete article tasks of own organization'))
<script>
    $(document).ready(function () {
        $('.article-delete').on('click', function(){
        var $button = $(this);
        var task_id = $button.data('task-id');
        
        swal({
            title: "Are you sure?",
            text: "",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false
        },
        function(isConfirmed){
            if(isConfirmed) {
            $.ajax({
                url: "{{ route('tasks.destroy', ':id') }}".replace(':id', task_id),
                type: 'POST',
                data: {_method:'DELETE', _token: '{{ csrf_token() }}'},
                success: function(data){
                    swal({
                        title: "Deleted!",
                        text: "Your article has been deleted.",
                        type: "success",
                        timer: 1500,
                        showConfirmButton: false
                    });
                    
                    $('#article-container'+task_id).fadeOut(function(){
                    $('#article-container'+task_id).remove();
                    });
                }
            });
            }
        });
    });
  });
</script>
@endif

@if(!empty($project->endUser->latitude) && !empty($project->endUser->longitude))
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('furnit.google_map_key') }}&callback=initMap&libraries=&v=weekly&channel=2" async></script>
<script>
        // Initialize and add the map
    function initMap() {
        // The location of Uluru
        const uluru = { lat: {{ $project->endUser->latitude }}, lng: {{ $project->endUser->longitude }} };
        // The map, centered at Uluru
        const map = new google.maps.Map(document.getElementById("show-map"), {
        zoom: 20,
        center: uluru,
        });
        // The marker, positioned at Uluru
        const marker = new google.maps.Marker({
        position: uluru,
        map: map,
        });
    }
</script>
@endif
@endpush