@extends('backend.layouts.main')

@section('content')

    <div class="row page-titles {{ $is_super_admin?'':'full-width' }}">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{$subtitle}}</h3>
        </div>
        <div class="col-md-7 align-self-center">

            @if($_type=='owned')
                {{ Breadcrumbs::render('backend.products.owned.index') }}
            @elseif($_type=='censorship')
                {{ Breadcrumbs::render('backend.products.censorship.index') }}
            @elseif($_type=='callback')
                {{ Breadcrumbs::render('backend.products.callback.index') }}
            @elseif($_type=='merge')
                {{ Breadcrumbs::render('backend.products.merge.index') }}
            @elseif($_type=='update.image')
                {{ Breadcrumbs::render('backend.products.image.index') }}
            @elseif($_type=='request_update')
                {{ Breadcrumbs::render('backend.products.request.update.index') }}
            @else
                {{ Breadcrumbs::render('backend.products.index') }}
            @endif
        </div>

        <div class="col-md-12">
            <div class="card card-outline-info">
                <div class="card-body">
                    @if($is_super_admin)
                        @include('backend.products.formFilter')

                        <div class="ajax-result">
                            @include('backend.products.ajaxList')
                        </div>
                    @else
                        <div class="col-md-12">
                            @include('backend.partials.msg')
                            @include('backend.partials.errors')
                        </div>

                        <form action="" method="get" id="form-filter">
                            <div class="row">
                                @if(auth()->guard('backend')->user()->can('products.add'))
                                    <div class="col-md-2 pull-right">
                                        <a href="{{Route('backend.products.add')}}"
                                           class="btn waves-effect waves-light btn-block btn-info btn-sm">
                                            <i class="fa fa-plus"></i>&nbsp;&nbsp;Thêm dự án mới
                                        </a>
                                    </div>
                                @endif
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <input type="text"
                                               name="from_date_created"
                                               value="{{$filter['from_date_created']}}"
                                               id="from_date_callback" data-toggle="datepicker-simple"
                                               class="form-control form-control-sm" placeholder="Từ ngày">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <input type="text"
                                               name="to_date_created"
                                               value="{{$filter['to_date_created']}}"
                                               id="to_date_callback" data-toggle="datepicker-simple"
                                               class="form-control form-control-sm" placeholder="Tới ngày">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <div class="form-group">
                                        <input type="text"
                                               name="contact_phone"
                                               value="{{request('contact_phone')}}"
                                               id="contact_phone"
                                               class="form-control form-control-sm" placeholder="SĐT">
                                    </div>
                                </div>

                                <div class="col-md-2">
                                    <button class="btn waves-effect waves-light btn-block btn-primary btn-sm search_btn" type="button">
                                        <i class="fa fa-search"></i>&nbsp;&nbsp;Tìm
                                    </button>
                                </div>
                            </div>
                            <input type="hidden" name="sort" value="" class="input_sort">
                        </form>
                        <div class="ajax-result">
                            @include('backend.products.staff.ajaxList')
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @include('backend.products.modal.callbackRequest')
    @include('backend.products.modal.callback')
    @include('backend.products.modal.viewNote')
    @include('backend.products.modal.merge')
@endsection

@section('style_top')
    <link href="{{ asset('/storage/backend/assets/plugins/bootstrap-select/bootstrap-select.min.css')}}"
          rel="stylesheet" type="text/css"/>

    <style>
        .select2 {
            width: 100% !important;
            height: 36px !important;
        }

        .checkbox-basic {
            position: initial !important;
            left: initial !important;
            opacity: 1 !important;
        }

        @media (min-width: 576px) {
            #note-modal .modal-dialog {
                max-width: 1000px;
                margin: 1.75rem auto;
            }
        }

        #grid_table .thumbnail-outer {
            display: inline-flex;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            position: relative;
            float: left;
            margin: 2px;
        }

        .thumbnail img {
            max-width: 100%;
            max-height: 100%;
            border: solid 1px #ccc;
            cursor: pointer;
        }

        .thumbnail a.btn_delete,
        .thumbnail a.btn_rotate_left,
        .thumbnail a.btn_rotate_right {
            display: block;
            width: 20px;
            height: 20px;
            position: absolute;
            overflow: hidden;
            padding: 1px 5px;
            font-weight: bold;
            font-size: 13px;
        }

        .thumbnail a.btn_rotate_left,
        .thumbnail a.btn_rotate_right {
            background: #2125294a;
        }

        .thumbnail a.btn_delete {
            top: 1px;
            right: 1px;
            background: #FDFF21;
            color: red;
        }

        .thumbnail a.btn_rotate_left {
            bottom: 1px;
            left: 1px;
        }

        .thumbnail a.btn_rotate_right {
            bottom: 1px;
            right: 1px;
        }

        p.upload {
            clear: both;
            padding-top: 15px;
            padding-bottom: 15px;
            margin-bottom: 0;
        }

        a.sort.active {
            color: red;
        }

        .image_select {
            cursor: pointer;
        }

        .sort_btn {
            /*display: inline-block;*/
            /*float: left;*/
            margin-top: 10px;
        }

        .my_upload {
            display: inline-block;
            float: left;
            margin-top: 10px;
            cursor: pointer;
            clear: both;
            width: 100%;
        }

        .my_upload .image_select {
            position: absolute;
            left: 0;
            opacity: 0;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .my_upload div {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ccc;
            border: 3px dotted #bebebe;
            border-radius: 2px;
        }

        .my_upload label {
            display: inline-block;
            position: relative;
            height: 40px;
            width: 100px;
            cursor: pointer;
        }

        .my_upload div.dragover {
            background-color: #aaa;
        }

        .upload_loading {
            display: none;
            box-sizing: unset;
            margin: 0;
            padding: 0;
            text-align: center;
            height: 30px;
            width: 30px;
            background-repeat: no-repeat;
            background-size: 40px;
            background-image: url("{{ asset('/storage/backend/assets/images')}}/loading.gif");
        }

        .box-edit .current {
            min-height: 40px;
        }

        .thumbnail-outer2{
            display: inline-block;
        }
    </style>
@stop

@section('script')
    <script src="{{ asset('/storage/backend/assets/plugins/dropzone-master/dist/dropzone.js')}}" type="text/javascript"></script>
    <script src="{{ asset('/storage/backend/assets/plugins/bootstrap-select/bootstrap-select.min.js')}}" type="text/javascript"></script>
    <script src="{{ asset('/storage/backend')}}/js/merge.js"></script>

    <script src="https://maps.google.com/maps/api/js?key={{config('constants.google_maps_key')}}&sensor=true"></script>
    <script src="{{ asset('/storage/backend/assets/plugins/gmaps/gmaps.min.js')}}"></script>
    <script src="{{ asset('/storage/backend/js/markerwithlabel.js')}}" type="text/javascript"></script>
    <script src="{{ asset('/storage/backend/js/gmaps.js')}}?v={{ config('constants.asset_version') }}"></script>

    <script>

        $(document).bind("cut copy paste", function (e) {
            e.preventDefault();
        });

        var timeoutID = null;
        $(document).on('click', 'ul.pagination li a', function (event) {
            event.preventDefault();
            var url = $(this).attr('href');
            //window.history.pushState(window.location.href, "", url);
            load_product(url);

        });

        $(document).on('click', 'a.pagin-loadmore', function (event) {
            event.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                type: 'get',
                data: {load_more: true},
                success: function (data) {
                    if (data.e == 0) {
                        $('.tbody-content').append(data.r);
                        reorder_image();
                        image_popup();
                    }
                }
            });
        });

        $(document).on('click', 'a.sort', function (event) {
            event.preventDefault();
            var sort = $(this).data('sort');
            $('#form-filter .input_sort').val(sort);
            var data = $('#form-filter').serialize();
            var url = $('#form-filter').attr('action');
            load_product(url, data)
        });

        function load_product(url, params) {
            var params = params !== undefined ? params : null;
            $.ajax({
                url: url,
                type: 'get',
                data: params,
                success: function (data) {
                    if (data.e == 0) {
                        $('div.ajax-result').html(data.r);
                        $('html, body').animate({scrollTop: 0}, 0);
                        reorder_image();
                        image_popup();
                    }

                }
            });
        }

        $('[data-toggle="datepicker-simple"]').on('change', function () {
            // var data = $('#form-filter').serialize();
            // var url = $('#form-filter').attr('action');
            // clearTimeout(timeoutID);
            //
            // timeoutID = setTimeout(function () {
            //     load_product(url, data)
            // }, 1000);
        });

        $('select.form-filter').on('change', function () {
            var data = $('#form-filter').serialize();
            var url = $('#form-filter').attr('action');
            load_product(url, data)
        });

        $('#form-filter').on('change', 'select', function () {
            var data = $('#form-filter').serialize();
            var url = $('#form-filter').attr('action');
            load_product(url, data)
        });

        $('#form-filter, .ajax-result').on('keyup', 'input.form-control', function () {
            // var data = $('#form-filter').serialize();
            // var url = $('#form-filter').attr('action');
            // clearTimeout(timeoutID);
            //
            // timeoutID = setTimeout(function () {
            //     load_product(url, data)
            // }, 1000);
        });

        $('#form-filter, .ajax-result').on('keypress', 'input.form-control', function (e) {
            if (e.which == 13) {
                var data = $('#form-filter').serialize();
                var url = $('#form-filter').attr('action');
                load_product(url, data)
                return false;
            }
        });

        // $('#form-filter input, .ajax-result input').keypress(function (e) {
        //     if (e.which == 13) {
        //         var data = $('#form-filter').serialize();
        //         var url = $('#form-filter').attr('action');
        //         load_product(url, data)
        //         return false;
        //     }
        // });

        $('.search_btn').on('click', function () {
            var data = $('#form-filter').serialize();
            var url = $('#form-filter').attr('action');
            load_product(url, data)
        });

        $(document).on('click', '#callback_request', function (event) {
            var x = getChecked();
            if (!x)
                return;

            $('#callbackRequest-modal').modal('show');

        });

        $(document).on('click', '#un_approved_btn', function (event) {
            var x = getChecked();
            if (!x)
                return;
            var r = confirm("Hủy duyệt các dự án đã chọn?");
            if (r == true) {
                $.ajax({
                    url: '{{route('backend.products.ajax.un_approved')}}',
                    type: 'post',
                    data: {product_ids: val, _token: '{{csrf_token()}}'},
                    success: function (data) {
                        alert('Hủy duyệt thành công!');
                        window.location.reload();
                    }
                });
            }
        });

        $(document).on('click', '#delete_btn', function (event) {
            var x = getChecked();
            if (!x)
                return;
            var r = confirm("Xóa các dự án đã chọn?");
            if (r == true) {
                $.ajax({
                    url: '{{route('backend.products.ajax.delete')}}',
                    type: 'post',
                    data: {product_ids: val, _token: '{{csrf_token()}}'},
                    success: function (data) {
                        alert('Đã xóa thành công!');
                        window.location.reload();
                    }
                });
            }
        });

        $(document).on('click', '#approved_btn', function (event) {
            var x = getChecked();
            if (!x)
                return;
            var r = confirm("Duyệt các dự án đã chọn?");
            if (r == true) {
                $.ajax({
                    url: '{{route('backend.products.ajax.approved')}}',
                    type: 'post',
                    data: {product_ids: val, _token: '{{csrf_token()}}'},
                    success: function (data) {
                        alert('Duyệt thành công!');
                        window.location.reload();
                    }
                });
            }
        });

        $('.user_id').select2({
            /*minimumInputLength: 3,
            ajax: {
                url: '{{route('backend.ajax.searchUser')}}',
                dataType: 'json',
                method: 'POST',
                data: function (params) {
                    return {
                        q: $.trim(params.term),
                        t: 'callback',
                        _token: '{{csrf_token()}}'
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            }*/
        });

        function callbackRequest(form, product_id) {
            var _form = form == undefined ? null : form;
            var _product_id = product_id == undefined ? null : product_id;

            if (_product_id == null) {
                var x = getChecked();
                if (!x)
                    return;
            } else {
                val = [];
                val.push(_product_id);
            }

            var user_id = $(_form + '.user_id').val();
            var content = $(_form + '.content').length ? $(_form + '.content').val() : null;
            if (user_id == '' || user_id == null) {
                return alert('Vui lòng chọn thư ký!');
            }

            $.ajax({
                url: '{{route('backend.products.callback-request')}}',
                type: 'post',
                data: {product_ids: val, user_id: user_id, content: content, _token: '{{csrf_token()}}'},
                success: function (data) {
                    if (data.e == 0) {

                        if (content != null)
                            $(_form + '.content').val('');

                        $('#callbackRequest-modal').modal('hide');
                        alert('Đã gửi yêu cầu gọi lại!');
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        $(document).on('click', 'a.get_note', function (event) {
            var product_id = $(this).data('id');
            $.ajax({
                url: '{{route('backend.products.ajax.getNote')}}',
                type: 'get',
                data: {product_id: product_id},
                success: function (data) {
                    if (data.e == 0) {
                        $('#view-note-modal .modal-content').html(data.r);
                        $('#view-note-modal').modal('show');
                    } else {
                        alert(data.r);
                    }
                }
            });
        });

        $(document).on('click', 'a.get_info', function (event) {
            var product_id = $(this).data('id');
            $.ajax({
                url: '{{route('backend.products.ajax.getInfo')}}',
                type: 'get',
                data: {product_id: product_id},
                success: function (data) {
                    if (data.e == 0) {
                        $('#view-note-modal .modal-content').html(data.r);
                        $('#view-note-modal').modal('show');
                        search_user('#frm-request-callback');
                    } else {
                        alert(data.r);
                    }
                }
            });
        });

        function search_user(form_id) {
            $(form_id + ' .user_id').select2({
                /*minimumInputLength: 3,
                ajax: {
                    url: '{{route('backend.ajax.searchUser')}}',
                    dataType: 'json',
                    method: 'POST',
                    data: function (params) {
                        return {
                            q: $.trim(params.term),
                            t: 'callback',
                            _token: '{{csrf_token()}}'
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                }*/
            });
        }

        function addNote(type) {

            if (type === undefined)
                type = 1;

            var process = false;
            var form = $('.form_add_note');
            var url = form.attr('action');

            if (process)
                return;

            process = true;
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function (data) {
                    if (data.e == 0) {
                        $('#note_content_in').val('');

                        if (type == 1) {
                            $('#view-note-modal .modal-content').html(data.r);
                        } else {
                            $('.note-data').html(data.r);
                        }
                    } else {
                        alert(data.r);
                    }
                    process = false;
                }
            });
        }

        function addSupport() {
            var process = false;
            var form = $('.form_support');
            var url = form.attr('action');

            if (process)
                return;

            process = true;
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function (data) {
                    if (data.e == 0) {
                        $('#message-support').val('');
                        $('.list-support').append(data.r);
                    } else {
                        alert(data.r);
                    }
                    process = false;
                }
            });
        }

        function update_status_product() {
            var process = false;
            var form = $('.form-land-update');
            var url = form.attr('action');

            if (process)
                return;

            process = true;
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function (data) {
                    if (data.e == 0) {
                        alert('Cập nhật trạng thái thành công!');
                        $('#view-note-modal').modal('show');
                    } else {
                        alert(data.r);
                    }
                    process = false;
                }
            });

        }

        $(document).on('click', '.show_modal_callback', function (event) {
            var product_id = $(this).data('id');
            var type = $(this).data('type');
            $.ajax({
                url: PRODUCT_CALLBACK_DETAIL_URL,
                type: 'GET',
                data: {product_id: product_id, type: type},
                success: function (data) {
                    if (data.e == 0) {
                        $('#callback-modal .modal-content').html(data.r);
                        $('.select2').select2();
                        LCKApp.selectLocation('#form-callback ');
                        $('#callback-modal').modal('show');
                    } else {
                        alert(data.r);
                    }
                }
            });
        })

        function callbacked(type) {
            if (undefined == type)
                var type = null;

            var data = $('#form-callback').serialize() + '&type=' + type;
            $.ajax({
                url: PRODUCT_CALLBACK_MAKE_URL,
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data.e == 0) {
                        $('#callback-modal').modal('hide');
                        location.reload();
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        var skip_product_id = null;
        $(document).on('click', '.get_detail, .btn-detail-product, .btn-edit-product', function (event) {
            var product_id = $(this).data('id');
            var type = $(this).data('type');
            var act = $(this).data('act');
            $.ajax({
                url: PRODUCT_DETAIL_URL,
                type: 'GET',
                data: {product_id: product_id, type: type, act: act},
                success: function (data) {
                    if (data.e == 0) {
                        $('#callback-modal .modal-content').html(data.r);
                        $('.select2').select2();
                        LCKApp.selectLocation('#form-callback ');
                        $('#callback-modal .modal-dialog').css({'max-width': "600px"});
                        $('#callback-modal').modal('show');
                        var lat = $('#lat').val();
                        var lng = $('#lng').val();

                        var option = {
                            'map_id': 'gmaps-current',
                            'lat': lat,
                            'long': lng,
                            'skip_product_id': product_id,
                            'draggable': false,
                            'out_lat': '',
                            'out_long': '',
                        };
                        var map_curent = initMap(option);

                        if (act == 'edit') {
                            var option = {
                                'map_id': 'gmaps-edit',
                                'lat': lat,
                                'long': lng,
                                'skip_product_id': product_id,
                                'draggable': true,
                                'out_lat': '#new_lat',
                                'out_long': '#new_lng',
                            };
                            var map_edit = initMap(option);

                            $('.select2').select2({theme: "bootstrap"});
                            $('.select2_tag').select2({tags: true, theme: "bootstrap"});

                            LCKApp.selectLocation('#form-update ')
                        }
                        image_popup();
                    } else {
                        alert(data.r);
                    }
                }
            });
        })

        $(document).on('click', '.btn-history-product', function (event) {
            var product_id = $(this).data('id');
            var type = $(this).data('type');
            var act = $(this).data('act');
            skip_product_id = product_id;
            $.ajax({
                url: PRODUCT_HISTORY_EDIT_URL,
                type: 'GET',
                data: {product_id: product_id, type: type, act: act},
                success: function (data) {
                    if (data.e == 0) {
                        $('#callback-modal .modal-content').html(data.r);
                        $('#callback-modal .modal-dialog').css({'max-width': "600px"});
                        $('#callback-modal').modal('show');
                        image_popup();
                    } else {
                        alert(data.r);
                    }
                }
            });
        })

        $(document).on('click', '.show-phone-btn', function () {
            $(this).addClass('hide');
            $(this).parent().find('.show-phone').removeClass('hide');
        })

        $(document).on('click', '.show-phone', function () {
            $(this).addClass('hide');
            $(this).parent().find('.show-phone-btn').removeClass('hide');
        })
    </script>

    <script>
        function remove_image(d, type) {
            var image_id = d.parent().find('img').data('id');
            var product_id = d.parent().parent().parent().data('id');
            var _token = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                type: 'POST',
                url: '{{route('backend.products.image.remove')}}',
                data: {image_id: image_id, product_id: product_id, type: type, _token: _token},
                dataType: 'json',
                success: function (data) {
                    if (data.e == 0) {
                        d.parent().remove();
                        $('meta[name="csrf-token"]').attr('content', data._token);
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        function edit_remove_image(d, type) {
            var image_id = d.parent().find('img').data('id');
            d.parent().remove();
        }

        var _process = false;

        function upload(d, type) {

            if (_process)
                return;

            _process = true;

            var product_id = $(d).parent().parent().parent().data('id');

            // Get the selected files from the input.
            var files = d.files;

            // Create a new FormData object.
            var formData = new FormData();

            // Loop through each of the selected files.
            for (var i = 0; i < files.length; i++) {
                var file = files[i];

                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }

                // Add the file to the request.
                formData.append('file[]', file, file.name);
            }

            formData.append('product_id', product_id);
            formData.append('type', type);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(d).parent().parent().parent().find('.upload_loading').show();
            $.ajax({
                type: 'POST',
                url: '{{route('backend.products.image.upload')}}',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (data) {
                    _process = false;
                    $(d).parent().parent().parent().find('.upload_loading').hide();
                    $(d).val('');
                    if (data.e == 0) {

                        $('meta[name="csrf-token"]').attr('content', data._token);

                        $.each(data.r, function (index, item) {

                            var html = '<div class="thumbnail">\n' +
                                ' <img src="' + item.url + '" height="80" data-id="' + item.id + '" href="' + item.url + '" class="image-popup-no-margins">\n' +
                                '  <a href="javascript:;" onclick="remove_image($(this),\'' + type + '\')" class="btn_delete"><i class="fa fa-trash-o" title="xóa hình"></i></a>\n' +
                                '  <a href="javascript:;" onclick="rotate_image($(this),\'left\')" class="btn_rotate_left"><i class="fa fa-rotate-left" title="xoay trái"></i></a>\n' +
                                '  <a href="javascript:;" onclick="rotate_image($(this),\'right\')" class="btn_rotate_right"><i class="fa fa-rotate-right" title="xoay phải"></i></a>\n' +
                                '  </div>';

                            $($(d).parent().parent().parent().find('.thumbnail-outer')[0]).append($.parseHTML(html));
                            $(d).parent().parent().parent().find('.sort_btn').removeClass('d-none');
                            image_popup();
                        });
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        reorder_image();

        function reorder_image() {
            $('.reorder_img').on('click', function (e) {

                var ele = $(this).parent().parent().find(".thumbnail-outer");

                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                    $(this).parent().find(".saveReorder").addClass('d-none');
                    ele.sortable("disable");
                } else {
                    $(this).addClass('active');
                    $(this).parent().find(".saveReorder").removeClass('d-none');
                    ele.sortable({tolerance: 'pointer'});
                    ele.sortable("enable");
                }
            });

            $('.saveReorder').on('click', function (e) {

                var d = $(this);
                var type = $(this).data('type');
                var ele = $(this).parent().parent().find(".thumbnail-outer");

                var image_ids = [];
                ele.find('img').each(function () {
                    image_ids.push($(this).data('id'));
                });

                var product_id = $(this).parent().parent().data('id');

                $.ajax({
                    url: '{{route('backend.products.image.sort')}}',
                    type: 'post',
                    data: {product_id: product_id, type: type, image_ids: image_ids, _token: '{{csrf_token()}}'},
                    success: function (data) {
                        if (data.e == 0) {
                            $('meta[name="csrf-token"]').attr('content', data._token);
                            d.parent().find(".reorder_img").removeClass('active');
                            d.addClass('d-none');
                            ele.sortable("disable");
                        } else {
                            alert(data.r);
                            window.location.reload();
                        }
                    }
                });
            });
        }

        function rotate_image(d, angle) {
            var image_id = d.parent().find('img').data('id');
            var _token = $('meta[name="csrf-token"]').attr('content');
            $(d).parent().parent().parent().find('.upload_loading').show();
            $.ajax({
                type: 'POST',
                url: '{{route('backend.products.image.rotate')}}',
                data: {image_id: image_id, angle: angle, _token: _token},
                dataType: 'json',
                success: function (data) {
                    $(d).parent().parent().parent().find('.upload_loading').hide();
                    if (data.e == 0) {
                        $('meta[name="csrf-token"]').attr('content', data._token);
                        //var src = d.parent().find('img').attr('src');
                        d.parent().find('img').attr('src', data.src);
                        d.parent().find('img').attr('href', data.src);
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        function image_popup() {
            // $('.image-popup-no-margins').magnificPopup({
            //     type: 'image',
            //     closeOnContentClick: true,
            //     closeBtnInside: false,
            //     fixedContentPos: true,
            //     mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
            //     image: {
            //         verticalFit: true
            //     },
            //     zoom: {
            //         enabled: true,
            //         duration: 300 // don't foget to change the duration also in CSS
            //     }
            // });
            // $('.gallery_img').each(function () { // the containers for all your galleries
            //     $(this).magnificPopup({
            //         delegate: 'img', // the selector for gallery item
            //         type: 'image',
            //         gallery: {
            //             enabled: true
            //         }
            //     });
            // });
        }

        function edit_upload(d, type, input) {
            if (_process)
                return;

            _process = true;

            // Get the selected files from the input.
            var files = d.files;
            // Create a new FormData object.
            var formData = new FormData();
            // Loop through each of the selected files.
            for (var i = 0; i < files.length; i++) {
                var file = files[i];

                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }

                // Add the file to the request.
                formData.append('file[]', file, file.name);
            }

            formData.append('type', type);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(d).parent().parent().parent().find('.upload_loading').show();
            $.ajax({
                type: 'POST',
                url: '{{route('backend.ajax.uploadImage')}}',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (data) {
                    _process = false;
                    $(d).parent().parent().parent().find('.upload_loading').hide();
                    $(d).val('');
                    if (data.e == 0) {

                        $('meta[name="csrf-token"]').attr('content', data._token);

                        $.each(data.r, function (index, item) {

                            var html = '<div class="thumbnail">\n' +
                                ' <img src="' + item.url + '" height="80" data-id="' + item.id + '" href="' + item.url + '" class="image-popup-no-margins">\n' +
                                '  <a href="javascript:;" onclick="edit_remove_image($(this),\'' + type + '\')" class="btn_delete"><i class="fa fa-trash-o" title="xóa hình"></i></a>\n' +
                                '  <a href="javascript:;" onclick="rotate_image($(this),\'left\')" class="btn_rotate_left"><i class="fa fa-rotate-left" title="xoay trái"></i></a>\n' +
                                '  <a href="javascript:;" onclick="rotate_image($(this),\'right\')" class="btn_rotate_right"><i class="fa fa-rotate-right" title="xoay phải"></i></a>\n' +
                                '  <input name="' + input + '[]" value="' + item.id + '" type="hidden">' +
                                '  </div>';

                            $($(d).parent().parent().parent().find('.thumbnail-outer')[0]).append($.parseHTML(html));
                        });
                    } else {
                        alert(data.r);
                    }
                }
            });
        }

        $(document).on('click', '#favorite_btn', function (event) {
            var x = getChecked();
            if (!x)
                return;
            var r = confirm("Quan tâm các dự án đã chọn?");
            if (r == true) {
                $.ajax({
                    url: '{{route('backend.products.ajax.favorite')}}',
                    type: 'post',
                    data: {product_ids: val, _token: '{{csrf_token()}}'},
                    success: function (data) {
                        alert('Đã thêm vào danh sách quan tâm!');
                        //window.location.reload();
                    }
                });
            }
        });

        $(document).on('click', '#un_favorite_btn', function (event) {
            var x = getChecked();
            if (!x)
                return;
            var r = confirm("Bỏ quan tâm các dự án đã chọn?");
            if (r == true) {
                $.ajax({
                    url: '{{route('backend.products.ajax.un_favorite')}}',
                    type: 'post',
                    data: {product_ids: val, _token: '{{csrf_token()}}'},
                    success: function (data) {
                        alert('Bỏ quan tâm thành công!');
                        window.location.reload();
                    }
                });
            }
        });
    </script>
@stop