@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content userPage">
        <div class="container">
            <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">
                        {{$item->title}}
                    </h2>
                    <div class="total-likes">
                        <span id="like-count">{{ $item->favoritesCount() }}</span>
                        <button id="like-btn" class="like-btn @if(auth()->check() && $item->isFavoritedBy(auth()->id())) active @endif"  @if(auth()->check() && $item->isFavoritedBy(auth()->id())) data-liked="1" @else data-liked="0" @endif >
                            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" 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>
                        </button>
                    </div>
                </div>
                <div class="head-btns" style="grid-column: 2; margin-bottom: 10px;">
                    @if(auth()->check() && auth()->user()->id == $item->user_id)
                        <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>
                    @endif
                    <a href="{{route('work.index')}}" class="head-btn head-btn-outline">
                        <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;">
                            <line x1="19" y1="12" x2="5" y2="12"/>
                            <polyline points="12 19 5 12 12 5"/>
                        </svg>
                        رجوع للمعرض
                    </a>
                </div>
                @include('front.user.gallery._work_content', ['item' => $item, 'commonItems' => $commonItems])

            </div>
        </div>
    </section>
    <!-- End Page Content -->
@endsection

@section('js-body')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function setupLikeButton(btnId, countId) {
                const likeBtn = document.getElementById(btnId);
                const likeCount = document.getElementById(countId);
                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 => {
                            if (data.status === 'liked') {
                                likeBtn.classList.add('active');
                                likeBtn.setAttribute('data-liked', '1');
                                likeCount.textContent = parseInt(likeCount.textContent) + 1;
                            } else if (data.status === 'unliked') {
                                likeBtn.classList.remove('active');
                                likeBtn.setAttribute('data-liked', '0');
                                likeCount.textContent = Math.max(0, parseInt(likeCount.textContent) - 1);
                            }
                        });
                });
            }
            setupLikeButton('like-btn', 'like-count');
            setupLikeButton('like-btn-user', 'like-count-user');
        });
    </script>
@endsection