@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', ['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="title" id="title" value="{{ $model->{'title:vi'} }}" class="form-control" placeholder="Product Name">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Price Import *</label>
                                            <input type="text" name="importprice" id="importprice" value="{{ $model->import_price }}" class="form-control" placeholder="">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Price Sale *</label>
                                            <input type="text" name="saleprice" id="saleprice" value="{{ $model->sale_price }}" class="form-control" placeholder="">
                                        </div>
                                        <div class="form-group">
                                            <input type="checkbox" name="is_feature" id="is_feature" class="check-item"
                                                {{ $model->is_feature == '1' ? 'checked' : '' }}><label class="form-label">Is Feature Product *</label>
                                            <br>
                                            <input type="checkbox" name="is_momo_product" id="is_momo_product" class="check-item"
                                                    {{ $model->is_momo_product == '1' ? 'checked' : '' }}>
                                            <label class="form-label">Is Momo Product</label>
                                            <br>
                                            <input type="checkbox" name="is_website_product" id="is_website_product" class="check-item"
                                                    {{ $model->is_website_product == '1' ? 'checked' : '' }}>
                                            <label class="form-label">Is Website Product</label>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Description *</label>
                                            <textarea rows="5" class="form-control" name="description" id="description">{{ $model->{'description:vi'} }}</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" name="thumb_image">
                                                    <label class="custom-file-label" for="inputGroupFile04">Choose Image</label>
                                                </div>
                                            </div>
                                            <div class="add-cate-img-1">
                                                @if($model->thumb != '')
                                                    <img src="{{ asset($model->thumb) }}" alt="">
                                                @endif
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Momo Image</label>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="momo_thumb" name="momo_thumb">
                                                    <label class="custom-file-label" for="momo_thumb">Choose Image</label>
                                                </div>
                                            </div>
                                            <div class="add-cate-img-1">
                                                @if($model->momo_thumb != '')
                                                    <img src="{{ asset($model->momo_thumb) }}" alt="">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card card-static-2 mb-30">
                                <div class="card-title-2">
                                    <h4>Seo Manage</h4>
                                </div>
                                <div class="card-body-table">
                                    <div class="post-form">
                                        <div class="form-group">
                                            <label class="form-label">SEO title *</label>
                                            <input type="text" name="seo_title" id="seo_title" value="{{ $model->seo_title }}" class="form-control" placeholder="Seo title here">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Keyword *</label>
                                            <input type="text" name="keyword" id="keyword" value="{{ $model->keyword }}" class="form-control" placeholder="Seo title here">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Meta Description*</label>
                                            <div class="card card-editor">
                                                <div class="content-editor">
                                                    <textarea class="text-control" name="meta_description" id="meta_description" placeholder="Enter Description">{{ $model->meta_descriiption }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Facebook Cover Image*</label>
                                            <div class="site-logo">
                                                @if($model->seo_image != '')
                                                    <img src="{{ asset($model->seo_image) }}" id="imgSeo" alt="">
                                                @else
                                                    <img src="{{ asset('images/featured-img.jpg') }}" id="imgSeo" alt="">
                                                @endif
                                            </div>
                                            <div class="img-add">
                                                <input type="file" id="seo_image" name="seo_image" onchange="loadFile(event)">
                                                <label for="seo_image">Upload Image</label>
                                            </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">
                                            <label class="form-label">Status*</label>
                                            <select id="status" name="status" class="form-control">
                                                <option value="1" @if($model->status == '1') selected @endif>Active
                                                </option>
                                                <option value="0" @if($model->status == '0') selected @endif>Inactive
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="margin-top: 30px;">
                                            <label class="form-label">Image Gallery *</label>
                                        </div>
                                        <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 class="form-group">
                                            <label class="form-label">Detail Content *</label>
                                            <textarea rows="5" class="ckeditor" name="product_content" id="product_content">{{ $model->{'content:vi'} }}</textarea>
                                        </div>

                                        {{--<div class="img-add">
                                            <input type="file" id="imageGallery" name="imageGallery">
                                            <label for="imageGallery">Upload Image</label>
                                        </div>--}}
                                        <div class="form-group">
                                            <button class="save-btn hover-btn" type="submit">Save Changes</button>
                                        </div>
                                    </div>
                                </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());
                    $.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