@extends('layouts.app')

@section('title', 'Registro de Costos')

@section('header', 'Gestión de Productos')

@section('content')
    <div class="page-container">
        <div class="page-header">
            <h2 class="page-title">Costos - {{ $producto->nombre }}</h2>
            <a href="{{ route('productos.index') }}" class="btn btn-secondary">
                <i class="fa-solid fa-arrow-left"></i>
                Volver
            </a>
        </div>

        <!-- Información del Producto -->
        <div class="card mb-4" style="background-color: #f8fafc; border: 1px solid #e2e8f0;">
            <div class="card-body" style="padding: 1rem 1.5rem;">
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: center;">
                    <div>
                        <span style="font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Código:</span>
                        <span style="font-size: 0.875rem; font-weight: 600; color: #0f172a; margin-left: 0.5rem;">{{ $producto->codigo }}</span>
                    </div>
                    <div>
                        <span style="font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Nombre:</span>
                        <span style="font-size: 0.875rem; font-weight: 600; color: #0f172a; margin-left: 0.5rem;">{{ $producto->nombre }}</span>
                    </div>
                    <div>
                        <span style="font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Presentación:</span>
                        <span style="font-size: 0.875rem; font-weight: 600; color: #0f172a; margin-left: 0.5rem;">{{ $producto->presentacion ?? 'N/A' }}</span>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('productos.guardarCostos', $producto) }}" method="POST" id="formCostos">
            @csrf

            <div class="card">
                <div class="card-header"
                    style="background-color: #151E31; color: white; padding: 1rem 1.5rem; border-radius: 12px 12px 0 0;">
                    <h3 style="margin: 0; font-size: 1.125rem; font-weight: 600;">
                        <i class="fa-solid fa-money-bill-wave"></i> Registro de Costos
                    </h3>
                </div>
                <div class="card-body" style="padding: 2rem; background-color: #fafafa;">
                    <table
                        style="width: 100%; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                        <thead>
                            <tr style="background-color: #f8f9fa; border-bottom: 2px solid #e9ecef;">
                                <th style="padding: 1rem 1.5rem; text-align: left; font-weight: 600; color: #495057;">
                                    Concepto</th>
                                <th style="padding: 1rem 1.5rem; text-align: left; font-weight: 600; color: #495057;">Valor
                                </th>
                                <th style="padding: 1rem 1.5rem; text-align: center; font-weight: 600; color: #495057;">
                                    Acción</th>
                            </tr>
                        </thead>
                        <tbody id="costosTableBody">
                            @if ($producto->costos->count() > 0)
                                @foreach ($producto->costos as $index => $costo)
                                    <tr class="costo-row" style="border-bottom: 1px solid #f0f0f0;">
                                        <td style="padding: 1rem 1.5rem;">
                                            <input type="text" name="costos[{{ $index }}][concepto]"
                                                class="form-control" value="{{ $costo->concepto }}"
                                                placeholder="Alcohol, Tapa, etc."
                                                style="border: 1px solid #dee2e6; border-radius: 6px; padding: 0.5rem 0.75rem; width: 100%;">
                                        </td>
                                        <td style="padding: 1rem 1.5rem;">
                                            <div
                                                style="display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; background: white; width: 100%;">
                                                <span
                                                    style="padding: 0.5rem 0.75rem; background-color: #f8f9fa; color: #495057; font-weight: 500; border-right: 1px solid #dee2e6; flex-shrink: 0;">$</span>
                                                <input type="text" name="costos[{{ $index }}][valor]"
                                                    class="number-format costo-valor"
                                                    value="{{ number_format($costo->valor, 0, ',', '.') }}"
                                                    style="border: none; padding: 0.5rem 0.75rem; outline: none; width: 100%; background: transparent;">
                                            </div>
                                        </td>
                                        <td style="padding: 1rem 1.5rem; text-align: center;">
                                            <button type="button" class="btn btn-sm btn-danger btn-eliminar-costo"
                                                style="padding: 0.375rem 0.75rem;">
                                                <i class="fa-solid fa-trash-can" style="color: #dc3545;"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr class="costo-row" style="border-bottom: 1px solid #f0f0f0;">
                                    <td style="padding: 1rem 1.5rem;">
                                        <input type="text" name="costos[0][concepto]" class="form-control"
                                            placeholder="Alcohol, Tapa, etc."
                                            style="border: 1px solid #dee2e6; border-radius: 6px; padding: 0.5rem 0.75rem; width: 100%;">
                                    </td>
                                    <td style="padding: 1rem 1.5rem;">
                                        <div
                                            style="display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; background: white; width: 100%;">
                                            <span
                                                style="padding: 0.5rem 0.75rem; background-color: #f8f9fa; color: #495057; font-weight: 500; border-right: 1px solid #dee2e6; flex-shrink: 0;">$</span>
                                            <input type="text" name="costos[0][valor]"
                                                class="number-format costo-valor" placeholder="0"
                                                style="border: none; padding: 0.5rem 0.75rem; outline: none; width: 100%; background: transparent;">
                                        </div>
                                    </td>
                                    <td style="padding: 1rem 1.5rem; text-align: center;">
                                        <button type="button" class="btn btn-sm btn-danger btn-eliminar-costo"
                                            style="padding: 0.375rem 0.75rem;">
                                            <i class="fa-solid fa-trash-can" style="color: #dc3545;"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>

                    <div style="text-align: center; margin-top: 1.5rem;">
                        <button type="button" class="btn btn-success" id="btnAgregarCosto"
                            style="background-color: #10b981; border-color: #10b981; color: white; padding: 0.625rem 1.25rem; font-weight: 500;">
                            <i class="fa-solid fa-plus-circle"></i>
                            Agregar Costo
                        </button>
                    </div>
                </div>
            </div>

            <!-- Observaciones -->
            <div class="card mt-4" style="display: none;">
                <div class="card-header"
                    style="background-color: white; border-bottom: 2px solid #e9ecef; padding: 1rem 1.5rem;">
                    <h3 style="margin: 0; font-size: 1rem; font-weight: 600; color: #495057;">Observaciones</h3>
                </div>
                <div class="card-body" style="padding: 1.5rem;">
                    <textarea name="observaciones" class="form-control" rows="3" placeholder="Notas adicionales sobre los costos..."
                        style="border: 1px solid #dee2e6; border-radius: 6px; padding: 0.75rem; resize: vertical;"></textarea>
                </div>
            </div>

            <!-- Resumen de Costos -->
            <div class="card mt-4" style="border: 2px solid #e9ecef; border-radius: 12px; overflow: hidden;">
                <div class="card-body"
                    style="padding: 2rem; background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);">
                    <div style="display: flex; flex-direction: column; gap: 1.25rem;">
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #e9ecef;">
                            <span style="color: #6c757d; font-size: 1rem; font-weight: 500;">Precio de compra</span>
                            <span style="color: #212529; font-size: 1.25rem; font-weight: 600;" id="precioCompra">
                                ${{ number_format($producto->precio_compra, 0, ',', '.') }}
                            </span>
                        </div>
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #e9ecef;">
                            <span style="color: #6c757d; font-size: 1rem; font-weight: 500;">Costos adicionales</span>
                            <span style="color: #dc3545; font-size: 1.25rem; font-weight: 600;" id="costosAdicionales">
                                $0
                            </span>
                        </div>
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem;">
                            <span style="color: #212529; font-size: 1.25rem; font-weight: 700;">Costo total</span>
                            <span style="color: #4299e1; font-size: 1.75rem; font-weight: 700;" id="costoTotal">
                                ${{ number_format($producto->precio_compra, 0, ',', '.') }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Botones de Acción -->
            <div class="form-actions-bottom">
                <button type="submit" class="btn btn-primary btn-lg"
                    style="background-color: #4299e1; border-color: #4299e1; padding: 0.75rem 2rem; font-weight: 600;">
                    <i class="fa-solid fa-check-circle"></i>
                    Guardar Costos
                </button>
                <a href="{{ route('productos.index') }}" class="btn btn-secondary btn-lg"
                    style="padding: 0.75rem 2rem; font-weight: 600;">
                    <i class="fa-solid fa-arrow-left"></i>
                    Cancelar
                </a>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let costoIndex = {{ $producto->costos->count() > 0 ? $producto->costos->count() : 1 }};
            const precioCompra = {{ $producto->precio_compra }};

            // Función para formatear números con separadores de miles (Formato Colombia)
            function formatNumber(value) {
                let number = value.toString().replace(/[^\d]/g, '');
                if (number === '' || number === '0') {
                    return '0';
                }
                return number.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            }

            // Función para limpiar el formato y obtener el número puro
            function unformatNumber(value) {
                return parseFloat(value.toString().replace(/\./g, '')) || 0;
            }

            // Calcular totales
            function calcularTotales() {
                let totalCostos = 0;

                document.querySelectorAll('.costo-valor').forEach(input => {
                    const valor = unformatNumber(input.value);
                    totalCostos += valor;
                });

                document.getElementById('costosAdicionales').textContent = '$' + formatNumber(totalCostos);
                document.getElementById('costoTotal').textContent = '$' + formatNumber(precioCompra + totalCostos);
            }

            // Formatear inputs numéricos
            function setupNumberInput(input) {
                if (input.value && input.value !== '0') {
                    input.value = formatNumber(input.value);
                }

                input.addEventListener('input', function(e) {
                    const cursorPosition = this.selectionStart;
                    const oldLength = this.value.length;
                    this.value = formatNumber(this.value);
                    const newLength = this.value.length;
                    const lengthDiff = newLength - oldLength;
                    this.setSelectionRange(cursorPosition + lengthDiff, cursorPosition + lengthDiff);
                    calcularTotales();
                });

                input.addEventListener('blur', function() {
                    if (this.value === '' || this.value === '0') {
                        this.value = '';
                    }
                    calcularTotales();
                });
            }

            // Inicializar inputs existentes
            document.querySelectorAll('.costo-valor').forEach(setupNumberInput);

            // Agregar nueva fila de costo
            document.getElementById('btnAgregarCosto').addEventListener('click', function() {
                const tbody = document.getElementById('costosTableBody');
                const newRow = document.createElement('tr');
                newRow.className = 'costo-row';
                newRow.style.borderBottom = '1px solid #f0f0f0';
                newRow.innerHTML = `
            <td style="padding: 1rem 1.5rem;">
                <input type="text"
                       name="costos[${costoIndex}][concepto]"
                       class="form-control"
                       placeholder="Alcohol, Tapa, etc."
                       style="border: 1px solid #dee2e6; border-radius: 6px; padding: 0.5rem 0.75rem; width: 100%;">
            </td>
            <td style="padding: 1rem 1.5rem;">
                <div style="display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; background: white; width: 100%;">
                    <span style="padding: 0.5rem 0.75rem; background-color: #f8f9fa; color: #495057; font-weight: 500; border-right: 1px solid #dee2e6; flex-shrink: 0;">$</span>
                    <input type="text"
                           name="costos[${costoIndex}][valor]"
                           class="number-format costo-valor"
                           placeholder="0"
                           style="border: none; padding: 0.5rem 0.75rem; outline: none; width: 100%; background: transparent;">
                </div>
            </td>
            <td style="padding: 1rem 1.5rem; text-align: center;">
                <button type="button" class="btn btn-sm btn-danger btn-eliminar-costo" style="padding: 0.375rem 0.75rem;">
                    <i class="fa-solid fa-trash-can" style="color: #dc3545;"></i>
                </button>
            </td>
        `;

                tbody.appendChild(newRow);
                const newInput = newRow.querySelector('.costo-valor');
                setupNumberInput(newInput);
                costoIndex++;
            });

            // Eliminar fila de costo
            document.getElementById('costosTableBody').addEventListener('click', function(e) {
                if (e.target.closest('.btn-eliminar-costo')) {
                    const row = e.target.closest('.costo-row');
                    const tbody = document.getElementById('costosTableBody');

                    if (tbody.querySelectorAll('.costo-row').length > 1) {
                        row.remove();
                        calcularTotales();
                    } else {
                        row.querySelector('input[name*="[concepto]"]').value = '';
                        row.querySelector('.costo-valor').value = '';
                        calcularTotales();
                    }
                }
            });

            // Calcular totales iniciales
            calcularTotales();

            // Antes de enviar el formulario, limpiar el formato de los números
            document.getElementById('formCostos').addEventListener('submit', function(e) {
                document.querySelectorAll('.costo-valor').forEach(input => {
                    // Convertir el valor formateado a número sin puntos
                    const valorSinFormato = unformatNumber(input.value);
                    input.value = valorSinFormato;
                });
            });
        });
    </script>

@endsection