@extends('modules.head') @section('contenido')
    <link rel="stylesheet" href="{{ asset('js/timepicker/bootstrap-timepicker.min.css') }}"/>
    <h3>
        <a class="ruta" class="" href="{{url('/products')}}">{{ Lang::get('messages.screen_products_tag1')}} </a>
        <span class="separador-ruta">|</span>
        <a class="ruta" class="">{{ Lang::get('messages.screen_products_tag36')}} </a>
    </h3>

    <div class="box">

        <div class="box-header with-border">
            <!-- /.box-tools -->

        </div>
        <hr>
        <!-- /.box-header -->
        <div class="box-body box-container">
            <form role="form" id="editProduct" data-toggle="validator">

                <div class="row">

                    <div class="col-sm-2">
                        <a href="{{ env('AWS_URL') }}products/{{$product->plu}}" data-fancybox style="position: relative">
                        <img class="img-responsive thumbnail"
                             src="{{ env('AWS_URL') }}products/{{$product->plu}}"
                             alt="{{$product->plu}}">
                            @if($product->active)
                                <span class="label label-success label-fixed">Active</span>
                            @else
                                <span class="label label-warning label-fixed">Inactive</span>
                            @endif
                        </a>
                    </div>

                    <div class="col-sm-6">

                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" value="{{$product->name}}" name="name" disabled>
                            </div>

                        <div class="row form-group">
                            <div class="col-sm-6">
                                <label for="plu">PLU</label>
                                <input type="text" class="form-control" value="{{$product->plu}}" id="plu" disabled>
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-sm-6">
                                <label for="price">Price</label>
                                <input type="text" class="form-control" value="{{$product->price}}" id="price"
                                       name="price" disabled>
                            </div>
                        </div>

                    </div>

                </div>

                <br/>

                <ul class="nav nav-tabs">
                    <li class="active"><a href="#dimensions" data-toggle="tab">Dimensions</a></li>
                    <li class=""><a href="#web-attr" data-toggle="tab">Attributes</a></li>
                    <li class=""><a href="#web" data-toggle="tab">Web</a></li>
                    <li class=""><a href="#images" data-toggle="tab">Images</a></li>
                    <li class=""><a href="#categories" data-toggle="tab">Categories</a></li>
                    <li class=""><a href="#inventory" data-toggle="tab">Inventory</a></li>
                    <li class=""><a href="#abc_xyz" data-toggle="tab">Abc Xyz</a></li>
                </ul>
                <div class="tab-content">
                    <br/>

                    <div class="tab-pane fade active in" id="dimensions">

                            <div class="col-sm-4">

                                <div class="form-group">
                                    <label for="length">Length</label>
                                    <input type="text" class="form-control" value="{{$product->length}}" name="length"
                                           disabled>
                                </div>

                                <div class="form-group ">
                                    <label for="width">Width</label>
                                    <input type="text" class="form-control" value="{{$product->width}}" name="width"
                                           disabled>
                                </div>

                                <div class="form-group">
                                    <label for="height ">Height </label>
                                    <input type="text" class="form-control" value="{{$product->height }}" name="height "
                                           disabled>
                                </div>

                            </div>
                            <div class="col-sm-4">

                                <div class="form-group ">
                                    <label for="weight">Weight</label>
                                    <input type="text" class="form-control" value="{{$product->weight}}" name="weight"
                                           disabled>
                                </div>

                                <div class="form-group">
                                    <label for="volume">Volume</label>
                                    <input type="text" class="form-control" value="{{$product->volume}}" name="volume"
                                           disabled>
                                </div>
                            </div>

                    </div>

                    <div class="tab-pane fade" id="web-attr">
                        <div class="col-sm-8">
                            <table class="table table-hover table-bordered" id="web-attributes">
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="images">
                        <div class="col-sm-8" id="images-gallery"></div>
                    </div>

                    <div class="tab-pane fade" id="categories">
                        <div class="col-sm-4">

                            @foreach($product->categories as $category)
                                <li class="list-group-item">{!! $category->name !!}</li>
                            @endforeach

                        </div>
                    </div>

                    <div class="tab-pane fade" id="web">
                        <div class="col-sm-8" id="web-data">
                            <table class="table table-hover table-bordered" id="web-table">
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="inventory">
                        <div class="col-sm-8">
                            <table class="table table-hover table-bordered" id="inventory-table">
                                <tbody>
                                    <tr>
                                        <th>Branch</th>
                                        <th>On Hand</th>
                                        <th>Committed</th>
                                        <th>Last Bin Location</th>
                                    </tr>
                                    @foreach($branches as $branch)
                                        <tr>
                                            <td>{{ $branch->name }}</td>
                                            <td>{{ $product->getAvailableForSale($branch->id) }}</td>
                                            <td>{{ $product->getCommittedUnits($branch->id) }}</td>
                                            <td>{{ $product->getLastBinLocation($branch->bo_default_warehouse)?->bin_code }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="abc_xyz">
                        <div class="col-sm-8">
                            <table class="table table-hover table-bordered" id="inventory-table">
                                <tbody>
                                <tr>
                                    <th>Branch</th>
                                    <th>Class</th>
                                    <th>Volatility</th>
                                    <th>Previous Class</th>
                                    <th>Previous Volatility</th>
                                    <th>Last updated</th>
                                </tr>
                                @foreach($product->abcXyzs as $abcXyz)
                                    <tr>
                                        <td>{{ $abcXyz->branch->name }}</td>
                                        <td>{{ $abcXyz->current_class }}</td>
                                        <td>{{ $abcXyz->volatility }}</td>
                                        <td>{{ $abcXyz->previous_class }}</td>
                                        <td>{{ $abcXyz->previous_volatility }}</td>
                                        <td>{{ $abcXyz->updated_at }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

                {{ csrf_field() }}
            </form>
        </div>
        <!-- /.box-body -->
    </div>

    <script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
    <script src="{{ asset('js/products.js') }}"></script>
    <script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
    <!-- plugin para la hora -->
    <link rel="stylesheet" href="{{ asset('js/jquery.fancybox/jquery.fancybox.min.css') }}"></link>
    <script src="{{ asset('js/jquery.fancybox/jquery.fancybox.min.js') }}"></script>
    <style>
        .label-fixed{
            position: absolute;
            top: 0;
            left: 0;
        }
        .form-control[disabled] {
            border-color: #b1b5bd;
        }
        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
        .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{
            border-color: #adbac9
        }

    </style>
    <script>

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            let target = $(e.target).attr("href") // activated tab
        });

        $(function (){

            const plu = $('#plu').val();
            $.ajax({
                url: `/products/findWebProduct/${plu}`,
                type: "GET",
                contentType: "application/json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                    "Content-Type": "application/json",
                },
                success: function (response) {
                    fillProductData(response);
                },
                error: function (error) {
                    console.error(error);
                },
            });

            function fillProductData(data){
                if(data.attributes){
                    fillAttributes(data.attributes);
                }
                if(data.images){
                    fillImages(data.images);
                }
                if(data){
                    fillWebData(data);
                }
            }

            function fillAttributes(attributes){
                let attributeTable = $('#web-attributes > tbody');
                attributes.forEach((attribute) => {
                    attributeTable.append(`<tr>
                            <th>${attribute.name}</th>
                            <td>${attribute.options[0]}</td>
                        </tr>`);
                });
            }

            function fillImages(images){
                images.forEach((image) => {
                    $('#images-gallery').append(`
                      <div class="col-md-3">
                        <div class="thumbnail">
                            <a href="${image.src}" data-fancybox="images"><img src="${image.src}" alt="Lights" style="width:100%"></a>
                        </div>
                      </div>`);
                });
            }

            function fillWebData(data){
                $('#web-table > tbody').append(`
                    <tr><th>Permalink</th><td><a href="${data.permalink}" target="_blank">${data.permalink}</a></td></tr>
                    <tr><th>Status</th><td>${data.status}</td></tr>
                    <tr><th>Description</th><td>${data.description}</td></tr>
                `);

            }

        })

    </script>

@endsection