@extends('layouts.master')

@section('headCss')
    <link href="{{asset('assets/stylesheets/fullcalendar.css')}}" rel="stylesheet"/>
    <link href="{{asset('assets/stylesheets/fullcalendar.print.css')}}" rel="stylesheet" media='print'/>
    <link href="{{asset('assets/stylesheets/scheduler.css')}}" rel="stylesheet"/>
@stop

@section('headJs')
    <script src="{{asset('assets/javascripts/fullcalendar.js')}}"></script>
    <script src="{{asset('assets/javascripts/planner.js')}}"></script>
    <script src="{{asset('assets/javascripts/scheduler.js')}}"></script>
@stop

@section('navBar')
    @include('layouts.navBar')
@stop

@section('mainMenu')
    @include('layouts.mainMenu')
@stop

@section('content')
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="input-daterange input-group" id="calendarDateRange">
                <input type="text" class="input-sm form-control" name="startDate" id="startDate"
                       placeholder="Start date" value="{{date('d/m/Y', strtotime($startDate))}}">
                <span class="input-group-addon">to</span>
                <input type="text" class="input-sm form-control" name="endDate" id="endDate" placeholder="End date"
                       value="{{date('d/m/Y', strtotime($endDate))}}">
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <hr/>
    </div>

    <div class="col-xs-12">
        <div class="panel-group" id="plannerViews">
            <div class="panel">
                <div class="panel-heading">
                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#plannerViews"
                       href="#newSchedule">
                        Planner Action
                    </a>
                </div>
                <div id="newSchedule" class="panel-collapse collapse">
                    <div class="panel-body no-padding-hr">
                        <div class="col-xs-12">
                            <div id="plannerAddForm" class="col-xs-12">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel hidden">
                <div class="panel-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#plannerViews"
                       href="#schedulerView">
                        Scheduler View
                    </a>
                </div>
                <div id="schedulerView" class="panel-collapse in">
                    <div class="panel-body no-padding-hr">
                        <div id="plannerSchedulerDiv" class="col-xs-12">
                            {{--<div id="plannerScheduler"></div>--}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel">
                <div class="panel-heading">
                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#plannerViews"
                       href="#calendarView">
                        Calendar View
                    </a>
                </div>
                <div id="calendarView" class="panel-collapse collapse">
                    <div class="panel-body no-padding-hr">
                        <div class="col-xs-3">
                            <div class="panel widget-messages-alt">
                                <div class="panel-heading">
                                    <span class="panel-title"><i class="panel-title-icon fa fa-users"></i>Engineer List</span>
                                </div>
                                <div class="panel-body padding-sm">
                                    <div class="messages-list">

                                        @foreach($engineers as $engineer)
                                            <div class="message">
                                                <img src="{{$engineer['photo']}}" alt="" class="message-avatar">
                                                <a onclick="javascript:generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', '{{$engineer['id']}}', '', '{{csrf_token()}}')"
                                                   class="message-subject">{{$engineer['name']}}</a>

                                                <div class="message-description">
                                                    {{$engineer['phone']}}
                                                </div>
                                            </div>
                                        @endforeach

                                    </div>
                                    <a onclick="javascript:generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', '', '','{{csrf_token()}}')"
                                       class="messages-link">All Jobs</a>
                                </div>
                            </div>
                        </div>
                        <div id="plannerCalendarDiv" class="col-xs-9">
                            <div id="plannerCalendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="plannerDetail" class="modal modal-alert modal-success fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="fa fa-info-circle"></i>
                </div>
                <div class="modal-title" id="plannerUserTitle"></div>
                <div class="modal-body">
                    <br/>

                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Building:</label>

                        <div class="col-xs-8">
                            <textarea id="plannerBuilding" rows="4" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Job:</label>

                        <div class="col-xs-8">
                            <textarea id="plannerJob" rows="4" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Expect Start:</label>

                        <div class="col-xs-8">
                            <input id="plannerExpectStartTime" type="text" class="form-control" name="expectStartTime"
                                   placeholder="D/M/Y H:m:s">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Expect End:</label>

                        <div class="col-xs-8">
                            <input id="plannerExpectEndTime" type="text" class="form-control" name="expectEndTime"
                                   placeholder="D/M/Y H:m:s">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Exact Start:</label>

                        <div class="col-xs-8">
                            <input id="plannerExactStartTime" type="text" class="form-control" name="expectStartTime"
                                   placeholder="D/M/Y H:m:s" disabled>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Exact End:</label>

                        <div class="col-xs-8">
                            <input id="plannerExactEndTime" type="text" class="form-control" name="expectEndTime"
                                   placeholder="D/M/Y H:m:s" disabled>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-xs-12">
                            * update applied to start and end time only.
                        </div>
                        <div class="col-xs-12">
                            <input type="hidden" id="plannerJobId"/>
                            <input type="hidden" id="plannerUserId"/>
                            <a class="btn btn-primary col-xs-12" id="plannerUpdateButton">UPDATE PLANNER</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        <div id="plannerScheduler"></div>
    </div>

    <div id="plannerDetailData" class="modal modal-alert modal-success fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <i class="fa fa-info-circle"></i>
                </div>
                <div class="modal-title" id="plannerDataUser"></div>
                <div class="modal-body">
                    <br/>

                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Start Time:</label>

                        <div class="col-xs-8">
                            <input id="plannerDataStartTime" type="text" class="form-control" name="startTime"
                                   placeholder="D/M/Y H:m:s">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">End Time:</label>

                        <div class="col-xs-8">
                            <input id="plannerDataEndTime" type="text" class="form-control" name="endTime"
                                   placeholder="D/M/Y H:m:s">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Title: </label>

                        <div class="col-xs-8">
                            <input type="text" id="plannerDataTitle" class="form-control"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Description:</label>

                        <div class="col-xs-8">
                            <textarea id="plannerDataDescription" rows="4" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="col-sm-4 control-label">Color: </label>

                        <div class="col-xs-8">
                            <input type="text" id="plannerDataColor" class="form-control"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-xs-12">
                            <input type="hidden" id="plannerDataId"/>
                            <input type="hidden" id="plannerDataUserId"/>
                            <a class="btn btn-primary col-xs-6" id="plannerDataUpdateButton">UPDATE</a>
                            <a class="btn btn-danger col-xs-6" id="plannerDataDeleteButton">DELETE</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('footerJs')
    <script type="text/javascript">
        $('#startDate').datepicker({
            format: 'dd/mm/yyyy'
        }).on('changeDate', function (ev) {
            generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', '', (new Date()).toISOString(), '{{csrf_token()}}');
            generatePlannerScheduler('{{URL::action("PlannerController@generatePlannerScheduler")}}', '', (new Date()).toISOString(), '{{csrf_token()}}');
        });
        $('#endDate').datepicker({
            format: 'dd/mm/yyyy'
        }).on('changeDate', function (ev) {
            generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', '', (new Date()).toISOString(), '{{csrf_token()}}');
            generatePlannerScheduler('{{URL::action("PlannerController@generatePlannerScheduler")}}', '', (new Date()).toISOString(), '{{csrf_token()}}');
        });

        $('#plannerExpectStartTime').datetimepicker({
            format: 'DD/MM/YYYY HH:mm:ss'
        });
        $('#plannerExpectEndTime').datetimepicker({
            format: 'DD/MM/YYYY HH:mm:ss'
        });

        $('#plannerDataStartTime').datetimepicker({
            format: 'DD/MM/YYYY HH:mm:ss'
        });
        $('#plannerDataEndTime').datetimepicker({
            format: 'DD/MM/YYYY HH:mm:ss'
        });

        $('#plannerDataColor').minicolors({
            control: 'wheel',
            position: 'top left',
            theme: 'bootstrap'
        });

        generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', '', (new Date()).toISOString(), '{{csrf_token()}}');
        generatePlannerScheduler('{{URL::action("PlannerController@generatePlannerScheduler")}}', '', (new Date()).toISOString(), '{{csrf_token()}}');

        $('#plannerUpdateButton').click(function (data) {
            loadingOverlay();
            $.post('{{URL::action("PlannerController@updateEngineerPlan")}}', {
                jobId: $('#plannerJobId').val(),
                expectStartTime: changeDateFormat($('#plannerExpectStartTime').val()),
                expectEndTime: changeDateFormat($('#plannerExpectEndTime').val()),
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Success',
                    text: 'Job plan update successfully!',
                    type: 'success',
                    icon: 'fa fa-check'
                });
                var userId = $('#plannerUserId').val();
                var defaultDate = changeDateFormat($('#plannerExpectStartTime').val());
                generatePlannerScheduler('{{URL::action("PlannerController@generatePlannerScheduler")}}', '', defaultDate, '{{csrf_token()}}');
                generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', userId, defaultDate, '{{csrf_token()}}');
            }).fail(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Fail',
                    text: 'Job plan update failed!',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        });

        $('#plannerDataUpdateButton').click(function (data) {
            loadingOverlay();
            $.post('{{URL::action("PlannerController@updatePlanner")}}', {
                plannerId: $('#plannerDataId').val(),
                title: $('#plannerDataTitle').val(),
                description: $('#plannerDataDescription').val(),
                color: $('#plannerDataColor').val(),
                startTime: changeDateFormat($('#plannerDataStartTime').val()),
                endTime: changeDateFormat($('#plannerDataEndTime').val()),
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Success',
                    text: 'Planner update successfully!',
                    type: 'success',
                    icon: 'fa fa-check'
                });
                var userId = $('#plannerDataUserId').val();
                var defaultDate = changeDateFormat($('#plannerDataStartTime').val());
                generatePlannerScheduler('{{URL::action("PlannerController@generatePlannerScheduler")}}', '', defaultDate, '{{csrf_token()}}');
                generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', userId, defaultDate, '{{csrf_token()}}');
            }).fail(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Fail',
                    text: 'Planner update failed!',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        });

        $('#plannerDataDeleteButton').click(function (data) {
            loadingOverlay();
            $.post('{{URL::action("PlannerController@deletePlanner")}}', {
                plannerId: $('#plannerDataId').val(),
                _token: '{{csrf_token()}}'
            }).done(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Success',
                    text: 'Planner deleted successfully!',
                    type: 'success',
                    icon: 'fa fa-check'
                });
                var userId = $('#plannerDataUserId').val();
                var defaultDate = changeDateFormat($('#plannerDataStartTime').val());
                generatePlannerScheduler('{{URL::action("PlannerController@generatePlannerScheduler")}}', '', defaultDate, '{{csrf_token()}}');
                generatePlannerCalendar('{{URL::action("PlannerController@generatePlannerCalendar")}}', userId, defaultDate, '{{csrf_token()}}');
            }).fail(function (data) {
                loadingRemove();
                new PNotify({
                    title: 'Fail',
                    text: 'Planner deleting failed!',
                    type: 'error',
                    icon: 'fa fa-times'
                });
            });
        });

        showPlannerAddForm('{{URL::action("PlannerController@generatePlannerAddForm")}}', '', '{{csrf_token()}}');

    </script>
@stop