@extends('layouts.master')
@section('page_title', 'Color Families')
@section('content')
    @include('shared._brand_menu_3rd_active_submenu_active')
    <div class="container brand-content dp-color-content">
        <div class="row">
            <div class="col-md-12 grey-bg curve_container add-padding-for-bottom-style">
                <p class="brand-container-header">Colors</p>
                <p class="section-description" style="text-align: center">Choose a color family you like or the nearest colors to those of your business.</p>
                <div id="tools-table-row" class="row">
                    @foreach ($all_styles as $style)
                        <a href="{{action('DesignPackageController@color_narrow', ['business' => $business, 'dp' => $dp, 'color' => $style->visual_personality_source_name])}}">
                            <div class="color-container">
                            {!! Html::image($style->url) !!}
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            @if ($colors_selected)
                <div id="style-footer" class="col-md-10">
                    <div id="bottom-style-text" class="bottom-footer-title">COLORS</div>
                    <div id="bottom-next-button" class="bottom-footer-button">
                        <!--@include('shared._dp_status_next')-->
                        <input type="hidden" name="colors_selected" id="colors_selected" value='{{ $colors_selected }}'>
                        <input type="hidden" name="colors_selected_atom" id="colors_selected_atom" value='{{ $colors_selected_atom }}'>
                    </div>
                    <!--<div id="vertical-bar-bottom" class="bottom-footer-divider"></div>-->
                    <div id="place-style-images-container"></div>
                </div>
            @endif
        </div>
    </div>
@endsection
@section('page_script')
    <script>
        $(document).ready(function() {
            $('.color-container').hover(
                    function(e) {
                        $(this).animate({backgroundColor: '#666666'}, 600);
                    },
                    function(e) {
                        $(this).animate({backgroundColor: 'white'}, 600);
                    }
            );
            putImageSelected();
        });

        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-image',img_path);
            $("#place-"+count).attr('data-div_id',div_id);
            $("#place-style-delete-"+count).hide();
            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 removePlaceImage(x) {
            var str = $('#colors_selected').val();
            var res = str.replace("*" +  $("#place-"+x).data('image') , "");
            res = res.replace($("#place-"+x).data('image'), "");
            $('#colors_selected').val(res);

            var str2 = $('#colors_selected_atom').val();
            var res2 = str2.replace("*" +  $("#place-"+x).data('div_id'), "");
            res2 = res2.replace($("#place-"+x).data('div_id'), "");
            $('#colors_selected_atom').val(res2);

            $("#place-"+x).remove();
        }

        function putImageSelected() {
            if ($("#colors_selected").val()) {
                var colors_selected = $("#colors_selected").val().split('*');
                var colors_selected_atom = $("#colors_selected_atom").val().split('*');
                for(var x=0; x < colors_selected.length; x++) {
                    if (colors_selected[x]) {
                        findImagePlace(colors_selected[x], colors_selected_atom[x]);
                    }
                }
            }
        }

    </script>
@endsection