@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content userPage">
        <div class="container">
        <div class="addOffer-page-title">
            <h1 class="addOffer-name">{{$item->title}}</h1>
            <div class="head-btns">
                    @if(auth()->check() && auth()->user()->id == $item->user_id)
                        {{-- Work Owner: Edit Work (primary) + Back to Gallery in kebab --}}
                        <div class="action-btn-group">
                            <a href="{{route('work.edit', $item->uuid)}}" class="head-btn head-btn-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 5px;">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                </svg>
                                تعديل العمل
                            </a>
                            <div class="action-kebab-wrapper">
                                <button type="button" class="action-kebab-toggle" onclick="toggleActionDropdown(event)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
                                </button>
                                <div class="action-dropdown">
                                    <a href="{{route('portfolio.show', auth()->user()->username)}}" class="action-dropdown-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left:6px;vertical-align:middle">
                                            <line x1="19" y1="12" x2="5" y2="12"/>
                                            <polyline points="12 19 5 12 12 5"/>
                                        </svg>
                                        رجوع للمعرض
                                    </a>
                                    @if($item->link)
                                        <a class="action-dropdown-item" target="_blank" rel="noopener noreferrer" href="{{ $item->link }}">
                                            @if(($item->work_type ?? 'image') === 'youtube')
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left:6px;vertical-align:middle"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/></svg>
                                                مشاهدة على YouTube
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left:6px;vertical-align:middle"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                                                رابط العمل
                                            @endif
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>

                    @elseif((!auth()->check() || auth()->user()->isProjectOwner()) && auth()->id() != $user->id)
                        {{-- Guest / Project Owner: Request similar work (+ work link in kebab if available) --}}
                        @if($item->link)
                            <div class="action-btn-group">
                                @include('front.freelancer._invite_action_button', ['user' => $user, 'label' => 'اطلب عمل مماثل', 'requireFreelancer' => false])
                                <div class="action-kebab-wrapper">
                                    <button type="button" class="action-kebab-toggle" onclick="toggleActionDropdown(event)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
                                    </button>
                                    <div class="action-dropdown">
                                        <a class="action-dropdown-item" target="_blank" rel="noopener noreferrer" href="{{ $item->link }}">
                                            @if(($item->work_type ?? 'image') === 'youtube')
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left:6px;vertical-align:middle"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/></svg>
                                                مشاهدة على YouTube
                                            @else
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left:6px;vertical-align:middle"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                                                رابط العمل
                                            @endif
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @else
                            @include('front.freelancer._invite_action_button', ['user' => $user, 'label' => 'اطلب عمل مماثل', 'requireFreelancer' => false])
                        @endif

                    @else
                        {{-- Other Freelancer: show work link only (if available) --}}
                        @if($item->link)
                            <a class="head-btn head-btn-outline" target="_blank" rel="noopener noreferrer" href="{{ $item->link }}">
                                @if(($item->work_type ?? 'image') === 'youtube')
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 5px;"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/></svg>
                                    مشاهدة على YouTube
                                @else
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 5px;"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                                    رابط العمل
                                @endif
                            </a>
                        @endif
                    @endif
                </div>
            </div>
            <div class="user-page-cont single-work-grid">
                <div class="user-relative">
                    @include('front.freelancer._user_nav_menu', ['user' => $user, 'activePage' => 'gallery'])
                </div>
                <div class="user-page-head single-work-head xs-head">
                    <h2 class="user-page-title"> تفاصيل العمل </h2>
                    <div class="total-likes">
                        <span class="stat-display">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                            <span class="stat-number">{{ $item->views ?? 0 }}</span>
                        </span>
                        <span class="stat-display">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                            </svg>
                            <span class="stat-number" id="like-count">{{ $item->favoritesCount() }}</span>
                        </span>
                    </div>
                </div>
                @include('front.user.gallery._work_content', ['item' => $item, 'commonItems' => $commonItems, 'allPortfolioWorks' => $allPortfolioWorks])
            </div>
        </div>
    </section>
    <!-- End Page Content -->
@endsection

@section('js-body')
    <script>
        ///////// Kebab Action Dropdown /////////
        function toggleActionDropdown(event) {
            event.stopPropagation();
            var wrapper = event.currentTarget.closest('.action-kebab-wrapper');
            var dropdown = wrapper.querySelector('.action-dropdown');
            var isOpen = dropdown.classList.contains('show');

            document.querySelectorAll('.action-dropdown.show').forEach(function(d) {
                d.classList.remove('show');
            });

            if (!isOpen) {
                dropdown.classList.add('show');
            }
        }

        document.addEventListener('click', function(e) {
            if (!e.target.closest('.action-kebab-wrapper')) {
                document.querySelectorAll('.action-dropdown.show').forEach(function(d) {
                    d.classList.remove('show');
                });
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            function setupLikeButton(btnId) {
                const likeBtn = document.getElementById(btnId);
                const likeCount = document.getElementById('like-count');
                if (!likeBtn) return;
                likeBtn.addEventListener('click', function () {
                    if (!@json(auth()->check())) {
                        window.location.href = '{{ route('view.login') }}';
                        return;
                    }
                    const liked = likeBtn.getAttribute('data-liked') === '1';
                    const url = liked ? '{{ route('user.unlike') }}' : '{{ route('user.like') }}';
                    const method = liked ? 'DELETE' : 'POST';
                    fetch(url, {
                        method: method,
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({ work_id: "{{ $item->uuid }}" })
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Update both buttons
                        const topBtn = document.getElementById('like-btn-top');
                        
                        if (data.status === 'liked') {
                            likeBtn.classList.add('active');
                            likeBtn.setAttribute('data-liked', '1');
                            if (topBtn) {
                                topBtn.classList.add('active');
                                topBtn.setAttribute('data-liked', '1');
                                topBtn.setAttribute('title', 'إزالة من المفضلة');
                            }
                            const contentBtn = document.getElementById('like-btn-content');
                            if (contentBtn) {
                                contentBtn.classList.add('active');
                                contentBtn.setAttribute('data-liked', '1');
                                contentBtn.setAttribute('title', 'إزالة من المفضلة');
                            }
                            const contentCount = document.getElementById('like-count-content');
                            if (likeCount) likeCount.textContent = parseInt(likeCount.textContent) + 1;
                            if (contentCount) contentCount.textContent = parseInt(contentCount.textContent) + 1;
                        } else if (data.status === 'unliked') {
                            likeBtn.classList.remove('active');
                            likeBtn.setAttribute('data-liked', '0');
                            if (topBtn) {
                                topBtn.classList.remove('active');
                                topBtn.setAttribute('data-liked', '0');
                                topBtn.setAttribute('title', 'إضافة للمفضلة');
                            }
                            const contentBtn = document.getElementById('like-btn-content');
                            if (contentBtn) {
                                contentBtn.classList.remove('active');
                                contentBtn.setAttribute('data-liked', '0');
                                contentBtn.setAttribute('title', 'إضافة للمفضلة');
                            }
                            const contentCount = document.getElementById('like-count-content');
                            if (likeCount) likeCount.textContent = Math.max(0, parseInt(likeCount.textContent) - 1);
                            if (contentCount) contentCount.textContent = Math.max(0, parseInt(contentCount.textContent) - 1);
                        }
                    });
                });
            }
            setupLikeButton('like-btn-top');
            setupLikeButton('like-btn-content');
        });
    </script>
@endsection