@extends('layouts.portal.external')

@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-responsibilities/glyphicon.css') }}" rel="stylesheet">
	<link href="{{ asset('js/portal/indicators/calendar-responsibilities/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-responsibilities/calendar.css') }}" rel="stylesheet">
	<link href="{{ asset('css/portal/style-datetable.css') }}" rel="stylesheet">

	<style>
		.fc-event, .fc-event:hover {
			color: #fff !important;
			text-decoration: none;
		}
		.status_schemdule {
			margin-right: 4px;
			margin-left: 4px;
			color: #ffff;
			font-size: .79em !important;
			line-height: 1.3;
			font-weight: 700;
			border-color: black;
			border: .12em solid black;
			letter-spacing: 1px;
		}

	</style>
	<style>
		.table td {
		  padding: 0.25rem !important;
		}
		.table {
		  font-size: 12px !important;
		}
		.font-head {
		  font-weight: 700;
		  font-size: 12px;
		  text-transform: uppercase;
		  color: #343a40;
		  letter-spacing: 0.5px;
		}
		.text-u {
		  text-transform: uppercase !important;
		}
		.text-l {
		  text-transform: lowercase !important;
		}
        .form-layout-6 .row > div, .form-layout-7 .row > div {
            border: 1px solid #ced4da;
            padding: 10px 10px;
        }
        .height25{
            height: 25px !important;
        }
        #view-agenda{
            font-size: 16px;
        }
        input[type="file"]{
            height:50px;
        }

        input[type="file"]::-webkit-file-upload-button{
                height:50px;
        }

	  </style>
      <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-responsibilities/index.js') }}"></script>
	<script src="{{ asset('js/portal/indicators/calendar-responsibilities/calendar.js') }}"></script>

	<script>
		$(document).ready(function() {
			calendario.setNotificationsInit(null);
			calendario.initializeCheckNotifications();
		});
	</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 #rejection_reason').html(event.rejection_reason);
                        $('#visualizar #presentation_date').text(event.presentation_date);
                        $('#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: "/ScheduleControl/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>
@endsection


@section('content')
<div class="br-mainpanel" style="margin: 50px">

    <div class="br-pageheader pd-y-15 pd-l-20">
        <div class="fusion-layout-column fusion_builder_column fusion-builder-column-7 fusion_builder_column_1_4 1_4 fusion-flex-column" style="--awb-bg-size:cover;--awb-width-large:25%;--awb-margin-top-large:0px;--awb-spacing-right-large:7.68%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:7.68%;--awb-width-medium:25%;--awb-order-medium:0;--awb-spacing-right-medium:7.68%;--awb-spacing-left-medium:7.68%;--awb-width-small:50%;--awb-order-small:0;--awb-spacing-right-small:3.84%;--awb-spacing-left-small:3.84%;">
            <div class="fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column">
                <div class="fusion-image-element " style="--awb-sticky-max-width:40%;--awb-max-width:70%;--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);">
                    <span class=" has-fusion-standard-logo fusion-imageframe imageframe-none imageframe-3 hover-type-none">
                        <a class="fusion-no-lightbox" href="javascript:void(0)" target="_self">
                            <img decoding="async" src="https://www.cchuila.org/wp-content/uploads/logo-camara-de-comercio-del-huila-cchuila.png" style="max-height:90px;height:auto;" width="326" height="130" class="img-responsive fusion-standard-logo lazyloaded">
                        </a>
                    </span>
                </div>
            </div>
        </div>
    </div><!-- br-pageheader -->

    <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="pt-4">
                          <div class="row">
                            <div class="col-sm-12">
                              <div class="form-layout form-layout-6 pb-4 person-basic" style="">
                                  <div class="row no-gutters">
                                    <div class="col-5 col-sm-4">
                                      Nombre responsable:
                                    </div><!-- col-4 -->
                                    <div class="col-7 col-sm-8 text-uppercase" id="nombre_alt">{{ $notifyinfotoken->responsible_person }}</div><!-- col-8 -->
                                  </div><!-- row -->
                                  <div class="row no-gutters">
                                    <div class="col-5 col-sm-4">
                                      Email responsable:
                                    </div><!-- col-4 -->
                                    <div class="col-7 col-sm-8 text-uppercase" id="tipdoc_alt">{{ $notifyinfotoken->email }}</div><!-- col-8 -->
                                  </div><!-- row -->
                              </div>
                            </div>
                          </div>
                        </div>
                        </div>
                        <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> Agendamiento responsabilidades</h4>
                                  </div>
                                                                    @csrf
                                  <input type="hidden" id="token_user" name="token_user" value="{{ $notifyinfotoken->token }}">
                                  <div id='calendar' style="margin-bottom: 50px;"></div>
                              </div>



                              <div class="modal fade" id="cadastrar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="static">
                                  <div class="modal-dialog" role="document">
                                      <div class="modal-content">
                                          <div class="modal-header">
                                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                              <h4 class="modal-title text-center">Registrar Evento</h4>
                                          </div>
                                          <div class="modal-body">
                                              <form class="form-horizontal" method="POST" action="proceso.php">
                                                  <div class="form-group">
                                                      <label for="inputEmail3" class="col-sm-2 control-label">Titulo</label>
                                                      <div class="col-sm-10">
                                                          <input type="text" class="form-control" name="titulo" placeholder="Titulo do Evento">
                                                      </div>
                                                  </div>
                                                  <div class="form-group">
                                                      <label for="inputEmail3" class="col-sm-2 control-label">Color</label>
                                                      <div class="col-sm-10">
                                                          <select name="color" class="form-control" id="color">
                                                              <option value="">Selecione</option>
                                                              <option style="color:#FFD700;" value="#FFD700">Amarillo</option>
                                                              <option style="color:#0071c5;" value="#0071c5">Azul Turquesa</option>
                                                              <option style="color:#FF4500;" value="#FF4500">Naranja</option>
                                                              <option style="color:#8B4513;" value="#8B4513">Marron</option>
                                                              <option style="color:#1C1C1C;" value="#1C1C1C">Negro</option>
                                                              <option style="color:#436EEE;" value="#436EEE">Azul Real</option>
                                                              <option style="color:#A020F0;" value="#A020F0">Purpura</option>
                                                              <option style="color:#40E0D0;" value="#40E0D0">Turquesa</option>
                                                              <option style="color:#228B22;" value="#228B22">Verde</option>
                                                              <option style="color:#8B0000;" value="#8B0000">Rojo</option>
                                                          </select>
                                                      </div>
                                                  </div>
                                                  <div class="form-group">
                                                      <label for="inputEmail3" class="col-sm-2 control-label">Data Inicial</label>
                                                      <div class="col-sm-10">
                                                          <input type="text" class="form-control" name="inicio" id="start" onKeyPress="DataHora(event, this)">
                                                      </div>
                                                  </div>
                                                  <div class="form-group">
                                                      <label for="inputEmail3" class="col-sm-2 control-label">Data Final</label>
                                                      <div class="col-sm-10">
                                                          <input type="text" class="form-control" name="fin" id="end" onKeyPress="DataHora(event, this)">
                                                      </div>
                                                  </div>
                                                  <div class="form-group">
                                                      <div class="col-sm-offset-2 col-sm-10">
                                                          <button type="submit" class="btn btn-success">Registrar</button>
                                                      </div>
                                                  </div>
                                              </form>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <!--Fin elementos contenedor-->
                          </div>
                      </div>
                </div>
            </div>
			{{--  <div class="container">


			</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-responsibilities._notification_cycles', ['notifications' => $notifications])


</div>


@endsection