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

@section('content')
    <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="white-bg">
                            <div class="row">
                                {{ Form::label_title('Wireframes') }}
                            </div>
                            @if (\App\Providers\AuthServiceProvider::user_has_permission(\App\Providers\AuthServiceProvider::CSMCCT))
                                <div class="row bottom-margin" id="add_btn_row">
                                    {{ Form::button_ex("Add Wireframe Image", "add_wireframe_image()", "add_wireframe" ) }}
                                </div>
                            @endif
                            <div class="row" id="new_wireframe" style="display: none;">
                                @include('shared._upload_file', [
                                    'upload_url' => $website_request->upload_wireframe_url,
                                    'partial' => 'website._wireframe_edit'
                                ])
                            </div>
                            @foreach($website_request->_wireframe as $wireframe)
                                <div class="row wireframe-row" id="view_wireframe_{{$wireframe->wireframe}}">
                                    <div class="col-md-8 no-left-pad">
                                        {{ Form::label_title($wireframe->title) }}
                                    </div>
                                    <div class="col-md-2 text-center">
                                        <a href="{{ $wireframe->download_url }}">
                                            {{ HTML::image($wireframe->thumbnail_url, null, [
                                                'class' => 'wireframe-thumbnail',
                                            ]) }}
                                        </a>
                                    </div>
                                    <div class="col-md-2 no-padding text-right" style="display: inline-block">
                                        {{ Html::image('/img/blog.png', null, [
                                            'class' => 'wireframe-edit',
                                            'data-id' => $wireframe->wireframe,
                                            ]) }}
                                        @if (\App\Providers\AuthServiceProvider::user_has_permission(\App\Providers\AuthServiceProvider::CSMCCT))
                                            {{ Html::image('/img/remove_image.png', null, [
                                                'class' => 'wireframe-remove ',
                                                'data-deleteurl' => $wireframe->delete_url
                                                ])
                                            }}
                                        @endif
                                    </div>
                                </div>
                                {{ Form::open(['id' => 'form_wireframe_'.$wireframe->wireframe]) }}
                                <div class="row wireframe-row edit-wireframe-row" style="display: none"
                                     id="edit_wireframe_{{$wireframe->wireframe}}">
                                    <div class="col-md-8 no-left-pad">
                                        {{ Form::text_ex('title', $wireframe->title, \App\Helpers\FormComponentHelper::SIZE_LARGE) }}
                                    </div>
                                    <div class="col-md-4 no-padding text-right">
                                        {{ Form::button_ex('Save', "save_wireframe_edit($wireframe->wireframe)", null, null, \App\Helpers\FormComponentHelper::SIZE_TINY) }}
                                        {{ Form::button_ex('Cancel', "cancel_wireframe_edit($wireframe->wireframe)", null, null, \App\Helpers\FormComponentHelper::SIZE_TINY) }}
                                    </div>
                                </div>
                                {{ Form::close() }}
                                @if(!$loop->last)
                                    {{ Form::separator_row_bottom("grey-divider") }}
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    @include('shared_script._website_sidebar_script')
    @include('shared_script._do_delete')
    @include('shared_script._upload_file_script', ['bucket' => config('aws.buckets.intake'),
        'upload_url' => $website_request->upload_wireframe_url, 'update_url' => $website_request->update_wireframe_url])

    <script>
        $(document).ready(function () {
            init_upload_file('cancel_wireframe_add', 'get_wireframe_inputs');
        });

        $('.wireframe-remove').on('click', function (e) {
            var delete_url = $(this).attr('data-deleteurl');
            e.preventDefault();
            delete_item("Delete Wireframe", "Are you sure you want to delete this wireframe?", delete_url)
        });

        $('.wireframe-edit').on('click', function (e) {
            var pk = $(this).attr('data-id');
            $('#view_wireframe_' + pk).hide();
            $('#edit_wireframe_' + pk).show();
        });

        function add_wireframe_image() {
            $('#add_btn_row').hide();
            $('#new_wireframe').show();
            $('.upload-wrap').show();
        }

        function cancel_wireframe_add($post_upload) {
            if ($post_upload)
                window.location.reload();
            else {
                $('#add_btn_row').show();
                $('#new_wireframe').hide();
            }
        }

        function get_wireframe_inputs() {
            return {
                title: document.getElementById("title").value
            };
        }

        function save_wireframe_edit(pk) {
            var data = $('#form_wireframe_' + pk).serialize();
            var update_url = "{{ action('WebsiteRequestController@wireframe_update', [
                'website_request' => $website_request->website_request,
                'wireframe' => 'XXX'
                ]) }}".replace('XXX', pk);
            $.ajax({
                dataType: 'json',
                url: update_url,
                data: data,
                method: 'POST',
                success: function (response) {
                    window.location.reload();
                }
            });
        }

        function cancel_wireframe_edit($pk) {
            $('#edit_wireframe_' + $pk).hide();
            $('#view_wireframe_' + $pk).show();
        }

    </script>
@endsection

@section('page_style')
    @include('shared_style._upload_file_style')
    <style>
        .wireframe-thumbnail {
            height: 40px;
        }

        .wireframe-thumbnail:hover {
            cursor: pointer;
        }

        .upload-wrap {
            border: 1px solid #696969;
        }

        .wireframe-row {
            height: 60px;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .wireframe-edit,
        .wireframe-remove {
            height: 23px;
            display: inline;
        }

        .wireframe-edit:hover,
        .wireframe-remove:hover {
            cursor: pointer;
        }

        .edit-wireframe-row {
            height: 70px;
        }
    </style>
@endsection