@extends('layouts.master')
@section('page_title', $website_request->website_request_name)

@section('content')

    {{ Form::open() }}
    <div class="container">
        {{ Form::page_header($website_request->website_request_name, "hours") }}

        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    @include('website._website_sidebar', compact('website_request'))
                    <div class="col-md-9 col-xs-9 detail-right-side">
                        <div class="row grid-header" id="add_mockup_link_row">
                            {{ Form::button_ex('Add mockup link', null, 'add_mockup_link_btn') }}
                        </div>
                        <div class="container" id="add_mockup_link_block">
                            <div class="row">
                                <div class="col-md-2 no-left-pad">
                                    {{ Form::row_text_stacked('title', 'Title', null ) }}
                                </div>
                                <div class="col-md-5 no-left-pad">
                                    {{ Form::row_text_stacked('url', 'Url', null ) }}
                                </div>
                            </div>
                            <div class="row bottom-margin">
                                {{ Form::button_ex('save', null, 'save_mockup_link_btn') }}
                                {{ Form::button_cancel() }}
                            </div>
                        </div>
                        <div id="mockup_link_grid">
                            @if($column_set->has_data())
                                @include('search._search_grid_table', compact('column_set'))
                            @endif
                        </div>
                        <div class="row new-feedback-div"
                             id="parent_{{$website_request->website_request}}_feedback_handle_"></div>
                        @foreach($sections as $section)
                            <div class="row">{{ Form::label_styled($section['section_name'], 'section-label section-'.$section['section_pk'].'-label', \App\Helpers\FormComponentHelper::SIZE_LARGE) }}</div>
                            @foreach($feedbacks->filter(function ($item) use ($section) { return $item->parent_pk == $section['section_pk']; }) as $feedback)
                                @include('website._feedback', ['feedback' => $feedback, 'is_read_only' => $feedback->read_only_review])
                            @endforeach
                            @if(!$loop->last)
                                <div class="section-{{$section['section_pk']}}-label">
                                    {{ Form::separator_row('grey-divider') }}
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <div class="row bt-button-row text-right">
                        @if($column_set->has_data() && $website_request->design_status === \App\Models\Website_Request::DESIGN_STATUS_MOCKUP)
                            {{ Form::button_ex('Mockup Review', "send_to_mockup_review({$website_request->website_request});") }}
                        @endif
                        @if (isset($can_add) && $can_add)
                            {{ Form::button_ex("Add Feedback",
                            "window.scrollTo(0, 0); feedback_list_manager.add_one(
                                '". $website_request->get_create_feedback_url($feedback_stage)."',
                                feedback_selector.calc_new_handle_id('".$website_request->website_request."') );", 'add_child_btn') }}
                        @endif
                        @if($website_request->design_status == \App\Models\Website_Request::DESIGN_STATUS_MOCKUP_REVIEW)
                            {{ Form::button_ex('Revise Mockup', "revise_mockup({$website_request->website_request});", 'revise-mockup') }}
                            {{ Form::button_ex('Accept Mockup', "accept_mockup({$website_request->website_request});", 'accept-mockup') }}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}
@endsection

@section('page_script')
    @include('shared_script._website_sidebar_script')
    @include('shared_script._search_script_render')
    @include('search._complex_search_parameter')
    @include('shared_script._list_manager')
    @include('shared_script._do_delete')

    <script>
        var feedback_list_manager = null;
        var feedback_selector = null;

        $(document).ready(function () {
            feedback_list_manager = new list_manager('feedback', 'Feedback');
            feedback_list_manager.set_do_delete_function('do_delete_feedback');
            feedback_list_manager.set_after_delete_function('after_delete_feedback');
            feedback_selector = new secondary_level_selector('feedback', 'parent');
            feedback_autoheight();
            $('#add_mockup_link_block').hide();
            $('#mockup_link_entry').hide();
            $('#add_mockup_link_btn').on('click', function () {
                $('#add_mockup_link_block').show();
                $('#add_mockup_link_row').hide();
            });

            // If the user has entered the title and url then presses enter, it will submit the data to the post route.
            $('#url').keypress(function (e) {
                var key = e.which;
                if (key === 13) {
                    $('#save_mockup_link_btn').click();
                }
            });

            $('#save_mockup_link_btn').on('click', function () {
                var title = $('#title').val();
                var url = $('#url').val();
                $.ajax({
                    type: "POST",
                    url: '{{ action('DesignPlanController@mockup_link_post', compact('design_plan','mockup_link')) }}',
                    data: {
                        title: title,
                        url: url,
                    },
                    success: function (result) {
                        location.reload();
                    },
                    error: post_mockup_link_error
                });

            });
            do_after_delete_fn = 'do_after_delete_mockup';
        });

        var post_mockup_link_error = function (xhr) {
            if (xhr.status === 422) // validation error
            {
                var errors = JSON.parse(xhr.responseText);
                errors = errors.errors;
                Object.keys(errors).forEach(function (k) {
                    var selector = k;
                    element = document.getElementById(selector);
                    var has_error_message = $(element).parent().find('p.validation-message').size() === 0;
                    if (has_error_message) {
                        $(element).parent().append("<p class='validation-message'>" + errors[k] + "</p>");
                        $(element).css('border-color', '#cc0000');
                        $(element).on('input', function () {
                            $(this).css('border-color', '#797979');
                            $('.validation-message').remove();
                        });
                    }
                });
            }
        };


        @if(!\App\Models\Website_Request::is_all_mockup_feedback_complete($website_request->website_request))
        $('#accept-mockup').hide();
        @else
        $('#revise-mockup').hide();

        @endif

        function do_after_delete_mockup(results) {
            $('#delete_mockup_btn_' + results.mockup_link).closest('tr').remove();
            if ($("#mockup_link_grid tr").length === 1)
                $('#mockup_link_grid').hide();
        }

        function send_to_mockup_review(website_request) {
            $.ajax({
                type: "POST",
                url: '{{ action('WebsiteRequestController@send_to_mockup_review', compact('website_request')) }}',
                data: {website_request: website_request},
                success: function (result) {
                    window.location = result.data.redirect_url;
                }
            });
        }

        function revise_mockup(website_request) {
            $.ajax({
                type: "POST",
                url: '{{ action('WebsiteRequestController@revise_mockup', compact('website_request')) }}',
                data: {website_request: website_request},
                success: function (result) {
                    window.location = result.data.redirect_url;
                }
            });
        }

        function accept_mockup(website_request) {
            $.ajax({
                type: "POST",
                url: '{{ action('WebsiteRequestController@accept_mockup', compact('website_request')) }}',
                data: {website_request: website_request},
                success: function (result) {
                    window.location = result.data.redirect_url;
                }
            });
        }

        function after_delete_feedback(result) {
            // remove the label if there are no more items in this section
            if (result.data.section != undefined) {
                var numItems = $('.section-' + result.data.section).length;
                if (numItems == 0) {
                    $('.section-' + result.data.section + '-label').remove();
                }
            }
            var website_request = '{{$website_request->website_request}}';
            $.ajax({
                type: "POST",
                url: '{{ action('WebsiteRequestController@is_feedback_complete') }}',
                data: {website_request: website_request},
                success: function (result) {
                    if (result === 'true') {
                        $('#accept-mockup').show();
                        $('#revise-mockup').hide();
                    }
                }
            });
        }

    </script>
@endsection

@section('page_style')
    @include('shared_style._grid_sort_style')
    <style>
        table.source-data-table th.sorts-by span.glyphicon-sort {
            font-size: 12px;
        }

        #wireframe {
            width: 250px;
        }

        #add_mockup_link_block {
            padding-left: 0;
        }
    </style>
@endsection