@extends('layouts.app')

@section('title', 'مبيعات - منصة التقديم')

@section('content')
<div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
    <div class="relative flex items-start justify-between">
        <div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">المبيعات</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">منصة المبيعات</h1>
            <p class="text-white/70 text-sm mt-1">متابعة الليدات حسب الحالة</p>
        </div>
    </div>
</div>

@php
$statusBadgeColors = [
    'new' => 'bg-secondary-500/10 text-secondary-600',
    'contacted' => 'bg-blue-50 text-blue-700 border-blue-200',
    'interested' => 'bg-green-50 text-green-700 border-green-200',
    'waiting_followup' => 'bg-amber-50 text-amber-700 border-amber-200',
    'dead' => 'bg-red-50 text-red-700 border-red-200',
    'documents_collected' => 'bg-purple-50 text-purple-700 border-purple-200',
    'initial_acceptance' => 'bg-secondary-500/10 text-secondary-600',
    'payment_stage' => 'bg-accent-50 text-accent-600 border-accent-100',
    'final_acceptance' => 'bg-green-50 text-green-700 border-green-200',
    'registered' => 'bg-green-50 text-green-700 border-green-200',
];
@endphp

<div class="grid grid-cols-1 md:grid-cols-4 gap-5 mb-6">
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-secondary-600"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">إجمالي الليدات</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ $totalLeads }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-secondary-500/10 flex items-center justify-center text-lg shrink-0">📊</div>
        </div>
    </div>
</div>

<div class="bg-white rounded-[16px] border border-gray-200 p-5 mb-6 shadow-sm">
    <form method="GET" class="flex flex-wrap items-end gap-4">
        <div class="min-w-[160px] flex-1">
            <label class="block text-xs font-semibold text-muted mb-1.5">الحالة</label>
            <div class="relative">
                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-muted text-sm">🔍</span>
                <select name="status" class="w-full pr-9 pl-3 py-2.5 rounded-xl border border-gray-200 text-sm bg-surface focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all appearance-none">
                    <option value="">الكل</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}" {{ request('status') == $s ? 'selected' : '' }}>{{ $statusLabels[$s] ?? $s }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="min-w-[160px] flex-1">
            <label class="block text-xs font-semibold text-muted mb-1.5">مسؤول المبيعات</label>
            <div class="relative">
                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-muted text-sm">👤</span>
                <select name="assigned_to" class="w-full pr-9 pl-3 py-2.5 rounded-xl border border-gray-200 text-sm bg-surface focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all appearance-none">
                    <option value="">الكل</option>
                    @foreach ($salesUsers as $id => $name)
                        <option value="{{ $id }}" {{ request('assigned_to') == $id ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <button type="submit" class="px-5 py-2.5 bg-accent-500 text-white rounded-xl text-sm font-semibold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 cursor-pointer">تصفية</button>
        <a href="{{ route('sales.pipeline') }}" class="px-5 py-2.5 bg-gray-100 text-gray-600 rounded-xl text-sm font-semibold hover:bg-gray-200 transition-all no-underline">إعادة تعيين</a>
    </form>
</div>

<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden mb-6">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <h2 class="font-display font-bold text-primary-900 text-base flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-accent-500/10 flex items-center justify-center text-xs">📋</span> لوحة الليدات</h2>
        <button onclick="document.getElementById('addModal').classList.remove('hidden')" class="px-4 py-2 bg-accent-500 text-white rounded-xl text-xs font-semibold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 cursor-pointer">+ إضافة ليد</button>
    </div>
    <div class="overflow-x-auto pb-4">
        <div class="flex gap-4 p-4" style="min-width: max-content;">
            @foreach ($statuses as $status)
                @php
                    $count = $statusCounts[$status] ?? 0;
                    $leads = $leadsByStatus[$status] ?? collect();
                    $badgeColor = $statusBadgeColors[$status] ?? 'bg-secondary-500/10 text-secondary-600';
                @endphp
                <div class="flex-shrink-0 w-72 bg-white rounded-[16px] border border-gray-200 shadow-sm p-4">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-display font-bold text-sm text-primary-900">{{ $statusLabels[$status] ?? $status }}</h3>
                        <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-accent-500/10 text-accent-600 text-xs font-bold">{{ $count }}</span>
                    </div>
                    <div class="space-y-2.5 min-h-[200px]">
                        @forelse ($leads as $lead)
                            <div class="bg-surface rounded-[12px] p-3.5 shadow-sm border border-gray-100 hover:border-accent-500/30 hover:shadow-md transition-all">
                                <div class="flex items-start justify-between gap-2 mb-2">
                                    <p class="font-semibold text-sm text-primary-900">{{ $lead->name ?? $lead->full_name }}</p>
                                    @if ($lead->assigned_to && isset($salesUsers[$lead->assigned_to]))
                                        <span class="text-xs px-2 py-0.5 rounded-full bg-secondary-500/10 text-secondary-600 shrink-0">{{ $salesUsers[$lead->assigned_to] }}</span>
                                    @endif
                                </div>
                                @if ($lead->phone)
                                    <p class="text-xs text-muted">📞 {{ $lead->phone }}</p>
                                @endif
                                @if ($lead->email)
                                    <p class="text-xs text-muted">📧 {{ $lead->email }}</p>
                                @endif
                                @if ($lead->notes)
                                    <p class="text-xs text-muted mt-1 line-clamp-2">{{ $lead->notes }}</p>
                                @endif
                                <div class="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
                                    <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ $badgeColor }}">{{ $statusLabels[$status] ?? $status }}</span>
                                    <span class="text-[10px] text-muted">{{ \Carbon\Carbon::parse($lead->created_at)->format('Y-m-d') }}</span>
                                </div>
                            </div>
                        @empty
                            <p class="text-xs text-muted text-center py-6">📂 لا توجد ليدات</p>
                        @endforelse
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div id="addModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg">➕</div>
                <h2 class="text-lg font-bold text-primary-900">إضافة ليد جديد</h2>
            </div>
            <button onclick="document.getElementById('addModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 hover:text-text flex items-center justify-center transition-all cursor-pointer text-lg">&times;</button>
        </div>
        <form method="POST" action="{{ route('sales.pipeline.store') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">الاسم الكامل</label>
                <input type="text" name="name" required class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">البريد الإلكتروني</label>
                <input type="email" name="email" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">رقم الهاتف</label>
                <input type="text" name="phone" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">مسؤول المبيعات</label>
                <select name="assigned_to" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                    <option value="">اختر الموظف</option>
                    @foreach ($salesUsers as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">ملاحظة</label>
                <textarea name="note" rows="2" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all"></textarea>
            </div>
            <div class="mb-6">
                <label class="block text-xs font-semibold text-muted mb-1.5">الحالة</label>
                <select name="status" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}">{{ $statusLabels[$s] ?? $s }}</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all shadow-sm shadow-accent-500/20 flex items-center justify-center gap-2 cursor-pointer">إضافة الليد</button>
        </form>
    </div>
</div>
@endsection