@extends('layouts.app')

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

@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-cogs me-2"></i>Configuración Contable
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-success btn-sm" onclick="saveSettings()">
                            <i class="fas fa-save me-1"></i>Guardar Cambios
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if($settings->count() > 0)
                        <form id="settingsForm" action="{{ route('admin.accounting.settings.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <div class="row">
                                @foreach($settings as $setting)
                                    <div class="col-md-6 mb-4">
                                        <div class="card h-100">
                                            <div class="card-body">
                                                <h6 class="card-title">
                                                    <i class="fas fa-{{ $setting->icon ?? 'setting' }} me-2"></i>
                                                    {{ $setting->display_name ?? ucfirst(str_replace('_', ' ', $setting->key)) }}
                                                </h6>
                                                
                                                @if($setting->description)
                                                    <p class="card-text text-muted small">{{ $setting->description }}</p>
                                                @endif
                                                
                                                <div class="form-group">
                                                    @switch($setting->type)
                                                        @case('boolean')
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" 
                                                                       type="checkbox" 
                                                                       id="setting_{{ $setting->key }}" 
                                                                       name="settings[{{ $setting->key }}]" 
                                                                       value="1" 
                                                                       {{ $setting->value ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="setting_{{ $setting->key }}">
                                                                    {{ $setting->value ? 'Habilitado' : 'Deshabilitado' }}
                                                                </label>
                                                            </div>
                                                            @break
                                                        
                                                        @case('number')
                                                            <input type="number" 
                                                                   class="form-control" 
                                                                   id="setting_{{ $setting->key }}" 
                                                                   name="settings[{{ $setting->key }}]" 
                                                                   value="{{ $setting->value }}" 
                                                                   step="{{ $setting->step ?? '1' }}"
                                                                   min="{{ $setting->min ?? '' }}"
                                                                   max="{{ $setting->max ?? '' }}">
                                                            @break
                                                        
                                                        @case('select')
                                                            <select class="form-control" 
                                                                    id="setting_{{ $setting->key }}" 
                                                                    name="settings[{{ $setting->key }}]">
                                                                @if($setting->options)
                                                                    @foreach(json_decode($setting->options, true) as $value => $label)
                                                                        <option value="{{ $value }}" {{ $setting->value == $value ? 'selected' : '' }}>
                                                                            {{ $label }}
                                                                        </option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                            @break
                                                        
                                                        @case('textarea')
                                                            <textarea class="form-control" 
                                                                      id="setting_{{ $setting->key }}" 
                                                                      name="settings[{{ $setting->key }}]" 
                                                                      rows="3">{{ $setting->value }}</textarea>
                                                            @break
                                                        
                                                        @default
                                                            <input type="text" 
                                                                   class="form-control" 
                                                                   id="setting_{{ $setting->key }}" 
                                                                   name="settings[{{ $setting->key }}]" 
                                                                   value="{{ $setting->value }}">
                                                    @endswitch
                                                    
                                                    @if($setting->unit)
                                                        <small class="form-text text-muted">Unidad: {{ $setting->unit }}</small>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </form>

                        {{-- Paginación --}}
                        @if($settings->hasPages())
                            <div class="d-flex justify-content-center mt-4">
                                {{ $settings->links() }}
                            </div>
                        @endif
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-cogs fa-4x text-muted mb-4"></i>
                            <h4 class="text-muted">No hay configuraciones</h4>
                            <p class="text-muted mb-4">Las configuraciones contables aparecerán aquí una vez que se inicialicen.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function saveSettings() {
    if (confirm('¿Estás seguro de guardar los cambios en la configuración?')) {
        document.getElementById('settingsForm').submit();
    }
}

// Actualizar etiquetas de switches
document.addEventListener('DOMContentLoaded', function() {
    const switches = document.querySelectorAll('.form-check-input[type="checkbox"]');
    switches.forEach(switchElement => {
        const label = switchElement.nextElementSibling;
        
        switchElement.addEventListener('change', function() {
            label.textContent = this.checked ? 'Habilitado' : 'Deshabilitado';
        });
    });
    
    // Validación de campos numéricos
    const numberInputs = document.querySelectorAll('input[type="number"]');
    numberInputs.forEach(input => {
        input.addEventListener('blur', function() {
            const min = parseFloat(this.getAttribute('min'));
            const max = parseFloat(this.getAttribute('max'));
            const value = parseFloat(this.value);
            
            if (!isNaN(min) && value < min) {
                this.value = min;
                alert(`El valor mínimo permitido es ${min}`);
            }
            
            if (!isNaN(max) && value > max) {
                this.value = max;
                alert(`El valor máximo permitido es ${max}`);
            }
        });
    });
});
</script>
@endpush
@endsection