@extends('admin.admin_dashboard_pyme') 
@section('content')
        <link href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">


     <section class="pc-container">
      <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
          <div class="page-block">
            <div class="row align-items-center"> 
              <div class="col-md-12">
                <div class="page-header-title">
                  <h2 class="mb-0">Promociones</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <div class="row">

          <!-- DOM/Jquery table start -->
          <div class="col-sm-12">
            <div class="card"> 
              <div class="card-body">
                <div class="text-end p-4 pb-0"> 
 
                <a  href="{{ route('promocion_pyme/add')}}"  class="btn btn-primary">Agregar Promoción</a>

                       </div>
                <div class="table-responsive dt-responsive">
                  <table id="table-inventory-cat" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                      <th>ID</th>                    
                      <th>Banco</th>
                      <th style="width: 180px;">Descripcion</th>
                      <th >Fecha Inicio</th>
                      <th >Fecha Fin</th>
                      <th >Fecha Firma</th>  
                      <th >Archivo</th> 
                      <th >Editar</th>  
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($promociones as $promociones)                    
                    <tr>                                                            
                      <td>{{ $promociones->id_promociones}}</td>
                      <td>{{ $promociones->bancos_name}}</td> 
                      <td class="text-truncate descripcion-col">
                        {{ $promociones->descripcion }}
                    </td>                                                             
                      <td>{{ $promociones->fecha_ini}}</td>                                                               
                      <td>{{ $promociones->fecha_fin}}</td>                                                               
                      <td>{{ $promociones->fecha_firmar}}</td>       
                      @if ($promociones->archivo == '')
                      <td> <center><a href="{{ config('services.url_global.key') }}/storage/app/{{$promociones->archivo}}" target="_blank"></a></center></td>
                      @else
                      <td> <center><a href="{{ config('services.url_global.key') }}/storage/app/{{$promociones->archivo}}" target="_blank">Ver</a></center></td>
                      @endif  
                     <td class="text-center">
                        <ul class="list-inline me-auto mb-0"> 
                          <li class="list-inline-item align-bottom" data-bs-toggle="tooltip" title="Edit">
                            <a href="../promocion_pyme/edit/{{ $promociones->id}}" class="avtar avtar-xs btn-link-success btn-pc-default">
                              <i class="ti ti-edit f-18"></i>
                            </a>
                          </li>
                          <li class="list-inline-item align-bottom" data-bs-toggle="tooltip" title="">
                            <a href="../promocion_pyme/destroy/{{ $promociones->id}}" class="avtar avtar-xs btn-link-danger btn-pc-default">
                              <i class="ti ti-trash f-18"></i>
                            </a>
                          </li>
                        </ul>
                      </td>
                       
                    </tr>
                    @endforeach

                    </tbody> 
                  </table>
                </div>
              </div>
            </div>
          </div>
 
 </div>
</div>
</section>

          <!-- DOM/Jquery table end -->
<!--main--> 

    <!-- datatable Js --> 
 <style type="text/css"> 
#table-inventory-cat {
    width: 100% !important;
}

.descripcion-col {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.dataTable td, 
table.dataTable th {
    white-space: nowrap;
} 
 </style>

<!-- 1️⃣ jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 2️⃣ Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 3️⃣ DataTables -->
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>

<!-- 4️⃣ Responsive -->
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>


    <script>
      // [ DOM/jquery ] 
 $(document).ready(function()
            {
     // [ Configuration Option ]
      $('#table-inventory-cat').DataTable({
        responsive: true,
        autoWidth: false,
        scrollX: true,
        columnDefs: [
            { width: "180px", targets: 2 } // columna descripcion (ID=0, Banco=1, Descripcion=2)
        ]
    });
                
    }); // FIN DE TABLA
 
    </script>

@endsection