@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">Expedientes</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
 

        
          <div class="col-sm-12"> 
                            <div class="card-body">
                <div class="text-end p-4 pb-0"> 

                  <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-center" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalCenterTitle">Crear expediente</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                      <form class="smart-form" enctype="multipart/form-data"  method="POST"  action="{{ route('expedientes/add_expediente')}}">
                        @csrf

                        <div class="modal-body"> 
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">Tipo de Expediente</label>
                          <div class="col-sm-9">
                            <div class="form-check mb-2" style="text-align: left;">
                              <input class="form-check-input" type="radio" name="flexCheckGarantia" value="0" id="flexCheckGarantia">
                              <label class="form-check-label" for="flexCheckDefault"> Sin Garantía</label>
                            </div>
                            <div class="form-check mb-2" style="text-align: left;">
                              <input class="form-check-input" type="radio" name="flexCheckGarantia" value="1" id="flexCheckGarantia">
                              <label class="form-check-label" for="flexCheckChecked"> Con Garantía </label>
                            </div>  
                          </div>
                        </div>

                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">Tipo de Persona</label>
                          <div class="col-sm-9">
                            <div class="form-check mb-2" style="text-align: left;">
                              <input class="form-check-input" type="radio" name="flexCheckPersona" value="0" id="flexCheckPersona">
                              <label class="form-check-label" for="flexCheckDefault"> Física</label>
                            </div>
                            <div class="form-check mb-2" style="text-align: left;">
                              <input class="form-check-input" type="radio" name="flexCheckPersona" value="1" id="flexCheckPersona">
                              <label class="form-check-label" for="flexCheckChecked"> Moral </label>
                            </div>  
                          </div>
                        </div>

                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> 
                          <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Crear Expediente</button>  
                        </div>
                      </div>
                    </div>
                  </div>
 
              </div>
              <div class="card-body"> 
            <button type="submit" class="btn btn-primary pull-left" name="guardar_btn" value="inicia_expediente">Crear Expediente para Autorización</button> 
            <button type="submit" class="btn btn-outline-primary pull-left" name="guardar_btn" value="inicia_expediente_verificacion" style="color: blue !important">Crear Expediente para Verificación de documentos</button> 

            {{-- ======================================================= --}}
            {{-- FILTROS EXTERNOS                                          --}}
            {{-- ======================================================= --}}
            <div class="row g-2 mt-3 mb-3 align-items-end">
              <div class="col-sm-6 col-md-3">
                <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-3">
                <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-3">
                <label class="form-label fw-semibold mb-1" for="ext-filter-folio">Folio de Institución Financiera</label>
                <input type="text" id="ext-filter-folio" class="form-control form-control-sm" placeholder="Buscar folio..." />
              </div>
              <div class="col-sm-6 col-md-3">
                <label class="form-label fw-semibold mb-1" for="ext-filter-estado">Etapa</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>
            {{-- ======================================================= --}}

                  <table id="table-inventory-cat" class="table table-striped table-bordered pull-left">
                    <thead>
                      <tr>
                      <th>No.Exp</th> 
                      <th>Modificación</th>          
                      <th>Asociado</th>    
                      <th >Oficina</th>
                      <th >Cliente</th>
                      <th >Inst. Financiera</th> 
                      <th >Coordinador</th> 
                      <th >Etapa</th> 
                      <th >Folio Inst. Financiera</th> 
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($expedientes as $expediente)                   

                      @php
                        $user = Auth::user();

                        $colorFila = '';

                        // ASESOR o ASOCIADO
                        if (
                            ($user->isAsesor() || $user->isAsociado()) &&
                            ($expediente->estado2 == 1 || $expediente->estado2 == 4)
                        ) {
                            $colorFila = 'background-color: LemonChiffon;';
                        }

                        // COORDINADOR OPERACIONES
                        if (
                            $user->current_team_id == \App\Models\User::COORDINADOR_OPERACIONES &&
                            $expediente->estado2 == 3
                        ) {
                            $colorFila = 'background-color: LemonChiffon;';
                        }

                         // COORDINADOR_FINANZAS
                        if (
                            ($user->current_team_id == \App\Models\User::COORDINADOR_FINANZAS) &&
                            (($expediente->estado1 >= 5) && ($expediente->estado2 == 3 || $expediente->estado2 == 5))
                        ) {
                            $colorFila = 'background-color: LemonChiffon;';
                        }
                    @endphp

                    <tr style="{{ $colorFila }}"> 
                        <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 >
                              <a style="color:red" href="../expediente_precalif/edit/{{ $expediente->id}}">
                          {{ $expediente->estado}}

                              </a>
                        </td> 
                        @else
                            @if($expediente->estado1==1)  
                                                                  <td style="background-color: #31b2e4;">

                                  <a href="../expediente_precalif/edit/{{ $expediente->id}}" style=" color: white">
                                  {{ $expediente->estado}}
                              </a>

                                                                  

                                </td>
                            @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) 

                            
                                <td style="background-color: darkblue;">
                              <a href="../expediente_formalizado/edit/{{ $expediente->id}}"  style=" color: white">
                                                                      {{ $expediente->estado}}
                              </a>
                                </td>   
                            @else
                              <td> </td>

                            @endif

                          @endif         
                   
                        <td>{{ $expediente->folio_sea}}</td>     
                  
         
                      </tr>
                    @endforeach

                    </tbody> 
                  </table>
             
              </div>
            </div>
          </div>
   
</section>

          <!-- DOM/Jquery table end -->
<!--main--> 

    <!-- datatable Js --> 
 <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; /* permite salto de línea */
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 12px;
    padding: 5px;
}

/* Ajuste fino de columnas */
#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 */
#table-inventory-cat th:nth-child(9),
#table-inventory-cat td:nth-child(9) { width: 50px; } /* Folio */
.dataTables_wrapper {
    overflow-x: hidden !important;
}
.dataTables_wrapper .dataTables_filter {
    text-align: left !important;
}
 </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>

    <script>
      // [ DOM/jquery ] 
 $(document).ready(function()
            {
var table = $('#table-inventory-cat').DataTable({
    orderCellsTop: true,
    fixedHeader: true,
    order: [[1, "desc"]],
    lengthChange: false,
    paging: true,
    autoWidth: false,
    responsive: false, // importante: control manual
    dom: '<"row"<"col-12 mb-2"f>>' +
         '<"row"<"col-12"tr>>' +
         '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
    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 resultados",
        emptyTable:     "No hay datos disponibles",
        paginate: {
            first:    "Primero",
            last:     "Último",
            next:     "Siguiente",
            previous: "Anterior"
        },
        lengthMenu:     "Mostrar _MENU_ registros"
    }
});

  // ---------------------------------------------------
  // Filtros externos
  // ---------------------------------------------------

  // 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();
  });

  // Folio Inst. Financiera → columna 8
  $('#ext-filter-folio').on('keyup change', function() {
    table.column(8).search(this.value).draw();
  });

  // Estado → columna 7 (búsqueda por texto contenido en la celda)
  $('#ext-filter-estado').on('change', function() {
    table.column(7).search(this.value).draw();
  });

   
                
    }); // FIN DE TABLA

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

@stop