<x-app-layout>
    <x-slot name="title">
        Configuración del Sistema
    </x-slot>

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white border-bottom pt-4 px-4 pb-3">
                    <div class="d-flex align-items-center mb-1">
                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                            <i class="bi bi-gear-fill text-primary fs-4"></i>
                        </div>
                        <div>
                            <h5 class="fw-bold mb-0">Parámetros Globales</h5>
                            <div class="text-muted small">Ajustes generales que afectan a todas las sucursales.</div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin.configuracion.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <h6 class="fw-bold text-uppercase text-muted small mb-3 border-bottom pb-2">Datos de la Empresa</h6>
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">Nombre de la Empresa / Razón Social <span class="text-danger">*</span></label>
                                <input type="text" name="empresa_nombre" class="form-control {{ $bloquearDatosEmpresa ? 'bg-light text-muted' : '' }}" value="{{ old('empresa_nombre', $config['empresa_nombre']->valor ?? '') }}" {{ $bloquearDatosEmpresa ? 'readonly tabindex="-1"' : '' }} required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">RUC <span class="text-danger">*</span></label>
                                <input type="text" name="empresa_ruc" class="form-control {{ $bloquearDatosEmpresa ? 'bg-light text-muted' : '' }}" value="{{ old('empresa_ruc', $config['empresa_ruc']->valor ?? '') }}" maxlength="11" pattern="\d{11}" placeholder="11 dígitos" {{ $bloquearDatosEmpresa ? 'readonly tabindex="-1"' : '' }} required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold small text-muted">Dirección Principal</label>
                                <input type="text" name="empresa_direccion" class="form-control {{ $bloquearDatosEmpresa ? 'bg-light text-muted' : '' }}" value="{{ old('empresa_direccion', $config['empresa_direccion']->valor ?? '') }}" {{ $bloquearDatosEmpresa ? 'readonly tabindex="-1"' : '' }}>
                            </div>
                        </div>

                        <h6 class="fw-bold text-uppercase text-muted small mb-3 border-bottom pb-2">Contabilidad y Moneda</h6>
                        <div class="row g-4 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">Porcentaje de IGV (%) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" name="igv_porcentaje" class="form-control" value="{{ old('igv_porcentaje', $config['igv_porcentaje']->valor ?? '18') }}" min="0" max="100" required>
                                    <span class="input-group-text bg-light text-muted">%</span>
                                </div>
                                <div class="form-text small">Se utiliza para calcular impuestos en módulo de Caja y SUNAT.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted">Símbolo de Moneda <span class="text-danger">*</span></label>
                                <input type="text" name="moneda_simbolo" class="form-control" value="{{ old('moneda_simbolo', $config['moneda_simbolo']->valor ?? 'S/.') }}" required maxlength="5">
                            </div>
                        </div>

                        <h6 class="fw-bold text-uppercase text-muted small mb-3 border-bottom pb-2">Reglas de Negocio</h6>
                        <div class="row g-4 mb-4">
                            <div class="col-md-12">
                                <div class="d-flex align-items-center justify-content-between bg-light p-3 rounded-3 mb-2">
                                    <div>
                                        <h6 class="fw-bold mb-1"><i class="bi bi-cash-stack me-2 text-primary"></i> Caja: Requiere apertura obligatoria</h6>
                                        <div class="text-muted small">Fuerza a los cajeros a declarar el monto base antes de registrar ventas o egresos en su turno.</div>
                                    </div>
                                    <div class="form-check form-switch fs-4 mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="caja_requiere_apertura" value="true" {{ (isset($config['caja_requiere_apertura']) && $config['caja_requiere_apertura']->valor === 'true') ? 'checked' : '' }}>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center justify-content-between bg-light p-3 rounded-3 mb-2">
                                    <div>
                                        <h6 class="fw-bold mb-1"><i class="bi bi-exclamation-triangle me-2 text-warning"></i> Almacén: Activar alertas de stock mínimo</h6>
                                        <div class="text-muted small">Notifica y resalta los insumos que caen por debajo de su cantidad mínima definida en cada sucursal.</div>
                                    </div>
                                    <div class="form-check form-switch fs-4 mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="picking_alerta_stock" value="true" {{ (isset($config['picking_alerta_stock']) && $config['picking_alerta_stock']->valor === 'true') ? 'checked' : '' }}>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center justify-content-between bg-light p-3 rounded-3">
                                    <div>
                                        <h6 class="fw-bold mb-1"><i class="bi bi-cart4 me-2 text-success"></i> Compras: Pre-compra automática</h6>
                                        <div class="text-muted small">Permite que el sistema sugiera órdenes de compra basadas en el déficit de stock de la semana.</div>
                                    </div>
                                    <div class="form-check form-switch fs-4 mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" name="precompra_automatica" value="true" {{ (isset($config['precompra_automatica']) && $config['precompra_automatica']->valor === 'true') ? 'checked' : '' }}>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top d-flex justify-content-end gap-2">
                            <a href="{{ route('dashboard') }}" class="btn btn-light rounded-pill border fw-bold px-4">Cancelar</a>
                            <button type="submit" class="btn btn-primary rounded-pill fw-bold shadow-sm px-4">
                                <i class="bi bi-save me-1"></i> Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
