@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">
@endpush
@section('content')
    <div class="x_panel">
        <div class="x_content">
            <h3>Comentarios del producto:</h3>
            <table class="table">
                <thead>
                <tr>
                    <th colspan="5" style="text-align: center">Producto</th>
                </tr>
                <tr>
                    <th>Nombre</th>
                    <th>Descripción</th>
                    <th>Dueño</th>
                    <th>Valor</th>
                    <th>Stock</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{$product->name}}</td>
                    <td>{{$product->description}}</td>
                    <td>{{$product->user->first_name}} {{$product->user->last_name}}</td>
                    <td>{{$product->price}}</td>
                    <td>{{$product->stock}}</td>
                </tr>
                </tbody>
            </table>
            <h3>Comentarios:</h3>
            @if($product->comments and count($product->comments) > 0)
                <ul class="messages">
                    @foreach($product->comments as $comment)
                        <li>
                            <img src="{{URL::to('photos/img.jpg')}}" class="avatar" alt="Avatar">
                            <div class="message_date">
                                <h3 class="date text-info">{{date_format(date_create($comment->created_at), 'd')}}</h3>
                                <p class="month">{{date_format(date_create($comment->created_at), 'M')}}</p>
                            </div>
                            <div class="message_wrapper">
                                <h4 class="heading">{{$comment->user->first_name}} {{$comment->user->last_name}}</h4>
                                @if(!$comment->active) <strike>@endif<blockquote class="message">{{$comment->comment}}</blockquote>@if(!$comment->active) </strike>@endif
                                <br />
                                <p class="url">
                                    <span class="fs1 text-info" aria-hidden="true" data-icon=""></span>
                                    A las {{date_format(date_create($comment->created_at), 'h:m:s A')}}
                                </p>
                                @if($comment->response)
                                <ul class="messages">
                                    <li>
                                        <div class="message_date">
                                            <h3 class="date text-info">{{date_format(date_create($comment->updated_at), 'd')}}</h3>
                                            <p class="month">{{date_format(date_create($comment->updated_at), 'M')}}</p>
                                        </div>
                                        <div class="message_wrapper">
                                            <h4 class="heading">Respuesta:</h4>
                                            @if(!$comment->active) <strike>@endif<blockquote class="message">{{$comment->response}}</blockquote>@if(!$comment->active) </strike>@endif
                                            <br>
                                            <p class="url">
                                                <span class="fs1 text-info" aria-hidden="true" data-icon=""></span>
                                                A las {{date_format(date_create($comment->updated_at), 'h:m:s A')}}
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                                    <br>
                                    @if($comment->active)
                                        <a class="desactivar" title="Desactivar Comentario" href="{{route('comment.deactivate', ['id'=>$comment->id])}}"><span class="fa fa-remove"></span> Desactivar</a>
                                    @else
                                        <a class="activar" title="Activar Comentario" href="{{route('comment.activate', ['id'=>$comment->id])}}"><span class="fa fa-remove"></span> Activar</a>
                                    @endif
                                <br><br>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="well">
                    <h4>No tiene comentarios</h4>
                </div>
            @endif
            <div class="ln_solid"></div>
            <div class="form-group">
                <div class="col-md-5 col-sm-9 col-xs-12 col-md-offset-5 btn-group">
                    <a href="{{route('products.index')}}" class="btn btn-danger">Volver</a>
                </div>
            </div>
        </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 del Producto</h4>
                </div>
                <div class="modal-body" id="ppBody">
                    <div class="productPhotos center">
                    </div>
                </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>
    $(document).ready(function () {
        $("#users").dataTable();
    });
    $(document).on("click", ".desactivar", function (e) {
        if (!confirm('¿Está seguro de desactivar éste comentario?')) {
            e.preventDefault();
            return;
        }
    });
    $(document).on("click", ".activar", function (e) {
        if (!confirm('¿Está seguro de activar éste comentario?')) {
            e.preventDefault();
            return;
        }
    });
    $('#form-create').parsley().on('field:validated', function () {
        var ok = $('.parsley-error').length === 0;
        $('.bs-callout-info').toggleClass('hidden', !ok);
        $('.bs-callout-warning').toggleClass('hidden', ok);
    });
    $(document).on("click", "#create", function (e) {
        if (!confirm('¿Está seguro de crear el registro?')) {
            e.preventDefault();
            return;
        }
        $(this).closest('form').submit();
    });
</script>
@endpush