@extends('layouts.app')

@section('title', 'Crear Impuesto')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('configuracion.index') }}">Configuración</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.config.taxes.index') }}">Impuestos</a></li>
            <li class="breadcrumb-item active">Crear Impuesto</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-plus text-primary me-2"></i>Crear Impuesto
            </h1>
            <p class="text-muted mb-0">Complete los campos para crear un nuevo impuesto</p>
        </div>
        <a href="{{ route('admin.config.taxes.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver
        </a>
    </div>

    <form action="{{ route('admin.config.taxes.store') }}" method="POST" id="tax-form">
        @csrf
        
        <div class="row">
            <div class="col-lg-8">
                <!-- Información Básica -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle"></i> Información Básica
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Nombre del Impuesto *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="code" class="form-label">Código *</label>
                                <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                       id="code" name="code" value="{{ old('code') }}" 
                                       placeholder="ej: IVA, ISLR" required>
                                @error('code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Descripción</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Configuración del Impuesto -->
                <div class="card mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-calculator"></i> Configuración del Impuesto
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="type" class="form-label">Tipo de Impuesto *</label>
                                <select class="form-select @error('type') is-invalid @enderror" 
                                        id="type" name="type" required>
                                    <option value="">Seleccionar tipo</option>
                                    <option value="percentage" {{ old('type') == 'percentage' ? 'selected' : '' }}>Porcentaje</option>
                                    <option value="fixed" {{ old('type') == 'fixed' ? 'selected' : '' }}>Monto Fijo</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="calculation_type" class="form-label">Tipo de Cálculo *</label>
                                <select class="form-select @error('calculation_type') is-invalid @enderror" 
                                        id="calculation_type" name="calculation_type" required>
                                    <option value="">Seleccionar cálculo</option>
                                    <option value="exclusive" {{ old('calculation_type') == 'exclusive' ? 'selected' : '' }}>Excluido</option>
                                    <option value="inclusive" {{ old('calculation_type') == 'inclusive' ? 'selected' : '' }}>Incluido</option>
                                </select>
                                @error('calculation_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3" id="percentage-field">
                                <label for="percentage" class="form-label">Porcentaje (%) *</label>
                                <div class="input-group">
                                    <input type="number" class="form-control @error('percentage') is-invalid @enderror" 
                                           id="percentage" name="percentage" value="{{ old('percentage') }}" 
                                           step="0.01" min="0" max="100">
                                    <span class="input-group-text">%</span>
                                </div>
                                @error('percentage')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3" id="fixed-amount-field" style="display: none;">
                                <label for="fixed_amount" class="form-label">Monto Fijo *</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control @error('fixed_amount') is-invalid @enderror" 
                                           id="fixed_amount" name="fixed_amount" value="{{ old('fixed_amount') }}" 
                                           step="0.01" min="0">
                                </div>
                                @error('fixed_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Configuración Adicional -->
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-cog"></i> Configuración Adicional
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="color" class="form-label">Color</label>
                            <input type="color" class="form-control form-control-color @error('color') is-invalid @enderror" 
                                   id="color" name="color" value="{{ old('color', '#007bff') }}">
                            @error('color')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="sort_order" class="form-label">Orden de Visualización</label>
                            <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                   id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" 
                                   min="0">
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                   value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Impuesto Activo
                            </label>
                        </div>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_default" name="is_default" 
                                   value="1" {{ old('is_default') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_default">
                                Impuesto por Defecto
                            </label>
                            <div class="form-text">Se usará automáticamente en productos nuevos</div>
                        </div>
                    </div>
                </div>

                <!-- Vista Previa -->
                <div class="card mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-eye"></i> Vista Previa
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center">
                            <div class="mb-3">
                                <div class="color-preview" style="width: 60px; height: 60px; background-color: #007bff; border-radius: 50%; margin: 0 auto; border: 3px solid #fff; box-shadow: 0 0 0 2px #dee2e6;"></div>
                            </div>
                            <h6 class="mb-1" id="preview-name">Nombre del Impuesto</h6>
                            <p class="text-muted mb-1" id="preview-code">CÓDIGO</p>
                            <p class="mb-0" id="preview-value">0.00%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <button type="submit" class="btn btn-primary btn-lg me-3">
                            <i class="fas fa-save me-2"></i>Guardar Impuesto
                        </button>
                        <a href="{{ route('admin.config.taxes.index') }}" class="btn btn-secondary btn-lg">
                            <i class="fas fa-times me-2"></i>Cancelar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Cambiar campos según tipo de impuesto
    $('#type').change(function() {
        const type = $(this).val();
        
        if (type === 'percentage') {
            $('#percentage-field').show();
            $('#fixed-amount-field').hide();
            $('#percentage').prop('required', true);
            $('#fixed_amount').prop('required', false);
        } else if (type === 'fixed') {
            $('#percentage-field').hide();
            $('#fixed-amount-field').show();
            $('#percentage').prop('required', false);
            $('#fixed_amount').prop('required', true);
        } else {
            $('#percentage-field').hide();
            $('#fixed-amount-field').hide();
            $('#percentage').prop('required', false);
            $('#fixed_amount').prop('required', false);
        }
        
        updatePreview();
    });

    // Actualizar vista previa
    function updatePreview() {
        const name = $('#name').val() || 'Nombre del Impuesto';
        const code = $('#code').val() || 'CÓDIGO';
        const type = $('#type').val();
        const percentage = $('#percentage').val();
        const fixedAmount = $('#fixed_amount').val();
        const color = $('#color').val();
        
        $('#preview-name').text(name);
        $('#preview-code').text(code.toUpperCase());
        $('.color-preview').css('background-color', color);
        
        if (type === 'percentage') {
            $('#preview-value').text((percentage || '0.00') + '%');
        } else if (type === 'fixed') {
            $('#preview-value').text('$' + (fixedAmount || '0.00'));
        } else {
            $('#preview-value').text('0.00%');
        }
    }

    // Event listeners para actualizar vista previa
    $('#name, #code, #percentage, #fixed_amount, #color').on('input', updatePreview);

    // Validación del formulario
    $('#tax-form').submit(function(e) {
        const type = $('#type').val();
        
        if (type === 'percentage' && !$('#percentage').val()) {
            e.preventDefault();
            alert('Por favor ingrese el porcentaje del impuesto');
            $('#percentage').focus();
            return false;
        }
        
        if (type === 'fixed' && !$('#fixed_amount').val()) {
            e.preventDefault();
            alert('Por favor ingrese el monto fijo del impuesto');
            $('#fixed_amount').focus();
            return false;
        }
    });

    // Inicializar vista previa
    updatePreview();
});
</script>
@endpush

@push('styles')
<style>
.form-control-color {
    width: 100%;
    height: 38px;
}

.color-preview {
    transition: all 0.3s ease;
}

.color-preview:hover {
    transform: scale(1.1);
}

.card-header {
    border-bottom: none;
}

.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.form-text {
    font-size: 0.875em;
    color: #6c757d;
}

.input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
}
</style>
@endpush