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

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

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

                <div class="row" id="styles-container">
                    @foreach ($all_layouts as $style)
                        <div class="each-style-container" id="style-{{$style->visual_personality_source}}">
                            <a href="{!! $style->website_url !!}" target="_blank" rel="nofollow">{!! Html::image($style->url, $style->visual_personality_source_name ,['class' => 'layout-image-pop-up', 'id' => 'layout-image-pop-up-'.$style->visual_personality_source.'','data-website_url' => $style->website_url, 'data-layout_name' => $style->visual_personality_source_name ] ) !!}</a>
                            {!! Form::radio('layouts', $style->visual_personality_source, null, ['class' => 'color-radio bg-fade']) !!}
                            <label><span class="radio-button-checked"><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">LAYOUTS</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() !!}
    <div class="modal fade design_package_alert design_package_alert_layout" tabindex="-1" role="dialog" aria-labelledby="design_package_alert" id="design_package_alert">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button"><i class="fa fa-times"></i></button>
                    <h4 class="modal-title">Oops, Something went wrong.</h4>
                </div>
                <div class="modal-body">
                    <p>Please select a layout</p>
                </div>
                <div class="modal-footer"><button data-dismiss="modal" class="btn btn-default" type="button">Close</button></div>
                @if ($selected_layout)
                    <input type="hidden" value="{!! $selected_layout->visual_personality_source !!}" name="temp" id="temp"/>
                @endif
            </div>
        </div>
    </div>

    <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() {

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

            @if (isset($selected_layout->visual_personality_source))
            var temp_value = $('#temp').val();
            var selected_checkbox = $("input[value='"+temp_value+"'].color-radio");
            selected_checkbox.click();
            @endif

        });

        $(document).ready(function() {


            $( "#form-layout" ).submit(function( event ) {
                if ( $('input[name="layouts"]').is(':checked')) {
                    return;
                }
                presentModalAlert('Oops', 'Please select a layout.');
                event.preventDefault();
            });

            /*
             $('.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();
             })
             });
             });
             */

            $('.color-radio').on('change', function() {
                $(this).closest('div').animate({backgroundColor: '#666666'}, 600);
                $(this).parent().siblings().animate({backgroundColor: '#FFF'}, 600);

                if ($(this).is(':checked')) {
                    $('.radio-button-checked').removeClass('radio-button-checked-bg');
                    $(this).next('label').find('.radio-button-checked').addClass('radio-button-checked-bg');

                   /* var selected_image = $(this).prev("img"); */
                    var selected_image = $(this).siblings("a").children('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).parent().parent().find('.cell-label').animate({color: 'white'}, 600);
                } else {

                    $(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);
                    }
                }
            });
            $(".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").html(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 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="radio"]').prop('checked', false);
            image_div[x] = false;
        }

        var _token = "{{ csrf_token() }}";

        function save_design_package_layout() {
            //post to the database

            if ($('.color-radio').is(':checked')) {
                var selected_layout = $('.color-radio:checked').attr('value');
                $('#form-layout').submit();

                $('#temp').val(selected_layout);

            } else {

                $('#design_package_alert').modal('show');

            }


        }
    </script>
@endsection