@extends('layouts.portal.principal')

@section('css_custom')
	<link href="{{ asset('css/portal/style-datetable.css') }}" rel="stylesheet">
	<link href="{{ asset('js/plugins/bootstrap-select/bootstrap-select.css') }}" rel="stylesheet">
	<link href="{{ asset('js/plugins/bootstrap-fileinput/css/fileinput.min.css') }}" rel="stylesheet">
	<link href="{{ asset('js/plugins/multi-select/bootstrap-multiselect.css') }}" rel="stylesheet">
	<link href="{{ asset('js/portal/indicators/calendar-general-responsabilities/glyphicon.css') }}" rel="stylesheet">
	<link href="{{ asset('js/portal/indicators/calendar-general-responsabilities/index.css') }}" rel="stylesheet">
	<link href="{{ asset('calendario/css/fullcalendar.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('calendario/css/fullcalendar.print.min.css') }}" rel="stylesheet" media="print" />
	<link href="{{ asset('calendario/css/personalizado.css') }}" rel="stylesheet" />
	<link href="{{ asset('js/portal/indicators/calendar-general-responsabilities/calendar.css') }}" rel="stylesheet">
	<link href="{{ asset('css/portal/style-datetable.css') }}" rel="stylesheet">
    <link href="{{ asset('js/plugins/bootstrap-fileinput/css/fileinput.min.css') }}" rel="stylesheet">
@endsection


@section('scripts_content')
	<script src="{{ asset('calendario/js/moment.min.js') }}""></script>
	<script src="{{ asset('calendario/js/fullcalendar.min.js') }}""></script>
	<script src="{{ asset('calendario/locale/es-es.js') }}"></script>
	<script src="{{ asset('js/plugins/multi-select/bootstrap-multiselect.js') }}"></script>
    <script src="{{ asset('js/plugins/bootstrap-fileinput/js/fileinput.min.js') }}"></script>
    <script src="{{ asset('js/plugins/bootstrap-fileinput/js/locales/es.js') }}"></script>
    <script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <script src="{{ asset('js/portal/graficas.js') }}"></script>
    <script src="{{ asset('js/portal/indicators/calendar-general-responsabilities/index.js') }}"></script>
	<script src="{{ asset('js/portal/indicators/calendar-general-responsabilities/calendar.js') }}"></script>
    <script>
        $(document).ready(function() {

            function PadLeft(value, length) {
                return (value.toString().length < length) ? PadLeft("0" + value, length) :
                value;
            }

            var curren_date = '';

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaDay'
                },
                defaultDate: curren_date,
                businessHours: [ // specify an array instead
                    {
                        daysOfWeek: [1, 2, 3, 4, 5, 6],
                        startTime: '09:00', // 8am
                        endTime: '21:00' // 6pm
                    }
                ],
                minTime: "06:00",
                maxTime: "21:00",
                timeZone: 'America/Bogota',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                lazyFetching: false,
                eventClick: function(event) {

                    calendario.searchSchedule_id = event.id,
                    calendario.searchSchedule_date = event.start.format('YYYY-MM-DD'),

                    $('#view-agenda').hide();
                    $('#view-cita').hide();

                    if(event.type == 'agenda'){

                        $('#label-type').html('INFORMACIÓN AGENDA')
                        $('#visualizar #id').text(event.id);
                        $('#visualizar #title').text(event.title);
                        $('#visualizar #start').text(event.start.format('DD/MM/YYYY HH:mm:ss'));
                        $('#visualizar #presentation_status').html(calendario.setLableState(event.presentation_status));
                        $('#visualizar #presentation_date').text(event.presentation_date);
                        $('#visualizar #rejection_reason').html(event.rejection_reason);
                        $('#visualizar #cicle').text(event.notify_info_cicle_name);

                        $('#visualizar #professional').text(event.professional);
                        $('#visualizar #schedule_time').text(event.schedule_time);
                        $('#visualizar #time_dating').text(event.time_dating);
                        $('#visualizar #available_time').text(event.available_time);

                        var div = `<div class="progress mg-b-10">
                          <div class="progress-bar ${event.contentclass} wd-${event.percentage_value}p" role="progressbar" style="width: ${event.percentage_value}%;" aria-valuenow="${event.percentage_value}" aria-valuemin="0" aria-valuemax="100">${event.percentage_value}%</div>
                        </div>`
                        $('#visualizar #progress').html(div);



                        var tr = '';
                        var number = 1;
                        var numdis = 0;
                        $.each(event.schedule_activities, function(index, value){

                            numdis = event.available_time == 0 ? 0 : event.available_time / value.DURAACTIV;

                            tr += '<tr>'
                                 + '  <td>'+ number +'</td>'
                                + '  <td>'+ value.DESACTMED +'</td>'
                                + '  <td class="text-center">'+ value.CANTIDAD +'</td>'
                                + '  <td class="text-center">'+ value.DURAACTIV +'</td>'
                                + '  <td class="text-center">'+ parseInt(numdis) +'</td>'
                                + '</tr>'
                            number++;
                        });

                        $('#tbl-activities tbody').html(tr);

                        // Cargar actividades
                        $('#view-agenda').show();

                    }

                    $('#btn-apply-compliance').show();
                    $('.loadfile').show();
                    if(event.presentation_status == 'C'){
                        $('#btn-apply-compliance').hide();
                        $('.loadfile').hide();
                    }

                    $('#visualizar').modal('show');
                    documentSupport.viewDocumentTracing();

                },
                selectable: false,
                selectHelper: false,
                select: function(start, end){
                    $('#cadastrar #start').val(moment(start).format('DD/MM/YYYY HH:mm:ss'));
                    $('#cadastrar #end').val(moment(end).format('DD/MM/YYYY HH:mm:ss'));
                    $('#cadastrar').modal('show');
                },
                events: function(start, end, timezone, callback) {

                    var notifications_selected = calendario.getNotificationsSelected()
                    var schedule_id = calendario.searchSchedule_id;
                    calendario.searchSchedule_id = 0;

                    var date = $("#calendar").fullCalendar('getDate');
                    let month = date.month() + 1;
                    month = PadLeft(month,2)

                    $.ajax({
                        type: "POST",
                        data: {
                            start: start.unix(),
                            end: end.unix(),
                            view: this.getView().name,
                            notifications : notifications_selected,
                            _token: $('input[name=_token]').val(),
                            schedule_id : schedule_id,
                            period  : date.year() + '' + month,
                            month : date.month(),
                            token_user : $('#token_user').val()
                        },
                        url: "/Indicator/events-calendar-responsibilities",
                        dataType: "json",
                        success: function(data) {

                            var eventsList = [];
                            var count = 0;

                            dashboard.loadChartAlertDistributionYear(data.consolidate);
                            $('#month_name').html(data.month_name);


                            $.each(data.result, function(key, value){

                                var id = value.id;
                                var start = value.start;
                                var presentation_status = value.presentation_status;
                                var presentation_date = value.presentation_date;
                                var title = value.title;
                                var specialty = value.specialty;
                                var color =  value.color;
                                var professional =  value.professional;
                                var percentage =  value.percentage;
                                var contentclass =  value.contentclass;
                                var type = value.type;
                                var schedule_activities = value.schedule_activities != undefined ? value.schedule_activities : [];
                                var state_appointment = value.state_appointment != undefined ? value.state_appointment : '';
                                var schedule_time = value.schedule_time;
                                var time_dating = value.time_dating;
                                var available_time = value.available_time;
                                var percentage_value = value.percentage_value;
                                var medical_activity = value.medical_activity;
                                var consulting_room = value.consulting_room;
                                var notify_info_cicle_name = value.notify_info_cicle_name;
                                var rejection_reason = value.rejection_reason;

                                eventsList.push({
                                    id : id,
                                    title : title,
                                    specialty : specialty,
                                    start: start,
                                    presentation_status: presentation_status,
                                    presentation_date : presentation_date,
                                    color: color,
                                    professional: professional,
                                    percentage : percentage,
                                    contentclass : contentclass,
                                    type : type,
                                    schedule_activities: schedule_activities,
                                    state_appointment : state_appointment,
                                    schedule_time : schedule_time,
                                    time_dating : time_dating,
                                    available_time : available_time,
                                    percentage_value : percentage_value,
                                    medical_activity : medical_activity,
                                    consulting_room : consulting_room,
                                    notify_info_cicle_name : notify_info_cicle_name,
                                    rejection_reason : rejection_reason
                                });

                            })

                            callback(eventsList);

                        }
                    });
                }
            });
        });

        //Mascara para o campo data e hora
        function DataHora(evento, objeto){
            var keypress=(window.event)?event.keyCode:evento.which;
            campo = eval (objeto);
            if (campo.value == '00/00/0000 00:00:00'){
                campo.value=""
            }

            caracteres = '0123456789';
            separacao1 = '/';
            separacao2 = ' ';
            separacao3 = ':';
            conjunto1 = 2;
            conjunto2 = 5;
            conjunto3 = 10;
            conjunto4 = 13;
            conjunto5 = 16;
            if ((caracteres.search(String.fromCharCode (keypress))!=-1) && campo.value.length < (19)){
                if (campo.value.length == conjunto1 )
                campo.value = campo.value + separacao1;
                else if (campo.value.length == conjunto2)
                campo.value = campo.value + separacao1;
                else if (campo.value.length == conjunto3)
                campo.value = campo.value + separacao2;
                else if (campo.value.length == conjunto4)
                campo.value = campo.value + separacao3;
                else if (campo.value.length == conjunto5)
                campo.value = campo.value + separacao3;
            }else{
                event.returnValue = false;
            }
        }
    </script>

	<script>
		$(document).ready(function() {
			calendario.setNotificationsInit(null);
			calendario.initializeCheckNotifications();
		});
	</script>
@endsection


@section('content')

<div class="br-mainpanel" style="margin: 50px">
    <div class="br-pagebody" style="padding: 0 5px;">
        <div class="br-section-wrapper" style="padding: 0px;">
            <div class="row">
                <div class="col-sm-3">
                    <div class="col-xl-12 mt-4">
                        <div class="bd pd-t-10 pd-b-10 pd-x-10">
                          <h4 class="tx-inverse"><i class="fa fa-bar-chart tx-24 pr-3"></i><span id="month_name"></span></h4>
                          <div class="content-graphic" data-id="chart-alert-distribution-year">
                          </div>
                        </div>
                    </div><!-- col-6 -->
                </div>
                <div class="col-sm-9" style="padding-right: 35px;">
                    <div class="card-body table-responsive p-0">
                        <div class="card-body table-responsive p-0">
                          <div class="pt-4">
                            <div class="row">
                              <div class="col-sm-12">
                                <div class="form-group">
                                  <label for="specialties"><i class="fa fa-modx mr-2" aria-hidden="true"></i>Ciclos de notificación</label>
                                  <a href="javascript:void(0)" id="btn-notification" class="btn btn-block btn-outline-primary btn-sm"><i class="fa fa-plus-square-o mr-2" aria-hidden="true"></i>Seleccionar..</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel-body">
                                    <!--Inicio elementos contenedor-->
                                    <div class="page-header">
                                        <h4><i class="fa fa-calendar-plus-o mr-2 text-primary" aria-hidden="true"></i>CALENDARIO RESPONSABILIDADES GENERALES</h4>
                                    </div>
                                    @csrf
                                    <div id='calendar' style="margin-bottom: 50px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->

	{{--  Modal detalle Agenda --}}
	<div class="modal fullscreen-modal fade" id="visualizar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document" style="width: 1000px;">
			<div class="modal-content">
				<div class="modal-header text-white bg-primary">
					<h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-calendar mr-2" aria-hidden="true"></i><span id="label-type"></span></h6>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div id="view-agenda" style="display: none;">
                        <h6 class="tx-gray-800 tx-uppercase tx-bold tx-14 mg-b-10"><i class="fa fa-compress mr-2 text-success" aria-hidden="true"></i>Compromiso</h6>
                        <div class="rounded table-responsive">
                            <table class="table tabler table-bordered dataTable" style="width: 99%;">
                                <thead>
                                    <tr>
                                        <th>Ciclo</th>
                                        <th>Nombre informe</th>
                                        <th>Responsable</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td id="cicle"></td>
                                        <td id="title"></td>
                                        <td id="professional"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <h6 class="tx-gray-800 tx-uppercase tx-bold tx-14 mg-b-10"><i class="fa fa-compress mr-2 text-success" aria-hidden="true"></i>Cumplimiento</h6>
                        <div class="rounded table-responsive">
                            <table class="table tabler table-bordered dataTable" style="width: 99%;">
                                <thead>
                                    <tr>
                                        <th class="text-center">Fecha cumplimiento</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Motivo rechazo</th>
                                        <th>Fecha presenta</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td id="start" class="text-center"></td>
                                        <td id="presentation_status" class="text-center"></td>
                                        <td id="rejection_reason"></td>
                                        <td id="presentation_date"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

						<div class="documents">
                            <h6 class="tx-gray-800 tx-uppercase tx-bold tx-14 mg-b-5 mt-4"><i class="fa fa-files-o mr-2 text-success" aria-hidden="true"></i>Documentos</h6>
                            <div class="row mt-4 loadfile">
                              <div class="col-sm-12">
                                <form method="POST" autocomplete="off">
                                  @csrf
                                  <div class="row">
                                    <div class="col-sm-6">
                                      {!! Form::text('documentname', null,['class'=>'form-control input-date', 'placeholder'=>'Nombre del documento', 'id'=>'documentname']) !!}
                                    </div>
                                    <div class="col-sm-6">
                                      <div class="file-loading ml-4 mb-4">
                                        <input id="file-es" name="file" type="file" multiple>
                                      </div>
                                    </div>
                                  </div>
                                </form>
                              </div>
                            </div>

                            <div class="row text-center mt-4">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="rounded table-responsive">
                                            <table id="tbldocuments" class="table tabler table-bordered dataTable" style="width: 99%;">
                                                <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Nombre archivo</th>
                                                    <th>Fecha creación</th>
                                                    <th>Usuario creación</th>
                                                    <th>Acción</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

					</div>
				</div>
				<div class="modal-footer">
                    <button type="button" id='btn-apply-compliance' class="btn btn-primary btn-sm tx-size-xs" style="background-color:#0f2b48; border-color: #0f2b48;"><i class="fa fa-floppy-o mr-2" aria-hidden="true"></i>Aplicar cumplimiento</button>
				</div>
			</div>
		</div>
	</div>
    </div>
	{{--  Fin modal detalle agenda  --}}
	{{--  Modal selección ciclos notificacion  --}}
  	@include('Indicator.calendar-general-responsabilities._notification_cycles', ['notifications' => $notifications])


</div>


@endsection