@extends('layouts.app')

@section('title', 'Gestión de Clientes')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-users"></i> Gestión de Clientes
                    </h3>
                    <a href="{{ route('clientes.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Nuevo Cliente
                    </a>
                </div>
                <div class="card-body">
                    <!-- Estadísticas -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $estadisticas['total'] ?? 0 }}</h4>
                                            <small>Total Clientes</small>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-users fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $estadisticas['activos'] ?? 0 }}</h4>
                                            <small>Activos</small>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-user-check fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $estadisticas['empresas'] ?? 0 }}</h4>
                                            <small>Empresas</small>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-building fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4>{{ $estadisticas['nuevos_mes'] ?? 0 }}</h4>
                                            <small>Nuevos Este Mes</small>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-user-plus fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filtros -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <form method="GET" action="{{ route('clientes.index') }}">
                                <div class="row">
                                    <div class="col-md-4">
                                        <input type="text" name="search" class="form-control" placeholder="Buscar por nombre, email o teléfono..." value="{{ request('search') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <select name="tipo" class="form-control">
                                            <option value="">Todos los tipos</option>
                                            <option value="individual" {{ request('tipo') == 'individual' ? 'selected' : '' }}>Individual</option>
                                            <option value="empresa" {{ request('tipo') == 'empresa' ? 'selected' : '' }}>Empresa</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="estado" class="form-control">
                                            <option value="">Todos los estados</option>
                                            <option value="1" {{ request('estado') == '1' ? 'selected' : '' }}>Activo</option>
                                            <option value="0" {{ request('estado') == '0' ? 'selected' : '' }}>Inactivo</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select name="ciudad" class="form-control">
                                            <option value="">Todas las ciudades</option>
                                            <option value="La Paz" {{ request('ciudad') == 'La Paz' ? 'selected' : '' }}>La Paz</option>
                                            <option value="Santa Cruz" {{ request('ciudad') == 'Santa Cruz' ? 'selected' : '' }}>Santa Cruz</option>
                                            <option value="Cochabamba" {{ request('ciudad') == 'Cochabamba' ? 'selected' : '' }}>Cochabamba</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-search"></i> Buscar
                                        </button>
                                        <a href="{{ route('clientes.index') }}" class="btn btn-secondary">
                                            <i class="fas fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Tabla de clientes -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre Completo</th>
                                    <th>Email</th>
                                    <th>Teléfono</th>
                                    <th>Tipo</th>
                                    <th>Ciudad</th>
                                    <th>Estado</th>
                                    <th>Fecha Registro</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($clientes as $cliente)
                                <tr>
                                    <td>{{ $cliente->id }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center text-white me-2">
                                                {{ strtoupper(substr($cliente->nombre, 0, 1)) }}
                                            </div>
                                            <div>
                                                <strong>{{ $cliente->nombre }} {{ $cliente->apellido }}</strong>
                                                @if($cliente->empresa)
                                                    <br><small class="text-muted">{{ $cliente->empresa }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $cliente->email }}</td>
                                    <td>{{ $cliente->telefono }}</td>
                                    <td>
                                        @if($cliente->tipo_cliente == 'empresa')
                                            <span class="badge bg-primary">Empresa</span>
                                        @else
                                            <span class="badge bg-secondary">Individual</span>
                                        @endif
                                    </td>
                                    <td>{{ $cliente->ciudad }}</td>
                                    <td>
                                        @if($cliente->estado)
                                            <span class="badge bg-success">Activo</span>
                                        @else
                                            <span class="badge bg-danger">Inactivo</span>
                                        @endif
                                    </td>
                                    <td>{{ $cliente->fecha_registro->format('d/m/Y') }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('clientes.show', $cliente) }}" class="btn btn-info btn-sm" title="Ver detalles">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-warning btn-sm" title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form method="POST" action="{{ route('clientes.destroy', $cliente) }}" style="display: inline;" onsubmit="return confirm('¿Estás seguro de eliminar este cliente?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm" title="Eliminar">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center">
                                        <div class="py-4">
                                            <i class="fas fa-users fa-3x text-muted"></i>
                                            <p class="mt-2 text-muted">No se encontraron clientes</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginación -->
                    @if(isset($clientes) && $clientes->hasPages())
                    <div class="d-flex justify-content-center">
                        {{ $clientes->links() }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.avatar-sm {
    width: 35px;
    height: 35px;
    font-size: 14px;
    font-weight: bold;
}
</style>
@endpush