@extends('layouts.app')

@section('title', 'Nuevo Cliente')

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

@section('content')
<div class="page-container">
    <div class="page-header">
        <h2 class="page-title">Nuevo Cliente</h2>
        <a href="{{ route('clientes.index') }}" class="btn btn-secondary">
            <i class="fa-solid fa-arrow-left"></i>
            Volver
        </a>
    </div>

    <form action="{{ route('clientes.store') }}" method="POST">
        @csrf

        <!-- Información Personal -->
        <div class="card">
            <div class="card-header">
                <h3><i class="fa-solid fa-user"></i> Información Personal</h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="nombre" class="form-label required">Nombre</label>
                        <input type="text"
                               id="nombre"
                               name="nombre"
                               class="form-control @error('nombre') is-invalid @enderror"
                               value="{{ old('nombre') }}"
                               required
                               autofocus
                               maxlength="100">
                        @error('nombre')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="apellido" class="form-label required">Apellido</label>
                        <input type="text"
                               id="apellido"
                               name="apellido"
                               class="form-control @error('apellido') is-invalid @enderror"
                               value="{{ old('apellido') }}"
                               required
                               maxlength="100">
                        @error('apellido')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="documento" class="form-label required">Documento de Identidad</label>
                        <input type="text"
                               id="documento"
                               name="documento"
                               class="form-control @error('documento') is-invalid @enderror"
                               value="{{ old('documento') }}"
                               required
                               maxlength="20"
                               placeholder="Cédula, NIT, etc.">
                        @error('documento')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text">Debe ser único en el sistema</small>
                    </div>

                    <div class="form-group">
                        <label for="telefono" class="form-label">Teléfono</label>
                        <input type="text"
                               id="telefono"
                               name="telefono"
                               class="form-control @error('telefono') is-invalid @enderror"
                               value="{{ old('telefono') }}"
                               maxlength="20"
                               placeholder="Opcional">
                        @error('telefono')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label for="email" class="form-label">Correo Electrónico</label>
                    <input type="email"
                           id="email"
                           name="email"
                           class="form-control @error('email') is-invalid @enderror"
                           value="{{ old('email') }}"
                           maxlength="100"
                           placeholder="ejemplo@correo.com">
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="direccion" class="form-label">Dirección</label>
                    <textarea id="direccion"
                              name="direccion"
                              class="form-control @error('direccion') is-invalid @enderror"
                              rows="3"
                              placeholder="Dirección completa (opcional)">{{ old('direccion') }}</textarea>
                    @error('direccion')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox"
                               id="estado"
                               name="estado"
                               class="form-check-input"
                               value="1"
                               {{ old('estado', true) ? 'checked' : '' }}>
                        <label for="estado" class="form-check-label">
                            <strong>Cliente activo</strong>
                            <small class="d-block text-muted">Los clientes activos pueden realizar compras</small>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="form-actions-bottom">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fa-solid fa-save"></i>
                Guardar Cliente
            </button>
            <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-lg">
                <i class="fa-solid fa-xmark"></i>
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection