@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 d-flex justify-content-end gap-2">
                  <a href="{{ route('promocion_pyme/add') }}" class="btn btn-primary">Agregar Promoción</a>
                  @if(Auth::user()->id == 1)
                  <button id="btn-copiar-todos"
                          class="btn btn-secondary"
                          data-url="{{ route('promocion_pyme/copiar-todos') }}">
                    <i class="ti ti-copy"></i> Copiar todo al servidor
                  </button>
                  @endif
                </div>

                {{-- Alerta de resultado copiar todos --}}
                <div id="alerta-copiar-todos" class="mx-4 mt-3" style="display:none;"></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>
                        @if(Auth::user()->id == 1)
                        <th><center>Copiado</center></th>
                        @endif
                        <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="/storage/file/{{ $promociones->archivo }}" target="_blank"></a></center></td>
                      @else
                        <td><center><a href="/storage/file/{{ $promociones->archivo }}" target="_blank">Ver</a></center></td>
                      @endif
                      @if(Auth::user()->id == 1)
                      <td class="text-center">
                        @if(empty($promociones->archivo))
                          <span class="badge bg-light text-muted">Sin archivo</span>
                        @elseif($promociones->ya_copiado)
                          <span class="badge bg-success"><i class="ti ti-circle-check"></i> Copiado</span>
                        @else
                          <span class="badge bg-secondary">Pendiente</span>
                        @endif
                      </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 }
        ]
      });

      // ── Copiar TODAS las promociones PYME ──
      $('#btn-copiar-todos').on('click', function () {
        var url = $(this).data('url');

        $(this).prop('disabled', true).html('<i class="ti ti-loader"></i> Copiando...');
        $('#alerta-copiar-todos').hide().html('');

        $.ajax({
          url: url,
          method: 'GET',
          success: function (resp) {
            if (resp.success) {
              $('#alerta-copiar-todos')
                .html('<div class="alert alert-success">' +
                      '<i class="ti ti-circle-check"></i> ' + resp.mensaje +
                      '<br><small class="text-muted">Carpeta: <code>' + resp.carpeta + '</code></small>' +
                      '</div>')
                .show();
            } else {
              $('#alerta-copiar-todos')
                .html('<div class="alert alert-danger">' + resp.error + '</div>')
                .show();
            }
            $('#btn-copiar-todos').prop('disabled', false).html('<i class="ti ti-copy"></i> Copiar todo al servidor');
          },
          error: function () {
            $('#alerta-copiar-todos')
              .html('<div class="alert alert-danger">Ocurrió un error al copiar los archivos.</div>')
              .show();
            $('#btn-copiar-todos').prop('disabled', false).html('<i class="ti ti-copy"></i> Copiar todo al servidor');
          }
        });
      });

    }); // FIN DE TABLA

    </script>

@endsection