@php
$templateItems = ['title' => 'Projects', 'is_inner_page' => true];
if(isAnonymousUser()){
$templateItems['sidebar'] = 'no';
}
@endphp

@extends('layouts.public-base', $templateItems)

@section('css')
<link rel="stylesheet" type="text/css"
    href="{{ asset('assets/front/common/css/jquery.mentionsInput.css?v='.time()) }}" />
<link href="{{asset('assets/front/css/jquery.fancybox.css?v='.time())}}" rel="stylesheet" rel="preload" as="style" />
<link href="{{ asset('assets/plugins/fancy-file-uploader/fancy_fileupload.css') }}" rel="stylesheet" rel="preload"
    as="style" />
<style>
    #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 */
    }

    .dotChatBox {
        background: #fff;
        padding: 20px;
    }

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

@section('content')

<!----------Page content----------->
<div class="projects_listing" id="wrap_2">
    {{-- <section class="famous-design-section famous">
        <div class=""> --}}
            {{-- <div class="rb-heading">
                <h2 class="font-size-28">Dashboard</h2>
            </div> --}}

            <!-- Tab data -->
            <div class="famous-design-main">
                <div class="tab-main">
                    @include('inc.flashMessages')
                    <livewire:project.project-header :project="$project" :view_only="$view_only" />
                    <div class="header-blog">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="pill" href="#designs_screen">Draft
                                    Screens</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="pill" href="#information">Information</a>
                            </li>
                            @if (!isAnonymousUser())
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="pill" href="#activity-timeline">activity
                                    timeline</a>
                            </li>
                            @endif
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane active" id="designs_screen">
                            <div class="draft-screen-data">
                                <div class="row items-row">
                                    @if(!$view_only)
                                    @if (!isAnonymousUser() && $project->status_text !== 'Draft')
                                    <div class="col-md-4 col-sm-6">
                                        <div class="b-radius-10">
                                            <a href="{{ getRoute('project.drafts.create', $project->id) }}">
                                                <div class="Upload-new-draft b-radius-10">
                                                    <div class="add-single-team-data">
                                                        <span class="material-icons">backup</span>
                                                        <h6 class="add-item-title">Upload New Draft</h6>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    @elseif( $project->status_text === 'Draft' && !isAnonymousUser() )
                                    <div class="col-md-12">
                                        <div class="b-radius-10">

                                            <div class="Upload-new-draft b-radius-10">
                                                <div class="add-single-team-data">
                                                    <h6 class="add-item-title text-uppercase">Your project is in Draft
                                                    </h6>
                                                    <a href="{{ getRoute('project.edit', $project->id) }}?id={{ $project->project_type ?? '' }}"
                                                        class="btn gz-btn bg-color-red">
                                                        Publish
                                                    </a>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    @endif
                                    @endif
                                    @foreach ($drafts as $key => $draft)
                                    <div class="col-md-4 col-sm-6 item-div">
                                        <div class="dsd-single-field mb-4">
                                            @php
                                            if ( in_array($project->project_type, [1,3]) ) {
                                            $media_url =
                                            asset('assets/front/common/images/CORONA-VIRUS-PANDEMIC_MU.png');
                                            if($draft->preview_media){
                                            if($project->project_type == 3){
                                            $media_url = $draft->preview_media->thumb ? $draft->preview_media->thumb :
                                            asset('assets/front/images/Content.svg');

                                            }
                                            else{
                                            $media_url = $draft->preview_media->thumb ? $draft->preview_media->thumb :
                                            $draft->preview_media->url;
                                            }

                                            }
                                            } else {
                                            $media_url = asset('assets/front/images/Content.svg');
                                            }
                                            @endphp

                                            <div loading="lazy" style="background-image: url('{{ $media_url }}')"
                                                class="dsd-single-field-img single-draft-img position-relative">
                                                <div class="view-share">
                                                    <div class="eye-box">
                                                        <a class="view-draft"
                                                            href="{{ getRoute('project.drafts.show', [$project->id, $draft->id]) }}">
                                                            <i class="fa-solid fa-eye"></i>
                                                        </a>
                                                        @if ($user && !isAnonymousUser() && !$view_only)
                                                        <a href="javascript:void(0)"
                                                            class="share_draft draft-share-btn-js" {{--
                                                            data-toggle="modal" data-target="#project_share_modal" --}}
                                                            data-draft-id="{{ $draft->id }}">
                                                            <i class="fa-solid fa-share"></i>
                                                        </a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="dsd-single-field-content">
                                                <a
                                                    href="{{ getRoute('project.drafts.show', [$project->id, $draft->id]) }}">
                                                    <h3>{{ $draft->preview_media->name ?? '' }}</h3>
                                                </a>
                                                <p><i class="material-icons">schedule</i>
                                                    {{ $draft->created_at->format('d M Y') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="row">
                                    @if( $drafts->hasMorePages() )
                                    <a id="load-more" href="{{ $drafts->nextPageUrl() }}"
                                        class="btn gz-btn bg-color-red m-auto">Load more</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="information">
                            <x-project.project-information :projectId="$project->id" />
                        </div>
                        <div class="tab-pane fade" id="activity-timeline">
                            <x-project.activity-component :projectId="$project->id" />
                        </div>
                    </div>
                </div>
            </div>
            {{--
        </div>
    </section> --}}

    <!-- Sidebar -->
    @if (!isAnonymousUser() || hasPermissionInvitedUser('add_comment'))
    <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( (!isset($hideCommentBox) || !$hideCommentBox) )
                    <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 ($user && !isAnonymousUser() && !$view_only)
                    <li class="nav-item">
                        <a class="nav-link {{ $hideCommentBox ? 'active' : '' }}" data-bs-toggle="pill" href="#share"><i
                                class="material-icons">share</i><span class="famous-tab-items">Share</span></a>
                    </li>
                    @endif
                </ul>
                <div class="" data-bs-toggle="offcanvas09">
                    <span class="hide-btn font-medium text-uppercase font-size-13 line-height-21 color-gray">Hide</span>
                </div>
            </div>
            <div class="tab-content famous-tab-items">
                @if( !isset($hideCommentBox) || !$hideCommentBox )
                <livewire:comment.comment-component :messageId="$project->id" :messageType="get_class($project)"
                    :projectType="$project->project_type" />
                @endif

                @if ($user && !isAnonymousUser() && !$view_only)
                <livewire:share.share-component :projectId="$project->id"
                    :show=' ($hideCommentBox ? "active show" : "") ' />
                @endif
            </div>

        </div>

    </nav>
    @endif
</div>

@if ($user && !isAnonymousUser())
<livewire:share.invite-modal :projectId="$project->id" />
@endif

@if (isAnonymousUser())
<livewire:draft.ask-for-name />
@endif

@if ($user && !isAnonymousUser())
<livewire:share.share-modal :projectId="$project->id" />
@endif
{{-- <div class="page-footer">
    <div class="container">
        <div class="row">
            <div class="copy-right col-md-12 text-center">
                <p>© 2024 | All Rights Reserved</p>
            </div>
        </div>
    </div>
</div> --}}
@include('customer.modals.message-modal')
@include('inc.logo-loader')
@endsection



@push('liveScript')
<script>
    $('#project_share_modal').find('#share').addClass('show');

    $('.draft-share-btn-js').on('click', function(e) {
        var element = $(e.target);
        livewire.emit('draft_changed', element.data('draft-id'));
        //console.log(element.data('draft-id'));
        $('#project_share_modal').modal('show');
    })

</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="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> --}}

@endpush