@extends('layouts.admin')

@section('content')

    <div class="row">
        <div class="col-md-4">
           <div class="panel panel-default">
               <div class="panel-heading">
                   {{--<h4>Product Details <a class="btn btn-sm pull-right">Add New Image</a></h4>--}}
                   <h4>Product Details
                       <div class="btn-group pull-right" role="group" aria-label="...">
                           <a href="{{route('admin.product.edit',$product)}}" class="btn btn-default" title="Edit Product"><i class="glyphicon glyphicon-pencil"></i></a>
                           <button type="button" id="product-delete" class="btn btn-danger" data-form="product-delete-form"  title="Delete This Product"><i class="glyphicon glyphicon-trash"></i></button>
                           <button type="button" class="btn btn-default" title="Add Image" data-toggle="modal" data-target="#new-image-modal"><i class="glyphicon glyphicon-plus"></i></button>
                       </div>
                       <div class="clearfix"></div>
                   </h4>
               </div>
               <div class="panel-body">
                    <table class="table table-striped table-">
                        <tbody>
                        <tr>
                            <th>Main Category</th>
                            <td>{{config("coco.main.{$product->category->main}")}}</td>
                        </tr>
                        <tr>
                            <th>Sub Category</th>
                            <td>{{$product->category->name}}</td>
                        </tr>
                        <tr>
                            <th>Code</th>
                            <td>{{$product->code}}</td>
                        </tr>
                        <tr>
                            <th>Title</th>
                            <td>{{($product->title?:'Not Found')}}</td>
                        </tr>
                        <tr>
                            <th>Is On Home Page</th>
                            <td>{!! ($product->is_on_home ? "Yes":"No") !!}</td>
                        </tr>
                        </tbody>
                    </table>

                   <div class="form-group">
                       <label for="description">Description</label>
                       <textarea class="form-control" rows="10" readonly>{{$product->description}}</textarea>
                   </div>
               </div>
           </div>
        </div>
        <div class="col-md-8">
            <div class="row">
                @forelse($product->images as $image)
                    <div class="col-md-4">
                        <div class="panel panel-default" id="img-panel-{{$image->id}}">
                            <div class="panel-heading">
                                <div class="btn-group btn-group-sm" role="group" aria-label="...">
                                    <a href="{{asset($image->path)}}" class="btn btn-info" target="_blank" title="View"><i class="glyphicon glyphicon-search"></i></a>
                                    <a href="{{route('admin.product.image.delete',$image)}}" class="btn btn-default delete-image" title="Delete This Image">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="panel-body">
                                <img src="{{asset($image->path)}}" alt="Product Image" class="img-responsive">
                            </div>
                        </div>
                    </div>
                @empty
                    <h4 class="text-info">
                        Product does not have any image.
                    </h4>
                    Please add minimum one image. Otherwise this product will not be listed in public site
                    <div class="col-md-2 col-md-offset-4">
                        <br>
                        <a class="btn btn-info btn-sm"  data-toggle="modal" data-target="#new-image-modal">Add Image</a>
                    </div>
                @endforelse
            </div>

        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="new-image-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog  modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close resetForm" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form action="{{route('admin.product.add-image',$product)}}" method="post" enctype="multipart/form-data" id="image-form">
                        {{csrf_field()}}
                        <div class="form-group">
                            <input  class="form-control" name="productImage" id="product-image" type="file" required>
                        </div>
                    </form>
                    <img src="#" class="img-responsive  show-after hidden" id="preview-image" alt="Preview">
                </div>
                <div class="modal-footer show-after hidden">
                    <button type="button" class="btn btn-default resetForm"  data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="$('#image-form').submit()">Upload Image</button>
                </div>
            </div>
        </div>
    </div>
    <form action="{{route('admin.product.delete',$product)}}" id="product-delete-form" method="post">
        {{csrf_field()}}
        {{method_field('delete')}}
    </form>
@endsection

@section('js')
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function previewImageFile(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#preview-image').attr('src', e.target.result);

                    $(".show-after").removeClass('hidden');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#product-image").change(function() {
            previewImageFile(this);

        });

        $(".resetForm").click(function () {

            $('#preview-image').attr('src', "#");
            $("#image-form").find("input[type=text]").val("");
            $(".show-after").addClass('hidden');
        });
    </script>

    <script>
        $(".delete-image").on('click',function (e) {
            e.preventDefault();

            if(confirm("Just to confirm! Should I delete this image ?")){
                axios.post($(this).attr('href')).then(function(response){

                    $("#img-panel-"+response.data.image.id).fadeOut();
                }).catch(function (errors) {
                    console.log(errors);
                });
            }
        })

        $("#product-delete").click(function () {
           var _formId = $(this).data('form');
           if(confirm("You are going to delete this product"))
           {
               $("#"+_formId).submit();
           }
        });
    </script>
@endsection