@extends('layouts.metronic')

@section('title')
<a href="{{ route('project.edit', $project->_id) }}" >
    <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">{{$project->name}}</h1>
</a>
@endsection

@section('subtitles')
    <span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
    <small class="text-muted fs-7 fw-bold my-1 ms-1">{{$module->name}}</small>
@endsection

@section('content')

<style>
.mbsc-timeline-event-start .md-timeline-template-event,
.mbsc-timeline-event-start .md-timeline-template-event-cont,
.mbsc-timeline-event-start .md-timeline-template-event-cont .mbsc-icon {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.mbsc-timeline-event-end .md-timeline-template-event,
.mbsc-timeline-event-end .md-timeline-template-event-cont,
.mbsc-timeline-event-end .md-timeline-template-event-cont .mbsc-icon {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.md-custom-range-view-controls {
    display: flex;
    flex: 1 0 auto;
    justify-content: end;
    align-items: center;
}

.mbsc-material .mbsc-calendar-title {
    font-size: 1.428572em;
    font-weight: 400;
    text-transform: none;
    line-height: 1.4em;
}

</style>

<div id="kt_content_container" class="container-xxl">
    @if(Session::has('success'))
        <div id="successAlert" class="alert alert-success" role="alert">
            <div class="row">
                <div class="col-md-11">{{Session::get('success')}}</div>
                <div class="col-md-1 d-flex justify-content-end">
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>           
        </div>
    @endif
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="card">
        <form action="{{ route('module.save') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
            @if (!empty($module))    
                <input type="hidden" name="module_id" value="{{ $module->_id }}">
                <input type="hidden" name="project_id" value="{{ $project->_id }}">
            @endif           

            <div class="card-body mb-0">

                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                    <div class="d-flex flex-column">
                        <div class="d-flex align-items-center mb-2">
                            <div class="fv-row mb-7 fv-plugins-icon-container">
                                <label class="required fw-bold fs-6 mb-2">Nume</label>
                                <input name="name" value="{{ (!empty($module))?$module->name:old('name') }}" type="text" class="form-control form-control-solid mb-3 mb-lg-0" required>
                            </div> 
                        </div>
                    </div>
                    <div class="d-flex my-4">
                        @if (Auth::user()->role->code == 'ADMIN' || Auth::user()->role->code == 'PM' || Auth::user()->email == 'andrei.lucaci@headlightsolutions.ro')
                        <button type="submit" class="btn btn-sm btn-primary" data-kt-users-modal-action="submit">
                            <span class="indicator-label">Salvează</span>
                        </button>
                        @endif
                    </div>
                </div>               
                
            </div>
        </form>
    </div>

    @if (!empty($module))
    <br>
    <div class="card mb-5">
        @if (Auth::user()->role->code == 'ADMIN' || Auth::user()->role->code == 'PM' || Auth::user()->email == 'andrei.lucaci@headlightsolutions.ro')
        <div class="card-header border-0 pt-6">
            <div class="card-toolbar">
                
                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                    <a href="#" class="btn btn-primary er fs-6 px-8 py-4" data-bs-toggle="modal" data-bs-target="#kt_modal_upgrade_plan">Adaugă milestone</a>
                </div>
                
            </div>
        </div>
        @endif
        <div class="card-body pt-0">
            <div class="md-timeline-template">
                <div id="milestones-view"></div>
            </div>            
        </div>
    </div>

    <div class="card" id="tasks_card" style="visibility: hidden;">
        <div class="card-header border-0 pt-6">
            <div class="card-toolbar">
                <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                    <a href="#" class="btn btn-primary er fs-6 px-8 py-4" data-bs-toggle="modal" data-bs-target="#add_task_modal">Adaugă task</a>
                </div>
            </div>
        </div>
        <div class="card-body pt-0">
            
            <div id="tasks-view"></div>
            <form id="delete-task-form" action="{{ route('task.delete.or.edit') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
                @if (!empty($module))    
                    <input type="hidden" name="project_id" value="{{ $project->_id }}">
                    <input type="hidden" name="module_id" value="{{ $module->_id }}">
                    <input type="hidden" name="milestone_id" id="delete_milestone_id">
                    <input type="hidden" name="task_id" id="task_id">
                    <input type="hidden" name="task_type" id="task_type">

                    <input type="hidden" name="task_name" id="task_name">
                    <input type="hidden" name="task_estimated_hours" id="task_estimated_hours">
                @endif           

                <div id="task-edit-popup" class="md-meal-planner-popup">
                    <div id="meal-type-segmented" class="mbsc-form-group"></div>
                    <div class="mbsc-form-group">
                        
                        <label>
                            Nume
                            <input type="text" mbsc-input id="task_name_input" />    
                        </label>
                        <label>
                            Ore estimate
                            <input type="number" step="0.1" mbsc-input id="task_estimated_hours_input" />
                        </label>
                    </div>
                    <div class="mbsc-button-group">
                        <button class="mbsc-button-block" id="task-delete" mbsc-button data-color="danger" data-variant="outline">Sterge task</button>
                        <button class="mbsc-button-block" id="task-status" mbsc-button data-color="warning" data-variant="outline">Sterge task</button>
                    </div>
                </div>
            </form>           
        </div>
    </div>
    
    <div class="modal fade" id="kt_modal_upgrade_plan" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content rounded">
                <div class="modal-header justify-content-end border-0 pb-0">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <form action="{{ route('milestone.save') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
                    <input type="hidden" name="project_id" value="{{$project->_id}}">                                    
                    <input type="hidden" name="module_id" value="{{$module->_id}}">
                    <div class="modal-body pt-0 pb-15 px-5 px-xl-20">
                        <div class="mb-13 text-center">
                            <h1 class="mb-3">Adauga milestone</h1>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Nume</label>
                                <input type="text" class="form-control form-control-solid" placeholder="" name="name" required>
                            </div>
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Departament</label>
                                    <select class="form-select form-select-solid select2-hidden-accessible" name="department_id" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member"  data-select2-id="" tabindex="-1" aria-hidden="true">
                                        @foreach ($departments as $department)
                                        <option value="{{$department->_id}}" data-select2-id="{{$department->_id}}">{{$department->name}}</option>
                                        @endforeach
                                    </select>
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Data Estimata de Inceput</label>
                                <input type="text" class="form-control form-control-solid flatpickr-input active" placeholder="Selecteaza data" id="start_date" name="estimated_start_date"readonly="readonly">
                            </div>
    
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Data Estimata de Finalizare</label>
                                <input type="text" class="form-control form-control-solid flatpickr-input active" placeholder="Selecteaza data" id="end_date" name="estimated_end_date"readonly="readonly">
                            </div>
                        </div>
                        
                        <!-- <div class="row mb-5">
                            
                        </div> -->

                        <div class="d-flex flex-center flex-row-fluid pt-12">
                            <button type="submit" class="btn btn-primary">Salveaza</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add_task_modal" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content rounded">
                <div class="modal-header justify-content-end border-0 pb-0">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <form action="{{ route('task.save') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
                    <input type="hidden" name="project_id" value="{{$project->_id}}">                                    
                    <input type="hidden" name="module_id" value="{{$module->_id}}">
                    <input type="hidden" name="milestone_id" id="milestone_id" value="nimic">
                    <div class="modal-body pt-0 pb-15 px-5 px-xl-20">
                        <div class="mb-13 text-center">
                            <h1 class="mb-3">Adauga task</h1>
                        </div>
                        <div class="row mb-5">
                            <div class="form-check form-check-sm form-check-custom form-check-solid mt-3">
                                <input class="form-check-input" type="checkbox" value="1" name="recurentButton" id="recurentButton" onclick="recurentClicked()"><label class="fs-5 fw-bold mb-2">&nbsp;Recurent</label>
                            </div>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Nume</label>
                                <input type="text" class="form-control form-control-solid" placeholder="" name="name" required>
                            </div>
                            <div class="col-md-6 fv-row fv-plugins-icon-container" id="numarOreEstimat">
                                <label class="required fs-5 fw-bold mb-2">Numar de ore estimat</label>
                                <input type="text" id="numarOreEstimatText" class="form-control form-control-solid" placeholder="" name="estimated_hours" required>
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Data Estimata de Inceput</label>
                                <input type="text" class="form-control form-control-solid flatpickr-input active" placeholder="Selecteaza data" id="task_start_date" name="estimated_start_date"readonly="readonly">
                            </div>
    
                            <div class="col-md-6 fv-row fv-plugins-icon-container" id="dataEstimataFinalizare">
                                <label class="required fs-5 fw-bold mb-2">Data Estimata de Finalizare</label>
                                <input type="text" class="form-control form-control-solid flatpickr-input active" placeholder="Selecteaza data" id="task_end_date" name="estimated_end_date"readonly="readonly">
                            </div>
                        </div>

                        <div class="row mb-5">
                            
                            <div class="col-md-6 fv-row fv-plugins-icon-container">
                                <label class="required fs-5 fw-bold mb-2">Utilizator</label>
                                    <select class="form-select form-select-solid select2-hidden-accessible" id="user_id" name="user_id" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member"  data-select2-id="" tabindex="-1" aria-hidden="true">
                                        <!-- @foreach ($departments as $department)
                                        <option value="{{$department->_id}}" data-select2-id="{{$department->_id}}">{{$department->name}}</option>
                                        @endforeach -->
                                    </select>
                            </div>
                            <div class="col-md-6 fv-row fv-plugins-icon-container"  id="ticketId">
                                <label class="required fs-5 fw-bold mb-2">Ticket</label>
                                    <select class="form-select form-select-solid select2-hidden-accessible" id="ticket_id" name="ticket_id" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member"  data-select2-id="" tabindex="-1" aria-hidden="true">
                                        <option value="none">Fără ticket</option>
                                        @foreach ($project->tickets as $ticket)
                                            @if ($ticket->status == "Deschis")
                                            <option value="{{$ticket->_id}}">{{$ticket->subject}}</option>
                                            @endif
                                        @endforeach
                                    </select>
                            </div>
                        </div>
                        
                        <!-- <div class="row mb-5">
                            
                        </div> -->

                        <div class="d-flex flex-center flex-row-fluid pt-12">
                            <button type="submit" class="btn btn-primary">Salveaza</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card" id="milestone_card">        
        <div class="card-body pt-0">   
            <form id="delete-milestone-form" action="{{ route('milestone.delete') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
                <input type="hidden" name="project_id" value="{{ $project->_id }}">
                <input type="hidden" name="module_id" value="{{ $module->_id }}">
                <input type="hidden" name="for_delete_milestone_id" id="for_delete_milestone_id">
                <div id="custom-event-tooltip-popup" class="md-tooltip">
                    <div class="mbsc-button-group">
                        <button class="mbsc-button-block" id="milestone-delete" mbsc-button data-color="danger" data-variant="outline">Sterge milestone</button>
                    </div>
                </div>         
            </form>
            
        </div>
    </div>

    @endif
</div>
@endsection

@section('head')
<!-- <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css"> -->
<link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css">

<link href="assets/plugins/custom/mobiscroll/mobiscroll.javascript.min.css" rel="stylesheet" />
@endsection

@section('script')

<script src="assets/plugins/custom/mobiscroll/mobiscroll.javascript.min.js"></script>
<!-- <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script> -->
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
<script>
    $("#start_date").flatpickr({enableTime:!1,dateFormat:"d-m-Y"})
    $("#end_date").flatpickr({enableTime:!1,dateFormat:"d-m-Y"})

    var task_start_date_picker = $("#task_start_date").flatpickr({enableTime:!1,dateFormat:"d-m-Y"})
    var task_end_date_picker = $("#task_end_date").flatpickr({enableTime:!1,dateFormat:"d-m-Y"})
    var tasksCalendar = null;
    
    // mobiscroll.setOptions({
    //     theme: 'ios',
    //     themeVariant: 'light'
    // });

    var formatDate = mobiscroll.util.datetime.formatDate;
    //var startDate, endDate;
    var startDate = new Date("{{$milestones_start_date}}");
    var endDate = new Date("{{$milestones_end_date}}");
    var milestones = {!! json_encode($data) !!};
    var resources = {!! json_encode($resources) !!};
    var current_milestone_id = "{{!empty(old('milestone_id'))?old('milestone_id'):''}}";
    console.log("["+current_milestone_id+"]");

    var tooltip = document.getElementById('custom-event-tooltip-popup');

    
    milestones.forEach(function (item, index, arr) {
        if (item.id == current_milestone_id) {
            CreateTasksCalendar(item);
        }
    });

    var myCalendar = mobiscroll.eventcalendar('#milestones-view', {
        data: milestones,
        resources: resources,
        view: {
            timeline: {
                type: 'day',
                size: 14,
                eventList: true
            }
        },
        renderScheduleEvent: function (data) {
                    var ev = data.original;
                    var color = data.color;
                    

    
                    return '<div class="md-timeline-template-event" style="border-color:' + color + ';background:' + color + '"> <div class="mbsc-schedule-event-inner mbsc-ios" style="color: rgb(0, 0, 0);">'+
                            '<div class="mbsc-schedule-event-title mbsc-ios">'+ev.title+'</div>'+
                            
                            '</div></div>';
                },
        renderHeader: function () {
            return '<div id="custom-date-range"><button mbsc-button data-variant="flat" class="mbsc-calendar-button">' +
                '<span id="custom-date-range-text" class="mbsc-calendar-title">Button' +
                '</span></button></div>' +
                '<div class="md-custom-range-view-controls">' +                
                '</div>';
        },
        onEventClick: function (args) {
            var currentEvent = args.event;
            CreateTasksCalendar(currentEvent);            
        },
        onPageLoaded: function (args) {
            startDate = args.firstDay;                
            end = args.lastDay;
            endDate = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1, 0);
            rangeButton.innerText = getFormattedRange(startDate, endDate);
        }
        @if (Auth::user()->role->code == 'ADMIN' || Auth::user()->role->code == 'PM' || Auth::user()->email == 'andrei.lucaci@headlightsolutions.ro') 
        ,
        onEventHoverIn: function (args, inst) {
            var event = args.event;
            //var resource = doctors.find(function (dr) { return dr.id === event.resource });
            //alert(event.start);
            //var eventTime = formatDate('YYYY-M-D', new Date(event.start));
            //var button = {};
            console.log(event);

            currentEvent = event;

            // if (event.confirmed) {
            //     button.text = 'Cancel appointment';
            //     button.type = 'warning';
            // } else {
            //     button.text = 'Confirm appointment';
            //     button.type = 'success';
            // }

            // header.style.backgroundColor = "#b33d3d";
            // task.innerHTML = event.title + ", " + event.hours + " ore" + ", " + eventTime;
            // project.innerHTML = event.project;
            // module.innerHTML = event.module;
            // milestone.innerHTML = event.milestone;
            // client.innerHTML = event.client;
            // obs.innerHTML = event.obs;
            clearTimeout(timer);
            timer = null;
            //time.innerHTML = eventTime;
            // status.innerHTML = event.confirmed ? 'Confirmed' : 'Canceled';
            // reason.innerHTML = event.reason;
            // loc.innerHTML = event.location;

            //statusButton.innerHTML = button.text;
            //mobiscroll.getInst(statusButton).setOptions({ color: button.type });

            //clearTimeout(timer);
            //timer = null;

            tooltip.setOptions({ anchor: args.domEvent.target });
            tooltip.open();
        },
        onEventHoverOut: function (args) {
            //tooltip.close();
            if (!timer) {
                timer = setTimeout(function () {
                    tooltip.close();
                }, 200);
            }
        }
        @endif
    });

    myCalendar.navigate(startDate);
    myCalendar.setOptions({
        refDate: startDate,
        view: {
            timeline: {
                type: 'day',
                size: getNrDays(startDate, endDate),
                eventList: true
            }
        }
    });
        
    var rangeButton = document.getElementById('custom-date-range-text');
    function getFormattedRange(start, end) {
        return formatDate('MMM D, YYYY', new Date(start)) + (end && getNrDays(start, end) > 1 ? (' - ' + formatDate('MMM D, YYYY', new Date(end))) : '');
    }

    function getNrDays(start, end) {
        return Math.round(Math.abs((end.setHours(0) - start.setHours(0)) / (24 * 60 * 60 * 1000))) + 1;
    }

    function CreateTasksCalendar(currentEvent) {

        var milestone_id = document.getElementById('milestone_id');
        var delete_milestone_id = document.getElementById('delete_milestone_id');
        
        var tasks_card = document.getElementById('tasks_card');
        tasks_card.style.visibility = "visible";

        milestone_id.value = currentEvent.id;
        delete_milestone_id.value = currentEvent.id;

        var select = document.getElementById('user_id');

        while (select.lastElementChild) {
            select.removeChild(select.lastElementChild);
        }

        currentEvent.users.forEach(myFunction);

        task_start_date_picker.setDate(new Date(currentEvent.start));
        task_end_date_picker.setDate(new Date(currentEvent.end));

        function myFunction(item) {
            var opt = document.createElement('option');
            opt.value = item.id;
            opt.innerHTML = item.name;
            
            @if (Auth::user()->role->code == 'ADMIN' || Auth::user()->role->code == 'PM' || Auth::user()->email == 'andrei.lucaci@headlightsolutions.ro') 
                select.appendChild(opt);
            @else
                if ('{{Auth::user()->_id}}' == item.id) {
                    select.appendChild(opt);
                }
            @endif
            
        }

        if (tasksCalendar != null) {
            tasksCalendar.destroy();
            tasksCalendar = null;
        }
        tasksCalendar = mobiscroll.eventcalendar('#tasks-view', {
            data: currentEvent.tasks,
            resources: currentEvent.users,
            view: {
                timeline: {
                    type: 'day',
                    size: 14,
                    eventList: true
                }
            },
            onEventClick: function (args, inst) {
                oldTask = $.extend({}, args.event);
                tempTask = args.event;

                if (!popup.isVisible()) {
                    createEditPopup(args);
                }
            },
            
            renderScheduleEvent: function (data) {
                var ev = data.original;
                var color = data.color;
                var ehours = "";

                if (ev.estimated_hours > 0) {
                    ehours = '<div class="mbsc-schedule-event-range mbsc-ios"><b>Estimated hours:</b> '+ev.estimated_hours+'</div>'; 
                }


                return '<div class="md-timeline-template-event" style="border-color:' + color + ';background:' + color + '"> <div class="mbsc-schedule-event-inner mbsc-ios" style="color: rgb(0, 0, 0);">'+
                        '<div class="mbsc-schedule-event-title mbsc-ios">'+ev.title+'</div>'+
                        ehours+
                        '<div class="mbsc-schedule-event-range mbsc-ios"><b>Worked hours:</b> '+ev.worked_hours+'</div>'+
                        '<div class="mbsc-schedule-event-range mbsc-ios"><b>Status:</b> '+ev.status+'</div>'+
                        '</div></div>';
            }
        });

        var tasks_start_date = new Date(currentEvent.tasks_start_date);
        var tasks_end_date = new Date(currentEvent.tasks_end_date);

        tasksCalendar.navigate(tasks_start_date);
        tasksCalendar.setOptions({
            refDate: tasks_start_date,
            view: {
                timeline: {
                    type: 'day',
                    size: getNrDays(tasks_start_date, tasks_end_date),
                    eventList: true
                }
            }
        });
    }

    var deleteTask;
    var oldTask;
    var tempTask;
    var $deleteButton = $('#task-delete');
    var $deleteMilestone = $('#milestone-delete');
    var $task_status_button = $('#task-status');

    $deleteMilestone.on('click', function () {
        console.log(currentEvent);
        document.getElementById("for_delete_milestone_id").value = currentEvent.id;;
        

        Swal.fire({
                    html: "Ești sigur că vrei să ștergi <b>milestonul</b>?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Da, șterge!",
                    cancelButtonText: "Nu, anulează",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then(function (result) {
                    if (result.value) {
                        document.getElementById("delete-milestone-form").submit();
                    } 
                });
    });
    
    $deleteButton.on('click', function () {
        document.getElementById("task_type").value = "delete";
        document.getElementById("task_id").value = tempTask._id;;

        popup.close();
        // if (!timer) {
        //         timer = setTimeout(function () {
        //             tooltip.close();
        //         }, 200);
        //     }

        Swal.fire({
                    html: "Ești sigur că vrei să ștergi <b>taskul</b>?",
                    icon: "warning",
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "Da, șterge!",
                    cancelButtonText: "Nu, anulează",
                    customClass: {
                        confirmButton: "btn fw-bold btn-danger",
                        cancelButton: "btn fw-bold btn-active-light-primary"
                    }
                }).then(function (result) {
                    if (result.value) {
                        document.getElementById("delete-task-form").submit();
                    } 
                });
        
    });

    $task_status_button.on('click', function () {
        document.getElementById("task_type").value = "status";
        document.getElementById("task_id").value = tempTask._id;;
        document.getElementById("delete-task-form").submit();
    });

    var popup = mobiscroll.popup('#task-edit-popup', {
        display: 'bottom',
        contentPadding: false,
        fullScreen: true,        
        responsive: {
            medium: {
                display: 'center',
                width: 400,
                fullScreen: false,
                touchUi: false,
                showOverlay: false
            }
        }
    });

    var $name = $('#task_name_input');
    var $hours = $('#task_estimated_hours_input');
    
    
    function createEditPopup(args) {
        console.log(args.event);
        var ev = args.event;
        //var resource = staff.find(function (r) { return r.id === ev.resource });
        //var slot = slots.find(function (s) { return s.id === ev.slot });
        var headerText = '<div>Editeaza ' + ev.name + '</div><div style="font-size: 14px;font-weight: 600; opacity: .6;">' +
            formatDate('DDDD', new Date(ev.start)) + ',' + formatDate('DD MMMM YYYY', new Date(ev.start)) + '</div>';

        // show delete button inside edit popup
        //$deleteButton.show();

        deleteTask = false;
      //  restoreShift = true;

        // // set popup header text and buttons for editing
        popup.setOptions({
            headerText: headerText,
            buttons: [
                'cancel',
                {
                    text: 'Save',
                    keyCode: 'enter',
                    handler: function () {
                        
                        document.getElementById("task_name").value = $('#task_name_input').val();
                        document.getElementById("task_estimated_hours").value = $('#task_estimated_hours_input').val();
                        document.getElementById("task_type").value = "edit";
                        document.getElementById("task_id").value = tempTask._id;;
                        document.getElementById("delete-task-form").submit();
                    },
                    cssClass: 'mbsc-popup-button-primary'
                }
            ]
        });

        // fill popup with the selected event data
        $name.val(ev.name);
        $hours.val(ev.estimated_hours);
        $task_status_button.text(ev.status+" - Modifica status");
        //range.setOptions({ minTime: ev.slot == 1 ? '07:00' : '12:00', maxTime: ev.slot == 1 ? '13:00' : '18:00' });
        //range.setVal([ev.start, ev.end]);

        popup.open();
    }

    function recurentClicked() {
        var checkbox = document.getElementById('recurentButton');
        var dataEstimataFinalizare = document.getElementById("dataEstimataFinalizare");
        var numarOreEstimat = document.getElementById("numarOreEstimat");
        var ticket_id = document.getElementById("ticketId");

        var dataEstimataFinalizareText = document.getElementById("task_end_date");
        var numarOreEstimatText = document.getElementById("numarOreEstimatText");
        if (checkbox.checked == true)
        {            
            dataEstimataFinalizare.style.display = "none";
            numarOreEstimat.style.display = "none";
            ticket_id.style.display = "none";
            numarOreEstimatText.required = false;
            dataEstimataFinalizareText.required = false;
        } else {
            dataEstimataFinalizare.style.display = "block";
            numarOreEstimat.style.display = "block";
            ticket_id.style.display = "block";
            numarOreEstimatText.required = true;
            dataEstimataFinalizareText.required = true;
        }
    }

    var timer;
    var tooltip = mobiscroll.popup('#custom-event-tooltip-popup', {
        display: 'anchored',
        touchUi: false,
        showOverlay: false,
        contentPadding: false,
        closeOnOverlayClick: false,
        width: 350,
        onInit: function () {
            tooltip.addEventListener('mouseenter', function (e) {
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
            });

            tooltip.addEventListener('mouseleave', function () {
                timer = setTimeout(function () {
                    tooltip.close();
                }, 200);
            });
        }
    });
    
</script>
@endsection


@section('menuVariables')
<script>
    var menuItemName = "menuProjects";
</script>
@endsection