@extends('layouts.app')

@section('title', 'Configuración')

@section('content')
<div class="row">
    <div class="col-12">
        <h2 class="mb-4">
            <i class="bi bi-gear text-primary"></i> Configuración
        </h2>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- Datos Laborales -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="bi bi-briefcase"></i> Datos Laborales
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="fecha_ingreso" class="form-label">Fecha de Ingreso</label>
                                <input type="date" class="form-control" id="fecha_ingreso" 
                                       name="fecha_ingreso" 
                                       value="{{ old('fecha_ingreso', auth()->user()->fecha_ingreso?->format('Y-m-d')) }}">
                                <small class="text-muted">Fecha en que started a trabajar en la empresa</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="razon_social" class="form-label">Razón Social</label>
                                <input type="text" class="form-control" id="razon_social" 
                                       name="razon_social" 
                                       value="{{ old('razon_social', auth()->user()->razon_social) }}"
                                       placeholder="Empresa donde trabajas">
                                <small class="text-muted">Nombre de la empresa o negocio</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sueldo_integro_diario" class="form-label">Sueldo Íntegro Diario</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="sueldo_integro_diario" 
                                           name="sueldo_integro_diario" 
                                           value="{{ old('sueldo_integro_diario', auth()->user()->sueldo_integro_diario) }}" 
                                           min="0" step="0.01">
                                </div>
                                <small class="text-muted">Salario diario integrado (para calcular vacaciones)</small>
                            </div>
                        </div>
                    </div>
                    
                    @php($user = auth()->user())
                    @if($user->fecha_ingreso)
                    <div class="alert alert-info">
                        <i class="bi bi-calendar-check"></i> 
                        <strong>Antigüedad:</strong> {{ $user->fecha_ingreso->diffInYears(now()) }} año(s) y {{ $user->fecha_ingreso->diffInMonths(now()) % 12 }} mes(es)
                    </div>
                    @endif

                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-save"></i> Guardar Datos Laborales
                    </button>
                </form>
            </div>
        </div>

        <!-- Configuración de Comisión -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-percent"></i> Configuración de Comisión
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="commission_percentage" class="form-label">Porcentaje de Comisión (%)</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="commission_percentage" 
                                           name="commission_percentage" 
                                           value="{{ old('commission_percentage', auth()->user()->commission_percentage) }}" 
                                           min="0" max="100" step="0.01" required>
                                    <span class="input-group-text">%</span>
                                </div>
                                <small class="text-muted">Porcentaje que recibirás sobre tus ventas</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="monthly_salary" class="form-label">Salario Mensual Base</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="monthly_salary" 
                                           name="monthly_salary" 
                                           value="{{ old('monthly_salary', auth()->user()->monthly_salary) }}" 
                                           min="0" step="0.01" required>
                                </div>
                                <small class="text-muted">Salario base mensual sin comisiones</small>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> 
                        <strong>Nota:</strong> Estos valores se aplicarán a partir del próximo mes.
                        Los meses actuales mantendrán su configuración original.
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> Guardar Cambios
                    </button>
                </form>
            </div>
        </div>

        <!-- Cambiar Contraseña -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-key"></i> Cambiar Contraseña
                </h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    @method('PUT')
                    
                    <div class="mb-3">
                        <label for="current_password" class="form-label">Contraseña Actual</label>
                        <input type="password" class="form-control" id="current_password" 
                               name="current_password">
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">Nueva Contraseña</label>
                                <input type="password" class="form-control" id="password" 
                                       name="password">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password_confirmation" class="form-label">Confirmar Contraseña</label>
                                <input type="password" class="form-control" id="password_confirmation" 
                                       name="password_confirmation">
                            </div>
                        </div>
                    </div>

                    <small class="text-muted">Deja los campos de contraseña en blanco si no deseas cambiarlo.</small>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-secondary">
                            <i class="bi bi-key-fill"></i> Actualizar Contraseña
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- Información del Usuario -->
        <div class="card mb-4">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0">
                    <i class="bi bi-person"></i> Información del Usuario
                </h5>
            </div>
            <div class="card-body">
                <dl class="row">
                    <dt class="col-sm-4">Nombre:</dt>
                    <dd class="col-sm-8">{{ auth()->user()->name }}</dd>
                    
                    <dt class="col-sm-4">Email:</dt>
                    <dd class="col-sm-8">{{ auth()->user()->email }}</dd>
                    
                    @if(auth()->user()->razon_social)
                    <dt class="col-sm-4">Empresa:</dt>
                    <dd class="col-sm-8">{{ auth()->user()->razon_social }}</dd>
                    @endif
                    
                    @if(auth()->user()->fecha_ingreso)
                    <dt class="col-sm-4">Ingreso:</dt>
                    <dd class="col-sm-8">{{ auth()->user()->fecha_ingreso->format('d/m/Y') }}</dd>
                    @endif
                    
                    <dt class="col-sm-4">Comisión:</dt>
                    <dd class="col-sm-8">
                        <span class="badge bg-primary">{{ auth()->user()->commission_percentage }}%</span>
                    </dd>
                    
                    <dt class="col-sm-4">Salario:</dt>
                    <dd class="col-sm-8">${{ number_format(auth()->user()->monthly_salary, 2) }}</dd>
                    
                    <dt class="col-sm-4">Estado:</dt>
                    <dd class="col-sm-8">
                        @if(auth()->user()->is_active)
                            <span class="badge bg-success">Activo</span>
                        @else
                            <span class="badge bg-danger">Inactivo</span>
                        @endif
                    </dd>
                </dl>
            </div>
        </div>

        <!-- Ayuda -->
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">
                    <i class="bi bi-question-circle"></i> Ayuda
                </h5>
            </div>
            <div class="card-body">
                <h6>¿Cómo funciona la comisión?</h6>
                <p class="text-muted small">
                    Tu salario se calcula sumando el salary base más el {{ auth()->user()->commission_percentage }}% 
                    de tus ventas del mes.
                </p>
                
                <h6 class="mt-3">¿Qué son las ventas del sistema?</h6>
                <p class="text-muted small">
                    Las ventas del sistema son las ventas consolidadas automáticamente. 
                    Si difieren de tus ventas, aparecerán en el reporte.
                </p>
                
                <h6 class="mt-3">¿Puedo cambiar estos valores?</h6>
                <p class="text-muted small">
                    Sí, pero los cambios se aplicarán al siguiente mes. 
                    Los meses actuales mantendrán su configuración.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection