@extends('layouts.app')

@section('title', 'Nueva Configuración de Impresión')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-print me-2"></i>Nueva Configuración de Impresión
                    </h1>
                    <p class="text-muted mb-0">Crear una nueva configuración de impresión para reportes</p>
                </div>
                <div>
                    <a href="{{ route('admin.print-config.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Formulario -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-cog me-2"></i>Configuración de Impresión
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.print-config.store') }}" method="POST">
                        @csrf
                        
                        <!-- Información Básica -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>Información Básica
                                </h5>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="report_type" class="form-label">Tipo de Reporte <span class="text-danger">*</span></label>
                                    <select name="report_type" id="report_type" class="form-control @error('report_type') is-invalid @enderror" required>
                                        <option value="">Seleccionar tipo de reporte</option>
                                        @foreach($reportTypes as $key => $value)
                                            <option value="{{ $key }}" {{ (old('report_type', $selectedType) == $key) ? 'selected' : '' }}>
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('report_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="report_name" class="form-label">Nombre del Reporte <span class="text-danger">*</span></label>
                                    <input type="text" name="report_name" id="report_name" 
                                           class="form-control @error('report_name') is-invalid @enderror" 
                                           value="{{ old('report_name') }}" required>
                                    @error('report_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="description" class="form-label">Descripción</label>
                                    <textarea name="description" id="description" rows="3" 
                                              class="form-control @error('description') is-invalid @enderror">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Configuración de Papel -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-file-alt me-2"></i>Configuración de Papel
                                </h5>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="paper_size" class="form-label">Tamaño de Papel <span class="text-danger">*</span></label>
                                    <select name="paper_size" id="paper_size" class="form-control @error('paper_size') is-invalid @enderror" required>
                                        <option value="A4" {{ old('paper_size') == 'A4' ? 'selected' : '' }}>A4</option>
                                        <option value="A3" {{ old('paper_size') == 'A3' ? 'selected' : '' }}>A3</option>
                                        <option value="Letter" {{ old('paper_size') == 'Letter' ? 'selected' : '' }}>Letter</option>
                                        <option value="Legal" {{ old('paper_size') == 'Legal' ? 'selected' : '' }}>Legal</option>
                                    </select>
                                    @error('paper_size')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="orientation" class="form-label">Orientación <span class="text-danger">*</span></label>
                                    <select name="orientation" id="orientation" class="form-control @error('orientation') is-invalid @enderror" required>
                                        <option value="portrait" {{ old('orientation') == 'portrait' ? 'selected' : '' }}>Vertical</option>
                                        <option value="landscape" {{ old('orientation') == 'landscape' ? 'selected' : '' }}>Horizontal</option>
                                    </select>
                                    @error('orientation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="sort_order" class="form-label">Orden de Visualización</label>
                                    <input type="number" name="sort_order" id="sort_order" 
                                           class="form-control @error('sort_order') is-invalid @enderror" 
                                           value="{{ old('sort_order', 0) }}" min="0">
                                    @error('sort_order')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Configuración de Márgenes -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-ruler me-2"></i>Márgenes (mm)
                                </h5>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="margin_top" class="form-label">Superior</label>
                                    <input type="number" name="margin_top" id="margin_top" 
                                           class="form-control @error('margin_top') is-invalid @enderror" 
                                           value="{{ old('margin_top', 20) }}" min="0" max="50">
                                    @error('margin_top')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="margin_right" class="form-label">Derecha</label>
                                    <input type="number" name="margin_right" id="margin_right" 
                                           class="form-control @error('margin_right') is-invalid @enderror" 
                                           value="{{ old('margin_right', 20) }}" min="0" max="50">
                                    @error('margin_right')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="margin_bottom" class="form-label">Inferior</label>
                                    <input type="number" name="margin_bottom" id="margin_bottom" 
                                           class="form-control @error('margin_bottom') is-invalid @enderror" 
                                           value="{{ old('margin_bottom', 20) }}" min="0" max="50">
                                    @error('margin_bottom')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="margin_left" class="form-label">Izquierda</label>
                                    <input type="number" name="margin_left" id="margin_left" 
                                           class="form-control @error('margin_left') is-invalid @enderror" 
                                           value="{{ old('margin_left', 20) }}" min="0" max="50">
                                    @error('margin_left')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Configuración de Fuente -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-font me-2"></i>Configuración de Fuente
                                </h5>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="font_family" class="form-label">Familia de Fuente</label>
                                    <select name="font_family" id="font_family" class="form-control @error('font_family') is-invalid @enderror">
                                        <option value="Arial" {{ old('font_family') == 'Arial' ? 'selected' : '' }}>Arial</option>
                                        <option value="Times New Roman" {{ old('font_family') == 'Times New Roman' ? 'selected' : '' }}>Times New Roman</option>
                                        <option value="Calibri" {{ old('font_family') == 'Calibri' ? 'selected' : '' }}>Calibri</option>
                                        <option value="Helvetica" {{ old('font_family') == 'Helvetica' ? 'selected' : '' }}>Helvetica</option>
                                    </select>
                                    @error('font_family')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="font_size" class="form-label">Tamaño de Fuente</label>
                                    <input type="number" name="font_size" id="font_size" 
                                           class="form-control @error('font_size') is-invalid @enderror" 
                                           value="{{ old('font_size', 12) }}" min="8" max="24">
                                    @error('font_size')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="font_color" class="form-label">Color de Fuente</label>
                                    <input type="color" name="font_color" id="font_color" 
                                           class="form-control @error('font_color') is-invalid @enderror" 
                                           value="{{ old('font_color', '#000000') }}">
                                    @error('font_color')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <div class="form-check mt-4">
                                        <input type="checkbox" name="font_bold" id="font_bold" 
                                               class="form-check-input @error('font_bold') is-invalid @enderror" 
                                               {{ old('font_bold') ? 'checked' : '' }}>
                                        <label for="font_bold" class="form-check-label">Negrita</label>
                                        @error('font_bold')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Información de la Empresa -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5 class="text-primary mb-3">
                                    <i class="fas fa-building me-2"></i>Información de la Empresa
                                </h5>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="company_name" class="form-label">Nombre de la Empresa <span class="text-danger">*</span></label>
                                    <input type="text" name="company_name" id="company_name" 
                                           class="form-control @error('company_name') is-invalid @enderror" 
                                           value="{{ old('company_name') }}" required>
                                    @error('company_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="company_logo" class="form-label">Logo de la Empresa</label>
                                    <input type="text" name="company_logo" id="company_logo" 
                                           class="form-control @error('company_logo') is-invalid @enderror" 
                                           value="{{ old('company_logo') }}" placeholder="URL del logo">
                                    @error('company_logo')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="company_address" class="form-label">Dirección</label>
                                    <textarea name="company_address" id="company_address" rows="2" 
                                              class="form-control @error('company_address') is-invalid @enderror">{{ old('company_address') }}</textarea>
                                    @error('company_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="company_phone" class="form-label">Teléfono</label>
                                    <input type="text" name="company_phone" id="company_phone" 
                                           class="form-control @error('company_phone') is-invalid @enderror" 
                                           value="{{ old('company_phone') }}">
                                    @error('company_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="company_email" class="form-label">Email</label>
                                    <input type="email" name="company_email" id="company_email" 
                                           class="form-control @error('company_email') is-invalid @enderror" 
                                           value="{{ old('company_email') }}">
                                    @error('company_email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="form-check mt-4">
                                        <input type="checkbox" name="is_active" id="is_active" 
                                               class="form-check-input @error('is_active') is-invalid @enderror" 
                                               {{ old('is_active', true) ? 'checked' : '' }}>
                                        <label for="is_active" class="form-check-label">Configuración Activa</label>
                                        @error('is_active')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botones -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <a href="{{ route('admin.print-config.index') }}" class="btn btn-secondary me-2">
                                        <i class="fas fa-times me-2"></i>Cancelar
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Guardar Configuración
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generar nombre del reporte basado en el tipo seleccionado
    const reportTypeSelect = document.getElementById('report_type');
    const reportNameInput = document.getElementById('report_name');
    
    reportTypeSelect.addEventListener('change', function() {
        if (this.value && !reportNameInput.value) {
            const typeText = this.options[this.selectedIndex].text;
            reportNameInput.value = typeText + ' - Configuración Personalizada';
        }
    });
    
    // Validación de márgenes
    const marginInputs = ['margin_top', 'margin_right', 'margin_bottom', 'margin_left'];
    marginInputs.forEach(inputId => {
        const input = document.getElementById(inputId);
        input.addEventListener('input', function() {
            if (this.value < 0) this.value = 0;
            if (this.value > 50) this.value = 50;
        });
    });
    
    // Validación de tamaño de fuente
    const fontSizeInput = document.getElementById('font_size');
    fontSizeInput.addEventListener('input', function() {
        if (this.value < 8) this.value = 8;
        if (this.value > 24) this.value = 24;
    });
});
</script>
@endpush