{{-- resources/views/pages/experts/index.blade.php --}}
@extends('layouts.app')

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <style>
        .expert-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }

        .expert-initials {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 16px;
        }

        .rating-stars {
            color: #ffc107;
        }

        .stat-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s;
        }

        .stat-card:hover {
            background: #e9ecef;
            transform: translateY(-2px);
        }

        .expert-badge {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 20px;
        }
    </style>
@endsection

@section('js')
    <script>
        // Expert Activate/Deactivate
        window.lang_activate_expert_title = "@lang('messages.activate_expert_title')";
        window.lang_deactivate_expert_title = "@lang('messages.deactivate_expert_title')";
        window.lang_activate_expert_text = "@lang('messages.activate_expert_text')";
        window.lang_deactivate_expert_text = "@lang('messages.deactivate_expert_text')";
        window.lang_confirm_activate = "@lang('messages.confirm_activate')";
        window.lang_confirm_deactivate = "@lang('messages.confirm_deactivate')";
        window.lang_activated = "@lang('messages.activated')";
        window.lang_deactivated = "@lang('messages.deactivated')";

        // Expert Verify/Unverify
        window.lang_verify_expert_title = "@lang('messages.verify_expert_title')";
        window.lang_unverify_expert_title = "@lang('messages.unverify_expert_title')";
        window.lang_verify_expert_text = "@lang('messages.verify_expert_text')";
        window.lang_unverify_expert_text = "@lang('messages.unverify_expert_text')";
        window.lang_confirm_verify = "@lang('messages.confirm_verify')";
        window.lang_confirm_unverify = "@lang('messages.confirm_unverify')";
        window.lang_verified = "@lang('messages.verified')";
        window.lang_unverified = "@lang('messages.unverified')";
    </script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        const canManageExperts = @json(Auth::user()->can('manage-experts'));
    </script>
    <script src="{{ asset('assets/custom/js/experts/show.js') }}"></script>
@endsection

@push('pageTitle')
    {{ __('labels.experts') }}
@endpush

@section('content')
    @include('pages.experts.partials.view.stats', [
        'total' => $statusCounts['total'] ?? '0',
        'active' => $statusCounts['active'] ?? '0',
        'pending' => $statusCounts['pending'] ?? '0',
        'total_answers' => $listresults->sum('total_answers') ?? '0',
    ])

    <div class="row">
        <div class="col-xl-12">
            @include('pages.experts.partials.sort-filters')
            @include('components.common.flush-message')
            <div class="row" data-paginate-type="backend" data-paginate-container data-url="{{ route('experts.index') }}">
                <div class="col-xl-12 wow fadeInUp" data-wow-delay="1.5s">
                    @include('components.datatable.backend-pagination.error')
                    @include('components.datatable.backend-pagination.loading')

                    <div class="table-responsive">
                        <table class="table-responsive-lg table display dataTablesCard student-tab dataTable no-footer">
                            <thead class="bg-light">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('labels.name') }}</th>
                                    <th>{{ __('labels.contact') }}</th>
                                    <th>{{ __('labels.categories') }}</th>
                                    <th width="120px" class="text-center">{{ __('labels.stats') }}</th>
                                    <th class="text-center">{{ __('labels.status') }}</th>
                                    @if (Auth::user()->can('manage-experts'))
                                        <th width="200px">{{ __('labels.actions') }}</th>
                                    @else
                                        <th width="100px">{{ __('labels.action') }}</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody data-table-container>
                                @include('pages.experts.partials.datatable-rows', [
                                    'listresults' => $listresults,
                                ])
                            </tbody>
                        </table>
                    </div>
                    @include('components.datatable.backend-pagination.pagination', [
                        'listresults' => $listresults,
                    ])

                </div>
                @if ($listresults->hasPages())
                    <div class="card-footer bg-transparent">
                        {{ $listresults->withQueryString()->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection