@extends('layouts.app')

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

@section('content')
<div class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <a href="{{ route('customers.index') }}" class="btn btn-ghost btn-icon" style="margin-right: 10px;">
                    <i class="ph ph-arrow-left"></i>
                </a>
                Nuevo Cliente Particular
            </h1>
        </div>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('customers.store') }}" class="form-container">
            @csrf

            <div class="form-section">
                <h3 class="form-section-title">Datos Principales</h3>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="document" class="form-label">Cédula / NIT *</label>
                        <input type="text" name="document" id="document" class="form-control" required value="{{ old('document') }}">
                        @error('document') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div class="form-group">
                        <label for="name" class="form-label">Nombre Completo *</label>
                        <input type="text" name="name" id="name" class="form-control" required value="{{ old('name') }}">
                        @error('name') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="phone" class="form-label">Teléfono</label>
                        <input type="text" name="phone" id="phone" class="form-control" value="{{ old('phone') }}">
                        @error('phone') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div class="form-group">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}">
                        @error('email') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="form-section-title">Ubicación y Otros</h3>

                <div class="form-row">
                    <div class="form-group">
                        <label for="city" class="form-label">Ciudad</label>
                        <input type="text" name="city" id="city" class="form-control" value="{{ old('city') }}">
                        @error('city') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div class="form-group">
                        <label for="address" class="form-label">Dirección</label>
                        <input type="text" name="address" id="address" class="form-control" value="{{ old('address') }}">
                        @error('address') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label for="notes" class="form-label">Notas / Observaciones</label>
                    <textarea name="notes" id="notes" class="form-control" rows="3">{{ old('notes') }}</textarea>
                    @error('notes') <span class="text-danger text-sm">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label d-flex align-center" style="cursor: pointer; gap: 8px;">
                        <input type="checkbox" name="is_active" value="1" checked style="width: 18px; height: 18px;">
                        <span>Cliente Activo</span>
                    </label>
                </div>
            </div>

            <div class="form-actions" style="margin-top: var(--space-xl); display: flex; gap: var(--space-md); justify-content: flex-end;">
                <a href="{{ route('customers.index') }}" class="btn btn-outline">Cancelar</a>
                <button type="submit" class="btn btn-primary">
                    <i class="ph ph-floppy-disk"></i> Guardar Cliente
                </button>
            </div>
        </form>
    </div>
</div>
@endsection