@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{!! asset('files_custom/bower_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css') !!}">
<style>
    .form-control:focus {
        background-color: #ffffff;
        color: #000;
        outline: none;
        border-color: #00c88b;
        text-transform: uppercase;
    }
    .text-align-center{
        text-align: center !important;
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-shopping menu-icon"></i>
        </span> confirmar carga de pedido </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item"><a href="{{ route('pedidos.index') }}">pedidos</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                confirmar pedido #{{ str_pad($pedido->id, 4, '0', STR_PAD_LEFT) }}
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">productos del pedido #{{ str_pad($pedido->id, 4, '0', STR_PAD_LEFT) }}</h4>
                @include('flash::message')
                <form action="{{ route('pedidos.cargar', $pedido->id) }}" method="POST">
                    @csrf
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Producto</th>
                                    <th class="text-align-center">Cantidad Pedida</th>
                                    <th class="text-align-center">Cantidad Recibida</th>
                                    <th class="text-align-center">Costo Unitario</th>
                                    <th class="text-align-center">Precio Venta</th>
                                    <th class="text-align-center">Utilidad</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pedido->pedidoProductos as $index => $pp)
                                <tr>
                                    <td>
                                        @if($pp->producto)
                                            @if($pp->producto->imagen)
                                                <img src="/img_productos/{{ $pp->producto->imagen }}" style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;" alt="{{ $pp->producto->nombre }}">
                                            @else
                                                <img src="/img_productos/default.png" style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;" alt="{{ $pp->producto->nombre }}">
                                            @endif
                                            {{ $pp->producto->nombre }}
                                        @elseif($pp->consumible)
                                            @if($pp->consumible->imagen)
                                                <img src="/img_consumibles/{{ $pp->consumible->imagen }}" style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;" alt="{{ $pp->consumible->nombre }}">
                                            @else
                                                <img src="/img_consumibles/default.png" style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;" alt="{{ $pp->consumible->nombre }}">
                                            @endif
                                            {{ $pp->consumible->nombre }}
                                        @else
                                            N/A
                                        @endif
                                        <input type="hidden" name="pedido_productos[{{ $index }}][id]" value="{{ $pp->id }}">
                                        <input type="hidden" name="pedido_productos[{{ $index }}][producto_id]" value="{{ $pp->producto_id }}">
                                        <input type="hidden" name="pedido_productos[{{ $index }}][consumible_id]" value="{{ $pp->consumible_id }}">
                                    </td>
                                    <td class="text-align-center">{{ $pp->cantidad }}</td>
                                    <td class="text-align-center">
                                        <input type="number" name="pedido_productos[{{ $index }}][received]" class="form-control" min="0" max="{{ $pp->cantidad }}" value="{{ $pp->cantidad }}" required>
                                    </td>
                                    <td class="text-align-center">
                                        <input type="number" name="pedido_productos[{{ $index }}][precio_unitario]" class="form-control" step="0.01" value="0" required>
                                        <div class="error-msg text-danger" id="error-precio-{{ $index }}"></div>
                                    </td>
                                    <td class="text-align-center">
                                        @if($pp->producto)
                                        <input type="number" name="pedido_productos[{{ $index }}][precio_venta]" class="form-control" step="0.01" value="{{ $pp->producto->precio }}" required>
                                        <div class="error-msg text-danger" id="error-precio-venta-{{ $index }}"></div>
                                        @else
                                        <input type="hidden" name="pedido_productos[{{ $index }}][precio_venta]" value="0">
                                        -
                                        @endif
                                    </td>
                                    <td class="text-align-center">
                                        @if($pp->producto)
                                        <span id="diferencia-{{ $index }}"></span>
                                        @else
                                        -
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="text-right">
                        <a href="{{ route('pedidos.index') }}" class="btn btn-secondary">Cancelar</a>
                        <button type="button" class="btn btn-success" onclick="confirmSubmit()">Confirmar Carga</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">Confirmar Carga</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ¿Está seguro de que los datos son correctos y desea confirmar la carga?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" onclick="submitForm()">Confirmar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmSubmit() {
    let hasError = false;
    $('.error-msg').text(''); // clear previous errors
    $('input[name*="[precio_unitario]"]').each(function() {
        let val = parseFloat($(this).val());
        if (isNaN(val) || val <= 0) {
            let name = $(this).attr('name');
            let match = name.match(/pedido_productos\[(\d+)\]\[precio_unitario\]/);
            let index = match[1];
            $('#error-precio-' + index).text('El precio unitario no puede ser cero o negativo.');
            console.log('Error en precio unitario para índice: ' + index);
            hasError = true;
        }
    });
    $('input[type="number"][name*="[precio_venta]"]').each(function() {
        let val = parseFloat($(this).val());
        if (isNaN(val) || val <= 0) {
            let name = $(this).attr('name');
            let match = name.match(/pedido_productos\[(\d+)\]\[precio_venta\]/);
            let index = match[1];
            $('#error-precio-venta-' + index).text('El precio de venta no puede ser cero o negativo.');
            hasError = true;
        }
    });
    if (hasError) return;
    // show modal
    $('#confirmModal').modal('show');
}

function submitForm() {
    $('#confirmModal').modal('hide');
    $('form').submit();
}

$(document).ready(function() {
    $('input[name*="[precio_unitario]"], input[name*="[precio_venta]"]').on('input', function() {
        let name = $(this).attr('name');
        let match = name.match(/pedido_productos\[(\d+)\]\[.*\]/);
        let index = match[1];
        let costo = parseFloat($('input[name="pedido_productos[' + index + '][precio_unitario]"]').val()) || 0;
        let precio = parseFloat($('input[name="pedido_productos[' + index + '][precio_venta]"]').val()) || 0;
        let diferencia = precio - costo;
        $('#diferencia-' + index).text(diferencia.toFixed(2));
    });
    // Trigger initial calculation
    $('input[name*="[precio_unitario]"], input[name*="[precio_venta]"]').trigger('input');
});
</script>
@endsection