@extends('front.layouts.master-auth')
@section('content')
<!-- Start Page Content -->
<section class="page-content userPage">
    <div class="container">
        <div class="addOffer-page-title">
            <h2 class="addOffer-name"> الملف الشخصي</h2>
            <div class="head-btns">
                @if(auth()->check() && auth()->user()->id == $user->id)
                    <a href="{{route('user.profile')}}" class="head-btn head-btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-left: 5px;">
                            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                        </svg>
                        @lang('front.edit_profile')
                    </a>
                @endif

                {{-- Share Button --}}
                <a href="javascript:void(0);"
                   onclick="shareUrl('{{ route('freelancers.details', $user->username) }}', '@lang('Share Profile')')"
                   class="head-btn head-btn-share"
                   title="@lang('Share Profile')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 30 33">
                        <g id="Icon_feather-share-2" data-name="Icon feather-share-2"
                           transform="translate(1.5 1.5)">
                            <path id="Path_16425" data-name="Path 16425"
                                  d="M31.5 7.5A4.5 4.5 0 1 1 27 3a4.5 4.5 0 0 1 4.5 4.5z"
                                  transform="translate(-4.5 -3)" />
                            <path id="Path_16426" data-name="Path 16426"
                                  d="M13.5 18A4.5 4.5 0 1 1 9 13.5a4.5 4.5 0 0 1 4.5 4.5z"
                                  transform="translate(-4.5 -3)" />
                            <path id="Path_16427" data-name="Path 16427"
                                  d="M31.5 28.5A4.5 4.5 0 1 1 27 24a4.5 4.5 0 0 1 4.5 4.5z"
                                  transform="translate(-4.5 -3)" />
                            <path id="Path_16428" data-name="Path 16428"
                                  d="m12.885 20.265 10.245 5.97" transform="translate(-4.5 -3)" />
                            <path id="Path_16429" data-name="Path 16429" d="m23.115 9.765-10.23 5.97"
                                  transform="translate(-4.5 -3)" />
                        </g>
                    </svg>
                </a>
            </div>{{-- end .head-btns --}}
        </div>{{-- end .addOffer-page-title --}}
        <div class="user-page-cont">
            <div class="user-relative">
                @include('front.freelancer._user_nav_menu', ['user' => $user, 'activePage' => 'profile'])
            </div>
            
            <div class="user-info-cont">
                
                @if(auth()->check() && auth()->user()->id == $user->id && $user->isFreelancer() && $needs_identity_verification)
                <div class="identity-alert-banner">
                    {{-- Icon + Text --}}
                    <div style="display: flex; align-items: center; gap: 12px; flex: 1;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#d97706" viewBox="0 0 16 16" style="flex-shrink: 0;">
                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                        </svg>
                        <div>
                            <strong style="display: block; color: #92400e; font-size: 15px; margin-bottom: 4px;">
                                تنبيه!
                            </strong>
                            <span style="color: #78350f; font-size: 14px; line-height: 1.6;">
                                @lang('front.freelancer_identity_verification_message')
                            </span>
                        </div>
                    </div>
                    {{-- CTA Button on the left --}}
                    <a href="{{ route('stripe.connect.create-and-redirect') }}"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="uncomplete-btn"
                       onmouseover="this.style.background='#19b36b'"
                       onmouseout="this.style.background='#14965A'">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H0V4zm0 3h16v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V7zm3 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1A.5.5 0 0 0 4 9H3z"/>
                        </svg>
                        اضغط هنا
                    </a>
                </div>
                @endif
                
                @if(auth()->check() && auth()->user()->id == $user->id && $profile_incomplete)
                <div class="alert alert-warning profile-incomplete-alert" style="display: flex; align-items: start; gap: 10px;border-radius: 0;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#856404" viewBox="0 0 16 16" style="flex-shrink: 0; margin-top: 2px;">
                        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                    </svg>
                    <div style="flex: 1;">
                        <h4 style="margin: 0 0 8px 0; color: #856404; font-size: 16px; font-weight: 600;">@lang('profile_incomplete_title')</h4>
                        <p style="margin: 0 0 10px 0; color: #856404; font-size: 14px; line-height: 1.6;">
                            @if($user->isFreelancer())
                                @lang('profile_incomplete_message_freelancer')
                            @else
                                @lang('profile_incomplete_message_owner')
                            @endif
                        </p>
                        <ul style="margin: 0; padding-right: 20px; color: #856404; font-size: 14px;">
                            @if(in_array('project', $missing_items))
                                <li>@lang('missing_project')</li>
                            @endif
                            @if(in_array('speciality', $missing_items))
                                <li>@lang('missing_speciality')</li>
                            @endif
                            @if(in_array('bio', $missing_items))
                                <li>@lang('missing_bio')</li>
                            @endif
                            @if(in_array('skills', $missing_items))
                                <li>@lang('missing_skills')</li>
                            @endif

                            @if(in_array('profile_image', $missing_items))
                                <li>@lang('missing_profile_image')</li>
                            @endif
                            @if(in_array('work', $missing_items))
                                <li>@lang('missing_work')</li>
                            @endif
                        </ul>
                        <a href="{{count($missing_items) == 1 && in_array('work', $missing_items) ? route('work.create') : (count($missing_items) == 1 && in_array('project', $missing_items) ? route('user.project.create') : route('user.profile'))}}" class="btn btn-sm uncomplete-btn">
                            @if(count($missing_items) == 1 && in_array('work', $missing_items))
                                @lang('add_work_now')
                            @elseif(count($missing_items) == 1 && in_array('project', $missing_items))
                                @lang('add_project_now')
                            @else
                                @lang('complete_profile_now')
                            @endif
                        </a>
                    </div>
                </div>
            @endif
            @include('front.user._user_side_info', ['user' => $user, 'completed_projects' => $completed_projects, 'running_projects' => $running_projects, 'project_completion_rate' => $project_completion_rate, 'delivery_rate' => $delivery_rate])
            </div>
            
        </div>
    </div>
</section>
<!-- End Page Content -->
@endsection