@extends('layouts.base')
@push('css')
<!-- Switchery -->
<link href="{{URL::to('vendors/switchery/dist/switchery.min.css')}}" rel="stylesheet">
<!-- Datatables -->
<link href="{{URL::to('vendors/datatables.net-bs/css/dataTables.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css')}}" rel="stylesheet">
<style>
    .productPhotos img {
        width: 30%;
        margin: 10px;
    }
</style>
@endpush
@section('content')
    <div class="x_panel">
        <div class="x_content">
            <h3>Productos pendientes por publicar</h3>
            <div class="dropdown dropdown docs-options">
                <button type="button" class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" data-toggle="dropdown" aria-expanded="true">
                    Mostrar/Esconder Columnas
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="toggleOptions" role="menu">
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="0">Nombre
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="1">Descripción
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="2">Activa
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="3">Precio
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="4">Brand
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="5">Categoría
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="6">Nuevo
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="7">Stock
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="8">Servicio
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="9">Destacado
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="10">Usuario
                        </label>
                    </li>
                </ul>
            </div><!-- /.dropdown -->
            <table id="products" class="table table-stripped table-hovered">
                <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Descripción</th>
                    <th>Activa</th>
                    <th>Precio</th>
                    <th>Brand</th>
                    <th>Categoría</th>
                    <th>Nuevo</th>
                    <th>Stock</th>
                    <th>Servicio</th>
                    <th>Destacado</th>
                    <th>Usuario</th>
                    <th>Acciones</th>
                </tr>
                </thead>
                <tbody>
                @foreach($products as $product)
                    <tr>
                        <td>{{$product->name}}</td>
                        <td>{{\Illuminate\Support\Str::limit($product->description, 50)}}</td>
                        <td>{{($product->active==1)?'Si':'No'}}</td>
                        <td>{{$product->price}}</td>
                        <td>{{$product->brand}}</td>
                        <td>
                            <ul>
                                @foreach($product->categories as $category)
                                    <li>{{$category->category->category}}</li>
                                @endforeach
                            </ul>
                        </td>
                        <td>{{($product->is_new==1)?'Si':'No'}}</td>
                        <td>{{$product->stock}}</td>
                        <td>{{($product->service==1)?'Si':'No'}}</td>
                        <td>{{($product->featured==1)?'Si':'No'}}</td>
                        <td>{{($product->user)?$product->user->first_name.' '.$product->user->last_name:'N/A'}}</td>
                        <td>
                            <div class="btn-group">
                                <a class="photos btn btn-success" data-photos="{{$product->photos}}">Fotos</a>
                                @if(count($product->historyForApproving) > 0)
                                    <a class="history btn btn-warning" data-history="{{$product->historyForApproving[0]}}">History</a>
                                @endif

                                <a class="publish-option btn btn-info" data-message="publicar" href="{{route('products.publish.publish', ['id'=>$product->id])}}">Publicar</a>
                                <a class="publish-option btn btn-danger" data-message="rechazar" href="{{route('products.reject', ['id'=>$product->id])}}">Rechazar</a>
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="productPhotos" tabindex="-1" role="dialog" aria-labelledby="details">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Fotos</h4>
                </div>
                <div class="modal-body" id="ppBody">
                    <div class="productPhotos center">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="productHistory" tabindex="-1" role="dialog" aria-labelledby="details">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">History</h4>
                </div>
                <div class="modal-body" id="modalHistoryBody">

                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<!-- Parsley -->
<script src="{{URL::to('vendors/parsleyjs/dist/parsley.min.js')}}"></script>
<!-- Switchery -->
<script src="{{URL::to('vendors/switchery/dist/switchery.min.js')}}"></script>
<!-- Datatables -->
<script src="{{URL::to('vendors/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.flash.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-keytable/js/dataTables.keyTable.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-scroller/js/dataTables.scroller.min.js')}}"></script>
<script>
    var table = {};
    $(document).ready(function () {
        table = $("#products").DataTable({
            responsive:true,
            dom: "Bfrtip",
            buttons: [
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                }
            ],
        });
        $(".show").trigger('change');
    });
    $(".show").on("change", function (e) {
        e.preventDefault();
        var column = table.column($(this).attr('data-column'))
        column.visible($(this).is(':checked'));
    });

    function fieldRow(title , text){
        return `<div class="row">
           <div class="col-md-offset-1  col-md-4 text-right">
                <h4> <b> ${title}:</b>  </h4>
            </div>
            <div class="col-md-5 text-justify">
                  <h4> <b> ${text} </b>  </h4>
            </div>
        </div>`;
    }

    function fieldRowPhotos(photos){
        let template = `<div class="row">
            <div class="col-md-12 text-center">
                <h/> <h4> <b>Photos</b></h4>
            </div>
        </div><div class="row">`;
        for (let i=0; i < photos.length; i++) {
            const photo = photos[i]
            console.log(photo)
            template += `<div class="col-md-4"><img src="${photo.file}"   class="img-responsive img-thumbnail"  alt="product photo"></div>`;
        }
        template+= '</div>';
        return template;
    }
    $(document).on("click", ".history", function () {
        let history = $(this).data('history');
        console.log(history);

        if(history.name){
            let rowsTemplate = ''
            rowsTemplate += fieldRow('Name' , history.name)
            rowsTemplate += fieldRow('Description' , history.description)
            rowsTemplate += fieldRow('Price' , history.price + ' eBits')
            rowsTemplate += fieldRow('Is Service' , history.service == 1 ? 'Yes' : 'No' )

            if(history.service == 0){
                rowsTemplate += fieldRow('Stock' , history.stock)
                rowsTemplate += fieldRow('Is New' , history.is_new == 1 ? 'Yes' : 'No')
                rowsTemplate += fieldRow('Stock' , history.stock)
            }

            rowsTemplate += fieldRow('Delivery' , history.delivery == 1 ? 'Yes' : 'No')
            rowsTemplate += fieldRow('Pickup' , history.pickup == 1 ? 'Yes' : 'No')
            rowsTemplate += fieldRow('Negotiable' , history.negotiable == 1 ? 'Yes' : 'No')
            rowsTemplate += fieldRow('Categorie' , history.categories[0].category.category)

            rowsTemplate += fieldRowPhotos(history.photos);

            $("#modalHistoryBody").html(`<div  class="container" > ${rowsTemplate}</div>`);
            $("#productHistory").modal();
        }else{
            alert('This product is new');
        }
    });
    $(document).on("click", ".photos", function () {
        var photos = $(this).data('photos');
        console.log(photos);
        var count = 0;
        if(photos && photos.length>0) {
            var strPhotos = '';
            photos.forEach(function (v, k) {
                if (count === 3) {
                    strPhotos += "<br>";
                    count = 0;
                }
                strPhotos += "<img class='image-circle' src='" + v.file + "'>";
                count++;
            });
            $(".productPhotos").html(strPhotos);
            $("#productPhotos").modal();
        }});
    $(document).on("click", ".publish-option", function (e) {
        const message = $(this).data('message');
        console.log(message);
        if (!confirm("¿Está seguro de " + message + " éste producto?")) {
            e.preventDefault();
            return;
        }
    });
</script>
@endpush