@extends('layouts.master')
@section('page_title', 'Colors')
@section('content')
    @include('shared._brand_menu_3rd_active_submenu_active')
    {!! Form::open(['url' => action('DesignPackageController@save_colors', compact('business', 'dp'))]) !!}
    <div class="container brand-content dp-color-narrow-content">
        <div class="row">
            <div class="col-md-12 grey-bg curve_container remove-padding-for-bottom add-padding-for-bottom-style">
                <p class="brand-container-header">Colors</p>
                <p class="section-description">Choose the color or colors you like.</p>
                <div class="row" id="styles-container">
                    @foreach ($selected_colors as $selected_color)
                        <div class="each-style-container" style="position: relative; text-align: center" id="{{$selected_color->visual_personality_source}}">
                            <span class="font-color-family-name {{ ($color == 'whites' || $color == 'yellows' ? 'black' : 'white') }}">{{$selected_color->visual_personality_source_name}}</span>
                            {!! Html::image($selected_color->url) !!}
                            {!! Form::checkbox('colors[]', $selected_color->visual_personality_source, null, ['class' => 'brand-checkbox bg-fade', 'id' => 'colors']) !!}
                            <label><span><span></span></span></label>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid dp-color-narrow-content-tray dp-color-narrow-content-{!! $dp->dp_status ? 'review' : 'next' !!}">
        <div id="style-footer" class="row">
            <div id="bottom-style-text" class="col-lg-1">COLORS</div>
            <div id="place-style-images-container"></div>
            <div id="bottom-next-button">
                <input name="more" type="submit" class="btn-brand button-next-style btn-more-colors" id="choose-more-colors" value="Pick More Colors">
                @include('shared._dp_status_next')
                <input type="hidden" name="colors_selected" id="colors_selected" value='{{ $colors_selected }}'>
                <input type="hidden" name="selected_color" id="colors_selected_atom" value='{{ $colors_selected_atom}}'>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
@endsection
@section('page_script')
    <script>
        var image_fillers = [];
        var image_div = [];

        $(window).load(function() {

            tray_width();

            $(window).resize(function() {
                tray_width();
            })
        });

        $(document).ready(function() {
            $('.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 ($('#colors_selected').val() && $('#colors_selected_atom').val()) {
                        $('#colors_selected').val($('#colors_selected').val() + '*' +image_path);
                        $('#colors_selected_atom').val($('#colors_selected_atom').val() + '*' + $(this).val());
                    }
                    else {
                        $('#colors_selected').val(image_path);
                        $('#colors_selected_atom').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 = $('#colors_selected').val();
                    var res = str.replace("*" + image_path, "");
                    res = res.replace(image_path, "");
                    res = res.replace(/^\*/,"");
                    $('#colors_selected').val(res);

                    var str2 = $('#colors_selected_atom').val();
                    var res2 = str2.replace("*" + $(this).val(), "");
                    res2 = res2.replace($(this).val(), "");
                    res2 = res2.replace(/^\*/,"");
                    $('#colors_selected_atom').val(res2);
                }
            });
            $(".place-style-image").hover(function() {
                $(this).find('.place-style-delete').toggle();
            });
            $(".place-style-delete").hide();

            $('#next-to-icon').click(function (e) {
                e.preventDefault();
                var _token = "{{ csrf_token() }}";
               // var design_package_atom = "";
                if ($("#colors_selected_atom").val()) {
                    $(this).closest("form").submit();
                }
                else {
                    presentModalAlert('Oops', 'Please select at least 1 color.');
                }
            });

            putImageSelected();

            tray_width();
        });

        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();
            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) {
            var str = $('#colors_selected').val();
            var res = str.replace('*' + $("#place-"+x).data('image'), "");
            res = res.replace($("#place-"+x).data('image'), "");
            res = res.replace(/^\*/,"");
            $('#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'), "");
            res2 = res2.replace(/^\*/,"");
            $('#colors_selected_atom').val(res2);

            $("#place-"+x).remove();
            $("#"+image_div[x]).animate({backgroundColor: 'white'}, 600);
            $("#"+image_div[x]).find('input[type="checkbox"]').prop('checked', false);
            image_div[x] = false;
        }

        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]) {
                        $("#"+colors_selected_atom[x]).css({color: '#FFFFFF'});
                        $("#"+colors_selected_atom[x]).animate({backgroundColor: '#666666'}, 600);
                        $("#"+colors_selected_atom[x]).find('input').attr('checked', true);
                        $("#"+colors_selected_atom[x]).find('.image-style-holder').css('background-image');
                        findImagePlace(colors_selected[x], colors_selected_atom[x]);
                    }
                }
            }
        }

        function tray_width() {
            var window_width = $(window).outerWidth();
            var label_width = $('#bottom-style-text').outerWidth();
            var next_button_width = $('#bottom-next-button').outerWidth();

            $('#place-style-images-container').width(window_width - (label_width + next_button_width + 60));
        }

    </script>
@endsection