@extends('layouts.portal.principal')

@section('css_custom')
  <link href="{{ asset('js/plugins/bootstrap-fileinput/css/fileinput.min.css') }}" rel="stylesheet">
  <link href="{{ asset('js/plugins/bootstrap-datepicker/css/bootstrap-datepicker.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: 11px;
    }
    .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('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-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/officials/income-certificates/index.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="#">Control presupuestal</a>
        <span class="breadcrumb-item active">Genaración certificados de ingresos y retención</span>
      </nav>
    </div><!-- br-pageheader -->

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

        <table width='100%' style="margin-bottom: 40px;">
          <tr>
              <td width='50' align="center" valign="top" class="pr-4">
                  <h1><i class="fa fa-check-square-o text-primary" aria-hidden="true"></i></h1>
              </td>
              <td>
                  <h5 class="tx-gray-800 mg-b5" style="margin-bottom: 0px;">GENERACIÓN CERTIFICADOS DE INGRESOS Y RETENCIÓN</h5>
                  <span class='titulos'>2525-05-12 11:05</span>
              </td>
          </tr>
        </table>
        <div class="row ml-4 mb-4 loadfile">
          <div class="col-sm-12">
            <form method="POST" autocomplete="off">
              @csrf
              <div class="row">
                <div class="col-sm-2">
                  {!! Form::text('year', null,['class'=>'form-control input-date', 'placeholder'=>'Año ingresos', 'id'=>'year']) !!}
                </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 row ml-4 mb-4">
          <div class="col-sm-12">
            <div class="row mb-4 mt-4">
              <div class="col-sm-4 col-md-2 div-btn-not-generate" style="display: none;">
                <button class="btn btn-primary btn-block btn-sm mg-b-10" id="bth-generate-document"><i class="fa fa-file-pdf-o mg-r-10"></i>Generar PDFS</button>
              </div><!-- col-sm -->
              <div class="col-sm-4 col-md-2 div-btn-generate" style="display: none;">
                <button class="btn btn-success btn-block btn-sm mg-b-10" id="bth-donwload-document"><i class="fa fa-download mg-r-10"></i>Descargar PDFS</button>
              </div><!-- col-sm -->
              <div class="col-sm-4 col-md-2 mg-t-20 mg-sm-t-0 div-btn-generate" style="display: none;">
                <button class="btn btn-warning btn-block btn-sm mg-b-10" id="btn-confirm-process"><i class="fa fa-share-square-o mg-r-10"></i>CONFIRMAR PROCESO</button>
              </div><!-- col-sm -->
              <div class="col-sm-4 col-md-2 mg-t-20 mg-sm-t-0 div-btn-generate" style="display: none;">
                <button class="btn btn-danger btn-block btn-sm mg-b-10" id="btn-cancel-process"><i class="fa fa-ban mg-r-10"></i>CANCELAR PROCESO</button>
              </div><!-- col-sm -->
            </div>
            <div class="bd rounded table-responsive" style="width: 60%;">
              <table class="table table-bordered mg-b-0" id="tblproccess" style="font-size: 11px; ">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>IDENTIFICACIÓN</th>
                    <th style="width: 35%;">NOMBRE</th>
                    <th>FECHA INICIAL</th>
                    <th>FECHA FINAL</th>
                    <th class="text-center"></th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </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>

@endsection