@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">
                    <input class="form-control" type="text" name="sku"placeholder="Pesquise o SKU"/>
                </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"></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"></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">@if(!empty($sku))Busca por "{{$sku}}" : @endif  produtos cadastrados</h5>

                <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'] == '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">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            {{--<li class="page-item"><a class="page-link" href="{{ url('/home/orders/json',$page - 1) }}">Previous</a></li>--}}
                            @foreach($pagination as $pages)
                                @if($pages == $page)
                                    <li class="page-item active"><a class="page-link" href="{{ url('/home/products/json/'.$clients_id.'?page='.$pages) }}">{{$pages}}</a></li>
                                @else
                                    <li class="page-item"><a class="page-link" href="{{ url('/home/products/json/'.$clients_id.'?page='.$pages) }}">{{$pages}}</a></li>
                                @endif
                            @endforeach
                            {{--<li class="page-item"><a class="page-link" href="{{ url('/home/orders/json',$page + 1) }}">Next</a></li>--}}
                        </ul>
                    </nav>
                    {{--{{$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);
            })
        }

    </script>


@endsection