@extends('admin::layouts.master')
@php
    $pageTitle = 'تیم کاربر';
@endphp

@section('title', $pageTitle)

@section('content')
    @php
        $teamStats = [
            'total_members' => 8,
            'active_members' => 6,
            'automations_count' => 24,
            'broadcasts_sent' => 156
        ];
    @endphp

            <!-- هدر صفحه -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="d-flex align-items-center">
                <a href="{{ route('admin.users.index') }}" class="btn btn-icon btn-sm btn-light me-3">
                    <i class="ri-arrow-right-line"></i>
                </a>
                <div class="flex-grow-1">
                    <h4 class="mb-1">👥 تیم {{ $user['name'] }}</h4>
                    <p class="text-muted mb-0">مدیریت اعضا و دسترسی‌های تیم</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="hstack gap-2 justify-content-end">
                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addMemberModal">
                    <i class="ri-user-add-line align-bottom me-1"></i>افزودن عضو
                </button>
                <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
                    <i class="ri-arrow-left-line align-bottom me-1"></i>بازگشت
                </a>
            </div>
        </div>
    </div>

    <!-- آمار تیم -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $teamStats['total_members'] }}</h4>
                            <p class="text-muted mb-0">کل اعضا</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-team-line text-primary fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $teamStats['active_members'] }}</h4>
                            <p class="text-muted mb-0">اعضای فعال</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-user-follow-line text-success fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $teamStats['automations_count'] }}</h4>
                            <p class="text-muted mb-0">اتوماسیون‌ها</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-rocket-line text-info fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $teamStats['broadcasts_sent'] }}</h4>
                            <p class="text-muted mb-0">برادکست ارسالی</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-megaphone-line text-warning fs-18"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- اطلاعات مالک تیم -->
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-user-star-line align-bottom me-2"></i>مالک تیم
                    </h5>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="avatar-lg bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
                            <i class="ri-user-line text-primary fs-24"></i>
                        </div>
                        <h5 class="mb-1">{{ $user['name'] }}</h5>
                        <p class="text-muted mb-2">{{ $user['email'] }}</p>
                        <span class="badge bg-primary bg-opacity-10 text-primary">
                        <i class="ri-crown-line align-bottom me-1"></i>مالک تیم
                    </span>
                    </div>

                    <div class="vstack gap-2">
                        <div class="d-flex justify-content-between border-bottom pb-2">
                            <span class="text-muted">تاریخ عضویت:</span>
                            <span class="fw-medium">۱۴۰۳/۰۶/۱۵</span>
                        </div>
                        <div class="d-flex justify-content-between border-bottom pb-2">
                            <span class="text-muted">وضعیت:</span>
                            <span class="badge bg-success-subtle text-success">فعال</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">تعداد تیم‌ها:</span>
                            <span class="fw-medium">۳ تیم</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- دسترسی‌های تیم -->
            <div class="card mt-4">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-shield-keyhole-line align-bottom me-2"></i>سطح‌های دسترسی
                    </h5>
                </div>
                <div class="card-body">
                    <div class="vstack gap-3">
                        <div class="d-flex align-items-center justify-content-between p-2 border rounded">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3">
                                    <i class="ri-crown-line text-primary fs-14"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0">مالک</h6>
                                    <small class="text-muted">دسترسی کامل</small>
                                </div>
                            </div>
                            <span class="badge bg-primary">۱ نفر</span>
                        </div>

                        <div class="d-flex align-items-center justify-content-between p-2 border rounded">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3">
                                    <i class="ri-user-settings-line text-success fs-14"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0">مدیر</h6>
                                    <small class="text-muted">مدیریت اعضا</small>
                                </div>
                            </div>
                            <span class="badge bg-success">۲ نفر</span>
                        </div>

                        <div class="d-flex align-items-center justify-content-between p-2 border rounded">
                            <div class="d-flex align-items-center">
                                <div class="avatar-xs bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3">
                                    <i class="ri-eye-line text-info fs-14"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0">مشاهده‌گر</h6>
                                    <small class="text-muted">فقط مشاهده</small>
                                </div>
                            </div>
                            <span class="badge bg-info">۵ نفر</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- اعضای تیم -->
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="ri-team-line align-bottom me-2"></i>اعضای تیم
                    </h5>
                    <div class="hstack gap-2">
                        <input type="text" class="form-control form-control-sm" placeholder="جستجو عضو..."
                               style="width: 200px;">
                        <select class="form-select form-select-sm" style="width: 150px;">
                            <option value="">همه نقش‌ها</option>
                            <option value="manager">مدیر</option>
                            <option value="viewer">مشاهده‌گر</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-borderless align-middle mb-0">
                            <thead class="table-light text-muted">
                            <tr>
                                <th>عضو</th>
                                <th class="text-center">نقش</th>
                                <th class="text-center">وضعیت</th>
                                <th class="text-center">دسترسی‌ها</th>
                                <th class="text-center" style="width: 100px;">عملیات</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($teamMembers as $member)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="avatar-xs bg-light rounded-circle d-flex align-items-center justify-content-center">
                                                    <i class="ri-user-line text-muted fs-12"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0">{{ $member['name'] }}</h6>
                                                <small class="text-muted">{{ $member['email'] }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if($member['role'] == 'manager')
                                            <span class="badge bg-success bg-opacity-10 text-success">
                                            <i class="ri-user-settings-line align-bottom me-1"></i>مدیر
                                        </span>
                                        @else
                                            <span class="badge bg-info bg-opacity-10 text-info">
                                            <i class="ri-eye-line align-bottom me-1"></i>مشاهده‌گر
                                        </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ri-checkbox-circle-line align-bottom me-1"></i>فعال
                                    </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex flex-wrap gap-1 justify-content-center">
                                            @foreach($member['permissions'] as $perm)
                                                <span class="badge bg-primary bg-opacity-10 text-primary fs-11">
                                                {{ $perm }}
                                            </span>
                                            @endforeach
                                        </div>
                                    </td>
                                    <td>
                                        <div class="hstack gap-1 justify-content-center">
                                            {{--                                            <button class="btn btn-icon btn-sm btn-soft-warning" data-bs-toggle="tooltip" title="ویرایش دسترسی">--}}
                                            {{--                                                <i class="ri-settings-4-line fs-14"></i>--}}
                                            {{--                                            </button>--}}
                                            <button class="btn btn-icon btn-sm btn-soft-danger" data-bs-toggle="tooltip"
                                                    title="حذف از تیم" onclick="removeMember({{ $loop->index }})">
                                                <i class="ri-user-unfollow-line fs-14"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- صفحه‌بندی -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="text-muted">
                            نمایش {{ count($teamMembers) }} از {{ $teamStats['total_members'] }} عضو
                        </div>
                        <ul class="pagination pagination-sm mb-0">
                            <li class="page-item disabled"><a class="page-link" href="#">قبلی</a></li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">بعدی</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- مدال افزودن عضو -->
    <div class="modal fade" id="addMemberModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">افزودن عضو جدید به تیم</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addMemberForm">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">ایمیل کاربر</label>
                                <input type="email" class="form-control" placeholder="example@email.com" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label">نقش</label>
                                <select class="form-select" required>
                                    <option value="">انتخاب نقش</option>
                                    <option value="manager">مدیر</option>
                                    <option value="viewer">مشاهده‌گر</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">دسترسی‌ها</label>
                                <div class="border rounded p-3">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="perm1">
                                        <label class="form-check-label" for="perm1">مشاهده اتوماسیون‌ها</label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="perm2">
                                        <label class="form-check-label" for="perm2">ایجاد اتوماسیون</label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="perm3">
                                        <label class="form-check-label" for="perm3">ارسال برادکست</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="perm4">
                                        <label class="form-check-label" for="perm4">مدیریت اعضا</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">لغو</button>
                    <button type="button" class="btn btn-primary">افزودن به تیم</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
    <script>
        // حذف عضو از تیم
        function removeMember(memberIndex) {
            Swal.fire({
                title: 'حذف عضو از تیم',
                text: 'آیا از حذف این عضو از تیم اطمینان دارید؟',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'بله، حذف کن',
                cancelButtonText: 'لغو'
            }).then((result) => {
                if (result.isConfirmed) {
                    // در اینجا درخواست AJAX برای حذف ارسال می‌شود
                    Swal.fire('حذف شد!', 'عضو با موفقیت از تیم حذف شد.', 'success');
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            // فعال کردن tooltip‌ها
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // انیمیشن کارت‌ها
            const cards = document.querySelectorAll('.card-animate');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function () {
                    this.style.transform = 'translateY(-5px)';
                });

                card.addEventListener('mouseleave', function () {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>

    <style>
        .card-animate {
            transition: all 0.3s ease;
        }
    </style>
@endpush