@extends('adminlte::page')

@section('title', 'Del Mercado')

@section('content_header')
    <h1>Productos</h1>
    <!--'category_id','description','discount_price','measurement_unit','nacionalty','name','photo','price'-->
@stop

@section('content')
    <a href="products/new" class="btn btn-primary">Nuevo producto</a>
    <hr>
    @if (count($products) > 0)
        <div class="panel panel-default">
            <div class="panel-heading">
            </div>
            <div class="panel-body">
                <table class="table table-striped task-table">
                    <thead>
                        <th></th>
                        <th>Nombre</th>
                        <th>Descripción</th>
                        <th>Precio</th>
                        <th>Precio con descuento</th>
                        <th>Nacionalidad</th>
                        <th>Unidad de medida</th>
                        <th>Categoría</th>
                        <th>&nbsp;</th>
                    </thead>
                    <tbody>
                        @foreach ($products as $p)
                            <tr>
                                <td class="table-text" style="width: 10%">
                                    <a href="/{{$p->photo}}" target="_blank"><img src="/{{$p->photo}}" style="width: 50%;object-fit: contain;"></a>
                                </td>
                                <td class="table-text">
                                    <div>{{ $p->name }}</div>
                                </td>
                                <td class="table-text">
                                    <div>{{ $p->description }}</div>
                                </td>
                                <td class="table-text">
                                    <div>${{ $p->price }}</div>
                                </td>
                                <td class="table-text">
                                    <div>${{ $p->discount_price }}</div>
                                </td>
                                <td class="table-text">
                                    <div>{{ $p->nacionalty }}</div>
                                </td>
                                <td class="table-text">
                                    <div>{{ $p->measurement_unit }}</div>
                                </td>
                                <td class="table-text">
                                    <div>{{ $p->category['name'] }}</div>
                                </td>
                                <td>
                                    <a href="products/edit/{{$p->id}}" class="btn btn-secondary"><i class="fa fa-pen"></i>&nbsp;Editar {{ $p->name }}</a>
                                    <a href="products" class="btn btn-tertiary"><i class="fa fa-trash"></i>&nbsp;Eliminar {{ $p->name }}</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script><script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.table').DataTable();
        });
    </script>
@stop