@extends('layouts.app')
@section('content')
    <div class="row w-100 h-100 m-0">
        @include('dashboard.stock.navigation')
        <div class="col-11 p-3 m-0">
            <div class="container-fluid">
                <div class="card shadow border-dark mb-3">
                    <div class="card-body">
                        <h5 class="card-title fw-bold d-flex justify-content-between">
                            <span> Uso de producto </span>
                            <select class="form-select w-25" onchange="updateProductChart(this.value)">
                                @foreach ($products as $index => $product)
                                    <option value="{{ $product->id }}" {{ $index == 0 ? 'selected' : '' }}>
                                        {{ $product->name }} </option>
                                @endforeach
                            </select>
                        </h5>
                        <div id="chart">
                            {!! $charts['product_use']->container() !!}
                        </div>
                    </div>
                </div>
                
                <div class="card shadow border-dark">
                    <div class="card-body">
                        <h5 class="card-title fw-bold d-flex justify-content-between">
                            <span> Movimientos del almacen </span>
                            <select class="form-select w-25" onchange="updateWarehouseChart(this.value)">
                                @foreach ($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}" {{ $warehouse->id == 1 ? 'selected' : '' }}>
                                        {{ $warehouse->name }} </option>
                                @endforeach
                            </select>
                        </h5>
                        <div id="chart">
                            {!! $charts['stock_movements']->container() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://unpkg.com/vue"></script>
    <script>
        var chart = new Vue({
            el: '#chart',
        });

        var product_route_api_url = '';
        var warehouse_route_api_url = ''

        function updateProductChart(value) {
            if (!product_route_api_url) {
                product_route_api_url = {{ $charts['product_use']->id }}_api_url;
            }

            {{ $charts['product_use']->id }}_refresh(product_route_api_url + '/update' + "?productId=" + value);
        }

        function updateWarehouseChart(value) {
            if (!warehouse_route_api_url) {
                warehouse_route_api_url = {{ $charts['stock_movements']->id }}_api_url;
            }

            {{ $charts['stock_movements']->id }}_refresh(warehouse_route_api_url + '/update' + "?warehouseId=" + value);
        }
    </script>
    <script src=https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js charset=utf-8></script>
    {!! $charts['product_use']->script() !!}
    {!! $charts['stock_movements']->script() !!}
@endsection