@extends('layout.main')

@section('title', 'টিম বিস্তারিত')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 sm:p-6">
    <div class="max-w-7xl mx-auto space-y-6">

        {{-- Header --}}
        <div class="bg-white border rounded-2xl p-4 sm:p-6 shadow-sm">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="min-w-0">
                    <h1 class="text-xl sm:text-2xl font-bold text-gray-900">টিম বিস্তারিত</h1>
                    <div class="mt-1 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 text-sm text-gray-600">
                        <div class="min-w-0">
                            টিম: <span class="font-semibold text-gray-900 break-words">{{ $team->name }}</span>
                        </div>
                        <div class="hidden sm:block text-gray-300">•</div>
                        <div class="flex items-center gap-2">
                            @if(($team->status ?? 'active') === 'active')
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-green-100 text-green-800 text-xs font-medium">
                                    সক্রিয়
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-gray-200 text-gray-700 text-xs font-medium">
                                    নিষ্ক্রিয়
                                </span>
                            @endif

                            <span class="text-gray-300">|</span>

                            <span class="text-gray-700">
                                মেম্বার: <span class="font-semibold text-blue-700">{{ $team->members_count ?? ($team->members?->count() ?? 0) }}</span>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap gap-2 sm:justify-end">
                    <a href="{{ route('teams.index') }}"
                       class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm">
                        টিম তালিকা
                    </a>

                    <a href="{{ route('teams.edit', $team) }}"
                       class="inline-flex items-center justify-center px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition text-sm">
                        এডিট
                    </a>

                    <form action="{{ route('teams.destroy', $team) }}" method="POST"
                          onsubmit="return confirm('আপনি কি নিশ্চিত?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="inline-flex items-center justify-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm">
                            ডিলিট
                        </button>
                    </form>
                </div>
            </div>

            {{-- Success --}}
            @if(session('success'))
                <div class="mt-4 p-4 rounded-xl bg-green-50 border border-green-200 text-green-800 text-sm">
                    {{ session('success') }}
                </div>
            @endif
        </div>

        

        {{-- Members --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-4 sm:p-6 border-b flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <div>
                    <h3 class="text-base sm:text-lg font-semibold text-gray-900">টিম মেম্বার</h3>
                    <p class="text-sm text-gray-600 mt-1">মোবাইলে স্ক্রল না করে কার্ড আকারে দেখাবে, ডেস্কটপে টেবিল।</p>
                </div>

                <a href="{{ route('teams.members.index', $team) }}"
                   class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm">
                    মেম্বার ম্যানেজ করুন
                </a>
            </div>

            {{-- Mobile: Cards --}}
            <div class="block sm:hidden divide-y">
                @forelse(($team->members ?? []) as $member)
                    @php
                        $status = $member->status ?? 'active';
                        $memberPhone = $member->user?->phone;
                        $memberDial = $memberPhone ? preg_replace('/[^0-9+]/', '', $memberPhone) : null;
                    @endphp
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="font-semibold text-gray-900 break-words">
                                    {{ $member->user?->name ?? '—' }}
                                </div>
                                <div class="text-sm text-gray-600 mt-1">
                                    মোবাইল:
                                    @if($memberDial)
                                        <a href="tel:{{ $memberDial }}"
                                           class="ml-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-full
                                                  bg-blue-50 text-blue-700 font-semibold
                                                  ring-1 ring-blue-100
                                                  hover:bg-blue-100 hover:text-blue-800 transition"
                                           title="কল করতে ক্লিক করুন">
                                            <i class="fas fa-phone-alt text-xs"></i>
                                            <span>{{ $memberPhone }}</span>
                                        </a>
                                    @else
                                        <span class="ml-2 text-gray-400">—</span>
                                    @endif
                                </div>
                            </div>

                            <div class="shrink-0 text-right space-y-2">
                                <span class="inline-flex px-2 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-medium">
                                    {{ $member->role?->name ?? $member->role_name ?? 'মেম্বার' }}
                                </span>

                                @if($status === 'active')
                                    <div class="inline-flex px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs font-medium">
                                        সক্রিয়
                                    </div>
                                @else
                                    <div class="inline-flex px-2 py-1 rounded-full bg-gray-200 text-gray-700 text-xs font-medium">
                                        নিষ্ক্রিয়
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="mt-3 text-xs text-gray-500">
                            যোগদান: {{ optional($member->created_at)->format('d M, Y') ?? '—' }}
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-center text-gray-500">
                        এখনো কোনো মেম্বার যোগ করা হয়নি
                    </div>
                @endforelse
            </div>

            {{-- Desktop/Tablet: Table --}}
            <div class="hidden sm:block overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr class="text-left text-sm text-gray-700">
                            <th class="px-4 py-3">#</th>
                            <th class="px-4 py-3">নাম</th>
                            <th class="px-4 py-3">মোবাইল নম্বর</th>
                            <th class="px-4 py-3">রোল</th>
                            <th class="px-4 py-3">স্ট্যাটাস</th>
                            <th class="px-4 py-3">যোগদান</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y">
                        @forelse(($team->members ?? []) as $member)
                            @php
                                $status = $member->status ?? 'active';
                                $memberPhone = $member->user?->phone;
                                $memberDial = $memberPhone ? preg_replace('/[^0-9+]/', '', $memberPhone) : null;
                            @endphp
                            <tr class="hover:bg-gray-50 text-sm">
                                <td class="px-4 py-3">{{ $loop->iteration }}</td>

                                <td class="px-4 py-3 font-medium text-gray-900">
                                    {{ $member->user?->name ?? '—' }}
                                </td>

                                <td class="px-4 py-3">
                                    @if($memberDial)
                                        <a href="tel:{{ $memberDial }}"
                                           class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full
                                                  bg-blue-50 text-blue-700 font-semibold
                                                  ring-1 ring-blue-100
                                                  hover:bg-blue-100 hover:text-blue-800 transition"
                                           title="কল করতে ক্লিক করুন">
                                            <i class="fas fa-phone-alt text-xs"></i>
                                            <span class="tracking-wide">{{ $memberPhone }}</span>
                                        </a>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>

                                <td class="px-4 py-3">
                                    <span class="px-2 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-medium">
                                        {{ $member->role?->name ?? $member->role_name ?? 'মেম্বার' }}
                                    </span>
                                </td>

                                <td class="px-4 py-3">
                                    @if($status === 'active')
                                        <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs font-medium">সক্রিয়</span>
                                    @else
                                        <span class="px-2 py-1 rounded-full bg-gray-200 text-gray-700 text-xs font-medium">নিষ্ক্রিয়</span>
                                    @endif
                                </td>

                                <td class="px-4 py-3 text-gray-700">
                                    {{ optional($member->created_at)->format('d M, Y') ?? '—' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                    এখনো কোনো মেম্বার যোগ করা হয়নি
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Tasks --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-4 sm:p-6 border-b">
                <h3 class="text-base sm:text-lg font-semibold text-gray-900">টাস্ক</h3>
                <p class="text-sm text-gray-600 mt-1">
                    টিম-ভিত্তিক Task রিলেশন (tasks.team_id) থাকলে এখানে দেখাবে।
                </p>
            </div>

            @php $tasks = $team->tasks ?? collect(); @endphp

            {{-- Mobile: Cards --}}
            <div class="block sm:hidden divide-y">
                @if($tasks->count() > 0)
                    @foreach($tasks as $task)
                        <div class="p-4">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="font-semibold text-gray-900 break-words">
                                        {{ $task->title ?? '—' }}
                                    </div>
                                    <div class="text-sm text-gray-600 mt-1">
                                        ডেডলাইন:
                                        <span class="text-gray-900">
                                            {{ $task->due_date ? \Carbon\Carbon::parse($task->due_date)->format('d M, Y') : '—' }}
                                        </span>
                                    </div>
                                </div>

                                <span class="shrink-0 px-2 py-1 rounded-full bg-gray-200 text-gray-800 text-xs font-medium">
                                    {{ $task->status ?? '—' }}
                                </span>
                            </div>

                            <div class="mt-3 text-sm text-gray-700">
                                অগ্রগতি: <span class="font-semibold">{{ $task->progress_percent ?? 0 }}%</span>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="p-6 text-center text-gray-500">
                        কোনো টাস্ক পাওয়া যায়নি
                    </div>
                @endif
            </div>

            {{-- Desktop/Tablet: Table --}}
            <div class="hidden sm:block overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr class="text-left text-sm text-gray-700">
                            <th class="px-4 py-3">শিরোনাম</th>
                            <th class="px-4 py-3">ডেডলাইন</th>
                            <th class="px-4 py-3">স্ট্যাটাস</th>
                            <th class="px-4 py-3">অগ্রগতি</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y">
                        @if($tasks->count() > 0)
                            @foreach($tasks as $task)
                                <tr class="hover:bg-gray-50 text-sm">
                                    <td class="px-4 py-3 font-medium text-gray-900">
                                        {{ $task->title ?? '—' }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-700">
                                        {{ $task->due_date ? \Carbon\Carbon::parse($task->due_date)->format('d M, Y') : '—' }}
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 rounded-full bg-gray-200 text-gray-800 text-xs font-medium">
                                            {{ $task->status ?? '—' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-gray-700">
                                        {{ $task->progress_percent ?? 0 }}%
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="px-4 py-8 text-center text-gray-500">
                                    কোনো টাস্ক পাওয়া যায়নি
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Mobile Sticky Action Bar --}}
        <div class="sm:hidden fixed bottom-3 left-0 right-0 px-4 z-40">
            <div class="max-w-7xl mx-auto bg-white border shadow-lg rounded-2xl p-3 flex gap-2">
                <a href="{{ route('teams.index') }}"
                   class="flex-1 inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-gray-700 rounded-xl text-sm">
                    তালিকা
                </a>

                <a href="{{ route('teams.edit', $team) }}"
                   class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-yellow-500 text-white rounded-xl text-sm">
                    এডিট
                </a>

                <form class="flex-1" action="{{ route('teams.destroy', $team) }}" method="POST"
                      onsubmit="return confirm('আপনি কি নিশ্চিত?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="w-full inline-flex items-center justify-center px-4 py-2 bg-red-600 text-white rounded-xl text-sm">
                        ডিলিট
                    </button>
                </form>
            </div>
        </div>

        {{-- Responsive Info Section --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">

            {{-- Team Info --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-900">টিম তথ্য</h3>
                    <span class="text-xs text-gray-500">
                        {{ optional($team->created_at)->format('d M, Y') ?? '—' }}
                    </span>
                </div>

                <div class="space-y-3 text-sm">
                    <div class="flex items-start justify-between gap-4">
                        <span class="text-gray-600">টিম নাম</span>
                        <span class="font-medium text-gray-900 text-right break-words">{{ $team->name }}</span>
                    </div>

                    <div class="flex items-center justify-between gap-4">
                        <span class="text-gray-600">স্ট্যাটাস</span>
                        @if(($team->status ?? 'active') === 'active')
                            <span class="px-2.5 py-1 rounded-full bg-green-100 text-green-800 text-xs font-medium">সক্রিয়</span>
                        @else
                            <span class="px-2.5 py-1 rounded-full bg-gray-200 text-gray-700 text-xs font-medium">নিষ্ক্রিয়</span>
                        @endif
                    </div>

                    <div class="flex items-center justify-between gap-4">
                        <span class="text-gray-600">মেম্বার</span>
                        <span class="font-semibold text-blue-700">
                            {{ $team->members_count ?? ($team->members?->count() ?? 0) }}
                        </span>
                    </div>

                    @if(!empty($team->description))
                        <div class="pt-2 border-t">
                            <div class="text-gray-600 text-xs mb-1">বিবরণ</div>
                            <p class="text-gray-800 text-sm leading-relaxed break-words">
                                {{ $team->description }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Candidate Info --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-900">প্রার্থী</h3>
                    @if($team->candidate)
                        <a href="{{ route('candidates.show', $team->candidate) }}"
                           class="text-sm text-green-600 hover:text-green-800 font-medium">
                            দেখুন →
                        </a>
                    @endif
                </div>

                <div class="space-y-3 text-sm">
                    <div class="flex items-start justify-between gap-4">
                        <span class="text-gray-600">নাম</span>
                        <span class="font-medium text-gray-900 text-right break-words">
                            {{ $team->candidate?->user?->name ?? '—' }}
                        </span>
                    </div>

                    <div class="flex items-center justify-between gap-4">
                        <span class="text-gray-600">প্রার্থী ID</span>
                        <span class="text-gray-900">{{ $team->candidate?->id ?? '—' }}</span>
                    </div>

                    <div class="flex items-start justify-between gap-4">
                        <span class="text-gray-600">সীট</span>
                        <span class="text-gray-900 text-right break-words">
                            {{ $team->candidate?->seat?->name_bn ?? $team->candidate?->seat?->name_en ?? '—' }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Manager Info --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-4">ম্যানেজার</h3>

                <div class="space-y-3 text-sm">
                    <div class="flex items-start justify-between gap-4">
                        <span class="text-gray-600">নাম</span>
                        <span class="font-medium text-gray-900 text-right break-words">
                            {{ $team->manager?->name ?? '—' }}
                        </span>
                    </div>

                    <div class="flex items-center justify-between gap-4">
                        <span class="text-gray-600">মোবাইল</span>
                        <span class="text-gray-900">{{ $team->manager?->phone ?? '—' }}</span>
                    </div>

                    <div class="flex items-center justify-between gap-4">
                        <span class="text-gray-600">ম্যানেজার ID</span>
                        <span class="text-gray-900">{{ $team->manager?->id ?? '—' }}</span>
                    </div>

                    @php
                        $managerPhone = $team->manager?->phone;
                        $managerDial = $managerPhone ? preg_replace('/[^0-9+]/', '', $managerPhone) : null;
                    @endphp

                    @if($managerDial)
                        <div class="pt-2 border-t">
                            <a href="tel:{{ $managerDial }}"
                               class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg
                                      bg-blue-600 text-white hover:bg-blue-700 transition text-sm"
                               title="কল করতে ক্লিক করুন">
                                <i class="fas fa-phone-alt text-xs"></i>
                                কল করুন
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- extra spacing for mobile sticky bar --}}
        <div class="sm:hidden h-20"></div>

    </div>
</div>
@endsection