@extends('front.layouts.master-auth')
@section('content')
<link rel="stylesheet" href="{{ asset('front/css/add-work.css') }}?v={{ filemtime(public_path('front/css/add-work.css')) }}">
    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="addOffer-page-title">
                <h2 class="addOffer-name">
                    {{ isset($item) ? trans('Edit') : trans('Add New Work') }}
                </h2>
            </div>
            <div class="add-work-page">
                <form class="add-work-form" method="post" action="{{ isset($item) ? route('work.update', $item->uuid) : route('work.store') }}" enctype="multipart/form-data">
                    @csrf
                    @if(isset($item))
                        @method('PUT')
                    @endif

                    {{-- ── Work Type Selector ── --}}
                    <div class="form-group">
                        <label>نوع العمل <span style="color:red;">*</span></label>
                        <div class="work-type-selector">
                            @php
                                $currentType = old('work_type', $item->work_type ?? 'image');
                            @endphp
                            <div class="work-type-card {{ $currentType === 'image'   ? 'active' : '' }}" data-type="image">
                                <div class="wtc-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                                </div>
                                <span>صورة</span>
                            </div>
                            <div class="work-type-card {{ $currentType === 'youtube' ? 'active' : '' }}" data-type="youtube">
                                <div class="wtc-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
                                </div>
                                <span>يوتيوب</span>
                            </div>
                            <div class="work-type-card {{ $currentType === 'audio'   ? 'active' : '' }}" data-type="audio">
                                <div class="wtc-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
                                </div>
                                <span>صوتي</span>
                            </div>
                            <div class="work-type-card {{ $currentType === 'pdf'     ? 'active' : '' }}" data-type="pdf">
                                <div class="wtc-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                                </div>
                                <span>PDF</span>
                            </div>
                            <input type="hidden" name="work_type" id="work-type-input" value="{{ $currentType }}">
                        </div>
                        @error('work_type')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- ── Common Fields ── --}}
                    <div class="input-line">
                        <div class="form-group">
                            <label>
                                {{trans('Work Title')}} <span style="color: red;">*</span>
                            </label>
                            <input type="text" name="title" class="form-control" value="{{old('title', $item->title ?? '')}}" placeholder="مثال: تصميم هوية بصرية لمطعم">
                            @error('title')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>
                                {{trans('Work Finish Date')}} <span style="color: red;">*</span>
                            </label>
                            <div class="input-cont">
                                <input type="text" name="finish_date" class="input-datepicker form-control" value="{{old('finish_date', $item->finish_date ?? '')}}" readonly="">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="27" height="30" viewBox="0 0 27 30">
                                        <path data-name="Icon material-date-range" d="M13.5 16.5h-3v3h3zm6 0h-3v3h3zm6 0h-3v3h3zm3-10.5H27V3h-3v3H12V3H9v3H7.5a2.986 2.986 0 0 0-2.985 3L4.5 30a3 3 0 0 0 3 3h21a3.009 3.009 0 0 0 3-3V9a3.009 3.009 0 0 0-3-3zm0 24h-21V13.5h21z" transform="translate(-4.5 -3)" style="fill:#393939"></path>
                                    </svg>
                                </span>
                                @error('finish_date')
                                <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>
                            {{trans('Work Brief')}} <span style="color: red;">*</span>
                        </label>
                        <div class="inputs-cont">
                            <textarea class="form-control" name="description" id="work-description" placeholder="اكتب وصفاً مختصراً عن العمل، مثل: الأدوات المستخدمة والهدف من العمل...">{{old('description', $item->description ?? '')}}</textarea>
                            <div class="word-counter" id="word-counter">
                                <span id="current-word-count">0</span> / 15 كلمة
                            </div>
                            @error('description')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- ── Link field (hidden for youtube, shown for others) ── --}}
                    <div class="form-group" id="field-link" style="{{ $currentType === 'youtube' ? 'display:none;' : '' }}">
                        <label>{{trans('Work Link')}}</label>
                        <input type="url" class="form-control" name="link" id="link-input"
                               value="{{old('link', ($item->work_type ?? 'image') !== 'youtube' ? ($item->link ?? '') : '')}}"
                               placeholder="مثال: https://example.com"
                               @if($currentType === 'youtube') disabled @endif>
                        @error('link')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- ── Skills ── --}}
                    <div class="work-skills-field">
                        <h4 class="work-skills-label">@lang('Used Skills')</h4>
                        <select class="work-skills-select form-control" name="skills[]" multiple="multiple">
                            <option disabled>@lang('front.Choose Skills')</option>
                            @foreach($skills as $skill)
                                <option value="{{ $skill->id }}"
                                    @if(in_array($skill->id, old('skills', isset($item) ? $item->skills->pluck('id')->toArray() : []))) selected @endif>
                                    {{ $skill->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('skills')
                        <span class="work-skills-error" role="alert"><strong>{{ $message }}</strong></span>
                        @enderror
                    </div>

                    {{-- ── Logo (always visible) ── --}}
                    <div class="upload-fields-stack">
                        <div class="form-group">
                            <label>
                                {{trans('Work Logo')}} @if(!isset($item))<span style="color: red;">*</span>@endif
                            </label>
                            <small class="form-hint">الصورة المصغرة التي تظهر في معرض أعمالك</small>

                            @if(isset($item) && $item->logo && $item->logo != asset('app-assets/default-image.png'))
                                <div class="current-images-grid mb-2" id="current-logo-grid">
                                    <div class="current-image-thumb" id="current-logo-thumb">
                                        <img src="{{ $item->logo }}" alt="الصورة الحالية" loading="lazy" decoding="async">
                                        <button type="button" class="remove-thumb delete-existing-media"
                                            data-url="{{ route('work.logo.delete', $item->uuid) }}"
                                            data-target="current-logo-grid"
                                            title="حذف الصورة المصغرة">&times;</button>
                                    </div>
                                </div>
                                <p class="text-muted small mb-2 replace-hint" style="font-size:12px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                    رفع صورة جديدة سيستبدل الصورة الحالية
                                </p>
                            @endif

                            <div class="multi-image-zone" id="logo-zone">
                                <div class="multi-upload-prompt" id="logo-upload-prompt">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="39.629" height="27.74" viewBox="0 0 39.629 27.74">
                                        <path d="M33.289,14.3A5.951,5.951,0,0,0,27.74,6.213a5.914,5.914,0,0,0-3.3,1,9.908,9.908,0,0,0-18.5,4.941c0,.167.006.334.012.5A8.919,8.919,0,0,0,8.917,29.99H31.7A7.925,7.925,0,0,0,33.289,14.3ZM24.36,18.1H20.31v6.935a.994.994,0,0,1-.991.991H16.347a.994.994,0,0,1-.991-.991V18.1h-4.05a.989.989,0,0,1-.7-1.69l6.526-6.526a.994.994,0,0,1,1.4,0l6.526,6.526a.99.99,0,0,1-.7,1.69Z" transform="translate(0 -2.25)" fill="#393939"/>
                                    </svg>
                                    <span class="drop-text">اسحب الصورة هنا أو اضغط للاختيار</span>
                                    <input type="file" name="logo" id="logo-input" class="form-control" accept="image/*">
                                </div>
                                <div class="multi-preview-grid" id="logo-preview-grid"></div>
                            </div>
                            @error('logo')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- ── Section: Image ── --}}
                        <div class="form-group work-type-section" id="section-image" style="{{ $currentType !== 'image' ? 'display:none;' : '' }}">
                            <label>
                                {{trans('Work Image')}}
                                <span class="images-max-label">(حتى 10 صور)</span>
                            </label>
                            <small class="form-hint">صور توضيحية للعمل (اختياري) — بحد أقصى 10 صور</small>

                            @if(isset($item) && $item->work_type === 'image')
                                @php
                                    $existingImages = $item->getMedia('images');
                                @endphp
                                @if($existingImages->count() > 0)
                                    <div class="current-images-grid mb-2" id="current-images-grid">
                                        @foreach($existingImages as $media)
                                            @php
                                                $localPath = storage_path('app/public/' . $media->id . '/' . $media->file_name);
                                                $imgUrl = file_exists($localPath)
                                                    ? asset('storage/' . $media->id . '/' . $media->file_name)
                                                    : $media->getUrl();
                                            @endphp
                                            <div class="current-image-thumb" data-media-id="{{ $media->id }}">
                                                <img src="{{ $imgUrl }}" alt="صورة العمل" loading="lazy" decoding="async">
                                                <button type="button" class="remove-thumb delete-existing-media"
                                                    data-url="{{ route('work.image.delete', [$item->uuid, $media->id]) }}"
                                                    data-media-id="{{ $media->id }}"
                                                    title="حذف الصورة">&times;</button>
                                            </div>
                                        @endforeach
                                    </div>
                                    <p class="text-muted small mb-2 replace-hint" style="font-size:12px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                        رفع صور جديدة سيستبدل الصور الحالية
                                    </p>
                                @endif
                            @endif

                            <div class="multi-image-zone" id="multi-image-zone">
                                <div class="multi-upload-prompt" id="multi-upload-prompt">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="39.629" height="27.74" viewBox="0 0 39.629 27.74">
                                        <path d="M33.289,14.3A5.951,5.951,0,0,0,27.74,6.213a5.914,5.914,0,0,0-3.3,1,9.908,9.908,0,0,0-18.5,4.941c0,.167.006.334.012.5A8.919,8.919,0,0,0,8.917,29.99H31.7A7.925,7.925,0,0,0,33.289,14.3ZM24.36,18.1H20.31v6.935a.994.994,0,0,1-.991.991H16.347a.994.994,0,0,1-.991-.991V18.1h-4.05a.989.989,0,0,1-.7-1.69l6.526-6.526a.994.994,0,0,1,1.4,0l6.526,6.526a.99.99,0,0,1-.7,1.69Z" transform="translate(0 -2.25)" fill="#393939"/>
                                    </svg>
                                    <span class="drop-text">اسحب الصور هنا أو اضغط للاختيار</span>
                                    <span class="images-counter-badge" id="images-counter-badge">0 / 5</span>
                                    <input type="file" name="images[]" id="images-input" class="form-control" accept="image/*" multiple>
                                </div>
                                <div class="multi-preview-grid" id="multi-preview-grid"></div>
                            </div>
                            @error('images')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                            @foreach($errors->get('images.*') as $msgs)
                                @foreach($msgs as $msg)
                                <div class="alert alert-danger">{{ $msg }}</div>
                                @endforeach
                            @endforeach
                        </div>

                        {{-- ── Section: YouTube ── --}}
                        <div class="form-group work-type-section" id="section-youtube" style="{{ $currentType !== 'youtube' ? 'display:none;' : '' }}">
                            <label>رابط فيديو YouTube <span style="color:red;">*</span></label>
                            <small class="form-hint">الصق رابط الفيديو من YouTube</small>
                            <input type="url" name="link" id="youtube-link-input" class="form-control"
                                   value="{{ old('link', $currentType === 'youtube' ? ($item->link ?? '') : '') }}"
                                   placeholder="https://www.youtube.com/watch?v=..."
                                   @if($currentType !== 'youtube') disabled @endif>
                            @error('link')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- ── Section: Audio ── --}}
                        <div class="form-group work-type-section" id="section-audio" style="{{ $currentType !== 'audio' ? 'display:none;' : '' }}">
                            <label>
                                ملف صوتي @if(!isset($item) || ($item->work_type ?? '') !== 'audio')<span style="color:red;" id="audio-required-star">*</span>@endif
                            </label>
                            <small class="form-hint">الصيغ المدعومة: MP3, WAV, OGG, AAC, M4A — بحد أقصى 20 MB</small>

                            @if(isset($item) && $item->work_type === 'audio')
                                @php $existingAudio = $item->getMedia('audios')->last(); @endphp
                                @if($existingAudio)
                                    <div class="existing-file-info mb-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
                                        {{ $existingAudio->file_name }}
                                        <span class="file-size-hint">({{ round($existingAudio->size / 1024 / 1024, 2) }} MB)</span>
                                    </div>
                                    <p class="text-muted small mb-2" style="font-size:12px;">رفع ملف جديد سيستبدل الملف الحالي</p>
                                @endif
                            @endif

                            <div class="file-upload-zone" id="audio-zone">
                                <div class="file-upload-prompt">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#393939" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
                                    <span class="drop-text" id="audio-drop-text">اسحب الملف الصوتي هنا أو اضغط للاختيار</span>
                                    <input type="file" name="audio_file" id="audio-input" class="form-control" accept=".mp3,.wav,.ogg,.aac,.m4a,.flac,audio/*">
                                </div>
                            </div>
                            @error('audio_file')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- ── Section: PDF ── --}}
                        <div class="form-group work-type-section" id="section-pdf" style="{{ $currentType !== 'pdf' ? 'display:none;' : '' }}">
                            <label>
                                ملف PDF @if(!isset($item) || ($item->work_type ?? '') !== 'pdf')<span style="color:red;" id="pdf-required-star">*</span>@endif
                            </label>
                            <small class="form-hint">بحد أقصى 20 MB</small>

                            @if(isset($item) && $item->work_type === 'pdf')
                                @php $existingPdf = $item->getMedia('pdfs')->last(); @endphp
                                @if($existingPdf)
                                    <div class="existing-file-info mb-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                        {{ $existingPdf->file_name }}
                                        <span class="file-size-hint">({{ round($existingPdf->size / 1024 / 1024, 2) }} MB)</span>
                                    </div>
                                    <p class="text-muted small mb-2" style="font-size:12px;">رفع ملف جديد سيستبدل الملف الحالي</p>
                                @endif
                            @endif

                            <div class="file-upload-zone" id="pdf-zone">
                                <div class="file-upload-prompt">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#393939" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                                    <span class="drop-text" id="pdf-drop-text">اسحب ملف PDF هنا أو اضغط للاختيار</span>
                                    <input type="file" name="pdf_file" id="pdf-input" class="form-control" accept=".pdf,application/pdf">
                                </div>
                            </div>
                            @error('pdf_file')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>{{-- end .upload-fields-stack --}}

                    @if(!isset($item))
                    @php
                        $pledgeFirstName = trim((string) auth()->user()->first_name);
                        $pledgeBtnLabel = $pledgeFirstName !== '' ? $pledgeFirstName : 'اسمك';
                    @endphp
                    <div class="form-group work-self-confirm">
                        <div class="work-self-confirm-box">
                            <p class="work-self-confirm-title">تعهد بالمحتوى <span class="work-self-confirm-required" aria-hidden="true">*</span></p>
                            <label class="work-self-confirm-label">
                                <input type="checkbox" name="self_completed" value="1" @checked(old('self_completed')) aria-required="true">
                                <span class="work-self-confirm-text">أتعهد أن هذا العمل من إنجازي الشخصي، ولا يتضمن أي بيانات تواصل خارج المنصة، وفي حال رغبة صاحب المشروع في التواصل معك، يمكنه استخدام زر <strong>«دعوة للعمل»</strong> المتاح له داخل ملفك الشخصي.</span>
                            </label>
                        </div>
                        @error('self_completed')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    @endif

                    <button type="button" class="work-submit" id="work-submit-btn">
                        {{ isset($item) ? trans('Update') : trans('Publish Now') }}
                    </button>
                </form>
                <div class="add-work-img">
                    <div class="project-side-info">
                        <h3 class="project-side-info__title">أضف عملك، أبرز مهاراتك</h3>
                        <p class="project-side-info__sub">اعرض أعمالك السابقة لتجذب العملاء وتُثبت احترافيتك</p>
                        <ul class="project-side-info__list">
                            <li><span class="psi-check">✓</span> أضف أعمالك مجاناً</li>
                            <li><span class="psi-check">✓</span> ابرز مهاراتك للعملاء المحتملين</li>
                            <li><span class="psi-check">✓</span> زِد فرصك في الحصول على مشاريع</li>
                            <li><span class="psi-check">✓</span> بناء معرض أعمال احترافي</li>
                        </ul>
                    </div>
                    <div class="rocket-img"><img src="{{asset('front/images/addWork.png')}}" class="img-fluid" loading="lazy" decoding="async"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- End Page Content -->
@endsection

@section('js-body')
<script>
    // Config object — passes Blade/PHP values to the external JS file
    window.WorkFormConfig = {
        currentType      : '{{ $currentType }}',
        isEdit           : {{ isset($item) ? 'true' : 'false' }},
        submitText       : @json(isset($item) ? 'جاري التحديث...' : 'جاري النشر...'),
        csrfToken        : '{{ csrf_token() }}',
        skillsPlaceholder: @json(trans('front.Choose Skills'))
    };
</script>
<script src="{{ asset('front/js/add-work.js') }}?v={{ filemtime(public_path('front/js/add-work.js')) }}"></script>
@endsection