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

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

    <!-- HEADER -->
    <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">Clientes</h2>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ALERTAS -->
    @if(session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
      <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="row">
      <div class="col-sm-12">
        <div class="card"> 

          <div class="card-body">

            <!-- BOTONES -->
            <div class="d-flex justify-content-between align-items-center mb-3">

              <h5 class="mb-0">Listado de clientes</h5>

              <div class="d-flex gap-2">
                <a href="{{ route('cliente.create') }}" class="btn btn-primary">
                  + Agregar Cliente
                </a>

            
              </div>

            </div>
<div class="mb-3">
    <input 
        type="text" 
        id="searchCliente"
        class="form-control" 
        placeholder="Buscar cliente en tiempo real...">
</div>
            <!-- TABLA -->
            <div class="table-responsive">
              <table id="table-inventory-cat" class="table table-hover table-bordered table-sm">
                <thead class="table-light">
                  <tr>
                    <th>RFC</th> 
                    <th>Razón Social</th>
                    <th>Contacto</th>
                    <th class="text-center">Acciones</th>
                  </tr>
                </thead>

               <tbody id="clientesTable">

                  @foreach($clientes as $cliente)

                  <tr> 

                    <td>{{ $cliente->rfc }}</td>

                    <td>{{ $cliente->razon_social }}</td>

                    <td>
                      <small>
                        {{ $cliente->correo ?? 'Sin correo' }} <br>
                        {{ $cliente->telefono ?? 'Sin teléfono' }}
                      </small>
                    </td>

                    <td class="text-center">

                      <div class="d-flex justify-content-center gap-2">

                        <!-- EDITAR -->
                        <a href="{{ route('cliente.edit', $cliente->id) }}" 
                           class="btn btn-sm btn-warning"
                           title="Editar">
                          <i class="ti ti-edit"></i>
                        </a>

                        <!-- ELIMINAR -->
                        <form action="{{ route('cliente.destroy', $cliente->id) }}" 
                              method="POST"
                              onsubmit="return confirm('¿Eliminar cliente?')">
                          @csrf
                          @method('DELETE')

                          <button class="btn btn-sm btn-danger">
                            <i class="ti ti-trash"></i>
                          </button>
                        </form>

                      </div>

                    </td>

                  </tr>

                  @endforeach

                </tbody>
              </table>
              <div class="mt-3">
    {{ $clientes->links() }}
</div>
            </div>

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

  </div>
</section>

<!-- 🔥 MODAL CARGA MASIVA -->
<div class="modal fade" id="modalCarga" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">

      <form action="{{ route('clientes.importar') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="modal-header">
          <h5 class="modal-title">Carga masiva de clientes</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">

          <div class="mb-3">
            <label>Seleccionar archivo Excel</label>
            <input type="file" name="archivo" class="form-control" required>
          </div>

          <small class="text-muted">
            El archivo actualizará clientes existentes por RFC.
          </small>

        </div>

        <div class="modal-footer">
          <button class="btn btn-success">
            Procesar archivo
          </button>
        </div>

      </form>

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

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

    let timeout = null;

    $('#searchCliente').on('keyup', function(){

        clearTimeout(timeout);

        let query = $(this).val();

        timeout = setTimeout(function(){

            $.ajax({
                url: "{{ route('clientes.search') }}",
                type: "GET",
                data: { search: query },
                success: function(data){

                    let html = '';

                    if(data.length === 0){
                        html = `<tr>
                                    <td colspan="5" class="text-center">
                                        Sin resultados
                                    </td>
                                </tr>`;
                    }

                    data.forEach(cliente => {

                        html += `
                        <tr>
                            <td>${cliente.rfc ?? ''}</td>
                            <td>${cliente.razon_social ?? ''}</td>
                            <td>
                                <small>
                                    ${cliente.correo ?? 'Sin correo'} <br>
                                    ${cliente.telefono ?? 'Sin teléfono'}
                                </small>
                            </td>
                            <td class="text-center">
                                
                                <!-- EDITAR -->
                                <a href="/cliente/${cliente.id}/edit" class="btn btn-sm btn-warning">
                                    <i class="ti ti-edit"></i>
                                </a>

                                <!-- ELIMINAR -->
                                <button class="btn btn-sm btn-danger btn-delete" data-id="${cliente.id}">
                                    <i class="ti ti-trash"></i>
                                </button>

                            </td>
                        </tr>`;
                    });

                    $('#clientesTable').html(html);
                }
            });

        }, 300);

    });

    // 🔥 ELIMINAR CLIENTE
    $(document).on('click', '.btn-delete', function(){

        let id = $(this).data('id');

        if(!confirm('¿Eliminar cliente?')) return;

        $.ajax({
            url: `/cliente/${id}`,
            type: 'POST',
            data: {
                _method: 'DELETE',
                _token: '{{ csrf_token() }}'
            },
            success: function(){

                // 🔥 refrescar búsqueda
                $('#searchCliente').trigger('keyup');

            },
            error: function(){
                alert('Error al eliminar');
            }
        });

    });

});
</script>

@endsection