@extends('layouts.public-base', ['title' => 'View Draft', 'sidebar' => 'no', 'is_inner_page' => true, 'is_draft_preview' => true, 'back' => getRoute('project.show', $draft->project_id), 'use_old_js' => true])
{{-- @include('templates.handlebar.comment_template')
@section('css')
<link rel="stylesheet" type="text/css"
    href="{{ asset('assets/front/common/css/jquery.mentionsInput.css?v='.time()) }}" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="screen">
<style>
    #wrapper {
        padding-left: 0px;
    }

    #hubble-container {
        position: relative;
        /* cursor: crosshair; */
    }

    .circle {
        position: absolute;
        background: rgba(255, 0, 0, 0.6);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        /* use translate instead of JS calculations */
    }

    .selected .circle {
        cursor: pointer;
    }


    .task-completed {
        background: #000;
        display: inline-block !important;
        padding: 4px 10px !important;
        border-radius: 15px;
        color: #fff !important;
    }

    .dotComment.arrowdowns {
        margin-bottom: 45px;
        margin-left: 20px;
        margin-top: 20px;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .topposition::after {
        transform: rotate(-135deg) !important;
        top: -10px !important;
    }

    .dotComment {
        position: absolute;
        bottom: 100%;
        margin: auto;
        background-color: #ffffff;
        padding: 15px;
        min-width: 350px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
        border-radius: 0px;
        color: #000;
    }

    .arrowdowns:after {
        content: '';
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        left: 30px;
        width: 21px;
        height: 20px;
        background: #fff;
        transform: rotate(45deg);
        border-right: 1px solid rgba(204, 204, 204, 0.5);
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
        bottom: -9px;
    }

    .openchat {
        transition: 1s;
        width: auto !important;
        z-index: 9999999999 !important;
        padding: 0 !important;
    }

    .posone1 {
        position: absolute;
        left: -44px;
        top: 30px;
    }

    .topposition {
        position: relative;
    }

    .item-slides {
        border-radius: 10px;
    }

    .comment-point-3 .make-comment {
        text-align: left;
    }

    .comment-point-2 {
        cursor: pointer;
    }

    .categories-selection {
        height: auto;
    }

    .marker {
        width: 27px;
        height: 40px;
        position: absolute;
        left: -13px;
        top: -35px;
        font-size: 12px;
        font-weight: bold;
        line-height: 25px;
        letter-spacing: -1px;
        text-align: center;
        color: #fff;
    }

    .marker.black {
        background: url(/icon/marker_black.png);
    }
</style>
@endsection --}}
@section('content')

{{-- <div id=""> --}}
    {{-- <div class="overlay"></div> --}}

    {{-- <div id="">
        @include('admin.projects.drafts.components.draft-header')
        <!----------Page content----------->
        <div class="dash-project d-flex" id="wrap_2">
            <section class="famous-design-section famous">
                @if ($draft->project->project_type == 2)
                @include('admin.projects.drafts.components.content-preview')
                @elseif($draft->project->project_type == 3)
                @include('admin.projects.drafts.components.video-preview')
                @else
                @include('admin.projects.drafts.components.design-preview')
                @endif
            </section>
            <!-- Sidebar -->
            <nav class="navbar-inverse" id="sidebar-comment-wrapper" role="navigation">
                <div class="famous-design-sidebar">
                    <div class="fd-sidebar-topbar d-flex justify-content-between py-2">
                        <ul class="nav nav-pills">

                            @if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="pill" href="#comment"><i
                                        class="material-icons comment_icon">chat_bubble</i><span
                                        class="famous-tab-items">Comment</span></a>
                            </li>
                            @endif

                            @if(!$view_only)
                            @auth(getCurrentGuard())
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#share"><i
                                        class="material-icons">share</i><span class="famous-tab-items">Share</span></a>
                            </li>
                            @endauth
                            <li class="nav-item">
                                <a class="nav-link @if (isAnonymousUser() && !hasPermissionInvitedUser('add_comment')) active @endif"
                                    data-toggle="pill" href="#info"><i class="material-icons">list_alt</i><span
                                        class="famous-tab-items">Info</span></a>
                            </li>
                            @endif
                        </ul>
                    </div>
                    <div class="tab-content famous-tab-items">
                        @if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
                        <livewire:comment.comment-component :messageId="$draft->id" :messageType="get_class($draft)"
                            isDraft="true" :projectId="$draft->project_id" />
                        @endif

                        @if(!$view_only)
                        @auth(getCurrentGuard())
                        <livewire:share.share-component :projectId="$draft->project_id" :draftId="$draft->id" />
                        @endauth
                        <div class="tab-pane fade @if (isAnonymousUser() && !hasPermissionInvitedUser('add_comment')) active show @endif"
                            id="info">
                            <x-project.project-information :projectId="$draft->project_id" isDraft="true">
                                <x-slot name="info_title">
                                    Project Details
                                </x-slot>
                                <x-slot name="attachments_title"></x-slot>
                            </x-project.project-information>
                        </div>
                        @endif
                    </div>
                </div>
            </nav>
        </div>

        @if (getUser() && !isAnonymousUser())
        <livewire:share.invite-modal :projectId="$draft->project_id" :draftId="$draft->id" />
        @endif

    </div> --}}
    <div class="projects_listing project_draft">
        <div class="row">
            <div class="col-md-9">
                <div class="project_view">
                    <div class="row">
                        @if (isset($draft->project) && $draft->project->project_type == 2)
                            @include('admin.projects.drafts.components.content-preview')
                        @elseif(isset($draft->project) && $draft->project->project_type == 3)
                            @include('admin.projects.drafts.components.video-preview')
                        @else
                            @include('admin.projects.drafts.components.design-preview')
                        @endif
                    </div>
                </div>
            </div>
    
            <div class="col-md-3">
                {{-- @include('customer.projects.project-sidebar', ['message_id' => $draft->id, 'message_type' => get_class($draft), 'project' => $draft]) --}}
                {{-- <nav class="navbar-inverse" id="sidebar-comment-wrapper" role="navigation"> --}}
                    <div class="card chat-card mt-0">
                        {{-- <div class="famous-design-sidebar"> --}}
                            <div class="fd-sidebar-topbar d-flex justify-content-between py-2">
                                <ul class="nav nav-pills">
        
                                    @if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="pill" href="#comment"><i
                                                class="material-icons comment_icon">chat_bubble</i><span
                                                class="famous-tab-items">Comment</span></a>
                                    </li>
                                    @endif
        
                                    @if(!$view_only)
                                    @auth(getCurrentGuard())
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="pill" href="#share"><i
                                                class="material-icons">share</i><span class="famous-tab-items">Share</span></a>
                                    </li>
                                    @endauth
                                    <li class="nav-item">
                                        <a class="nav-link @if (isAnonymousUser() && !hasPermissionInvitedUser('add_comment')) active @endif"
                                            data-bs-toggle="pill" href="#info"><i class="material-icons">list_alt</i><span
                                                class="famous-tab-items">Info</span></a>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                            <div class="tab-content famous-tab-items">
                                <div class="tab-pane active show" id="comment">
                                    @if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
                                    <livewire:comment.comment-component :messageId="$draft->id" :messageType="get_class($draft)"
                                        isDraft="true" :projectId="$draft->project_id" />
                                    @endif
                                </div>
                                @if(!$view_only)
                                @auth(getCurrentGuard())
                                <livewire:share.share-component :projectId="$draft->project_id" :draftId="$draft->id" />
                                @endauth
                                <div class="tab-pane fade @if (isAnonymousUser() && !hasPermissionInvitedUser('add_comment')) active show @endif"
                                    id="info">
                                    <div class="chat-Inner admin-section-height">
                                    <x-project.project-information :projectId="$draft->project_id" isDraft="true">
                                        <x-slot name="info_title">
                                            Project Details
                                        </x-slot>
                                        <x-slot name="attachments_title"></x-slot>
                                    </x-project.project-information>
                                    </div>
                                </div>
                                @endif
                            </div>
                        {{-- </div> --}}
                {{-- </nav> --}}
                </div>
            </div>
        </div>
    </div>
    @if ($draft->getFeedbacks->isEmpty() && isUser(getUser()))
    <div class="chat-setup">
        <section class="chatbox-popup">
            <div class="d-flex justify-content-between ">
                <div class="d-flex">
                    <img class="minireviw-img" src="{{ asset('assets/front/common/images/Group-1521.png') }}">
                    <div class="mini-review-text pl-2">
                        <h6 class="fmt-head">Famous T-Shirt...</h6>
                        <p class="m-0 sye-para">Share your experience</p>
                        <div class="review-smily">
                            <span class="px-2" data-toggle="modal" data-target="#feeback_modal"><img
                                    src="{{ asset('assets/front/common/images/0.svg') }}" alt="..."></span>
                            <span class="px-2" data-toggle="modal" data-target="#feeback_modal"><img
                                    src="{{ asset('assets/front/common/images/2.svg') }}" alt="..."></span>
                            <span class="px-2" data-toggle="modal" data-target="#feeback_modal"><img
                                    src="{{ asset('assets/front/common/images/3.svg') }}" alt="..."></span>
                        </div>
                    </div>
                </div>
                <div>
                    <span class="close_icn material-icons close_feedback_box">close</span>
                </div>
            </div>
        </section>
    </div>
    <livewire:draft.feedback-form :projectId="$draft->project_id" :draftId="$draft->id" />
    @endif
{{-- </div> --}}

@if (isAnonymousUser())
<livewire:draft.ask-for-name />
@endif
@include("inc.logo-loader")
@include('customer.modals.message-modal')
@endsection
@push('liveScript')
<script>
    var project_id = '{{$project_id}}';
        var draft_id = '{{$id}}';
</script>
{{-- <script src="{{asset('assets/front/common/js/next-prev.js?v='.time())}}"></script> --}}
<script rel="nofollow" src="{{asset('assets/front/js/jquery.fancybox.js?v='.time())}}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/fancy-file-uploader/jquery.ui.widget.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/fancy-file-uploader/jquery.fileupload.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/plugins/fancy-file-uploader/jquery.iframe-transport.js') }}">
</script>
<script type="text/javascript" src="{{ asset('assets/plugins/fancy-file-uploader/jquery.fancy-fileupload.js') }}">
</script>
<script src="{{ asset('assets/front/js/jquery.fileDownload.js?v='.time()) }}"></script>
<script src="{{ asset('assets/front/js/feeback.js?v='.time()) }}"></script>
<script src="{{ asset('assets/front/js/draft-item.js?v='.time()) }}"></script>
@endpush