@extends('layouts.master')
@section('page_title', 'Website Words')
@section('content')
    @include('shared._brand_menu_3rd_active')
    {!! Form::open(['url' => action('DesignPackageController@post_website_words', compact('dp', 'business'))]) !!}
    <div class="container brand-content">
        <div class="row">
            {!! Form::hidden('temp_selected_image',$temp_val ,['class' => 'temp_selected_image', 'id' => 'temp_selected_image']) !!}
            <div class="col-md-10 col-md-offset-1 grey-bg curve_containersss">
                <p><div class="row-title">Pick three of the words below that best describe what you want people to feel about your business when they've gone to your web site.</div></p>
                <div class="row">
                    <div id="words-container" class="col-md-10 col-md-offset-1">
                        @foreach ($all_words as $word)
                            <div class="each-style-container each-words-container" id="style-{{$word->website_word}}">
                                <label for="word-{{$word->website_word}}">{{$word->website_word_name}}</label><br />
                                {!! Form::checkbox('website_words[]', $word->website_word, null, ['class' => 'brand-checkbox bg-fade', 'id' => 'website_words', 'data-id'=>$word->website_word]) !!}
                                <label><span><span></span></span></label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="row">
                    <div id="custom-words-container">
                        <label for="custom_website_words">Any other words come to mind?</label><br />
                        {!! Form::textarea('custom_website_words', $dp->custom_website_words ,['class' => 'custom_website_words', 'id' => 'custom_website_words', 'rows'=>3]) !!}
                    </div>
                </div>
                <div id="bottom-next-button-words" class="row button-row">
                    <!--<input type="submit" class="btn-brand wide" value="Next">-->
                    @include('shared._dp_status_next_black')
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
    <input type="hidden" id="refreshed" value="no">
@endsection
@section('page_script')
    <script>
        var image_fillers = [];
        var image_div = [];
        var total_selected = 0;

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

        $(document).ready(function() {
            checkIfBackButton();

            $('form').submit(function(e) {
                var temp_unique = clear_selected();
                $('#temp_selected_image').val(temp_unique);
                //get all the selected words
                var selected_words = "";
                $('#words-container input:checked').each(function() {
                    selected_words += $(this).attr('value') + ",";
                });
                selected_words = selected_words.slice(0, -1); //to delete the last comma
                if (selected_words.length == 0) {
                    e.preventDefault();
                    presentModalAlert('Oops', 'Please select at least one website word.');
                }
                $(this).submit();
            });

            //getAllExistingWords();
            $('.brand-checkbox').on('change', function() {
                if ($(this).is(':checked')) {
                    if (total_selected >= 3) {
                        $(this).attr('checked', false);
                        return;
                    }
                    total_selected++;
                    $(this).closest('div').css({color: '#FFFFFF'});
                    $(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 {
                    if (total_selected<=0) {
                        return;
                    }
                    total_selected--;
                    $(this).closest('div').css({color: '#666666'});
                    $(this).closest('div').animate({backgroundColor: 'white'}, 600);
                    $(this).parent().parent().find('.cell-label').animate({color: '#424242'}, 600);

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

        function getAllExistingWords() {
            var existing_website_words = "{{$temp_val}}";
            //existing_website_words = existing_website_words.slice(0,-1);
            var existing_words_array = existing_website_words.split(",");
            for (var x=0; x<existing_words_array.length; x++) {
                if (existing_words_array[x].length > 0) {
                    //highlight words that was loaded from the database
                    total_selected++;
                    $("#style-"+existing_words_array[x]).css({color: '#FFFFFF'});
                    $("#style-"+existing_words_array[x]).css({backgroundColor: '#666666'}, 600);
                    $("#style-"+existing_words_array[x]).find('input').attr('checked', true);
                }
            }
        }

        var _token = "{{ csrf_token() }}";
        var design_package_atom = "{{$dp->design_package}}";
        function saveWebsiteWords() {
            var temp_unique = clear_selected();
            $('#temp_selected_image').val(temp_unique);
            //get all the selected words
            var selected_words = "";
            $('#words-container input:checked').each(function() {
                selected_words += $(this).attr('value') + ",";
            });
            selected_words = selected_words.slice(0, -1); //to delete the last comma
            if (selected_words.length == 0) {
                presentModalAlert('Oops', 'Please select at least one website word.');
                return;
            }
            //post to the database
            var custom_website_words = $("#custom_website_words").val();


            $.post("{{url('/brand/design/website_words')}}", {"design_package_atom":design_package_atom, "selected_words":selected_words, "custom_website_words":custom_website_words, "_token":_token }, function(result) {
                if (result.code) {
                    window.location = result.redirect_url;
                }
            });
        }

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

        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();
                //console.log(temp_unique);
                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
@section('page_style')
    <style>
        #custom-words-container {
            text-align: center;
            width: 76%;
            margin: 0 auto;
            background-color: #FFFFFF;
            padding: 10px 0 20px 0;
        }
        #bottom-next-button-words {
            margin-top: 20px;
            padding-bottom: 0;
        }
    </style>
@endsection