@extends('layouts.app', ['activePage' => 'consultaProductos', 'titlePage' => __('consultaProductos')])

@section('content')
    <style>
        #resultados {
            margin-top: 20px;
        }
    </style>
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">

                        <div class="card-body">
                            <div class="row">
                                <form action="#" id="frm_envia_producto" method="post">

                                    @csrf
                                    <div class="col-12">
                                        <h4 class="card-title">Consulta Productos</h4>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="input-group input-group-static ">
                                                    <label>IP </label>
                                                    <input type="text" class="form-control" id="ip" name="ip" required>
                                                    <small class="form-text text-muted">

                                                    </small>
                                                </div>
                                            </div>
                                            <div class="col-md-6">

                                                <div class="input-group input-group-static ">
                                                    <label>Token </label>
                                                    <input type="text" class="form-control" id="token" name="token"
                                                           required>
                                                    <small class="form-text text-muted">

                                                    </small>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="input-group input-group-static mb-4">
                                            <label>Codigo Producto </label>
                                            <input type="text" class="form-control" id="codigo" name="codigo" required>
                                            <input type="hidden" value="" id="inp_cproductos_codigo_producto">
                                            <small class="form-text text-muted">

                                            </small>
                                        </div>
                                        <button type="submit" class="btn btn-primary" id="btn_busca">Buscar</button>

                                        <div id="json_response"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
        <script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
        <script type="text/javascript"
                src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.2/jquery.jsonview.js"></script>
        <script>
            $(document).ready(function () {
                $('.dropify').dropify();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                // $("#ip").val("186.96.147.96");
                $("#ip").val("intesystem.dyndns.org");
                $("#token").val("eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjb21wYW55IjoiaW50ZXN5c3RlbSIsIlVzZXIiOiJpbnRlbGktayIsInByb2dyYW0iOiJiMmMiLCJqdGkiOiIxYjdiNTFiNi1iYmFjLTQ4MWMtYWMzMy05OWM0YTYwYzA1ZDUiLCJpYXQiOjE1Mjc2MTQ3NjQsImV4cCI6MTUyNzYxODM2NH0.UpySoG3ACr27_x6D1MjOxypDQl7uv6rlgzpZ6Jb71Mo/");

            });

            function obtenerToken() {
                return $("#token").val();
            }

            $("#frm_envia_producto").submit(function (event) {
                // debugger;
                event.preventDefault(); // Prevent the form from submitting via the browser
                // var jsonObjects = {Producto: $('#inp_cproductos_codigo_producto').val()};
                // var jsonObjects = {Producto: $('#codigo').val()};
                var jsonObjects = $('#codigo').val();

                $.ajax({
                    type: "GET",
                    url: "http://" + $("#ip").val() + "/programas/webservices/",
                    data: {
                        method: 'ConsultaProductosExistencias',
                        dJson: jsonObjects,
                        "token": obtenerToken()
                    },
                    cache: false,
                    dataType: "json",
                    beforeSend: postCargando,
                    success: postCorrecto,
                    complete: postCompleto,
                    error: postError
                });

                function postCargando() {

                }

                function postCorrecto(data) {
                    console.log(data);
                    $('#json_response').JSONView(data, {collapsed: false});
                }

                function postCompleto() {

                }

                function postError() {
                }
            });


        </script>
@endsection