@extends('layouts.app')

@section('content')
    {{-- <div class="p-2 flex-fill bd-highlight">
        <!-- Section: Main chart -->
        <section class="mb-4 pt-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex bd-highlight">
                        <div class="p-2 w-100 bd-highlight">
                            <div class="d-flex bd-highlight">
                                <div class="p-2 flex-fill bd-highlight">
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Lote:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="lote"></p>
                                        </div>
                                    </div>
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Fecha:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="fecha"></p>
                                        </div>
                                    </div>
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Puesto:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="puesto"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2 flex-fill bd-highlight">
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Producto:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="producto"></p>
                                        </div>
                                    </div>
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Formula:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="formula"></p>
                                        </div>
                                    </div>

                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Aspecto:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="aspecto"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-2 flex-fill bd-highlight">
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Kilos:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id="kilos"></p>
                                        </div>
                                    </div>
                                    <div class="d-flex bd-highlight">
                                        <div class="d-flex bd-highlight">
                                            <p class="parametros fs-4">Partidas:</p>
                                        </div>
                                        <div class="d-flex bd-highlight mx-2">
                                            <p class="fs-4" id='partidas'></p>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-primary" style="width:220px;" id="firmar">
                                        Firmar
                                    </button>
                                </div>
                                <div class="p-2 d-flex justify-content-between">
                                    <div>
                                        <p class="parametros fs-5">Aspecto Final</p>
                                        <img src="https://nasika.es/wp-content/uploads/2023/09/predispersados.png"
                                            width="195px" height="129px">
                                    </div>
                                    <div class="mx-4">
                                        <img src="/img/LogoNasika.svg" width="200px" height="200px">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Section: Main chart -->

    <!--Section: Sales Performance KPIs-->
    <section class="mb-4">
        <div class="card">
            <div class="card-header text-center py-3">
                <h5 class="mb-0 text-center">
                    <strong>PARÁMETROS EXTRUSORA</strong>
                </h5>
            </div>
            <div class="card-body">
                <table class="table table-hover text-nowrap text-center">
                    <thead id="parameter_type1_titles"></thead>
                    <tbody id="parameter_type1"></tbody>
                </table>
            </div>
        </div>
        </div>
    </section>
    <!--Section: Sales Performance KPIs-->
    <section class="mb-4">
        <div class="card">
            <div class="card-header text-center py-3">
                <h5 class="mb-0 text-center">
                    <strong>PÁRAMETROS DE CORTADO Y ENVASADO</strong>
                </h5>
            </div>
            <div class="card-body">
                <table class="table table-hover text-nowrap text-center">
                    <thead id='parameter_type2_titles'></thead>
                    <tbody id='parameter_type2'></tbody>
                </table>
            </div>
        </div>
    </section>
    <div id="firm"></div>
    <!-- Modal -->
    <div class="modal fade" id="firmar_modal" tabindex="-1" aria-labelledby="firmarLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="firmarLabel">Firmar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style='background-color: #3a3737;'>
                    <select class="form-select form-select-lg mb-3 col-4" aria-label=".form-select-lg example" id="operarios">
                    </select>
                    <div class="wrapper">
                        <canvas id="signature-pad" class="signature-pad" width=1109 height=780></canvas>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" id="clear">Limpiar</button>
                    <button type="button" class="btn btn-primary" id="save">Enviar</button>
                </div>
            </div>
        </div>
    </div> --}}
@endsection