@extends('layouts.metronic')

@section('title')
    <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">Istoric</h1>
@endsection

@section('subtitles')
    <small class="text-muted fs-7 fw-bold my-1 ms-1">{{Auth::user()->name}}</small>
@endsection

@section('content')
<style>
.md-tooltip .mbsc-popup-content {
    padding: 0;
}

.md-tooltip {
    font-size: 15px;
    font-weight: 600;
}

.md-tooltip-header {
    padding: 12px 16px;
    color: #eee;
}

.md-tooltip-info {
    padding: 16px 16px 60px 16px;
    position: relative;
    line-height: 32px;
}


.md-tooltip-title {
    margin-bottom: 15px;
}

.md-tooltip-text {
    font-weight: 100;
}
</style>

<div id="kt_content_container" class="container-xxl">
    <div class="card mb-5">
        <form action="{{ route('history') }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">                                    
            <div class="card-body mb-0">
                <div class="row mb-5">
                    <div class="col-md-3 fv-row fv-plugins-icon-container">
                        <label class="fs-5 fw-bold mb-2">Utilizator</label>
                        <select name="user_id" onchange="this.form.submit()" class="form-select form-select-solid select2-hidden-accessible"  data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member"   tabindex="-1" aria-hidden="true">
                            @foreach ($users as $user)
                            <option value="{{ $user->_id }}" {{ ($user->_id== $user_id)?'selected':'' }}>{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3 fv-row fv-plugins-icon-container">
                        <label class="fs-5 fw-bold mb-2">Data Inceput</label>
                        <input type="text" class="form-control form-control-solid flatpickr-input active" placeholder="Selecteaza data" value="{{$start_date}}" id="start_date" name="start_date" onchange="this.form.submit()">
                    </div>

                    <div class="col-md-3 fv-row fv-plugins-icon-container">
                        <label class="fs-5 fw-bold mb-2">Data Sfarsit</label>
                        <input type="text" class="form-control form-control-solid flatpickr-input active" placeholder="Selecteaza data" value="{{$end_date}}" id="end_date" name="end_date" onchange="this.form.submit()" >
                    </div>

                    <div class="col-md-3 fv-row fv-plugins-icon-container">
                        <label class="fs-5 fw-bold mb-2">Proiect</label>
                        <select name="project_id" onchange="this.form.submit()" class="form-select form-select-solid select2-hidden-accessible"  data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member"   tabindex="-1" aria-hidden="true">
                            <option value="-1" {{ ($project_id == -1)?'selected':'' }}>Toate proiectele</option>
                            @foreach ($projects as $project)
                            <option value="{{ $project->_id }}" {{ ($project->_id== $project_id)?'selected':'' }}>{{ $project->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <div class="card" id="tasks_card">        
        <div class="card-body pt-0">   
            <div id="custom-event-tooltip-popup" class="md-tooltip">
                <div id="tooltip-event-header" class="md-tooltip-header">
                    <span id="tooltip-event-task" class="md-tooltip-name-age"></span>
                </div>
                <div >
                    <div class="md-tooltip-title">Proiect: <span id="tooltip-event-project" class="md-tooltip-reason md-tooltip-text"></span></div>
                    <div class="md-tooltip-title">Client: <span id="tooltip-event-client" class="md-tooltip-reason md-tooltip-text"></span></div>
                    <div class="md-tooltip-title">Modul: <span id="tooltip-event-module" class="md-tooltip-reason md-tooltip-text"></span></div>
                    <div class="md-tooltip-title">Milestone: <span id="tooltip-event-milestone" class="md-tooltip-location md-tooltip-text"></span></div>
                    <div class="md-tooltip-title">Obeservatii: <span id="tooltip-event-obs" class="md-tooltip-location md-tooltip-text"></span></div>
                    <div class="md-tooltip-title">
                        <form id="delete-time-form" action="{{ route('worked_time.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" id="project_id">
                            <input type="hidden" name="module_id" id="module_id">
                            <input type="hidden" name="milestone_id" id="milestone_id">
                            <input type="hidden" name="task_id" id="task_id">
                            <input type="hidden" name="worked_time_id" id="worked_time_id">                           
                        </form>
                        <div class="mbsc-button-group">
                                <button class="mbsc-button-block" id="time-delete" mbsc-button data-color="danger" data-variant="outline">Sterge timp lucrat</button>
                        </div>
                    </div>
                </div>
                
            </div>         
            <div id="hours-view">
                
            </div>           
        </div>
    </div>
</div>
@endsection

@section('head')
<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/datatables/datatables.bundle.js"></script>
<script>
    $("#start_date").flatpickr({enableTime:!1,dateFormat:"Y-m-d"})
    $("#end_date").flatpickr({enableTime:!1,dateFormat:"Y-m-d"})  
    
    var formatDate = mobiscroll.util.datetime.formatDate;
    var startDate = new Date("{{$start_date}}");
    var endDate = new Date("{{$end_date}}");
    var currentEvent;
    var timer;
    var tooltip = document.getElementById('custom-event-tooltip-popup');
    var header = document.getElementById('tooltip-event-header');
    var task = document.getElementById('tooltip-event-task');
    var project = document.getElementById('tooltip-event-project');
    var module = document.getElementById('tooltip-event-module');
    var milestone = document.getElementById('tooltip-event-milestone');
    var client = document.getElementById('tooltip-event-client');
    var obs = document.getElementById('tooltip-event-obs');
    
    // var time = document.getElementById('tooltip-event-time');
    // var status = document.getElementById('tooltip-event-title');
    // var reason = document.getElementById('tooltip-event-reason');
    // var loc = document.getElementById('tooltip-event-location');

    var myCalendar = mobiscroll.eventcalendar('#hours-view', {
        data: {!! json_encode($data) !!},
        resources: {!! json_encode($resources) !!},
        refDate: startDate,
        view: {
            timeline: {
                type: 'day',
                size: getNrDays(startDate, endDate),
                eventList: true
            }
        },
        renderHeader: function () {
            return '<div id="custom-date-range"><button mbsc-button data-variant="flat" class="mbsc-calendar-button">' +
                '<span id="header-total-hours" class="md-tooltip-title"><b>Total ore lucrate: {{$total_hours}}</b></span>'+
                '<div class="md-custom-range-view-controls">' +                
                '</div>';
        },        
        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 class="mbsc-schedule-event-range mbsc-ios">'+ev.hours+'</div>'+
                    '</div></div>';
        },
        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 = {};

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

    myCalendar.navigate(startDate);
    myCalendar.setOptions({
        refDate: startDate,
        view: {
            timeline: {
                type: 'day',
                size: getNrDays(startDate, endDate),
                eventList: true
            }
        }
    });

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

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

    var $deleteTime = $('#time-delete');

    $deleteTime.on('click', function () {

        console.log(currentEvent);
        document.getElementById("project_id").value = currentEvent.project_id;
        document.getElementById("module_id").value = currentEvent.module_id;
        document.getElementById("milestone_id").value = currentEvent.milestone_id;
        document.getElementById("task_id").value = currentEvent.task_id;
        document.getElementById("worked_time_id").value = currentEvent.worked_time_id;

        Swal.fire({
                    html: "Ești sigur că vrei să ștergi <b>timpul</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-time-form").submit();
                    } 
                });
    });

</script>
@endsection


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