@extends('admin.admin_dashboard_pyme') 
@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="row">
          <div class="col-sm-12">
            <div class="card"> 
              <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 PYME</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                      <form id="form-crear-expediente" class="smart-form" enctype="multipart/form-data" method="POST" action="{{ route('expedientes_pyme/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">Con 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">Sin 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>
                      </form>
                      </div>
                    </div>
                  </div>

              </div>

              {{-- Botón principal --}}
              <button type="submit" form="form-crear-expediente" class="btn btn-primary pull-left" name="guardar_btn" value="inicia_expediente">Crear Expediente PYME</button>

              {{-- ======================================================= --}}
              {{-- FILTROS EXTERNOS                                          --}}
              {{-- ======================================================= --}}
              <div class="row g-2 mt-3 mb-3 align-items-end px-3">
                <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==1)
                        <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">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>
              {{-- ======================================================= --}}

                <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>Oficina</th>
                        <th>Cliente</th>
                        <th>Inst. Financiera</th> 
                        <th>Coordinador</th> 
                        <th>Etapa</th> 
                        <th>Garantía</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>
                            <a style="color:red" href="../expediente_precalif_pyme/edit/{{ $expediente->id}}">
                              {{ $expediente->estado}}
                            </a>
                          </td>
                        @else
                          @if($expediente->estado1==1)  
                            <td style="background-color: #31b2e4;">
                              <a href="../expediente_precalif_pyme/edit/{{ $expediente->id}}" style="color: white">
                                {{ $expediente->estado}}
                              </a>
                            </td>
                          @elseif ($expediente->estado1==2)
                            <td style="background-color: #ff8c00;">
                              <a href="../expediente_avaluo_pyme/edit/{{ $expediente->id}}" style="color: white">
                                {{ $expediente->estado}}
                              </a>
                            </td> 
                          @elseif ($expediente->estado1==3)
                            <td style="background-color: #800080;">
                              <a href="../expediente_instruccion_pyme/edit/{{ $expediente->id}}" style="color: white">
                                {{ $expediente->estado}}
                              </a>
                            </td> 
                          @elseif ($expediente->estado1==4)
                            <td style="background-color: #228b22;">
                              <a href="../expediente_firma_pyme/edit/{{ $expediente->id}}" style="color: white">
                                {{ $expediente->estado}}
                              </a>
                            </td> 
                          @elseif ($expediente->estado1==5 || $expediente->estado1==6)
                            <td style="background-color: darkblue;">
                              <a href="../expediente_formalizado_pyme/edit/{{ $expediente->id}}" style="color: white">
                                {{ $expediente->estado}}
                              </a>
                            </td>  
                          @else
                            <td></td>
                          @endif
                        @endif         
                   
                        <td>
                          @if($expediente->garantia==0)
                            Con garantía
                          @else
                            Sin garantía
                          @endif
                        </td>
                      </tr>
                    @endforeach
                    </tbody> 
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<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; }
#table-inventory-cat th:nth-child(2),
#table-inventory-cat td:nth-child(2) { width: 110px; }
#table-inventory-cat th:nth-child(3),
#table-inventory-cat td:nth-child(3) { width: 110px; }
#table-inventory-cat th:nth-child(4),
#table-inventory-cat td:nth-child(4) { width: 100px; }
#table-inventory-cat th:nth-child(5),
#table-inventory-cat td:nth-child(5) { width: 130px; }
#table-inventory-cat th:nth-child(6),
#table-inventory-cat td:nth-child(6) { width: 120px; }
#table-inventory-cat th:nth-child(7),
#table-inventory-cat td:nth-child(7) { width: 110px; }
#table-inventory-cat th:nth-child(8),
#table-inventory-cat td:nth-child(8) { width: 90px; }
#table-inventory-cat th:nth-child(9),
#table-inventory-cat td:nth-child(9) { width: 80px; }

.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>
$(document).ready(function() {

    var table = $('#table-inventory-cat').DataTable({
        orderCellsTop: true,
        fixedHeader: true,
        order: [[1, "desc"]],
        lengthChange: false,
        paging: true,
        autoWidth: false,
        responsive: false,
        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"
        }
    });

    // 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 (búsqueda por texto contenido en la celda)
    $('#ext-filter-estado').on('change', function() {
        table.column(7).search(this.value).draw();
    });

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

}); // FIN DE TABLA
</script>

@stop