@extends('layouts.master_app')
@section('title') Productos @endsection

@section('css')
@endsection

@section('content')
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <div class="subheader py-3 py-lg-8 subheader-transparent" id="kt_subheader">
        <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline flex-wrap mr-5">
                    <!--begin::Page Title-->
                    <h5 class="subheader-title text-dark font-weight-bold my-1 mr-3">Productos</h2>
                    <!--end::Page Title-->
                    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-5 bg-gray-200"></div>
                    <!--begin::Breadcrumb-->
                    <div class="d-flex align-items-center" id="kt_subheader_search">
                        <span class="text-dark-50 font-weight-bold" id="kt_subheader_total">{{$products->count() }} Total</span>
                    </div>
                    <div class="d-flex align-items-center" id="kt_subheader_search">
                        <div class="d-flex align-items-center">
                        </div>
                    </div>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
            <!--begin::Toolbar-->
            
            <div class="d-flex align-items-center">
                @can('agregar_productos')
                <!--begin::Button-->
                <a href="/products/create" class="btn btn-light-primary font-weight-bold ml-2">Agregar producto</a>
                <!--end::Button-->
                @endcan
                &nbsp; &nbsp;
                @canany(['administrar_categorias','administrar_clasificaciones','administrar_modelos','administrar_pieles','administrar_suelas','administrar_puntos'])
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Administrar
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        @can('administrar_categorias')
                        <a class="dropdown-item" href="/categories_">Categorías</a>
                        @endcan
                        @can('administrar_clasificaciones')
                        <a class="dropdown-item" href="/classifications">Clasificaciones</a>
                        @endcan
                        @can('administrar_modelos')
                        <a class="dropdown-item" href="/models">Modelos</a>
                        @endcan
                        @can('administrar_pieles')
                        <a class="dropdown-item" href="/leathers">Pieles</a>
                        @endcan
                        @can('administrar_suelas')
                        <a class="dropdown-item" href="/soles">Suelas</a>
                        @endcan
                        @can('administrar_puntos')
                        <a class="dropdown-item" href="/points">Puntos</a>
                        @endcan
                    </div>
                </div>
                <!--begin::Dropdown-->
                @endcanany
                <div class="dropdown dropdown-inline ml-2" >
                    <a href="#" class="btn btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="svg-icon svg-icon-success svg-icon-2x">
                            <i class="icon-2x text-dark-50 flaticon-search-1"></i>
                        </span>
                    </a>
                    <div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
                        <!--begin::Naviigation-->
                        <ul class="navi">
                            <li class="navi-header font-weight-bold py-5">
                                <span class="font-size-lg">Categorías:</span>
                                <i class="flaticon2-information icon-md text-muted" ></i>
                            </li>
                            <li class="navi-separator mb-3 opacity-70"></li>
                            @foreach($categories as $category)
                            <li class="navi-item">
                                <a href="/products_/{{$category->id}}" class="navi-link">
                                    <span class="navi-icon">
                                        <i class="flaticon-list-2"></i>
                                    </span>
                                    <span class="navi-text">{{ $category->name }}</span>
                                </a>
                            </li>
                            @endforeach
                            <li class="navi-separator mt-3 opacity-70"></li>
                            <li class="navi-footer pt-5 pb-4">
                                <a class="btn btn-light-info font-weight-bolder btn-sm" href="/products_">Todas las categorías</a>
                            </li>
                        </ul>
                        <!--end::Naviigation-->
                    </div>
                </div>
                <!--end::Dropdown-->

                <a href="/product_points/all" class="btn btn-icon" >
                    <i class="flaticon-squares"></i>
                </a>
            </div>
        </div>
    </div>
    <!--end::Subheader-->
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">

            @include('partials.success')
            <div class="row">
                @foreach($products as $product)
                <!--begin::Col-->
                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b card-stretch">
                        <!--begin::Body-->
                        <div class="card-body pt-4">
                            <!--begin::Toolbar-->
                            <div class="d-flex justify-content-end">
                                @canany(['agregar_fotos_productos','eliminar_productos','editar_productos'])
                                <div class="dropdown dropdown-inline" >
                                    <a href="#" class="btn btn-clean btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ki ki-bold-more-hor"></i>
                                    </a>
                                    
                                    <div class="dropdown-menu dropdown-menu-md dropdown-menu-right">
                                        <!--begin::Navigation-->
                                        <ul class="navi navi-hover">
                                            <li class="navi-header pb-1">
                                                <span class="text-primary text-uppercase font-weight-bold font-size-sm">Acciones:</span>
                                            </li>
                                            @can('agregar_fotos_productos')
                                            <li class="navi-item">
                                                <a href="/product_photos/{{$product->id}}" class="navi-link">
                                                    <span class="navi-icon">
                                                        <i class="flaticon-photo-camera"></i>
                                                    </span>
                                                    <span class="navi-text">Agregar fotos</span>
                                                </a>
                                            </li>
                                            @endcan
                                            @can('editar_productos')
                                            <li class="navi-item">
                                                <a href="/products/edit/{{$product->id}}" class="navi-link">
                                                    <span class="navi-icon">
                                                        <i class="flaticon-edit"></i>
                                                    </span>
                                                    <span class="navi-text">Editar </span>
                                                </a>
                                            </li>
                                            @endcan
                                            @can('eliminar_productos')
                                            <li class="navi-item">
                                                <a href="/products/delete/{{$product->id}}" class="navi-link">
                                                    <span class="navi-icon">
                                                        <i class="flaticon-delete"></i>
                                                    </span>
                                                    <span class="navi-text">Eliminar </span>
                                                </a>
                                            </li>
                                            @endcan
                                        </ul>
                                    </div>
                                </div>
                                @endcanany
                            </div>
                            <!--end::Toolbar-->
                            <!--begin::User-->
                            <div class="d-flex align-items-center mb-7">
                                <!--begin::Pic-->
                                <div class="flex-shrink-0 mr-4">
                                    <div class="symbol symbol-circle symbol-lg-75">
                                        @if(isset($product->photos[0]) )
                                        <img src="{{$product->photos[0]->url}}" alt="{{$product->name}}">
                                        @endif
                                    </div>
                                </div>
                                <!--end::Pic-->
                                <!--begin::Title-->
                                <div class="d-flex flex-column">
                                    <a href="/product/detail/{{$product->id}}" class="text-dark font-weight-bold text-hover-primary font-size-h4 mb-0">{{$product->name}}</a>
                                    <span class="text-muted font-weight-bold">{{$product->category->name}}</span>
                                </div>
                                <!--end::Title-->
                            </div>
                            <!--end::User-->
                            <!--begin::Desc-->
                            <p class="mb-7" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                            </p>
                            <!--end::Desc-->
                            <!--begin::Info-->
                            <div class="mb-7">
                                @can('asignar_costos_produccion')
                                <div class="d-flex justify-content-between align-items-cente my-1">
                                    <span class="text-dark-75 font-weight-bolder mr-2">Costo de adquisición:</span>
                                    @if(isset($product->points[0]))
                                    <a href="#" class="text-muted text-hover-primary">${{$product->points[0]->purchase_price}}</a>
                                    @endif
                                </div>
                                @endcan
                            </div>
                            <!--end::Info-->
                            <a href="/product/detail/{{$product->id}}" class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4">Ver detalles</a>
                        </div>
                        <!--end::Body-->
                    </div>
                    <!--end:: Card-->
                </div>
                <!--end::Col-->
                @endforeach
            </div>


        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
<!--end::Content-->

@endsection

@section('js')

@endsection