@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 de Cancelaciones</h2>

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

          {{-- ── Filtro de fechas (GET a la misma ruta) ──────────────────── --}}
          <form method="GET" action="{{ route('reporte_cancelaciones') }}" 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_cancelaciones') }}" 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 cancelaciones 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>
                  @endif
                @endforeach
              </select>
            </div>
            <div class="col-sm-6 col-md-4">
              <label class="form-label fw-semibold mb-1" for="ext-filter-estado">Estado</label>
              <select id="ext-filter-estado" class="form-select form-select-sm">
                <option value="">Todos</option>
                <option value="Autorización">Autorización</option>
                <option value="Avalúo">Avalúo</option>
                <option value="Instrucción">Instrucción</option>
                <option value="Firma">Firma</option>
                <option value="Formalizado">Formalizado</option>
                <option value="Verificación">Verificación</option>
              </select>
            </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>Modificación</th>
                  <th>Asociado</th>
                  <th>Sucursal</th>
                  <th>Cliente</th>
                  <th>Inst. Financiera</th>
                  <th>Coordinador</th>
                  <th>Estado</th>
                </tr>
              </thead>
              <tbody>
              @foreach($expedientes as $expediente)
                <tr>
                  <td style="color: blue">{{ $expediente->id_expediente }}</td>
                  <td>{{ $expediente->updated_at}}</td>
                  <td>{{ $expediente->user_name_v}}</td>
                  <td>{{ $expediente->sucursales_name}}</td>
                  <td style="color:blue">
                    @if($expediente->tipo_cliente==1)
                      {{ $expediente->razon_social_moral}}
                    @else
                      {{ $expediente->cliente}}  {{ $expediente->apellido_paterno}}  {{ $expediente->apellido_materno}}
                    @endif
                  </td>
                  <td style="color:darkred">{{ $expediente->banco_name}}</td>
                  <td>{{ $expediente->user_name}}</td>

                  @if($expediente->id_cancelar>0)
                    <td style="color:red">{{ $expediente->estado}}</td>
                  @else
                    @if($expediente->estado1==1)
                      @if($expediente->exp_verificacion>0)
                        <td>
                          <a href="../expedientes_verificacion/edit/{{ $expediente->id}}">
                            {{ $expediente->estado}}
                          </a>
                        </td>
                      @else
                        <td style="background-color: #31b2e4;">
                          <a href="../expediente_precalif/edit/{{ $expediente->id}}" style="color: white">
                            {{ $expediente->estado}}
                          </a>
                        </td>
                      @endif
                    @elseif ($expediente->estado1==2)
                      <td style="background-color: #ff8c00;">
                        <a href="../expediente_avaluo/edit/{{ $expediente->id}}" style="color: white">
                          {{ $expediente->estado}}
                        </a>
                      </td>
                    @elseif ($expediente->estado1==3)
                      <td style="background-color: #800080;">
                        <a href="../expediente_instruccion/edit/{{ $expediente->id}}" style="color: white">
                          {{ $expediente->estado}}
                        </a>
                      </td>
                    @elseif ($expediente->estado1==4)
                      <td style="background-color: #228b22;">
                        <a href="../expediente_firma/edit/{{ $expediente->id}}" style="color: white">
                          {{ $expediente->estado}}
                        </a>
                      </td>
                    @elseif ($expediente->estado1==5)
                      @if($expediente->exp_verificacion>0)
                        <td style="background-color: white;">
                          <a href="../expediente_formalizado/edit/{{ $expediente->id}}" style="color: blue">
                            {{ $expediente->estado}}
                          </a>
                        </td>
                      @else
                        <td style="background-color: darkblue;">
                          <a href="../expediente_formalizado/edit/{{ $expediente->id}}" style="color: white">
                            {{ $expediente->estado}}
                          </a>
                        </td>
                      @endif
                    @else
                      <td></td>
                    @endif
                  @endif

                </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: 50px;  }  /* No.Exp */
  #table-inventory-cat th:nth-child(2),
  #table-inventory-cat td:nth-child(2) { width: 110px; }  /* Modificación */
  #table-inventory-cat th:nth-child(3),
  #table-inventory-cat td:nth-child(3) { width: 110px; }  /* Asociado */
  #table-inventory-cat th:nth-child(4),
  #table-inventory-cat td:nth-child(4) { width: 100px; }  /* Sucursal */
  #table-inventory-cat th:nth-child(5),
  #table-inventory-cat td:nth-child(5) { width: 130px; }  /* Cliente */
  #table-inventory-cat th:nth-child(6),
  #table-inventory-cat td:nth-child(6) { width: 120px; }  /* Inst. Financiera */
  #table-inventory-cat th:nth-child(7),
  #table-inventory-cat td:nth-child(7) { width: 110px; }  /* Coordinador */
  #table-inventory-cat th:nth-child(8),
  #table-inventory-cat td:nth-child(8) { width: 90px;  }  /* Estado */
  .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:        [[1, '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 de Cancelaciones',
              filename:  function () {
                  var hoy = new Date();
                  return 'cancelaciones_' + 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 expedientes',
          emptyTable:        'No se encontraron expedientes 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 5 (búsqueda exacta)
  $('#ext-filter-banco').on('change', function () {
      var searchTerm = this.value ? '^' + $.fn.dataTable.util.escapeRegex(this.value) + '$' : '';
      table.column(5).search(searchTerm, true, false).draw();
  });

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

});

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

@endsection