@extends('shared.admin')
@section('content')
    <style>
        .custom-file-upload {
            border: 1px solid #ccc;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
        }
    </style>
    <div class="container-fluid">
        <h2 class="mt-30 page-title">Products</h2>
        <ol class="breadcrumb mb-30">
            <li class="breadcrumb-item"><a href="{{ asset('/admin') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ asset('/admin/product') }}">Products</a></li>
            <li class="breadcrumb-item active">Add Product</li>
        </ol>
        <div class="row">
            <div class="col-lg-12">
                <form action="{{ action('ProductController@update_en', ['id' => $model->id]) }}" method="POST"
                      enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                    <div class="row no-gutters">
                        <div class="col-lg-6 col-md-6">
                            <div class="card card-static-2 mb-30">
                                <div class="card-title-2">
                                    <h4>Edit Product</h4>
                                </div>
                                <div class="card-body-table">
                                    <div class="news-content-right pd-20">
                                        <div class="form-group">
                                            <label class="form-label">Name *</label>
                                            <input type="text" name="en[title]" id="title"
                                                   value="{{ $model->{'title:en'} }}" class="form-control"
                                                   placeholder="Product Name">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Description *</label>
                                            <textarea rows="5" class="form-control" name="en[description]"
                                                      id="description">{{ $model->{'description:en'} }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Detail Content *</label>
                                            <textarea rows="5" class="ckeditor" name="en[content]"
                                                      id="product_content">{{ $model->{'content:en'} }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Product Image *</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="thumb_image_en"
                                                           name="thumb_image_en">
                                                    <label class="custom-file-label" for="inputGroupFile04">Choose
                                                        Image</label>
                                                </div>
                                            </div>
                                            <div class="add-cate-img-1" style="width: 300px; height: auto">
                                                @if($model->{'image:en'} != '')
                                                    <img src="{{ asset($model->{'image:en'}) }}" alt="">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="card card-static-2 mb-30">
                                <div class="card-title-2">
                                    <h4>Edit Product</h4>
                                </div>
                                <div class="card-body-table">
                                    <div class="news-content-right pd-20">
                                        <div class="form-group">
                                            <div class="row" id="divListImage">
                                                @if($listImage != null && count($listImage) > 0)
                                                    @foreach($listImage as $item)
                                                        <div class="col-4 col-md-4">
                                                            <div class="site-logo" style="width: 190px;">
                                                                <img src="{{ asset($item->thumb) }}" width="190" alt="">
                                                                <a href="javascript:void(0);" data-id="{{ $item->id }}" class="img-delete"><i class="fas fa-trash-alt"></i></a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                            <div class="input-group mt-3">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="imageGallery" name="imageGallery">
                                                    <label class="custom-file-label" for="inputGroupFile04">Choose Image</label>
                                                </div>
                                            </div>
                                            <div class="form-group mb-0">
                                                <label id="fileName" class="custom-file-upload" style="display: none;"></label>
                                            </div>
                                            <input type="hidden" id="productId" value="{{ $model->id }}">
                                            <input type="button" class="save-btn hover-btn" id="btnSaveImage" value="Upload Image"/>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card card-static-2 mb-30">
                                <div class="form-group" style="margin: 0 0 20px 20px">
                                    <button class="save-btn hover-btn" type="submit">Save Changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="dialog-delete" style="display: none">
        <form id="frmDeleteImage" method="post" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header card-title-2">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick="bPopup.close();">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body card-title-2">
                    <h4 class="modal-title">Bạn có muốn xóa ?</h4>
                </div>
                <div class="modal-footer card-title-2">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal"
                            onclick="bPopup.close();">
                        Đóng
                    </button>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                    <input type="hidden" id="productImageId" name="productImageId">
                    <a id="btnDeletedImage" href="javascript:void(0);" class="btn btn-primary">Thực hiện</a>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
      CKEDITOR.on('instanceLoaded', function (e) {
        e.editor.resize("100%", 400)
      });

      function deleteimage(imageId) {
        bPopup = $('#dialog-delete').bPopup();
        $('#productImageId').val(imageId);
      }

      function img_pathUrl(input) {
        $('#seo_image')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);
      }

      var loadFile = function (event) {
        var image = $('#imgSeo');
        image[0].src = (window.URL ? URL : webkitURL).createObjectURL(event.target.files[0]);
      };

      $(document).ready(function () {
        $('.img-delete').click(function (e) {
          e.preventDefault();
          bPopup = $('#dialog-delete').bPopup();
          $('#productImageId').val($(this).attr('data-id'));
        });

        $('#imageGallery').change(function (e) {
          let fileName = e.target.files[0].name;
          if (fileName != '') {
            $('#fileName').html(fileName);
            $('#fileName').show();
          } else {
            $('#fileName').hide();
          }
        });

        $('#btnDeletedImage').click(function (e) {
          e.preventDefault();
          var t = $('#frmDeleteImage');
          var data = t.serialize();
          $.ajax({
            url: '{{ action('ProductController@deleteimage') }}',
            type: 'post',
            data: data,
            success: function (response) {
              if (response.status) {
                let divParent = $('.col-4').find("[data-id='" + $('#productImageId').val() + "'").parents('.col-4');
                divParent.remove();
                bPopup = $('#dialog-delete').bPopup();
                bPopup.close();
                return false;
              } else {
                alert('File can not be deleted!!');
              }
            }
          });
        });

        $("#btnSaveImage").click(function () {
          var fd = new FormData();
          var files = $('#imageGallery')[0].files;
          // Check file selected or not
          if (files.length > 0) {
            fd.append('file', files[0]);
            fd.append('productId', $('#productId').val());
            fd.append('locale', 'en');
            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
            $.ajax({
              url: '{{ action('ProductController@uploadimage') }}',
              type: 'post',
              data: fd,
              contentType: false,
              processData: false,
              success: function (response) {
                $('#fileName').html();
                $('#fileName').hide();
                if (response.status) {
                  $("#divListImage").append('<div class="col-4 col-md-4">\n' +
                    '                                                        <div class="site-logo" style="width: 190px;">\n' +
                    '                                                            <img src="' + response.imageLink + '" width="190" alt="">\n' +
                    '                                                            <a href="javascript:void(0);" onclick="deleteimage(\'' + response.imageId + '\')" data-id="' + response.imageId + '" class="img-delete"><i class="fas fa-trash-alt"></i></a>\n' +
                    '                                                        </div>\n' +
                    '                                                    </div>');
                  return false;
                } else {
                  alert('File not uploaded');
                }
              }
            });
          } else {
            alert("Please select a file.");
          }
        });
      });
    </script>
@endsection