@extends('metronic.base')
@section('extracss')
@endsection
@section('extrajs')
@endsection
@section('titulo')
    Orden de Producción
@endsection

@section('content')
    @include('sessions')
    <style>
        .text-right {
            text-align: right;
        }
    </style>
    <!-- Blade Template -->

    <form action="{{ route('produccion.ingreso-produccion.store') }}" method="post">
        @csrf
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h3 class="card-title">Ingreso de producción</h3>
            </div>
            <div class="card-body">
                <div class="row mb-6">
                    <div class="form-group col-sm-6 mb-5">
                        <label class="required form-label" for="linea_produccion">Línea de producción:</label>
                        <select class="form-select form-select-solid" data-control="select2" name="linea_produccion"
                            id="linea_produccion">
                            <option selected disabled>Seleccione...</option>
                            @foreach ($lineasProduccion as $linea)
                                <option value="{{ $linea->id }}">{{ $linea->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-sm-6 mb-5">
                        <label class="required form-label" for="orden_produccion">Orden de producción:</label>
                        <select class="form-select form-select-solid" data-control="select2" name="orden_produccion"
                            id="orden_produccion">
                            <!-- Options will be populated using AJAX -->
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm" id="detallesOrdenCard" style="display: none;">
            <div class="card-header">
                <h3 class="card-title">Detalles de la orden</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive mb-5">
                    <table class="table table-bordered">
                        <thead>
                            <tr class="fw-bold fs-6 text-gray-800">
                                <th>Código</th>
                                <th>Producto</th>
                                <th>#Prioridad</th>
                                <th>Unidad de medida</th>
                                <th>Cantidad OP</th>
                                <th>Cantidad Ingresada</th>
                                <th>Cantidad Real Fabricada</th>
                            </tr>
                        </thead>
                        <tbody id="detalles_orden">
                            <!-- Detalles de la orden se cargarán mediante AJAX -->
                        </tbody>
                    </table>
                </div>
                <div class="row mb-6">
                    <div class="form-group col-sm-6 mb-5">
                        <label class="required form-label" for="fecha_terminacion">Fecha de terminación de OP:</label>
                        <input type="date" class="form-control form-control-solid" name="fecha_terminacion" id="fecha_terminacion" required value="{{ $today }}">
                    </div>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="checkbox_forzar_cierre"
                        id="checkbox_forzar_cierre" value="true" />
                    <label class="form-label" for="forzar_cierre">Forzar cierre</label>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-primary"><i class="ki-outline ki-send fs-2"></i> Enviar</button>
                </div>
            </div>
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#linea_produccion').change(function() {
                var lineaProduccionId = $(this).val();

                // Obtener órdenes de producción mediante AJAX
                $.ajax({
                    url: '/produccion/ingreso-produccion/getOrdenesProduccion',
                    method: 'get',
                    data: {
                        linea_produccion_id: lineaProduccionId
                    },
                    success: function(data) {
                        var ordenProduccionSelect = $('#orden_produccion');
                        ordenProduccionSelect.prop('disabled', false);
                        ordenProduccionSelect.empty();

                        if (data.length > 0) {
                            ordenProduccionSelect.append(
                                '<option selected disabled>Seleccione...</option>');
                            $.each(data, function(key, value) {
                                ordenProduccionSelect.append('<option value="' + value
                                    .id + '">' + value.order_number + '</option>');
                            });
                        } else {
                            ordenProduccionSelect.append(
                                '<option value="" disabled selected>No hay órdenes de producción disponibles</option>'
                                );
                        }
                    }
                });
            });

            $('#orden_produccion').change(function() {
                var ordenProduccionId = $(this).val();

                if (ordenProduccionId) {
                    // Mostrar la tarjeta de detalles de la orden cuando se selecciona una orden
                    $('#detallesOrdenCard').show();

                    // Obtener detalles de la orden mediante AJAX
                    $.ajax({
                        url: '/produccion/ingreso-produccion/getDetallesOrden',
                        method: 'get',
                        data: {
                            orden_produccion_id: ordenProduccionId
                        },
                        success: function(data) {
                            var detallesOrdenTable = $('#detalles_orden');
                            detallesOrdenTable.empty();

                            if (data.length > 0) {
                                $.each(data, function(key, value) {
                                    var cantidadIngresoProd = value.cantidad_ingreso_prod || 0;
                                    var cantidadReal = value.cantidad - cantidadIngresoProd;
                                    detallesOrdenTable.append(
                                        '<tr>' +
                                        '<td>' + value.productos.codigo + '</td>' +
                                        '<td>' + value.productos.producto +'</td>' +
                                        '<td>' + value.priority_number + '</td>' +
                                        '<td>' + value.unidades.unidad + '</td>' +
                                        '<td class="text-right">' + value.cantidad + '</td>' +
                                        '<td class="text-right">' + value.cantidad_ingreso_prod + '</td>' +
                                        '<td><input type="text" name="cantidad_real[' +
                                        value.id + ']" value="' +
                                        cantidadReal + '" required></td>' +
                                        '</tr>'
                                    );
                                });
                            } else {
                                detallesOrdenTable.append(
                                    '<tr><td colspan="5">No hay detalles disponibles</td></tr>'
                                    );
                            }
                        }
                    });
                } else {
                    // Ocultar la tarjeta de detalles de la orden cuando no se selecciona ninguna orden
                    $('#detallesOrdenCard').hide();
                }
            });
        });
    </script>
@endsection