@extends('layouts.master')
@section('page_title', 'Images')
@section('content')
    @include('shared._brand_menu_3rd_active_submenu_active')

    {!! Form::model($dp, ['url' => action('DesignPackageController@save_images', compact('dp', 'business'))]) !!}
    <div class="container brand-content image-content">
        <div class="row">
            @if ($selected_images)
            {!! Form::hidden('temp_selected_image', $selected_images ,['class' => 'temp_selected_image', 'id' => 'temp_selected_image']) !!}
            @endif
            <div class="col-md-12 grey-bg curve_container remove-padding-for-bottom add-padding-for-bottom-style">
                <p><div class="row-title">Images</div></p>
                <div class="row" id="styles-container">
                    @foreach ($all_images as $image)
                        <div class="each-style-container" id="style-{{$image->visual_personality_source}}">
                            {!! Html::image($image->url) !!}
                            {!! Form::checkbox('images[]', $image->visual_personality_source , null, ['class' => 'brand-checkbox bg-fade', 'id' => 'images']) !!}
                            <label><span><span></span></span></label>
                        </div>
                    @endforeach
                </div>
            </div>
            <div id="style-footer" class="col-md-10">
                <div id="bottom-style-text" class="bottom-footer-title">IMAGES</div>
                <div id="bottom-next-button" class="bottom-footer-button">
                    @include('shared._dp_status_next')
                </div>
                <div id="vertical-bar-bottom" class="bottom-footer-divider"></div>
                <div id="place-style-images-container"></div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
@endsection
@section('page_script')
    <script>
        var image_fillers = [];
        var image_div = [];

        $(window).load(function() {

            $('.brand-checkbox').each(function() {
                $(this).attr('checked', false);
            });

        putImageSelected();
        });

        $(document).ready(function() {
            $('form').submit(function(e) {
                if (!$('#images:checked').length) {
                    e.preventDefault();
                    presentModalAlert('Oops', 'Please select at least one image.');
                } else {
                    $(this).submit();
                }
            });

            $('.brand-checkbox').on('change', function() {

                if ($(this).is(':checked')) {

                    var selected_image = $(this).prev("img");
                    var res = false;
                    if (selected_image.length > 0) {
                        var image_div_id = $(this).closest('div').attr('id');
                        var image_path = selected_image.first().attr("src");
                        res = findImagePlace(image_path, image_div_id);
                    }

                    if (!res) {
                        $(this).attr('checked', false);
                        return false;
                    }

                    $(this).closest('div').animate({backgroundColor: '#666666'}, 600);
                    $(this).parent().parent().find('.cell-label').animate({color: 'white'}, 600);

                    if ($('#temp_selected_image').val()) {
                        $('#temp_selected_image').val($('#temp_selected_image').val() + ',' + $(this).val());
                    } else {
                        $('#temp_selected_image').val($(this).val());
                    }

                } else {
                    $(this).closest('div').animate({backgroundColor: 'white'}, 600);
                    $(this).parent().parent().find('.cell-label').animate({color: '#424242'}, 600);
                    var selected_image = $(this).prev("img");
                    if (selected_image.length > 0) {
                        var image_path = selected_image.first().attr("src");
                        findImageThenRemove(image_path);
                    }

                    var str = $('#temp_selected_image').val();
                    var res = str.replace("," + $(this).val(), "");
                    res = res.replace($(this).val(), "");
                    $('#temp_selected_image').val(res);
                }
            });

            $(".place-style-image").hover(function() {
                $(this).find('.place-style-delete').toggle();
            });

            $(".place-style-delete").hide();

        });

        var count = 1;
        function findImagePlace(img_path, div_id) {
            var temp_html = '<div class="place-style-image" id="place-'+count+'" onMouseOver="showHideRemoveButton('+count+');"><div id="place-style-delete-'+count+'" onClick="removePlaceImage('+count+');" class="place-style-delete"><i class="fa fa-times-circle"></i></div> </div>';
            $("#place-style-images-container").append(temp_html);
            $("#place-"+count).css('background-image', 'url('+img_path+')');
            $("#place-style-delete-"+count).hide();
            image_fillers[count] = img_path;
            image_div[count] = div_id;
            count++;
            return true;
        }

        function showHideRemoveButton(x) {
            $("#place-style-delete-"+x).show();
            $("#place-"+x).mouseenter(function () {
                $("#place-style-delete-"+x).show();
            }).mouseleave(function () {
                $("#place-style-delete-"+x).hide();
            });
        }

        function findImageThenRemove(img_path) {
            for (var i = 0; i < image_fillers.length; i++) {
                if (img_path == image_fillers[i]) {
                    $("#place-"+i).remove();
                }
            }
        }

        function clear_selected() {
            var textures_selected = $("#temp_selected_image").val().split(',');
            var unique_images = [];
            $.each(textures_selected, function(i, el) {
                if ($.inArray(el, unique_images) === -1) unique_images.push(el);
            });
            return unique_images;
        }

        function putImageSelected() {
            if ($("#temp_selected_image").val()) {
                var temp_unique = clear_selected();
                for(var i = 0; i < clear_selected().length; i++) {
                   $('input[value="'+ temp_unique[i] +'"].brand-checkbox').click();
                }
            }
        }

        function removePlaceImage(x) {
            $("#"+image_div[x]).find('input[type="checkbox"]').click();
            image_div[x] = false;
        }
    </script>
@endsection