@extends('layouts.admin')

@section('main-content')

@php
    $phone = $selected_task->process->client->phone ?? '';
    $phone = substr_replace($phone, ' ', 3, 0);
    $phone = substr_replace($phone, ' ', 6, 0);
    $phone = substr_replace($phone, ' ', 10, 0);
@endphp

<div class="card">
    <div class="card-header">
        Munkák szervezése
    </div>
    <div class="card-body">

        {{-- Szervezendő feladatok --}}
        <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('works.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>
                                            <p class="card-text">{{ $task->process->address->full_address }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            {{-- Adatok & Form --}}
            @if ($selected_task)
            <div class="col-12 col-xl-6 mb-2">
                <p class="h5">{{ $selected_task->offer->offer_number ?? $selected_task->offer->id }} {{ $selected_task->process->client->full_name }}</p>
                <form action="{{ route('works.organize_date') }}" method="POST" id="task_form_{{ $selected_task->id }}">
                    @csrf
                    <div class="mb-2">{{ $selected_task->process->address->full_address }}</div>
                    <div class="mb-2">@if($selected_task->process->client->phone) <a href="tel:{{ $selected_task->process->client->phone }}">{{ $phone }}</a>@endif<br/></div>
                    <div class="mb-2">
                        {{$selected_task->description ?? ''}} 

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

                        @if(App\Models\Offer::find($selected_task->offer_id)->final_payment_method == 'cash_locally')
                        <br><i>Fennmaradó összeget a helyszínen fizetik ({{ number_format($selected_task->offer->remaining_amount ?? 0, 0, '', ' ').' Ft.'}})</i>
                        @endif
                    </div>

                    <div class="mb-2">
                        {!! ($selected_task->offer->supplier_offers->unique('id')->implode('stock', ', ')) ? 'Polc: ' . $selected_task->offer->supplier_offers->unique('id')->implode('stock', ', ') : '' !!}
                    </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">
                        {{ 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 '<a href="'.$document->fileDownloadUrl.'" target="_blank">'.$document->name.'</a>'; })->implode(' <br> ');
                        @endphp

                        {!! ($documents) ?? '' !!}
                    </div>

                    <div class="mb-3 comment-box mt-1">
                        @include('comments.panel', ['comment_target' => $selected_task])
                    </div>

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

                    <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 }}">
                    <button class="btn btn-primary btn-sm submit_button mt-2" type="button" onclick="organize_date('#task_form_{{ $selected_task->id }}')">mentés</button>
                </form>
            </div>
            @endif

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


            {{-- Dokumentumok --}}
            @if ($selected_task)
            @php
                $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_work_organize'])
            </div>

            {{-- Járművek szerkesztése --}}
            <div class="col-12 col-xl-6 mb-3">
                <p class="h5">Járművek szerkesztése</p>
                <form method="POST" id="task_vehicle_form_{{ $selected_task->id }}">
                    @csrf
                <div class="row">
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label for="vehicles">{!! __('Összes jármű') !!}</label>
                            <select id="vehicles" class="form-select" size="4" aria-label="select" onchange="select_move('#vehicles', '#work_vehicles')">
                                @foreach (App\Models\Vehicle::all()->keyBy('id') as $key => $value)
                                    @if (!isset($selected_task->vehicles()->get()->keyBy('id')[$key]))
                                    <option value="{{$key}}">{{$value['plate_number']}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label for="work_vehicles">{!! __('Munkához rendelt járművek') !!}</label>
                            <select id="work_vehicles" name="work_vehicles[]" class="form-select" size="4" aria-label="select" onchange="select_move('#work_vehicles', '#vehicles');" data-save_work_vehicles="true" data-work_id="{{ $selected_task->id }}">
                                @foreach ($selected_task->vehicles()->get()->keyBy('id') as $work_vehicle)
                                    <option value="{{$work_vehicle['id']}}">{{$work_vehicle['plate_number']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                </form>

                {{-- Jármű kiválasztása szerkesztésre --}}
                <div id="work_vehicle_select">
                    @include('work.work_vehicle_select', ['work' => $selected_task])
                </div>

                {{-- Dolgozók szerkesztése a járműben --}}
                <div id="vehicle_work_workers_form"></div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection


@push('scripts')
<script>
$(function() {
    $('.datetimepicker').datetimepicker({
        showSecond: true,
        format:'Y-m-d H:i',
        step:30,
        minDate: 0,
        minTime:'7:00',
        maxTime:'20:00',
        defaultTime:'08:00',
        onChangeDateTime:function(dp,$input){
            if($input.data('type') == 'start_date')
            {
            var start_date = $input.val();
            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);

            if(start_date.getHours() < 17) {
                var hour = 17;//start_date.getHours()+9;
                var min = '00';
            } else {
                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_'+$input.data('taskid')+'_end_date');

            // if (end_date_input.val() == '' ) {
                end_date_input.val(end_date);
            // }
            }
        }
    }).attr('readonly', 'readonly')

    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;
    }
});

function check_date(block)
{
    if($(block).find('.input_start_date').val() != '' &&  $(block).find('.input_end_date').val())
       $(block).find('.submit_button').removeClass('d-none');
}
// 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');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        // timeZone: 'UTC',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        initialView: 'timeGridWeek',
        windowResize: function (view) {
            var newView = getInitialView();
            calendar.changeView(newView);
        },
        themeSystem: 'bootstrap5',
        navLinks: true, // can click day/week names to navigate views
        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('works.organize', [':slug']) }}";
            url = url.replace(':slug', info.event.id);
            window.location = url;
        },
    });

    calendar.render();
});
  </script>
@endpush