@extends('layouts.admin')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col ">


            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Articulo</a>
                </li>

                @can('admin')

                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Actualizar</a>
                </li>
                @endcan

                <li class="nav-item">
                    <a class="nav-link " target="_blank" href="{{route('articulo.exportdata', ['id' => $articulo->id])}}">Imprimir Codigo</a>
                </li>

            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active " id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">


                    <div class="row">


                        <div class="col-md-5">

                            <div class="card">
                                <div class="text-center">

                                    <h2 class="text-uppercase text-center">{{$articulo->nombre}}</h2> <br>

                                    <img class=" img-fluid" style="width: 300px;" src="{{$articulo->img}}" alt="{{$articulo->nombre}}">
                                    <img class=" img-fluid" style="width: 300px;" src="{{$articulo->img2}}" alt="{{$articulo->nombre}}">
                                </div>

                                <p class="text-uppercase">
                                    Description:                                 </p>

                                <p class="card-text text-capitalize">Descripcion Interna:  </p>

                                <div class="">
                                    <p class="card-text text-capitalize">Maximo Stock: {{$articulo->stock_maximo}}</p>
                                    <p class="card-text text-capitalize">Codigo De Barras: {{$articulo->cod_barras}}</p>
                                    <p class="card-text">Precio Venta: Q. {{number_format($articulo->p_venta, 2)}}</p>
                                    <p class="card-text">Precio Venta Visa: Q. {{number_format($articulo->p_venta2, 2)}}</p>
                                    @can('admin')
                                    <p class="card-text">Precio Costo: Q. {{number_format($articulo->p_costo, 2)}}</p>
                                    @endcan
                                    <p class="card-text">Utilidad del Articulo: Q. {{$articulo->p_venta - $articulo->p_costo}}</p>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="card-text">Fabricante:{{$articulo->fabricante}}</p>
                                        <p class="card-text">Medida:{{$articulo->medida}}</p>
                                        <p class="card-text">Estante:{{$articulo->unidad}}</p>
                                        <p class="card-text">Sub-Estante:{{$articulo->ubicacion}}</p>

                                    </div>

                                    <div class="col-md-6">
                                        <p class="card-text">Fecha de Registro: {{$articulo->created_at}}</p>
                                        <p>Minimo de Stock: {{$articulo->min_stock}}</p>
                                        <p class="card-text">Existencia:
                                            @if($articulo->stock > $articulo->min_stock)
                                            <span class="badge bg-success" style="font-size: 15px;">{{$articulo->stock}}</span>
                                            @else
                                            <span class="badge bg-warning" style="font-size: 15px;">{{$articulo->stock}} (Poca existencia)</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="card-title">MATERIAL DE SALIDA</h4>

                                    <ul class="list-group">
                                        @foreach ($art as $art)
                                        <li class="list-group-item active">
                                            MATERIAL: {{$art->material->nombre}} <br>
                                            CANTIDAD: {{$art->cantidad}} <br>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card">

                                <div class="card-body">
                                    <h3>DATOS DE PROVEEDOR</h3>
                                    <p>Nombre de Vendedor: {{$articulo->provName}}</p>
                                    <p>Empresa: {{$articulo->empresa}}</p>
                                    <p>Direccion de Empresa: {{$articulo->direccion}}</p>
                                    <p>Telefono Primario: {{$articulo->telefono1}}</p>
                                    <p>Telefono Secundario: {{$articulo->telefono2}}</p>
                                    <p>Articulos Que Provee</p>
                                    <pre>{{$articulo->articulos}}</pre>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>

                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                    <h4>Actualizar</h4>


                    <form action="{{route('articulo.update', ['id' => $articulo->id])}}" method="POST">
                        @csrf
                        @method('PUT')
                        @include('admin.articulos.forms.store')

                        <button type="submit" class="btn btn-warning btn-block"> <i class="fas fa-save    "></i> Actualizar</button>
                    </form>


                </div>

            </div>

        </div>

    </div>
</div>

@endsection


@section('scripts')

<script src="{{ asset('plugins/ckeditor/ckeditor.js')  }}"></script>
<script>
    CKEDITOR.replace('editor1', {
        uiColor: '#9AB8F3',
    });
    CKEDITOR.replace('editor2', {
        uiColor: '#ffdcdc',
    });
</script>

@endsection