@extends('layouts.portal.external')

@section('css_custom')
  <link href="{{ asset('js/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
  <link href="{{ asset('js/plugins/bootstrap-fileinput/css/fileinput.min.css') }}" rel="stylesheet">

@endsection

@section('scripts_content')
  <script src= "{{ asset('js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
  <script src= "{{ asset('js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js') }}"></script>
  <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>
  <script src="{{ asset('js/portal/indicators/control/control.approve.js') }}"></script>
@endsection

@section('content')
  {{-- <style>
    .ui-datepicker {z-index: 1151 !important;}
  </style> --}}
  <div style="margin-left:10%; margin-right:10%;">

    @include('includes/mensaje')
    @include('includes/form-error')

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

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

            <div class="form-layout form-layout-2">
                <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>
                            <input type="hidden" name="token-view" id="token-view" value="{{ $token }}" disabled>
                            @csrf
                        </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><!-- row -->
            </div>

            <div class="row mb-4">
              <input type="hidden" name="start" id="start" value="{{ $notify->start }}">
              <div class="col-sm-12" style="margin-top: 40px;">
                @if ($notify->start == 1)
                <button id="btn-approved" class="btn btn-success btn-block mg-b-10" style="display: none;"><i class="fa fa-send mg-r-10"></i>Aprobar programación indicadores</button>
                <h5 class="tx-thin text-success"><i class="fa fa-play-circle mr-4" aria-hidden="true"></i>Ciclo de notificaciones iniciado - {{ $notify->start_date }}</h5>
                @else
                <h5 class="tx-thin text-warning"><i class="fa fa-stop-circle mr-4" aria-hidden="true"></i>Ciclo de notificaciones sin iniciar</h5>
                @endif
                <h5 class="tx-thin text-success msg-aproved mt-4" style="display: none;">Notificaciones aprobadas <span id="approved-date" style="font-size: 20px; font-style: inherit;"></span></h5>
              </div>
            </div>

            <table id='controls' class="table display responsive nowrap no-footer dtr-inline" 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" style="z-index: 100 !important;">
      <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="mb-3 text-primary" id="div-addprograming"><span class="tooltipsC" style="cursor: pointer" id="addprograming" title="Adicionar fecha"><i class="fa fa-plus-square mr-2" aria-hidden="true"></i>Adicionar programación</span></div>
                <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">
          <span class="mr-4 text-success msg-approve" style="display:none;"><i class="fa fa-check-square-o" aria-hidden="true"></i>Aprovado - <span class="approve_date"></span></span>
          <button type="button" class="btn btn-success btn-approved-modal btn-sm"><i class="fa fa-floppy-o mr-2" aria-hidden="true"></i>Guardar y aprobar</button>
          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal"><i class="fa fa-window-close mr-2" aria-hidden="true"></i>Cerrar</button>
        </div>
      </div>
    </div>
  </div>

@endsection