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

<div class="pc-container">
  <div class="pc-content">

    <div class="card">
      <div class="card-body">
        <h2 class="mb-0">Reporte SIFAC</h2>

        <div class="col-sm-12 mt-3">

          {{-- ── Filtro de fechas (GET) ──────────────────────────────────── --}}
          <form method="GET" action="{{ route('reporte_sifac') }}" class="mb-4">
            <div class="row align-items-end g-3">

              <div class="col-md-4">
                <label class="form-label">Fecha Inicio</label>
                <input type="date" name="fecha_inicio" class="form-control"
                       value="{{ request('fecha_inicio') }}">
              </div>

              <div class="col-md-4">
                <label class="form-label">Fecha Fin</label>
                <input type="date" name="fecha_fin" class="form-control"
                       value="{{ request('fecha_fin') }}">
              </div>

              <div class="col-md-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary w-100">
                  <i class="ti ti-search"></i> Filtrar
                </button>
                <a href="{{ route('reporte_sifac') }}" class="btn btn-outline-secondary w-100">
                  <i class="ti ti-x"></i> Limpiar
                </a>
              </div>

            </div>

            @if(request('fecha_inicio') && request('fecha_fin'))
              <div class="mt-2">
                <span class="badge bg-light-primary f-12">
                  Mostrando registros del
                  {{ \Carbon\Carbon::parse(request('fecha_inicio'))->format('d/m/Y') }}
                  al
                  {{ \Carbon\Carbon::parse(request('fecha_fin'))->format('d/m/Y') }}
                </span>
              </div>
            @endif
          </form>
          {{-- ── Fin filtro fechas ──────────────────────────────────────── --}}

          {{-- ======================================================= --}}
          {{-- FILTROS EXTERNOS                                        --}}
          {{-- ======================================================= --}}
          <div class="row g-2 mb-3 align-items-end">
            <div class="col-sm-6 col-md-4">
              <label class="form-label fw-semibold mb-1" for="ext-filter-exp">No. de Expediente</label>
              <input type="text" id="ext-filter-exp" class="form-control form-control-sm" placeholder="Buscar expediente..." />
            </div>
            <div class="col-sm-6 col-md-4">
              <label class="form-label fw-semibold mb-1" for="ext-filter-banco">Institución Financiera</label>
              <select id="ext-filter-banco" class="form-select form-select-sm">
                <option value="">Todas</option>
                @foreach($bancos as $bancos)
                  @if($bancos->pyme==0)
                    <option value="{{ $bancos->nombre }}">{{ $bancos->nombre }}</option>
                  @else
                    <option value="PYME - {{ $bancos->nombre }}">PYME - {{ $bancos->nombre }}</option>
                  @endif
                @endforeach
              </select>
            </div>
            <div class="col-sm-6 col-md-4">
              <label class="form-label fw-semibold mb-1" for="ext-filter-status">Status</label>
              <input type="text" id="ext-filter-status" class="form-control form-control-sm" placeholder="Buscar status..." />
            </div>
          </div>
          {{-- ======================================================= --}}

          <div class="table-responsive dt-responsive">
            <table id="table-inventory-cat" class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>No. Exp</th>
                  <th>Nombre</th>
                  <th>Banco</th>
                  <th>Cliente</th>
                  <th>Apellido Paterno</th>
                  <th>Apellido Materno</th>
                  <th>Fecha Firma</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
              @foreach($expedientes as $expediente)
                <tr>
                  <td style="color: blue">{{ $expediente->id_expediente }}</td>
                  <td>{{ $expediente->name }}</td>
                  <td>{{ $expediente->banco_nombre }}</td>
                  <td>{{ $expediente->nombre_cliente }}</td>
                  <td>{{ $expediente->primer_apcliente }}</td>
                  <td>{{ $expediente->segundo_apcliente }}</td>
                  <td>{{ $expediente->fecha_firma }}</td>
                  <td>{{ $expediente->status }}</td>
                </tr>
              @endforeach
              </tbody>
            </table>
          </div>

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

  </div>
</div>

<style type="text/css">
  #table-inventory-cat {
      table-layout: fixed;
      width: 100% !important;
  }
  #table-inventory-cat th,
  #table-inventory-cat td {
      white-space: normal !important;
      word-break: break-word;
      overflow-wrap: break-word;
      font-size: 12px;
      padding: 5px;
  }
  #table-inventory-cat th:nth-child(1),
  #table-inventory-cat td:nth-child(1) { width: 55px;  }  /* No.Exp */
  #table-inventory-cat th:nth-child(2),
  #table-inventory-cat td:nth-child(2) { width: 110px; }  /* Nombre */
  #table-inventory-cat th:nth-child(3),
  #table-inventory-cat td:nth-child(3) { width: 120px; }  /* Banco */
  #table-inventory-cat th:nth-child(4),
  #table-inventory-cat td:nth-child(4) { width: 120px; }  /* Cliente */
  #table-inventory-cat th:nth-child(5),
  #table-inventory-cat td:nth-child(5) { width: 110px; }  /* Ap. Paterno */
  #table-inventory-cat th:nth-child(6),
  #table-inventory-cat td:nth-child(6) { width: 110px; }  /* Ap. Materno */
  #table-inventory-cat th:nth-child(7),
  #table-inventory-cat td:nth-child(7) { width: 90px;  }  /* Fecha Firma */
  #table-inventory-cat th:nth-child(8),
  #table-inventory-cat td:nth-child(8) { width: 80px;  }  /* Status */
  .dataTables_wrapper { overflow-x: hidden !important; }
  .dataTables_wrapper .dataTables_filter { text-align: left !important; }
  .pc-container { padding-top: 50px; }
</style>

<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>
{{-- DataTables Buttons 1.x (compatible con DataTables 1.x) --}}
<link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/1.7.1/css/buttons.bootstrap5.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-buttons/1.7.1/js/buttons.html5.min.js"></script>

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

  var table = $('#table-inventory-cat').DataTable({
      fixedHeader:  true,
      order:        [[0, 'desc']],
      lengthChange: false,
      paging:       true,
      autoWidth:    false,
      responsive:   false,
      dom: '<"row"<"col-6 mb-2"f><"col-6 mb-2 text-end"B>>' +
           '<"row"<"col-12"tr>>' +
           '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
      buttons: [
          {
              extend:    'excelHtml5',
              text:      '<i class="ti ti-file-spreadsheet me-1"></i> Exportar Excel',
              className: 'btn btn-success btn-sm',
              title:     'Reporte SIFAC',
              filename:  function () {
                  var hoy = new Date();
                  return 'sifac_' + hoy.toISOString().slice(0, 10);
              },
              exportOptions: {
                  columns: ':visible',
                  modifier: { search: 'applied', order: 'applied' }
              }
          }
      ],
      language: {
          search:            'Buscar:',
          searchPlaceholder: 'Buscar...',
          info:              'Mostrando _START_ a _END_ de _TOTAL_ registros',
          infoEmpty:         'Mostrando 0 a 0 de 0 registros',
          infoFiltered:      '(filtrado de _MAX_ registros totales)',
          zeroRecords:       'No se encontraron registros',
          emptyTable:        'No se encontraron registros en el rango seleccionado',
          paginate: {
              first:    'Primero',
              last:     'Último',
              next:     'Siguiente',
              previous: 'Anterior'
          },
          lengthMenu: 'Mostrar _MENU_ registros'
      }
  });

  // No. de Expediente → columna 0
  $('#ext-filter-exp').on('keyup change', function () {
      table.column(0).search(this.value).draw();
  });

  // Institución Financiera → columna 2 (búsqueda exacta)
  $('#ext-filter-banco').on('change', function () {
      var searchTerm = this.value ? '^' + $.fn.dataTable.util.escapeRegex(this.value) + '$' : '';
      table.column(2).search(searchTerm, true, false).draw();
  });

  // Status → columna 7
  $('#ext-filter-status').on('keyup change', function () {
      table.column(7).search(this.value).draw();
  });

});

$(window).on('resize', function () {
    table.columns.adjust();
});
</script>

@endsection