@extends('layouts.app')
@section('title', $case->case_number)
@section('content')
<div class="mb-4 flex flex-wrap justify-between items-start gap-3">
    <div>
        <h1 class="text-xl font-bold">{{ $case->case_number }} — {{ $case->title }}</h1>
        <span class="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs">{{ $case->status_label }}</span>
    </div>
    <div class="flex gap-2 text-sm">
        <a href="{{ route('cases.edit', $case) }}" class="bg-slate-700 text-white px-3 py-1.5 rounded">ویرایش</a>
        <a href="{{ route('documents.create', ['case_id'=>$case->id]) }}" class="bg-indigo-600 text-white px-3 py-1.5 rounded">سند جدید</a>
        <form method="POST" action="{{ route('cases.destroy', $case) }}" onsubmit="return confirm('حذف؟')">@csrf @method('DELETE')
            <button class="bg-red-600 text-white px-3 py-1.5 rounded">حذف</button>
        </form>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="space-y-4">
    <div class="bg-white rounded-lg shadow p-4 text-sm space-y-2">
        <div class="flex justify-between"><span class="text-gray-500">مشتری</span><span>{{ $case->customer?->name ?? '—' }}</span></div>
        <div class="flex justify-between"><span class="text-gray-500">کارشناس</span><span>{{ $case->expert?->name ?? '—' }}</span></div>
        <div class="flex justify-between"><span class="text-gray-500">اولویت</span><span>{{ $case->priority }}</span></div>
        <div class="flex justify-between"><span class="text-gray-500">ارز / Incoterm</span><span>{{ $case->currency }} / {{ $case->incoterm ?? '—' }}</span></div>
        @if($case->description)<p class="pt-2 border-t text-gray-600 whitespace-pre-wrap">{{ $case->description }}</p>@endif
        @include('partials.custom_fields_display')
    </div>

    <div class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold mb-3 text-sm">تغییر وضعیت</h2>
        <form method="POST" action="{{ route('cases.change-status', $case) }}" class="space-y-2 text-sm">@csrf
            <select name="status" required class="w-full border rounded px-3 py-2">
                <option value="">—</option>
                @foreach(\App\Models\CaseModel::STATUSES as $k=>$v)
                    @if($k !== $case->current_status)<option value="{{ $k }}">{{ $v }}</option>@endif
                @endforeach
            </select>
            <textarea name="reason" rows="2" class="w-full border rounded px-3 py-2" placeholder="دلیل"></textarea>
            @can('case.override_status')
            <label class="flex gap-2 items-center"><input type="checkbox" name="is_override" value="1"> Override</label>
            @endcan
            <button class="w-full bg-blue-600 text-white py-2 rounded">اعمال</button>
        </form>
    </div>

    <div class="bg-white rounded-lg shadow p-4 text-sm">
        <h2 class="font-semibold mb-2">پیوست‌ها</h2>
        <form method="POST" action="{{ route('cases.attachments.store', $case) }}" enctype="multipart/form-data" class="mb-3">@csrf
            <input type="file" name="file" required class="text-xs mb-2 w-full">
            <button class="bg-slate-700 text-white px-3 py-1 rounded text-xs">آپلود (حداکثر ۵۰MB)</button>
        </form>
        @foreach($case->attachments as $a)
        <div class="flex justify-between border-b py-1 text-xs">
            <a class="text-blue-600" href="{{ asset('storage/'.$a->file_path) }}" target="_blank">{{ $a->file_name }}</a>
            <form method="POST" action="{{ route('attachments.destroy',$a) }}">@csrf @method('DELETE')
                <button class="text-red-600">حذف</button>
            </form>
        </div>
        @endforeach
    </div>

    <div class="bg-white rounded-lg shadow p-4 text-sm">
        <h2 class="font-semibold mb-2">تحویل‌ها</h2>
        <form method="POST" action="{{ route('cases.deliveries.store',$case) }}" class="space-y-2 mb-3">@csrf
            <input name="delivery_number" placeholder="شماره تحویل" class="w-full border rounded px-2 py-1">
            <input type="date" name="delivery_date" class="w-full border rounded px-2 py-1">
            <input name="description" placeholder="توضیح" class="w-full border rounded px-2 py-1">
            <button class="bg-slate-700 text-white px-3 py-1 rounded text-xs">ثبت تحویل</button>
        </form>
        @foreach($case->deliveries as $d)
            <div class="border-b py-1 text-xs">{{ $d->delivery_number }} — {{ $d->delivery_date?->format('Y/m/d') }} — {{ $d->status }}</div>
        @endforeach
    </div>

    <div class="bg-white rounded-lg shadow p-4 text-sm">
        <h2 class="font-semibold mb-2">مطالبات و پرداخت</h2>
        <form method="POST" action="{{ route('cases.receivables.store',$case) }}" class="space-y-2 mb-3">@csrf
            <input type="number" step="0.01" name="amount" required placeholder="مبلغ" class="w-full border rounded px-2 py-1">
            <input type="date" name="due_date" class="w-full border rounded px-2 py-1">
            <button class="bg-slate-700 text-white px-3 py-1 rounded text-xs">ثبت مطالبه</button>
        </form>
        @foreach($case->receivables as $r)
        <div class="border rounded p-2 mb-2 text-xs">
            <div>{{ number_format($r->amount,2) }} {{ $r->currency }} — {{ $r->status }} — باقی: {{ number_format($r->remaining,2) }}</div>
            <form method="POST" action="{{ route('receivables.payments.store',$r) }}" class="flex gap-1 mt-1">@csrf
                <input type="number" step="0.01" name="amount" required placeholder="پرداخت" class="border rounded px-1 flex-1">
                <input type="date" name="payment_date" required value="{{ date('Y-m-d') }}" class="border rounded px-1">
                <button class="bg-green-600 text-white px-2 rounded">ثبت</button>
            </form>
        </div>
        @endforeach
    </div>
</div>

<div class="lg:col-span-2 space-y-4">
    <div class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold mb-3 text-sm">اسناد مرتبط</h2>
        @forelse($case->documents as $doc)
            <div class="text-sm border-b py-1"><a class="text-blue-600" href="{{ route('documents.show',$doc) }}">{{ $doc->document_number }}</a> — {{ $doc->type }} — {{ number_format($doc->gross_amount,2) }}</div>
        @empty
            <p class="text-sm text-gray-500">سندی نیست.</p>
        @endforelse
    </div>

    <div class="bg-white rounded-lg shadow p-4">
        <h2 class="font-semibold mb-4 text-sm">خط زمانی</h2>
        <form method="POST" action="{{ route('cases.activities.store',$case) }}" class="mb-4 p-3 bg-gray-50 rounded text-sm">@csrf
            <select name="type" id="activity-type" class="border rounded px-2 py-1 mb-2">
                <option value="comment">دیدگاه</option>
                <option value="phone_call_report">گزارش تماس</option>
            </select>
            <textarea name="body" required rows="3" class="w-full border rounded px-3 py-2 mb-2"></textarea>
            <div id="call-fields" class="grid grid-cols-2 gap-2 mb-2" style="display:none">
                <input type="datetime-local" name="call_datetime" class="border rounded px-2 py-1">
                <select name="call_direction" class="border rounded px-2 py-1"><option value="outgoing">خروجی</option><option value="incoming">ورودی</option></select>
            </div>
            <button class="bg-blue-600 text-white px-4 py-1.5 rounded">ثبت</button>
        </form>

        @foreach($case->activities->whereNull('parent_id')->sortByDesc('created_at') as $activity)
        <div class="border-r-4 {{ $activity->type==='phone_call_report'?'border-green-500':'border-gray-300' }} pr-3 mb-4 text-sm">
            <div class="text-xs text-gray-500 mb-1">{{ $activity->user?->name }} — {{ $activity->created_at?->format('Y/m/d H:i') }}
                @if($activity->type==='phone_call_report')<span class="bg-green-100 text-green-700 px-1 rounded">تماس</span>@endif
            </div>
            <div class="whitespace-pre-wrap">{{ $activity->body }}</div>
            <div class="flex gap-2 mt-1 text-xs items-center">
                <form method="POST" action="{{ route('activities.react',$activity) }}">@csrf
                    <input type="hidden" name="type" value="like">
                    <button class="text-blue-600">👍 {{ $activity->reactions->where('type','like')->count() }}</button>
                </form>
                <form method="POST" action="{{ route('activities.react',$activity) }}" class="flex gap-1">@csrf
                    <input type="hidden" name="type" value="emoji">
                    <input type="hidden" name="emoji" value="✅">
                    <button>✅</button>
                </form>
                <form method="POST" action="{{ route('activities.react',$activity) }}">@csrf
                    <input type="hidden" name="type" value="emoji">
                    <input type="hidden" name="emoji" value="🔥">
                    <button>🔥</button>
                </form>
            </div>
            {{-- reply --}}
            <form method="POST" action="{{ route('cases.activities.store',$case) }}" class="mt-2 mr-4">@csrf
                <input type="hidden" name="type" value="comment">
                <input type="hidden" name="parent_id" value="{{ $activity->id }}">
                <div class="flex gap-2">
                    <input name="body" required placeholder="پاسخ..." class="flex-1 border rounded px-2 py-1 text-xs">
                    <button class="text-xs bg-gray-200 px-2 rounded">پاسخ</button>
                </div>
            </form>
            @foreach($activity->children as $child)
            <div class="mr-6 mt-2 border-r-2 border-gray-200 pr-2 text-xs text-gray-700">
                <span class="font-medium">{{ $child->user?->name }}</span>: {{ $child->body }}
            </div>
            @endforeach
        </div>
        @endforeach
    </div>
</div>
</div>
<script>
document.getElementById('activity-type')?.addEventListener('change', function(){
  document.getElementById('call-fields').style.display = this.value==='phone_call_report'?'grid':'none';
});
</script>

<div id="mention-box" class="hidden fixed bg-white border shadow rounded text-sm z-50 max-h-40 overflow-auto"></div>
<script>
(function(){
  const ta = document.querySelector('textarea[name=body]');
  const box = document.getElementById('mention-box');
  if(!ta || !box) return;
  let timer;
  ta.addEventListener('keyup', function(e){
    const val = ta.value;
    const m = val.slice(0, ta.selectionStart).match(/@([\w\u0600-\u06FF]*)$/);
    if(!m){ box.classList.add('hidden'); return; }
    clearTimeout(timer);
    timer = setTimeout(()=>{
      fetch('{{ route('mentions.users') }}?q='+encodeURIComponent(m[1]), {headers:{'Accept':'application/json'}})
        .then(r=>r.json()).then(users=>{
          if(!users.length){ box.classList.add('hidden'); return; }
          box.innerHTML = users.map(u=>'<div class="px-3 py-1 hover:bg-blue-50 cursor-pointer" data-name="'+u.name+'">'+u.name+'</div>').join('');
          const rect = ta.getBoundingClientRect();
          box.style.left = rect.left+'px';
          box.style.top = (rect.bottom+window.scrollY)+'px';
          box.classList.remove('hidden');
          box.querySelectorAll('[data-name]').forEach(el=>{
            el.onclick = ()=>{
              ta.value = val.replace(/@([\w\u0600-\u06FF]*)$/, '@'+el.dataset.name+' ');
              box.classList.add('hidden');
              ta.focus();
            };
          });
        });
    }, 200);
  });
})();
</script>

@endsection