@extends('layouts.admin')

@section('main-content')

@php
    $work = (isset($id) && $id) ? App\Models\Work::where('id', $id)->first() : null;
    $documents = new App\Models\Document;
    $document_types = ['calendar_task'];
    $document_model = 'Work';    
    $document_id = $work ? $work->id : null;
    $documents = $work ? $documents->where('target_type', 'App\Models\\'.$document_model)->where('target_id', $document_id)->get() : null;
@endphp

<div class="card">
    <div class="card-header">
        Feladat szervezése
    </div>
    <div class="card-body">

        <div class="row">
            {{-- Adatok & Form --}}

        <div class="col-12 col-xl-6 mb-2">
            <form action="@if($work) {{ route('tasks.update', [$work->id]) }} @else {{ route('tasks.store') }} @endif" method="POST" id="task_edit_form" enctype="multipart/form-data">
                @csrf
                @if($work)
                @method('PATCH')
                @endif
                <input type="hidden" name="work_id" value="{{$work?->id}}">
                <div class="form-group">
                    <label for="title">Naptárbejegyzés címe</label>
                    <input type="text" name="title" class="form-control w-100" id="title" value="@if(isset($work->task)){{$work->task->title}}@endif">
                </div>

                <div class="form-group">
                    <label for="description">Leírás</label>
                    <textarea class="form-control" id="description" name="description" rows="3">@if(isset($work->task)){{$work->task->description}}@endif</textarea>
                </div>

                @if($work)
                <a href="{{route('works.work_details', [$work->id])}}" target="_blank">Részletek</a>
                @else                
                <div class="form-group">
                    <label for="file">Fájl</label>
                    <input type="file" class="form-control" id="file" name="file[]" style="height: auto !important" multiple />
                </div>
                @endif

                <hr />

                <div class="mb-3">
                    <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\Work::statuses() as $key => $value)
                        <option @if($key == 'completed') @cannot('work-set_completed') disabled @endcannot @endif value="{{$key}}" @if(isset($work?->status) && $key == $work?->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_{{ $work?->id }}');" id="task_{{ $work?->id }}_start_date" data-type="start_date" data-taskid="{{ $work?->id }}" value="{{ ($work?->start_date) ? date('Y-m-d H:i', strtotime($work?->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_{{ $work?->id }}')" id="task_{{ $work?->id }}_end_date" data-type="end_date" data-taskid="{{ $work?->id }}" value="{{ ($work?->start_date) ? date('Y-m-d H:i', strtotime($work?->end_date)) : null }}">
                    @error('end_date')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <input type="hidden" name="need_to_be_reorganised" class="need_to_be_reorganised"/> {{-- Újra szervezésre került (dátum) --}}

                @if($work)
                <button class="btn btn-primary btn-sm submit_button mt-2" type="button" onclick="chk_vehicle()">Mentés</button>
                <div class="mt-3 mb-3 comment-box">
                    @include('comments.panel', ['comment_target' => $work])
                </div>
                @endif

                {{-- Járművek szerkesztése --}}
                <div class="col-12 mb-3 px-0">
                    <p class="h5 mt-3">Járművek szerkesztése</p>
                        <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', false @php if(!$work) echo ', false' @endphp)">
                                        @foreach (App\Models\Vehicle::all()->keyBy('id') as $key => $value)
                                            <option value="{{$key}}">{{$value['plate_number']}}</option>
                                        @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', false @php if(!$work) echo ', false' @endphp);" data-save_work_vehicles="true" data-work_id="{{ $work?->id }}">
                                        @if($work)
                                            @foreach ($work->vehicles()->get()->keyBy('id') as $work_vehicle)
                                            <option value="{{$work_vehicle['id']}}">{{$work_vehicle['plate_number']}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    
                    <input type="hidden" name="selected_vehicles" id="selected_vehicles">

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

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

                @if(!$work)
                <button class="btn btn-primary btn-sm submit_button mt-2" type="button" onclick="chk_vehicle()">Mentés</button>
                @endif
            </form>

            @if($work)
            <div class="col-12 my-3 px-0">
                <p class="h5">Dokumentumok</p>
                @include('process.tables.documents', [
                    'documents' => $documents, 
                    'types' => $document_types, 
                    'model' => $document_model, 
                    'id' => $document_id, 
                    'table_id' => 'dt_task', 
                    'hide_button' => ['document_migration'],
                ])
            </div>
            @endif
        </div>

        {{-- Naptár --}}
        <div id='calendar' class="col-12 col-xl-6 mb-3"></div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function chk_vehicle() {
    if ($('input[name="start_date"]').val() && $("#work_vehicles option").length === 0) {
        alert('Jelenleg nincs jármű a feladat elvégzéséhez. A munkát csak akkor lehet leszervezni, ha biztosítasz hozzá legalább egy járművet.')
        
        return false;
    }

    if ($('input[name="start_date"]').val() == '' && $("#work_vehicles option").length != 0) {
        alert('Jelenleg nincs időpont a feladat elvégzéséhez. A munkát csak akkor lehet leszervezni, ha kezdési és befejezési időpontot választasz.')
        
        return false;
    }
    
    return $("#task_edit_form").submit();
};

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

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

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

    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,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
        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 worksOrganizeRoute = '{{ route('works.organize', ':slug') }}';
            var tasksEditRoute = '{{ route('tasks.edit', ':slug') }}';
            var url = info.event.extendedProps.offer_id ? worksOrganizeRoute : tasksEditRoute;
            url = url.replace(':slug', info.event.id);
            window.location = url;
        },
    });

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