@extends('layouts.master')
@section('page_title', 'Styles')
@section('content')
    @include('shared._brand_menu_3rd_active')
    {!! Form::open(['url' => action('DesignPackageController@saveStyle', compact('dp', 'business'))]) !!}
    <div class="container brand-content styles-content">
        <div class="row">

            <br />
<b>Notice</b>:  Undefined variable: existing_styles in <b>/var/www/html/fuse2/resources/views/brand/styles.blade.php</b> on line <b>11</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/fuse2/resources/views/brand/styles.blade.php</b> on line <b>11</b><br />
            {!! Form::hidden('temp_selected_image',$temp_val ,['class' => 'temp_selected_image', 'id' => 'temp_selected_image']) !!}

            <div class="col-md-12 grey-bg curve_container remove-padding-for-bottom add-padding-for-bottom-style">

                <p><div class="row-title">Styles</div></p>

                <div class="row" id="styles-container">
                    @foreach ($all_styles as $style)
                        <div class="each-style-container" id="style-{{$style->visual_personality_source}}">

                            <a href="{!! $style->website_url !!}" target="_blank" rel="nofollow"><div class="image-style-holder layout-image-pop-up image-style-clickable" style="background-image: url('{{$style->url}}');" id="layout-image-pop-up-{{$style->visual_personality_source}}" data-website_url="{{$style->website_url}}" data-layout_name="{{$style->visual_personality_source_name}}"></div></a>

                            {!! Form::checkbox('selected_styles[]', $style->visual_personality_source, null, ['class' => 'brand-checkbox bg-fade']) !!}
                            <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">STYLES</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() !!}
    <input type="hidden" id="refreshed" value="no">

    <div class="modal fade layout-preview-modal" id="layout-preview-modal" tabindex="-1" role="dialog" aria-labelledby="layout-preview-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="embed-responsive embed-responsive-4by3">
                        <div class="row" id="loader-wrapper"><div class="col-lg-12 center-block"><h5>Please Wait</h5></div><div class="col-lg-12"><i id="modal_loader" class="fa fa-cog fa-spin"></i></div></div>
                        <iframe id="layout-preview-modal-content" class="embed-responsive-item"></iframe>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@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() {
            checkIfBackButton();

            $('form').submit(function(e) {
                /*if (!$('#icons:checked').length) {
                 e.preventDefault();
                 presentModalAlert('Oops', 'Please select at least one word.');
                 } else {
                 $(this).submit();
                 }*/
                //get all the selected words
                var selected_styles = "";
                $('#styles-container input:checked').each(function() {
                    selected_styles += $(this).attr('value') + ",";
                });
                selected_styles = selected_styles.slice(0, -1); //to delete the last comma
                if (selected_styles.length == 0) {
                    e.preventDefault();
                    presentModalAlert('Oops', 'Please select at least one style.');
                }
                $(this).submit();
            });

            //getAllExistingStyles();
            $('.brand-checkbox').on('change', function() {
                if ($(this).is(':checked')) {

                    var selected_image = $(this).prev("a").find('div');
                    var bg_url = selected_image.css('background-image');
                    selected_image = bg_url.replace('url(','').replace(')','');
                    var res = false;
                    var image_path;

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

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

                    $(this).closest('.each-style-container').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('.each-style-container').animate({backgroundColor: 'white'}, 600);
                    $(this).parent().parent().find('.cell-label').animate({color: '#424242'}, 600);
                    //var selected_image = $(this).prev("img");
                    var selected_image = $(this).prev("a").find('div');
                    var bg_url = selected_image.css('background-image');
                    selected_image = bg_url.replace('url(','').replace(')','');
                    if (selected_image.length > 0) {
                        image_path = selected_image;
                        findImageThenRemove(image_path);
                    }

                    var str = $('#temp_selected_image').val();
                    var res = str.replace("," + $(this).val(), "");
                    res = res.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();




            /*
            $('.layout-image-pop-up').each(function() {
                $(this).click(function() {
                    $('#gridSystemModalLabel').text($(this).data('layout_name'));
                    $('#layout-preview-modal-content').attr('src',$(this).data('website_url'));
                    $('.layout-preview-modal').modal('show');

                    $('#layout-preview-modal-content').load(function() {
                        $('#layout-preview-modal-content').show();
                    });

                    $('.layout-preview-modal').on('hidden.bs.modal', function () {
                        $('#layout-preview-modal-content').hide();
                        $('#modal_loader').show();
                    })
                });
            });
            */




        });

        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-"+count).attr('data-div_id',div_id);
            $("#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 x=0; x<image_fillers.length; x++) {
                if (img_path == image_fillers[x]) {
                    $("#place-"+x).remove();
                }
            }
        }
        function removePlaceImage(x) {
            /*$("#place-"+x).remove();
            $("#"+image_div[x]).animate({backgroundColor: 'white'}, 600);
            $("#"+image_div[x]).find('input[type="checkbox"]').prop('checked', false);
            image_div[x] = false;*/
            var content_val = $('#place-style-delete-'+x).parent().attr('data-div_id');
            $('input[value="'+content_val+'"].brand-checkbox').click();
        }

        var _token = "{{ csrf_token() }}";
        var design_package_atom = "{{$dp->design_package}}";
        function saveStyles() {
            //get all the selected words
            var selected_styles = "";
            $('#styles-container input:checked').each(function() {
                selected_styles += $(this).attr('value') + ",";
            });
            selected_styles = selected_styles.slice(0, -1); //to delete the last comma
            if (selected_styles.length == 0) {
                presentModalAlert('Oops', 'Please select at least one style.');
                return;
            }
            //post to the database
            $.post("{{url('/brand/design/style')}}", {"design_package_atom":design_package_atom, "selected_styles":selected_styles, "_token":_token }, function(result) {
                if (result.code) {
                    window.location = "{{url('/')}}/brand/design/"+design_package_atom+"/layout";
                }
            });
        }

        function getAllExistingStyles() {
            var existing_styles = "<br />
<b>Notice</b>:  Undefined variable: existing_styles in <b>/var/www/html/fuse2/resources/views/brand/styles.blade.php</b> on line <b>245</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/var/www/html/fuse2/resources/views/brand/styles.blade.php</b> on line <b>245</b><br />
";
            existing_styles = existing_styles.slice(0,-1);
            var existing_styles_array = existing_styles.split(",");
            for (var x=0; x<existing_styles_array.length; x++) {
                if (existing_styles_array[x].length > 0) {
                    //highlight words that was loaded from the database
                    $("#style-"+existing_styles_array[x]).css({color: '#FFFFFF'});
                    $("#style-"+existing_styles_array[x]).animate({backgroundColor: '#666666'}, 600);
                    $("#style-"+existing_styles_array[x]).find('input').attr('checked', true);
                    var temp_image = $("#style-"+existing_styles_array[x]).find('.image-style-holder').css('background-image');
                    var selected_image = temp_image.replace('url(','').replace(')','');
                    findImagePlace(selected_image, "style-"+existing_styles_array[x]);
                }
            }
        }

        function checkIfBackButton() {
            var e=document.getElementById("refreshed");
            if (e.value=="no")e.value="yes";
            else {e.value="no";/*location.reload();*/}
        }

        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 x=0; x < clear_selected().length; x++) {
                    $('input[value="'+ temp_unique[x] +'"].brand-checkbox').click();
                }
            }

        }

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