@extends('layouts.system')
@section('content')
    <!-- ============================================================== -->
    <!-- pageheader  -->
    <!-- ============================================================== -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-header">
                <h3 class="mb-2">Products View</h3>
                {{--<p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.</p>--}}
                <div class="page-breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Finance Dashboard Template</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- end pageheader  -->
    <!-- ============================================================== -->
    <div class="row">

        <div class="offset-xl-10 col-xl-2 col-lg-2 col-md-6 col-sm-12 col-12">
            <form class="form-inline">

                <div class="form-group mx-sm-3 mb-2">

                </div>
                {{--<button type="submit" class="btn btn-primary mb-2"><i class="fa fa-search" aria-hidden="true"></i></button>--}}
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Produtos Cadastrados</h5>
                <div class="card-body">
                    <div class="metric-value d-inline-block">
                        <h1 class="mb-1">{{$products->total()}}</h1>
                    </div>

                </div>

            </div>
        </div>
        <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Produtos Ativos</h5>
                <div class="card-body">
                    <div class="metric-value d-inline-block">
                        <h1 class="mb-1">{{$countActive}}</h1>
                    </div>

                </div>

            </div>
        </div>
        <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">
                <h5 class="card-header">Produtos Inativos</h5>
                <div class="card-body">
                    <div class="metric-value d-inline-block">
                        <h1 class="mb-1">{{$countInactive}}</h1>
                    </div>

                </div>

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

    <div class="row">
        <div class="col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">

                <h5 class="card-header">{{$count}} produtos encontrados.</h5>
                <div class="row" class="card-header" style="padding: 1.25rem 0 0 1.25rem;">
                    <div class="col-md-3">
                        <input id="searchfield" class="form-control" type="text" name="sku"placeholder="Pesquise o SKU"/>
                    </div>
                    <div class="col-md-3">
                        <h5 id="aviso-order" class="alert alert-success">{{$count}} pedidos encontrados.</h5>
                    </div>
                </div>

                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th scope="col">SKU</th>
                            <th scope="col">Nome</th>
                            <th scope="col">Descrição</th>
                            <th scope="col">Status</th>
                            <th scope="col">preço</th>
                            <th scope="col">preço promocional</th>
                            <th scope="col">Estoque</th>
                            <th scope="col">Peso</th>
                            <th scope="col">Altura</th>
                            <th scope="col">Largura</th>
                            <th scope="col">Comprimento</th>
                            <th scope="col">Atividade</th>


                        </tr>
                        </thead>
                        <tbody>

                        @foreach($products as $product)
                            <tr>
                                <td>{{$product->sku}}</td>
                                <td>{{$product->name}}</td>
                                <td><button type="button" class="btn btn-xs btn-primary" onclick="seeDesc({{$product->id}})"><i class="fa fa-search" aria-hidden="true"></i></button></td>
                                <td>@if($product->status == '1')
                                        <span class="text-success ml-1">Ativo</span>
                                    @elseif($product->status == '0')
                                        <span class="text-warning ml-1">Inativo</span>
                                    @endif
                                </td>
                                <td>R$ {{$product->price}}</td>
                                <td>R$ {{$product->special_price}}</td>
                                <td>{{$product->stock}}</td>
                                <td>{{$product->weight}} kilos</td>
                                <td>{{$product->volume_altura}}</td>
                                <td>{{$product->volume_largura}}</td>
                                <td>{{$product->volume_comprimento}}</td>
                                <td>@if($product->activity == '1')
                                        <span class="text-success ml-1">Sem atividades pendentes</span>
                                    @elseif($product->activity == '11')
                                        <span class="text-success ml-1">Sem atividades pendentes</span>
                                    @elseif($product->activity == '2')
                                        <span class="text-danger ml-1">Criar produto na Loja Virtual</span>
                                    @elseif($product->activity == '3')
                                        <span class="text-danger ml-1">Atualizar produto</span>
                                    @elseif($product->activity == '4')
                                        <span class="text-danger ml-1"> Atualizar preço e estoque</span>
                                    @endif
                                </td>

                            </tr>
                        @endforeach


                        </tbody>
                    </table>

                </div>

                <div class="card-footer text-center bg-white">
                    {{$products->links()}}
                    <a href="{{ url('/home/products/') }}" class="btn btn-light">Voltar</a>
                </div>
            </div>
        </div>

    </div>
    <!-- Modal -->
    <div class="modal fade" id="description" tabindex="-1" role="dialog" aria-labelledby="description" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="TituloModalCentralizado">Descrição</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="description-body">

                </div>
                <div class="modal-footer">
                    {{--<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>--}}
                    {{--<button type="button" class="btn btn-primary">Salvar mudanças</button>--}}
                </div>
            </div>
        </div>
    </div>

@endsection


@section('javascript')
    <script type="text/javascript">
        function seeDesc(id){
            $('#description').modal('show');
            var url = '/api/description/' + id;
            $.getJSON( url, function(data) {
                console.log(data);
                desc = data[0].description;
                $('#description-body').html(desc);
            })
        }



        $('#searchfield').keyup(function(){
            // Search Text
            var search = $(this).val();

            // Hide all table tbody rows
            $('table tbody tr').hide();

            // Count total search result
            //var len = $('table tbody tr:not(.notfound) td:nth-child(4):contains("'+search+'")').length;

            //if(len > 0){
            // Searching text in columns and show match row
            var teste = $('td:nth-child(1):contains("'+search+'")').each(function(){
                $(this).closest('tr').show();
            });

            if(teste.length >= 1){
                console.log(teste);
                //  console.log('entrou no if');
                var aviso = teste.length + ' produtos encontrados.';
                $('#aviso-order').html(aviso);
                $("#aviso-order").removeClass("alert alert-danger");
                $("#aviso-order").addClass("alert alert-success");
            }else{
                // console.log('entrou no else');
                var aviso = 'Não existem produtos com esse SKU.';
                $('#aviso-order').html(aviso);
                $("#aviso-order").removeClass("alert alert-success");
                $("#aviso-order").addClass("alert alert-danger");
            }
            // }else{
            //$('.notfound').show();
            //}

        });

    </script>


@endsection