@extends('admin.admin_dashboard_hipotecario') 
@section('content')
        

     <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">Biblioteca Digital</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">

                @if(Auth::user()->id == 1)
                <div class="text-end p-4 pb-0 d-flex justify-content-end gap-2">
                  <a href="{{ route('archivo/descargar-todos') }}" class="btn btn-success">
                    <i class="ti ti-download"></i> Descargar todo
                  </a>
                  {{-- Botón copiar todo a servidor --}}
                  <button id="btn-copiar-todos"
                          class="btn btn-primary"
                          data-url="{{ route('archivo/copiar-todos') }}">
                    <i class="ti ti-copy"></i> Copiar todo al servidor
                  </button>
                </div>
                @else
                <div class="p-4 pb-0"></div>
                @endif

                {{-- 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 mt-3">
                  <table id="table-inventory-cat" class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th data-hide="expand" width="200px">Institución Financiera</th>
                        <th><center>Total de Documentos</center></th>
                        <th><center>Estado de copia</center></th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($bancos as $bancos)
                      @php
                        $total    = (int)($bancos->total ?: 0);
                        $copiados = (int)($bancos->copiados ?? 0);
                      @endphp

                      <tr>
                        <td>{{ $bancos->nombre }}</td>
                        <td><center>{{ $bancos->total }}</center></td>

                        <td class="text-center">
                          @if($total > 0 && $copiados >= $total)
                            <span class="badge bg-success"><i class="ti ti-circle-check"></i> Completo</span>
                          @elseif($copiados > 0)
                            <span class="badge bg-warning text-dark"><i class="ti ti-clock"></i> {{ $copiados }} / {{ $total }}</span>
                          @else
                            <span class="badge bg-secondary">Pendiente</span>
                          @endif
                        </td>

                        <td class="text-center">
                          <a href="../archivo/edit/{{ $bancos->id }}" class="btn btn-primary">
                            Consultar <i class="ti ti-edit f-18"></i>
                          </a>

                          @if(Auth::user()->id == 1)
                          <a href="{{ route('archivo/descargar-todo', $bancos->id) }}" class="btn btn-success btn-sm ms-1">
                            <i class="ti ti-download"></i> Descargar banco
                          </a>
                          @endif
                        </td>
                      </tr>

                    @endforeach
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
          </div>
 
        </div>
      </div>
    </section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="{{ URL::asset('js/plugins/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('js/plugins/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ URL::asset('js/plugins/dataTables.responsive.min.js') }}"></script>
<script src="{{ URL::asset('js/plugins/responsive.bootstrap5.min.js') }}"></script>

<script>
  $(document).ready(function () {

    $('#table-inventory-cat').dataTable({
      responsive: true,
      fixedHeader: true, 
      select: 'single',
      ordering: false,  
      buttons: [
        { extend: 'colvis',   text: 'Column Visibility', titleAttr: 'Col visibility', className: 'btn-outline-default' },
        { extend: 'csvHtml5', text: 'CSV',               titleAttr: 'Generate CSV',   className: 'btn-outline-default' },
        { extend: 'copyHtml5',text: 'Copy',              titleAttr: 'Copy to clipboard', className: 'btn-outline-default' },
        { extend: 'print',    text: '<i class="fal fa-print"></i>', titleAttr: 'Print Table', className: 'btn-outline-default' }
      ]
    });

    // ── Copiar TODOS los bancos ──
    $('#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');
        }
      });
    });

    // ── Copiar banco individual ──
    $(document).on('click', '.btn-copiar-banco', function () {
      var url    = $(this).data('url');
      var id     = $(this).data('id');
      var btn    = $(this);

      btn.prop('disabled', true).html('<i class="ti ti-loader"></i> Copiando...');
      $('#alerta-banco-row-' + id).show();
      $('#alerta-banco-' + id).html('');

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

  });
</script>

@endsection