@extends('Emision.Infoauto.layout')

@section('Paso_numero', 'Paso 2')

@section('step_content')
  <form class="form" action="{{ Route('CargarInfoCustom') }}" method="post" enctype="multipart/form-data">
    @csrf

    <div class="row g-4">
      <div class="col-12 col-lg-6">
        <div class="p-4 rounded-4 glass-brand-blue shadow-lg h-100">
          <div class="text-center mb-4">
            <label class="theme-content-title fw-extrabold text-uppercase tracking-wider d-block"
              for="info_actual">Resultados
              del
              Infoauto Actualizado</label>
          </div>
          @if (session('cantidades'))
            <div class="list-group list-group-flush bg-transparent mb-4">
              <div
                class="list-group-item bg-transparent border-0 d-flex justify-content-between align-items-center px-0 text-white">
                <span class="small"><i class="bi bi-check-all me-2 text-success"></i> Finalizados</span>
                <span class="badge bg-white text-dark rounded-pill">{{session('cantidades')['actualizados']}}</span>
              </div>
              <div
                class="list-group-item bg-transparent border-0 d-flex justify-content-between align-items-center px-0 text-white">
                <span class="small"><i class="bi bi-plus-circle me-2 text-info"></i> Nuevos Outer</span>
                <span class="badge bg-light text-dark rounded-pill">{{session('cantidades')['nuevos_outer']}}</span>
              </div>
            </div>
          @endif

          <div class="d-flex flex-wrap gap-2 justify-content-center">
            @if (session('descargas'))
              @foreach(session('descargas') as $name => $file)
                <a class="btn btn-outline-success btn-sm px-3 rounded-pill hover-up transition-all shadow-sm no-spinner"
                  href="{{ Route('DescargarInfoauto', ['file' => $file]) }}">
                  <i class="bi bi-download me-1"></i>
                  {{$name}}
                </a>
              @endforeach
            @endif
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-6">
        <div class="p-4 rounded-4 glass-brand-red shadow-lg h-100 text-center">
          <label class="theme-content-title fw-extrabold text-uppercase tracking-wider mb-3 d-block"
            for="info_custom">InfoAuto
            Customizado</label>

          <div class="alert bg-white bg-opacity-10 border-0 shadow-sm small py-2 mb-4 text-white">
            <i class="bi bi-magic me-2 text-white"></i>
            Suba el archivo customizado para finalizar el proceso.
          </div>

          <input class="form-control mb-4" type="file" name="info_custom">

          <button
            class="btn btn-light px-5 py-2 fw-extrabold hover-up transition-all rounded-pill shadow-sm text-brand-red"
            type="submit">
            <i class="bi bi-upload me-2"></i> CARGAR CUSTOM
          </button>
        </div>
      </div>
    </div>

    @if (session('procesable'))
      <div class="mt-5 pt-5 border-top-dashed">
        <div id="btn_procesar_wrapper" class="text-center">
          <button id="btn_procesar"
            class="btn btn-success px-5 py-2 fw-extrabold hover-up transition-all rounded-pill shadow-sm"
            onclick="ProcesarInfoCustom();" type="button">
            <i class="bi bi-check2-square me-2"></i> PROCESAR CUSTOM
          </button>
        </div>
      </div>
    @endif

  </form>
@endsection