@extends('layouts.portal.principal')

@section('css_custom')
  <link href="{{ asset('js/plugins/bootstrap-fileinput/css/fileinput.min.css') }}" rel="stylesheet">
  <link href="{{ asset('css/portal/style-datetable.css') }}" rel="stylesheet">
  <style>
    .table th, .table td {
      padding: 0.25rem !important;
    }
    .table {
      font-size: 12px;
    }
    .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;
    }
  </style>
@endsection

@section('scripts_content')
  <script src="{{ asset('theme/lib/datatables/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('theme/lib/datatables-responsive/dataTables.responsive.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="{{ asset('js/portal/indicators/control/control.import.js') }}"></script>
  <script src="{{ asset('js/portal/indicators/control/control.show.js') }}"></script>
@endsection

@section('content')
  <div class="br-mainpanel">
    @include('includes/mensaje')
    @include('includes/form-error')
    <div class="br-pageheader pd-y-15 pd-l-20">
      <nav class="breadcrumb pd-0 mg-0 tx-12">
        <a class="breadcrumb-item" href="{{url('Indicator/indicators')}}">Ciclo notificaciones</a>
        <span class="breadcrumb-item active">Ciclo notificación</span>
      </nav>
    </div><!-- br-pageheader -->

    <div class="br-pagebody" style="padding: 0 10px;">

        <div class="br-section-wrapper p-5">

            <div class="form-layout form-layout-2 mb-4">
                <h4 class="tx-gray-800 mg-b-5 mb-4"><i class="fa fa-briefcase mr-4" aria-hidden="true"></i>Ciclo notificación</h4>
                <div class="row no-gutters">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-control-label">Año:</label>
                            <input class="form-control" type="text" name="firstname" value="{{ $notify->year }}">
                            <input type="hidden" name="notify_cicle_id" id="notify_cicle_id" value="{{ $notify->id }}" disabled>
                        </div>
                    </div><!-- col-4 -->
                    <div class="col-md-4 mg-t--1 mg-md-t-0">
                        <div class="form-group mg-md-l--1">
                            <label class="form-control-label">Ciclo:</label>
                            <input class="form-control" type="text" name="lastname" value="{{ $notify->cicle }}" disabled>
                        </div>
                    </div><!-- col-4 -->
                    <div class="col-md-8">
                        <div class="form-group bd-t-0-force">
                            <label class="form-control-label">Descripción:</label>
                            <textarea name="" id="" class="form-control" cols="30" rows="3" disabled>{{ $notify->description }}</textarea>
                        </div>
                    </div><!-- col-8 -->
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="form-control-label">Estado:</label>
                            @if($notify->start != 1)
                              <span class="form-control text-danger">SIN INICIAR</span>
                            @else
                              <span class="form-control text-success">CICLO DE NOTIFICACIÓN INICIADO {{ $notify->start_date }}</span>
                            @endif
                        </div>
                    </div><!-- col-4 -->
                </div><!-- row -->
            </div>
            <div class="row">
              @if($notify->start != 1)
                <div class="col-sm-12 mt-4 text-center">
                  <button id="btn-ciclestart" class="btn btn-success btn-block mg-b-10"><i class="fa fa-play" aria-hidden="true"></i>&nbsp;&nbsp;INICIAR CICLO DE NOTIFICACIÓN</button>
                  <h4 class="tx-thin tx-inverse text-success" style="display: none;">CICLO DE NOTIFICACIÓN INICIADO <span id="approved-date"></span></h4>
                </div>
              @endif
            </div>
            @if($notify->start == 1)
            <div class="row" id="div_new_report" style="display:none;">
              <div class="col-sm-12 mt-4 text-center">
                <button id="btn-new-report" class="btn btn-primary btn-block mg-b-10"><i class="fa fa-plus-square-o mr-4" aria-hidden="true"></i>&nbsp;&nbsp;NUEVO INFORME</button>
                <h4 class="tx-thin tx-inverse text-success" style="display: none;">CICLO DE NOTIFICACIÓN INICIADO <span id="approved-date"></span></h4>
              </div>
            </div>
            @endif
            <table id='controls' class="table display responsive nowrap no-footer dtr-inline mt-4" role="grid" aria-describedby="datatable1_info">
                <thead>
                    <tr role="row">
                        <th>Código</th>
                        <th>Nombre informe</th>
                        <th>Periocidad</th>
                        <th>Correo responsable</th>
                        <th>Correos copía</th>
                        <th>Resultado</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table><!-- table-wrapper -->

        </div><!-- br-section-wrapper -->
    </div><!-- br-pagebody -->
    <footer class="br-footer">
      <div class="footer-left">
        <div class="mg-b-2"></div>
        <div></div>
      </div>
      <div class="footer-right d-flex align-items-center">
        <span class="tx-uppercase mg-r-10">Share:</span>
      </div>
    </footer>
  </div>

  <div class="modal" tabindex="-1" role="dialog" id='modal-detalle'>
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content" style="width: 800px;"">
        <div class="modal-body">
          <div class="row no-gutters">
            <div class="col-lg-12">
              <div class="pd-40">
                <h4 class=" mg-b-20"><span class="text-primary">[</span>&nbsp;<span id="report_name" class="text-primary"></span>&nbsp;<span class="text-primary">]</span></h4>
                <table class="mb-4">
                  <tr>
                    <td><span class="text-dark font-weight-bold">Unidad: </span></td>
                    <td><span id="responsible_unit"></span></td>
                  </tr>
                  <tr>
                    <td><span class="text-dark font-weight-bold">Responsable:</span></td>
                    <td><span id="responsible_name"></span></td>
                  </tr>
                  <tr>
                    <td><span class="text-dark font-weight-bold">Periocidad: </span></td>
                    <td><span id="periodicity"></span></td>
                  </tr>
                  <tr>
                    <td valign="top"><span class="text-dark font-weight-bold">Normatividad: </span></td>
                    <td><span id="normativity"></span></td>
                  </tr>
                </table>
                <h6 class="text-danger" id="modal_error"></h6>
                <div class="bd rounded table-responsive">
                  <table class="table table-bordered mg-b-0" id='tbl-programing'>
                    <thead>
                      <tr>
                        <th>#</th>
                        <th class="text-center">Primera notificación</th>
                        <th class="text-center">Segunda notificación</th>
                        <th class="text-center">Fecha presentación</th>
                        <th class="text-center">Estado</th>
                        <th class="text-center">&nbsp;</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
              </div><!-- col-6 -->
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>

  {{--  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>Detalle cumplimiento</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">
                        <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" id="tbl-head-cicle" style="width: 99%;">
                                <thead>
                                    <tr>
                                        <th>Ciclo</th>
                                        <th>Nombre informe</th>
                                        <th>Responsable</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </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" id="tbl-info-cumpli" 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>
                                </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">
				</div>
			</div>
		</div>
	</div>
    </div>
	{{--  Fin modal detalle agenda  --}}

  <div class="modal fade" id="md-edit-law-report" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document" style="width:800px;">
        <div class="modal-content">
        <div class="modal-header text-white bg-primary text-uppercase" style="height: 40px;">
            <h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-inbox mr-2" aria-hidden="true"></i>INFORMES DE LEY</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 class="row">
                <div class="col-sm-12" style="overflow: scroll; height: 600px;">

                    {!! Form::open([
                        'route' => 'indicator.update-programmin',
                        'method'=>'POST',
                        'autocomplete'=>'off',
                        'class' => 'form-horizontal',
                        'files' => true,
                        'onsubmit' => "submitButton.disabled = true",
                        'id' => 'form-detail-report'
                    ]) !!}


                    <div class="form-group">
                      {!! Form::label('report_name', 'Nombre informe <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('report_name', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group div_code_report" style="display:none;">
                      {!! Form::label('code', 'Código informe <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('code', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group">
                      {!! Form::label('normativity', 'Normatividad <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('normativity', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group">
                      {!! Form::label('periodicity', 'Periocidad <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('periodicity', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group">
                      {!! Form::label('responsible_unity', 'Departamento responsable <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('responsible_unity', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group">
                      {!! Form::label('responsible_person', 'Nombre responsable <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('responsible_person', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group">
                      {!! Form::label('responsible_email', 'Email responsable <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('responsible_email', null, ['class' => 'form-control form-control-sm document_number head-report', 'required' => 'required', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    <div class="form-group">
                      {!! Form::label('email_send_cc', 'Notificar Emails copia', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                      <div class="col-md-12">
                          {!! Form::text('email_send_cc', null, ['class' => 'form-control form-control-sm document_number head-report', 'style' => 'height: 25px;']) !!}
                      </div>
                    </div>

                    {!! Form::close() !!}

                    <div class="table-responsive">
                      <table class="table table-condensed" id="tbl-detail-programming">
                         <thead>
                            <tr>
                               <th width="5%">#</th>
                               <th width="25%">Primera notificación</th>
                               <th width="25%">Segunda notificacion</th>
                               <th width="25%">Fecha presentación</th>
                               <th width="25%" class="text-center">{!!  auth()->user()->can("law-reports-edit") ? '<a href="javascript:void(0);" title="" data-index="0" class="tooltipsC text-success programmin-add" data-original-title="Adicionar programación"><div><i class="fa fa-plus-square-o"></i></div></a>' : '' !!}</th>
                            </tr>
                         </thead>
                         <tbody>
                         </tbody>
                      </table>
                   </div>

                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-primary btn-sm" id="btn-save-programming">Guardar</button>
        </div>
        </div>
    </div>
</div>

@endsection