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

<section class="pc-container">
  <div class="pc-content">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-body">

            <div class="d-flex align-items-center gap-3 mb-4">
              <a href="{{ url()->previous() }}" class="btn btn-secondary btn-sm">
                <i class="ti ti-arrow-left"></i> Regresar
              </a>
              <h2 class="mb-0">Expedientes de {{ $user->name }}</h2>

              {{-- Botón copiar todos --}}
                @if($expedientes->isNotEmpty())
                <button id="btn-copiar-todos" class="btn btn-primary btn-sm ms-auto"
                        data-url="{{ route('user/copiar-archivos', $user->id) }}">
                  <i class="ti ti-copy"></i> Copiar todos a servidor
                </button>
                @endif
            </div>

            {{-- Barra de progreso (oculta hasta que se use el botón) --}}
            <div id="progreso-container" class="mb-3" style="display:none;">
              <div class="d-flex justify-content-between mb-1">
                <small class="text-muted" id="progreso-texto">Iniciando descargas...</small>
              </div>
              <div class="progress" style="height: 8px;">
                <div id="progreso-barra" class="progress-bar bg-success progress-bar-striped progress-bar-animated"
                     role="progressbar" style="width: 0%"></div>
              </div>
            </div>

            @if(session('error'))
              <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            @if($expedientes->isEmpty())
              <div class="alert alert-warning">
                Este usuario no tiene expedientes con archivos disponibles.
              </div>
            @else
              <div class="table-responsive dt-responsive">
                <table id="table-expedientes-user" class="table table-striped table-bordered">
                  <thead>
                    <tr>
                      <th>Expediente</th>
                      <th>Cliente</th>
                      <th>Código</th>
                      <th class="text-center">Archivos exp.</th>
                      <th class="text-center">Archivos banco</th>
                      <th class="text-center">Total</th>
                      <th class="text-center">Estado de copia</th>
                      <th class="text-center">Descargar</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($expedientes as $exp)
                      <tr>
                        <td>{{ $exp['folio'] }}</td>
                        <td>
                          @if(isset($datosExpedientes[$exp['folio']]))
                            {{ $datosExpedientes[$exp['folio']]->cliente }}
                          @else
                            <span class="text-muted">—</span>
                          @endif
                        </td>
                        <td>
                          @if(isset($datosExpedientes[$exp['folio']]))
                            {{ $datosExpedientes[$exp['folio']]->codigo }}
                          @else
                            <span class="text-muted">—</span>
                          @endif
                        </td>
                        <td class="text-center">{{ $exp['exp']->count() }}</td>
                        <td class="text-center">{{ $exp['banco']->count() }}</td>
                        <td class="text-center">
                          <span class="badge bg-secondary">{{ $exp['total'] }}</span>
                        </td>
                        <td class="text-center">
                          @if($exp['total'] > 0 && $exp['copiados'] >= $exp['total'])
                            <span class="badge bg-success"><i class="ti ti-circle-check"></i> Completo</span>
                          @elseif($exp['copiados'] > 0)
                            <span class="badge bg-warning text-dark"><i class="ti ti-clock"></i> {{ $exp['copiados'] }} / {{ $exp['total'] }}</span>
                          @else
                            <span class="badge bg-secondary">Pendiente</span>
                          @endif
                        </td>
                        <td class="text-center">
                          <a href="{{ route('user/descargar-expediente', [$user->id, $exp['folio']]) }}"
                             class="btn btn-success btn-sm url-descarga">
                            <i class="ti ti-download"></i> Descargar ZIP
                          </a>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            @endif

          </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 () {
    new DataTable('#table-expedientes-user', {
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": true,
      "bInfo": false,
      "dom": 'lrt',
      "language": {
        "search": "",
        "zeroRecords": "No se encontraron expedientes",
        "lengthMenu": "Mostrar _MENU_ registros",
        "emptyTable": "No hay expedientes por mostrar"
      }
    });

    // Botón descargar todos — dispara cada ZIP con delay para no saturar el navegador
    $('#btn-descargar-todos').on('click', function () {

      // Recolecta todas las URLs de los botones de descarga
      var urls = [];
      $('.url-descarga').each(function () {
        urls.push($(this).attr('href'));
      });

      if (urls.length === 0) return;

      var total = urls.length;
      var delay = 2500; // ms entre cada descarga

      $('#progreso-container').show();
      $('#btn-descargar-todos').prop('disabled', true)
        .html('<i class="ti ti-loader"></i> Descargando...');

      function descargarSiguiente(index) {
        if (index >= total) {
          $('#progreso-texto').text('¡Todas las descargas iniciadas! (' + total + ' expedientes)');
          $('#progreso-barra').removeClass('progress-bar-animated').css('width', '100%');
          $('#btn-descargar-todos').prop('disabled', false)
            .html('<i class="ti ti-download"></i> Descargar todos');
          return;
        }

        var actual     = index + 1;
        var porcentaje = Math.round((actual / total) * 100);

        $('#progreso-texto').text('Descargando expediente ' + actual + ' de ' + total + '...');
        $('#progreso-barra').css('width', porcentaje + '%');

        // Usa un iframe oculto para no redirigir la página
        var iframe = $('<iframe>')
          .attr('src', urls[index])
          .css({ display: 'none', width: 0, height: 0 })
          .appendTo('body');

        // Elimina el iframe y lanza la siguiente descarga tras el delay
        setTimeout(function () {
          iframe.remove();
          descargarSiguiente(index + 1);
        }, delay);
      }

      descargarSiguiente(0);
    });


    $('#btn-copiar-todos').on('click', function () {
    var url = $(this).data('url');

    $(this).prop('disabled', true)
           .html('<i class="ti ti-loader"></i> Copiando archivos...');

    $('#progreso-container').show();
    $('#progreso-texto').text('Copiando archivos al servidor, por favor espera...');
    $('#progreso-barra').css('width', '100%');

    $.ajax({
        url: url,
        method: 'GET',
        success: function (resp) {
            $('#progreso-barra').removeClass('progress-bar-animated');

            if (resp.success) {
                $('#progreso-container').removeClass('mb-3')
                    .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 {
                $('#progreso-container').html('<div class="alert alert-danger">' + resp.error + '</div>');
            }

            $('#btn-copiar-todos').prop('disabled', false)
                .html('<i class="ti ti-copy"></i> Copiar todos a servidor');
        },
        error: function () {
            $('#progreso-container').html('<div class="alert alert-danger">Ocurrió un error al copiar los archivos.</div>');
            $('#btn-copiar-todos').prop('disabled', false)
                .html('<i class="ti ti-copy"></i> Copiar todos a servidor');
        }
    });
});
    

  });



</script>

@endsection