@extends('layouts.app')

@section('custom-styles')  
  <!-- DataTables -->
  <link href="/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-autofill/css/autoFill.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-colreorder/css/colReorder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-datetime/css/dataTables.dateTime.min.css" rel="stylesheet">
  <link href="/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-fixedheader/css/fixedHeader.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-rowgroup/css/rowGroup.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-scroller/css/scroller.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-searchbuilder/css/searchBuilder.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-searchpanes/css/searchPanes.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-select/css/select.bootstrap4.min.css" rel="stylesheet">
  <link href="/plugins/datatables-staterestore/css/stateRestore.bootstrap4.min.css" rel="stylesheet">  
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-sliders-h fa-xs"></i> {{ __('Parámetros') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Sistema</li>
        <li class="breadcrumb-item active">Parámetros</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                      {{-- <h3 class="card-title">{{ __('parametros.lista.titulo') }}</h3> --}}
                      <a href="{{ route('parametros.create') }}" class="btn bg-primary">Nuevo Parámetro</a>                      
                      @if(!@empty(session('message')))
                      <hr class="hr hr-blurry" />
                          @switch(session('type'))
                              @case('OK')
                                <div class="alert alert-success alert-dismissible">
                                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                  <h5><i class="icon fas fa-check"></i> Listo!</h5>
                                  {{ session('message') }}
                                </div>
                                  @break
                              @default
                                <div class="alert alert-warning alert-dismissible">
                                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                  <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                                  {{ session('message') }}
                                </div>
                          @endswitch
                      @endif
                      <div class="card-tools">
                        
                      </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body table-responsive p-0">
                        <table id="parametro-table-list" class="table table-bordered table-striped">
                        <thead>
                          <tr>
                            <th class="text-center">Clave</th>
                            <th class="text-center">Valor</th>
                            <th class="text-center">Valor Base</th>
                            <th class="text-center">Descripción</th>
                            {{-- <th class="text-center">Editable</th> --}}
                            <th class="text-center">Última mod.</th>
                            <th class="text-center">Acciones</th>
                          </tr>
                        </thead>
                        <tbody>                          
                            @foreach($parametros as $parametro)
                            @if ( $parametro->editable === 0 && !Auth::user()->hasRole('super-admin') )
                                @continue                                
                            @endif
                            <tr>
                                <td class="text-center align-middle">{{ $parametro->clave }}</td>
                                <td class="text-center align-middle">{{ $parametro->valor }}</td>
                                <td class="text-center align-middle">{{ $parametro->valor_base }}</td>
                                <td class="text-center align-middle">{{ $parametro->descripcion }}</td>
                                {{-- <td class="text-center align-middle">
                                    @if ($parametro->editable !== 1)
                                        <i class="fas fa-ban" title="No editable"></i>                                    
                                    @endif
                                </td>                                 --}}
                                <td class="text-center align-middle">{{ $parametro->updated_at->format('d/m/Y H:m') }}</td>                                
                                <td class="text-center align-middle">
                                    @if ($parametro->editable === 1)
                                        <a class="btn btn-info btn-sm" href="{{ route('parametros.edit', $parametro->id) }}">
                                            <i class="fas fa-edit"></i> Editar
                                        </a>
                                        <a class="btn btn-danger btn-sm delete-button" data-toggle="modal" data-target="#modal-delete" data-form-action="{{ route('parametros.destroy', $parametro->id) }}" title="Eliminar Parámetro" style="cursor:pointer;">
                                            <i class="fas fa-trash-alt"></i> Borrar
                                        </a>                                    
                                    @endif
                                </td>
                            </tr>                          
                            @endforeach
                        </tbody>
                        <tfoot>
                        {{-- <tr>
                          <th class="text-center">Bloque</th>
                          <th class="text-center">Número</th>
                          <th>Nombre</th>
                          <th class="text-center">Contrato</th>
                          <th class="text-center">Estado</th>
                          <th class="text-center">Última mod.</th>
                          <th class="text-center">Acciones</th>
                        </tr> --}}
                      </tfoot>
                      </table>
                    </div>
                    <!-- /.card-body -->
                  </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- /.content -->

  <div class="modal fade" id="modal-delete" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="delete-form" action="" method="POST">
          @csrf
          @method('DELETE')
        <div class="modal-header">
          <h4 class="modal-title">Eliminar</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>¿Confirmas eliminar el Parámetro?</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Eliminar</button>
        </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

@endsection

@section('custom-scripts')
  <!-- DataTables  & Plugins -->
  <script src="/plugins/jszip/jszip.min.js"></script>
  <script src="/plugins/pdfmake/pdfmake.min.js"></script>
  <script src="/plugins/pdfmake/vfs_fonts.js"></script>
  <script src="/plugins/datatables/dataTables.min.js"></script>
  <script src="/plugins/datatables/dataTables.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-autofill/js/dataTables.autoFill.min.js"></script>
  <script src="/plugins/datatables-autofill/js/autoFill.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="/plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="/plugins/datatables-colreorder/js/dataTables.colReorder.min.js"></script>
  <script src="/plugins/datatables-datetime/js/dataTables.dateTime.min.js"></script>
  <script src="/plugins/datatables-fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
  <script src="/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js"></script>
  <script src="/plugins/datatables-keytable/js/dataTables.keyTable.min.js"></script>
  <script src="/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="/plugins/datatables-responsive/js/responsive.bootstrap4.js"></script>
  <script src="/plugins/datatables-rowgroup/js/dataTables.rowGroup.min.js"></script>
  <script src="/plugins/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
  <script src="/plugins/datatables-scroller/js/dataTables.scroller.min.js"></script>
  <script src="/plugins/datatables-searchbuilder/js/dataTables.searchBuilder.min.js"></script>
  <script src="/plugins/datatables-searchbuilder/js/searchBuilder.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-searchpanes/js/dataTables.searchPanes.min.js"></script>
  <script src="/plugins/datatables-searchpanes/js/searchPanes.bootstrap4.min.js"></script>
  <script src="/plugins/datatables-select/js/dataTables.select.min.js"></script>
  <script src="/plugins/datatables-staterestore/js/dataTables.stateRestore.min.js"></script>
  <script src="/plugins/datatables-staterestore/js/stateRestore.bootstrap4.min.js"></script>

  <script>

    $(function () {

      $("#parametro-table-list").DataTable({
        responsive: true, 
        lengthChange: false, 
        autoWidth: false,        
        layout: {
            topStart: {
                buttons: [
                  "copy", 
                  "excel", 
                  {
                      extend: 'pdf',
                      orientation: 'landscape',
                      pageSize: 'A4'
                  },
                  "print"
                ] //"csv","colvis"
            },
            // bottomStart: {
            //   info: {
            //       empty: 'Ningún dato disponible en esta tabla.'
            //   }
            // }
        },
        language: {
            url: '/plugins/datatables-i18n/es-ES.json',
        }
      }); //.buttons().container().appendTo('#unidadesTable_wrapper .col-md-6:eq(0)');

    });

    $('#modal-delete').on('show.bs.modal', function (event) {
    
      var button = $(event.relatedTarget);
      $('#delete-form').attr('action', button.data('form-action'));
    
    });

  </script>
@endsection