@extends('app')

@section('content')
   <!-- Content -->
   <div class="content">
            <!-- Animated -->
            <div class="animated fadeIn">
                <!-- Widgets  -->
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-five">
                                    <div class="stat-icon dib flat-color-1">
                                        <i class="pe-7s-cash"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="text-left dib">
                                            <div class="stat-text">R$<span class="count">8832</span></div>
                                            <div class="stat-heading">Em caixa</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">


							
                                <div class="stat-widget-five">
                                    <div class="stat-icon dib flat-color-2">
                                        <i class="ti-info-alt"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="text-left dib">
                                            <div class="stat-text"><span class="count">132</span></div>
                                            <div class="stat-heading">Pizzas</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-five">
                                    <div class="stat-icon dib flat-color-3">
                                        <i class="ti-target"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="text-left dib">
                                            <div class="stat-text"><span class="count">82</span></div>
                                            <div class="stat-heading">Entregas</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="stat-widget-five">
                                    <div class="stat-icon dib flat-color-4">
                                        <i class="pe-7s-users"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="text-left dib">
                                            <div class="stat-text"><span class="count">2986</span></div>
                                            <div class="stat-heading">Clientes</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
         
                <div class="clearfix"></div>
                <!-- Orders -->
                <div class="orders">
                    <div class="row">
                        <div class="col-xl-8">
                            <div class="card">

                               
                                <div class="card-body" style="padding: 10px 20px">
                                     <a href="{{ route('admin.products.create') }}" class="btn btn-success">Novo Produto</a>
	<br><br>
								<h3>Produtos</h3><br>
	

	<table class="table table-bordered">
		<thead>
			<tr>
			<th>ID</th>
			<th>NOME</th>
			<th>CATEGORIA</th>
			<th>PREÇO</th>
			<th>AÇÃO</th>
			</tr>
		</thead>
		<tbody>
			@foreach($products as $prod )
			<tr>				<td>{{ $prod->id }}</td>
				<td>{{ $prod->name }}</td>
				<td>{{ $prod->category->name }}</td>
				<td>{{ $prod->price }}</td>
				<td>
					<a href="{{route('admin.products.edit',[ 'id' => $prod->id ])}}" class="btn btn-info btn-sm">Editar</a>
					<a href="{{route('admin.products.destroy',[ 'id' => $prod->id ])}}" class="btn btn-danger btn-sm">Apagar</a>
				</td>
			</tr>
			@endforeach
		</tbody>	
	</table>
	{!! $products->render() !!}
                      
                                </div>
                            </div> <!-- /.card -->
                        </div>  <!-- /.col-lg-8 -->

                        <div class="col-xl-4">
                            <div class="row">
                                <div class="col-lg-6 col-xl-12">
                                    <div class="card br-0">
                                        <div class="card-body">
                                            <div class="chart-container ov-h">
                                                <div id="flotPie1" class="float-chart"></div>
                                            </div>
                                        </div>
                                    </div><!-- /.card -->
                                </div>

                                
                            </div>
                        </div> <!-- /.col-md-4 -->
                    </div>
                </div>
                <!-- /.orders -->
   
               
            <!-- /#add-category -->
            </div>
            <!-- .animated -->
        </div>
        <!-- /.content -->


@endsection