@extends('layouts.admin')

@section('main-content')

@php
    $survey_count = $survey_count + 1;

    $phone = $selected_task->process->contact_phone ? $selected_task->process->contact_phone : $selected_task->process->client->phone ?? '';
    $phone = substr_replace($phone, ' ', 3, 0);
    $phone = substr_replace($phone, ' ', 6, 0);
    $phone = substr_replace($phone, ' ', 10, 0);
    
    $next_survey_number = App\Models\Survey::getNextSurveyNumber(); // 'FELM/'.date('Y').'/'.$survey_count
@endphp

<div class="card">
    <div class="card-header">
        Felmérések szervezése
    </div>
    <div class="card-body">
        {{-- Selectable tasks --}}
        <div class="col-12 mb-3 px-0">
            <div class="accordion accordion-flush" id="accordion">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-heading">
                        <button class="accordion-button @if(!$selected_task) collapsed @endif" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse" aria-expanded="false" aria-controls="flush-collapse">
                            <h5 class="mb-0">Feladatok</h5>
                        </button>
                    </h2>
                    <div id="flush-collapse" class="accordion-collapse collapse @if(!$selected_task) show @endif" aria-labelledby="flush-heading" data-bs-parent="#accordion">
                        @foreach($tasks->chunk(6) as $chunk)
                            <div class="row mx-0 py-2">
                                @foreach($chunk as $task)
                                    <div class="col-6 col-md-4 col-lg-2 p-1">
                                        <div class="card text-white  @if($selected_task && $selected_task->id == $task->id) bg-primary @else bg-secondary @endif mb-3" style="max-width: 18rem; min-height: 100%; max-height: 12rem; cursor: pointer;" onclick="window.location='{{route('surveys.organize', ['id' => $task->id])}}'">
                                            {{-- <div class="card-header">Header</div> --}}
                                            <div class="card-body text-center">
                                            {{-- <h5 class="card-title">{{ $task->process->client->full_name }}</h5> --}}
                                            <h5 class="card-title">{{ $task->process->contact_name ? $task->process->contact_name : $task->process->client->full_name }}</h5>
                                            <p class="card-text">{{ $task->process->address->full_address }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- Data & Form --}}
            @if ($selected_task)
            <div class="col-12 col-xl-6 mb-2">
                <p class="h5">{{ $selected_task->offer->offer_number ?? null }} {{ $selected_task->process->client->company_name ? $selected_task->process->client->company_name.' -' : '' }} {{ $selected_task->process->project_name ? $selected_task->process->project_name.',' : '' }} {{  $selected_task->process->contact_name ? $selected_task->process->contact_name : $selected_task->process->client->full_name }}</p>
                <form id="survey_{{ $selected_task->id }}_form" action="{{ route('surveys.organize_date') }}" method="POST">
                    @csrf
                    {{-- <div>Ügyfél neve: {{ $selected_task->process->client->full_name }}</div> --}}
                    <div class="mb-2">{{ $selected_task->process->address->full_address }}</div>
                    {{-- <div class="mb-2">{{ $selected_task->process->client->phone }}</div> --}}
                    <div class="mb-2">@if($selected_task->process->contact_phone || $selected_task->process->client->phone) <a href="tel:{{ $selected_task->process->contact_phone ? $selected_task->process->contact_phone : $selected_task->process->client->phone ?? '' }}">{{ $phone }}</a>@endif<br/></div>
                    <div class="mb-2">
                        {{$selected_task->description ?? ''}}

                        {{-- {!! $selected_task->calEvent('main_calendar', 'fullcalendar')['title'] ?? '' !!} --}}
                    </div>

                    <div class="mb-2">
                        {!! ($selected_task->comments()->get()->map(function ($comment) { return $comment->comment; })->implode('. ')) ? $selected_task->comments()->get()->map(function ($comment) { return $comment->comment; })->implode('. ') : ''; !!}
                    </div>
                    
                    <div class="mb-2">
                        <div>{{$selected_task->offer->work_description ?? ''}}</div>
                        <div>{{$selected_task->order_description ?? ''}}</div>
                        {{-- App\Models\SaleItem::find(array_keys($selected_task->offer->products))->map(function($saleItem){ return $saleItem->short_name; })->implode(', ') --}}
                        {{-- App\Models\SaleItem::find(array_keys($selected_task->offer->services))->map(function($saleItem){ return $saleItem->short_name; })->implode(', ') --}}
                    </div>

                    {{-- <div class="mb-2">
                        @php
                            $documents = collect($selected_task->offer->getDocuments())->whereIn('type', ['survey',  'plan', 'location', 'technical_description'])->map(function ($document) { return $document->typeLang . ': <a href="'.$document->fileOpenUrl.'" target="_blank">'.$document->name.'</a>'; })->implode(' <br> ');
                        @endphp

                        {!! ($documents) ?? '' !!}
                    </div> --}}
                    <div class="mb-2">
                        @php
                            $documents = collect($selected_task->offer->getDocuments())->whereIn('type', ['survey', 'plan', 'location', 'technical_description']);
                            $sortedDocuments = $documents->sortBy(function ($document) {
                                $types = ['survey', 'location', 'plan', 'technical_description'];
                                $type = in_array($document->type, $types) ? array_search($document->type, $types) : -1;
                                return $type;
                            })->map(function ($document) {
                                return $document->typeLang . ': <a href="' . $document->fileOpenUrl . '" target="_blank">' . $document->name . '</a>';
                            })->implode(' <br> ');
                        @endphp
                    
                        {!! ($sortedDocuments) ?? '' !!}
                    </div>
                    
                    <div class="mb-3 comment-box mt-1">
                        @include('comments.panel', ['comment_target' => $selected_task])
                    </div>


                    <div class="form-group">
                        <label for="survey_number">{!! __('Felmérés száma') !!}</label>
                        <input type="text" name="survey_number" class="form-control w-100 @error('survey_number') is-invalid @enderror" value="{{ ($selected_task->survey_number) ? $selected_task->survey_number : $next_survey_number }}" onclick="$(this).focus()">
                    </div>

                    <div>
                        <label for="status">{!! __('Státusz') !!}</label>
                        <select class="form-select mt-1 set_date_to_null @error('status') is-invalid @enderror" id="status" name="status">
                            @foreach (App\Models\Survey::statuses() as $key => $value)
                            @if($key == 'delayed')
                                @continue
                            @endif
                            <option @if($key == 'completed') @cannot('survey-set_completed') disabled @endcannot @endif value="{{$key}}" @if(isset($selected_task->status) && $key == $selected_task->status) selected @endif>{!! __($value) !!}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="start_date">{!! __('Kezdés időpontja') !!}</label>
                        <input type="text" name="start_date" class="form-control w-100 input_start_date datetimepicker @error('start_date') is-invalid @enderror" onchange="check_date('#new_{{ $selected_task->id }}');" id="task_{{ $selected_task->id }}_start_date" data-type="start_date" data-taskid="{{ $selected_task->id }}" value="{{ ($selected_task->start_date) ? date('Y-m-d H:i', strtotime($selected_task->start_date)) : null }}">
                        @error('start_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="end_date">{!! __('Befejezés időpontja') !!}</label>
                        <input type="text" name="end_date" class="form-control w-100 input_end_date datetimepicker @error('end_date') is-invalid @enderror" onchange="check_date('#new_{{ $selected_task->id }}')" id="task_{{ $selected_task->id }}_end_date" data-type="end_date" data-taskid="{{ $selected_task->id }}" value="{{ ($selected_task->start_date) ? date('Y-m-d H:i', strtotime($selected_task->end_date)) : null }}">
                        @error('end_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <input type="hidden" name="id" value="{{ $selected_task->id }}">
                    <input type="hidden" name="need_to_be_reorganised" class="need_to_be_reorganised"/> {{-- Újra szervezésre került (dátum) --}}
                    <button class="btn btn-primary btn-sm submit_button mt-2" type="button" onclick="organize_date('#survey_{{ $selected_task->id }}_form')">mentés</button>
                </form>
            </div>
            @endif

            {{-- Calendar --}}
            <div id='calendar' class="@if($selected_task) col-12 col-xl-6 @else col-12 @endif mb-3"></div>


            {{-- Documents --}}
            @if ($selected_task)
            @php
                // $disabled = false; // !in_array($offer->status, ['offer_preparing', null]);
                $document_types = []; // 'offer_mail', 'location', 'technical_description', 'email', 'warranty' // 'control'
                $document_model = 'Offer';
                $document_id    = $selected_task->offer->id;
                $offer = $selected_task->offer;
            @endphp

            {{-- Jogosultságok alapján a dokumentum típusok leküldése --}}
            @can('show-document-survey') @php array_push($document_types, 'survey') @endphp @endcan
            @can('show-document-plan') @php array_push($document_types, 'plan') @endphp @endcan
            @can('show-document-location') @php array_push($document_types, 'location') @endphp @endcan
            @can('show-document-technical_description') @php array_push($document_types, 'technical_description') @endphp @endcan

            <div class="col-12 col-xl-6 mb-3">
                <p class="h5">Dokumentumok</p>
                @include('process.tables.documents', ['documents' => $selected_task->offer->getDocuments(), 'types' => $document_types, 'model' => $document_model, 'id' => $document_id, 'table_id' => 'dt_survey_organize', 'modal_type' => 'survey_organize'])
            </div>
            @endif
        </div>
    </div>
</div>
@endsection



@push('scripts')
<script>
$(function() {
    $('.datetimepicker').datetimepicker({
        showSecond: true,
        format:'Y-m-d H:i',
        step:30,
        minDate: 0,
        dayOfWeekStart: 1,
    }).attr('readonly', 'readonly').on("change", function() {
        // Befejezés dátumának beállítása automatikusan (Kezdés időpontja + 1 óra)
        if($(this).data('type') == 'start_date' && $(this).val() != null)
        {
            var start_date = $(this).val();
            if(start_date) {
                window.selectOrganizedOption();
                start_date = new Date(start_date);

                var month = ('0' + (start_date.getMonth()+1)).slice(-2);
                var year = start_date.getFullYear();
                var day = ('0'+start_date.getDate()).slice(-2);
                var hour = start_date.getHours()+1;
                var min = ('0'+start_date.getMinutes()).slice(-2);

                end_date = year+'-'+month+'-'+day+' '+hour+':'+min; // +':'+sec;
                end_date_input = $('#task_'+$(this).data('taskid')+'_end_date');
                end_date_input.val(end_date);
            }
        }
    });
});

window.check_date = function(task_id) {
    var task = $(task_id);

    if(task.find('.input_start_date').val() != '' &&  task.find('.input_end_date').val() != '')
       task.find('.submit_button').removeClass('d-none');
}

window.get_date_time = function(dateObj) {
    var dateObj = new Date(dateObj);
    var date = $.datepicker.formatDate('yy-m-d', dateObj);
    var time = dateObj.getHours()+":"+dateObj.getMinutes();
    var get_h_null = (dateObj.getHours() < 10) ? 0 : '';
    var get_s_null = (dateObj.getMinutes() == 0) ? 0 : '';

    return date + ' ' + get_h_null + time + get_s_null;
}

window.selectOrganizedOption = function() {
    var selectElement = document.getElementById('status');
    var optionElements = selectElement.options;
    var currentSelectedValue = selectElement.value;
  
    if (currentSelectedValue !== 'completed') {
        for (var i = 0; i < optionElements.length; i++) {
            if (optionElements[i].value === 'organized') {
                selectElement.selectedIndex = i;
                break;
            }
        }
    }
}

// FullCalendar
document.addEventListener('DOMContentLoaded', function() {

    function getInitialView() {
        if (window.innerWidth >= 768) {
            return 'timeGridWeek';
        } else if (window.innerWidth <= 768) {
            return 'listMonth';
        } else {
            return 'dayGridMonth';
        }
    }

    var calendarEl = document.getElementById('calendar');

    window.calendar = new FullCalendar.Calendar(calendarEl, {
        // timeZone: 'UTC',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,list'
        },
        views: {
            list: {
                visibleRange: function(currentDate) {
                    // Generate a new date for manipulating in the next step
                    var startDate = new Date(currentDate.valueOf());
                    var endDate = new Date(currentDate.valueOf());
                    // Adjust the start & end dates, respectively
                    startDate.setDate(startDate.getDate()); // Current day
                    endDate.setDate(endDate.getDate() + 31); // 31 days into the future

                    return { start: startDate, end: endDate };
                }
            }
        },
        initialView: 'timeGridWeek',
        windowResize: function (view) {
            var newView = getInitialView();
            calendar.changeView(newView);
        },
        themeSystem: 'bootstrap5',
        navLinks: true, // can click day/week names to navigate views
        businessHours: true, // display business hours
        editable: false,
        selectable: true,
        droppable: false,
        locale: 'hu',
        firstDay: 1,
        initialDate: '{{ date("Y-m-d") }}',
        events: {!! $events !!},
        eventClick: function(info) {
            info.jsEvent.preventDefault(); // don't let the browser navigate
            // console.log(info.event.id);
            var url = "{{ route('surveys.organize', [':slug']) }}";
            url = url.replace(':slug', info.event.id);
            window.location = url;
        },
    });

    calendar.render();
});


  </script>
@endpush