@extends('channels.layouts.master')

@section('content')
<style>


    .team-header {
        text-align: center;
        padding: 60px 0 40px;
    }

    .team-header h1 {
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 20px;
    }

    .team-header p {
        color: #7f8c8d;
        max-width: 700px;
        margin: 0 auto;
    }

    .filter-buttons {
        text-align: center;
        margin: 40px 0;
    }

    .filter-btn {
        background: white;
        border: 2px solid transparent;
        padding: 10px 30px;
        margin: 5px;
        border-radius: 50px;
        font-weight: 500;
        color: #7f8c8d;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .filter-btn:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
    }

    .filter-btn.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

    .team-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        margin-bottom: 30px;
        height: 100%;
    }

    .team-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

    .team-img-wrapper {
        position: relative;
    }

    .team-card-img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .team-card-body {
        padding: 25px;
    }

    .team-name {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    .team-position {
        color: #667eea;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .team-department {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    .journalist-badge {
        display: inline-block;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-left: 10px;
    }

    .team-bio {
        color: #7f8c8d;
        margin-bottom: 20px;
        line-height: 1.6;
        min-height: 50px;
    }

    .contact-info {
        margin-bottom: 20px;
    }

    .contact-item {
        display: flex;
        align-items: center;
        color: #7f8c8d;
        margin-bottom: 10px;
    }

    .contact-item i {
        width: 20px;
        margin-right: 10px;
        color: #667eea;
    }

    .social-links {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .social-btn {
        flex: 1;
        min-width: calc(50% - 5px);
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        color: white;
    }

    .social-btn:hover {
        transform: translateY(-2px);
        text-decoration: none;
        color: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .linkedin-btn {
        background: #0077b5;
    }

    .linkedin-btn:hover {
        background: #005582;
    }

    .email-btn {
        background: #ea4335;
    }

    .email-btn:hover {
        background: #c23321;
    }

    .facebook-btn {
        background: #3b5998;
    }

    .facebook-btn:hover {
        background: #2d4373;
    }

    .twitter-btn {
        background: #1da1f2;
    }

    .twitter-btn:hover {
        background: #0d8bd9;
    }

    .stats-section {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .stat-card {
        background: white;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    .stat-number {
        font-weight: 700;
        margin-bottom: 10px;
    }

    .stat-label {
        color: #7f8c8d;
    }

    .team-member {
        display: block;
    }

    .team-member.hidden {
        display: none;
    }

    .status-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        padding: 8px 15px;
        border-radius: 20px;
        font-weight: 600;
        text-transform: uppercase;
        z-index: 10;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    .status-active {
        background: #10b981;
        color: white;
    }

    .status-inactive {
        background: #ef4444;
        color: white;
    }
</style>

<div class="container">
    <div class="team-header">
        <h1 class="title3" style="font-size: 40px">আমাদের টিম</h1>
        <p class="">দক্ষ এবং অভিজ্ঞ পেশাদারদের নিয়ে গঠিত আমাদের টিম আপনার সেবায় নিয়োজিত</p>
    </div>

    <div class="filter-buttons">
        <button class="filter-btn active" onclick="filterTeam('all')">সকল বিভাগ</button>
        @foreach($departments as $department)
            <button class="filter-btn" onclick="filterTeam('dept_{{ $department->id }}')">
                {{ $department->name }}
            </button>
        @endforeach
    </div>
    

    <div class="row" id="teamGrid">
        @forelse($employees as $employee)
        <div class="col-lg-4 col-md-6 team-member" data-department="dept_{{ $employee->department_id }}">
            <div class="team-card">
                <div class="team-img-wrapper">
                    @if($employee->image)
                        <img src="{{ asset($employee->image) }}" alt="{{ $employee->name }}" class="team-card-img">
                    @else
                        <img src="https://ui-avatars.com/api/?name={{ urlencode($employee->name) }}&size=400&background=667eea&color=fff" alt="{{ $employee->name }}" class="team-card-img">
                    @endif

                    <span class="status-badge {{ $employee->status == 1 ? 'status-active' : 'status-inactive' }}">
                        {{ $employee->status == 1 ? 'Active' : 'Inactive' }}
                    </span>
                </div>

                <div class="team-card-body">
                    <h3 class="team-name">{{ $employee->name }}</h3>
                    <p class="team-position">{{ $employee->position }}</p>

                    <span class="team-department">
                        {{ $employee->department->name }}
                    </span>

                    @if($employee->is_journalist)
                        <span class="journalist-badge">
                            <i class="fas fa-microphone"></i> Journalist
                        </span>
                    @endif

                    @if($employee->address)
                        <p class="team-bio">{{ Str::limit($employee->address, 100) }}</p>
                    @else
                        <p class="team-bio">{{ $employee->department->name }} বিভাগের একজন দক্ষ পেশাদার সদস্য</p>
                    @endif

                    <div class="contact-info">
                        @if($employee->email)
                            <div class="contact-item">
                                <i class="fas fa-envelope"></i>
                                <span>{{ $employee->email }}</span>
                            </div>
                        @endif

                        @if($employee->phone)
                            <div class="contact-item">
                                <i class="fas fa-phone"></i>
                                <span>{{ $employee->phone }}</span>
                            </div>
                        @endif

                        @if($employee->city)
                            <div class="contact-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>{{ $employee->city }}@if($employee->country), {{ $employee->country }}@endif</span>
                            </div>
                        @endif
                    </div>

                    <div class="social-links">
                        @if($employee->linkedIn)
                            <a href="{{ $employee->linkedIn }}" target="_blank" class="social-btn linkedin-btn">
                                <i class="fab fa-linkedin-in"></i> LinkedIn
                            </a>
                        @endif

                        @if($employee->email)
                            <a href="mailto:{{ $employee->email }}" class="social-btn email-btn">
                                <i class="fas fa-envelope"></i> Email
                            </a>
                        @endif

                        @if($employee->facebook)
                            <a href="{{ $employee->facebook }}" target="_blank" class="social-btn facebook-btn">
                                <i class="fab fa-facebook-f"></i> Facebook
                            </a>
                        @endif

                        @if($employee->twitter)
                            <a href="{{ $employee->twitter }}" target="_blank" class="social-btn twitter-btn">
                                <i class="fab fa-twitter"></i> Twitter
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12 text-center">
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> কোন টিম মেম্বার পাওয়া যায়নি।
            </div>
        </div>
        @endforelse
    </div>

    <div class="stats-section">
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="stat-card">
                    <div class="stat-number" style="color: #667eea;">{{ $totalEmployees }}+</div>
                    <div class="stat-label">টিম মেম্বার</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-card">
                    <div class="stat-number" style="color: #06b6d4;">{{ $totalJournalists }}+</div>
                    <div class="stat-label">সাংবাদিক</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-card">
                    <div class="stat-number" style="color: #ec4899;">{{ $totalDepartments }}+</div>
                    <div class="stat-label">বিভাগ</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-card">
                    <div class="stat-number" style="color: #f59e0b;">98%</div>
                    <div class="stat-label">দর্শক সন্তুষ্টি</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function filterTeam(departmentId) {
        const buttons = document.querySelectorAll('.filter-btn');
        buttons.forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');

        const members = document.querySelectorAll('.team-member');
        members.forEach(member => {
            if (departmentId === 'all' || member.getAttribute('data-department') === departmentId) {
                member.classList.remove('hidden');
            } else {
                member.classList.add('hidden');
            }
        });
    }
</script>
@endsection