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

@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .expert-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .info-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1rem;
            height: 100%;
            border: 1px solid #e9ecef;
        }

        .info-label {
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }

        .info-value {
            font-size: 1rem;
            font-weight: 500;
            color: #333;
        }

        .section-card {
            border-radius: 10px;
            overflow: hidden;
        }

        .section-card .card-header {
            background-color: #fff;
            border-bottom: 2px solid #f0f0f0;
        }

        .qualification-item,
        .schedule-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid #dee2e6;
        }

        .badge-category {
            background: #e9ecef;
            color: #495057;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: normal;
        }

        .status-badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
        }
    </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="{{ asset('assets/custom/js/experts/show.js') }}"></script>
@endsection

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

@section('content')
    @include('components.common.page-header', [
        'pageTitle' => __('labels.expert_details'),
        'actionButton' => [
            'url' => route('experts.index'),
            'text' => __('labels.back_to_list'),
            'icon' => 'fa-arrow-left',
        ],
    ])

    {{-- Expert Profile Card --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-start mb-4">
                <div class="d-flex gap-4">
                    {{-- Avatar from User relationship --}}
                    @if ($expert->user && $expert->user->profile_image)
                        <img src="{{ $expert->user->profile_image }}" alt="{{ $expert->user->name }}" class="expert-avatar">
                    @else
                        <div class="expert-avatar bg-primary text-white d-flex align-items-center justify-content-center"
                            style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-size: 2.5rem;">
                            {{ $expert->user ? strtoupper(substr($expert->user->name, 0, 1)) : 'E' }}
                        </div>
                    @endif

                    <div class="flex-grow-1 min-width-0">
                        {{-- Name from User relationship --}}
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h1 class="h2 mb-2">{{ $expert->user ? $expert->user->name : __('labels.expert') }}</h1>
                            </div>
                            {{-- Quick Actions --}}
                            <div class="d-flex gap-2">
                                @can('update', $expert)
                                    <a href="{{ route('experts.edit', $expert) }}" class="btn btn-sm btn-outline-primary"
                                        data-bs-toggle="tooltip" title="{{ __('labels.edit') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                @endcan

                                @can('delete', $expert)
                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                        onclick="deleteRecordFrom('{{ route('experts.destroy', $expert) }}')"
                                        data-bs-toggle="tooltip" title="{{ __('labels.delete') }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                @endcan

                                <button id="copyLinkBtn" onclick="copyToClipboard(window.location.href, this)"
                                    class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip"
                                    title="{{ __('labels.copy_link') }}">
                                    <i class="fas fa-link"></i>
                                </button>
                                @can('updateVerify', $expert)
                                    <button
                                        onclick="toggleVerificationStatus({{ $expert->id }}, {{ $expert->is_verified ? 'true' : 'false' }})"
                                        class="btn btn-sm {{ $expert->is_verified ? 'btn-outline-danger' : 'btn-outline-success' }}"
                                        data-bs-toggle="tooltip"
                                        title="{{ $expert->is_verified ? __('labels.unverify') : __('labels.verify') }}">
                                        <i class="fas {{ $expert->is_verified ? 'fa-times-circle' : 'fa-check-circle' }}"></i>
                                        {{ $expert->is_verified ? __('labels.unverify') : __('labels.verify') }}
                                    </button>
                                @endcan

                                @can('updateStatus', $expert)
                                    <button
                                        onclick="toggleActiveStatus({{ $expert->id }}, {{ $expert->is_active ? 'true' : 'false' }})"
                                        class="btn btn-sm {{ $expert->is_active ? 'btn-outline-danger' : 'btn-outline-success' }}"
                                        data-bs-toggle="tooltip"
                                        title="{{ $expert->is_active ? __('labels.deactivate') : __('labels.activate') }}">
                                        <i class="fas {{ $expert->is_active ? 'fa-pause-circle' : 'fa-play-circle' }}"></i>
                                        {{ $expert->is_active ? __('labels.deactivate') : __('labels.activate') }}
                                    </button>
                                @endcan
                            </div>
                        </div>

                        {{-- Designation and Company --}}
                        @if ($expert->designation || $expert->company)
                            <p class="text-muted mb-2">
                                @if ($expert->designation)
                                    {{ $expert->designation }}
                                @endif
                                @if ($expert->company)
                                    @if ($expert->designation)
                                        @ {{ $expert->company }}
                                    @else
                                        {{ $expert->company }}
                                    @endif
                                @endif
                            </p>
                        @endif

                        {{-- Email from User relationship --}}
                        @if ($expert->user && $expert->user->email)
                            <p class="text-muted mb-2">
                                <i class="fas fa-envelope me-2"></i>
                                {{ $expert->user->email }}
                            </p>
                        @endif

                        {{-- Categories --}}
                        @if ($expert->categories && $expert->categories->count() > 0)
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                @foreach ($expert->categories as $category)
                                    <span class="badge-category">
                                        <i class="fas fa-tag me-1"></i>
                                        {{ $category->name }}
                                    </span>
                                @endforeach
                            </div>
                        @endif

                    </div>
                </div>
            </div>

            {{-- Status Badges --}}
            <div class="mb-4 d-flex gap-2">
                @if ($expert->is_active)
                    <span class="badge status-badge bg-success text-white">
                        <i class="fas fa-check-circle me-1"></i>
                        {{ __('labels.active') }}
                    </span>
                @else
                    <span class="badge status-badge bg-danger text-white">
                        <i class="fas fa-times-circle me-1"></i>
                        {{ __('labels.inactive') }}
                    </span>
                @endif

                @if ($expert->is_verified)
                    <span class="badge bg-success status-badge mt-1">
                        <i class="fas fa-check-circle me-1"></i>
                        {{ __('labels.verified') }}
                    </span>
                @else
                    <span class="badge bg-danger status-badge mt-1">
                        <i class="fas fa-question-circle me-1"></i>
                        {{ __('labels.unverified') }}
                    </span>
                @endif

                @if ($expert->experience_years)
                    <span class="badge status-badge bg-primary text-white">
                        <i class="fas fa-briefcase me-1"></i>
                        {{ $expert->experience_years }} {{ __('labels.years_experience') }}
                    </span>
                @endif
            </div>

            {{-- Expert Information Grid --}}
            <div class="row g-3">
                {{-- LinkedIn URL --}}
                @if ($expert->linkedin_url)
                    <div class="col-md-4">
                        <div class="info-card">
                            <div class="info-label">
                                <i class="fab fa-linkedin me-1"></i>
                                {{ __('labels.linkedin_url') }}
                            </div>
                            <div class="info-value">
                                <a href="{{ $expert->linkedin_url }}" target="_blank" rel="noopener noreferrer"
                                    class="text-decoration-none">
                                    {{ __('labels.view_profile') }} <i class="fas fa-external-link-alt ms-1 small"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Website URL --}}
                @if ($expert->website_url)
                    <div class="col-md-4">
                        <div class="info-card">
                            <div class="info-label">
                                <i class="fas fa-globe me-1"></i>
                                {{ __('labels.website_url') }}
                            </div>
                            <div class="info-value">
                                <a href="{{ $expert->website_url }}" target="_blank" rel="noopener noreferrer"
                                    class="text-decoration-none">
                                    {{ parse_url($expert->website_url, PHP_URL_HOST) }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Experience Years (if not shown in badges) --}}
                @if ($expert->experience_years)
                    <div class="col-md-4">
                        <div class="info-card">
                            <div class="info-label">
                                <i class="fas fa-briefcase me-1"></i>
                                {{ __('labels.experience_years') }}
                            </div>
                            <div class="info-value">
                                {{ $expert->experience_years }} {{ __('labels.years') }}
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Bio Section --}}
    @if ($expert->bio)
        <div class="card section-card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom py-3">
                <h5 class="card-title mb-0">
                    <i class="fas fa-user me-2 text-primary"></i>
                    {{ __('labels.bio') }}
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="view-content">
                    {!! nl2br(e($expert->bio)) !!}
                </div>
            </div>
        </div>
    @endif

    {{-- Qualifications Section --}}
    @if ($expert->qualifications && is_array($expert->qualifications) && count($expert->qualifications) > 0)
        <div class="card section-card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom py-3">
                <h5 class="card-title mb-0">
                    <i class="fas fa-graduation-cap me-2 text-primary"></i>
                    {{ __('labels.qualifications') }}
                </h5>
            </div>
            <div class="card-body p-4">
                @foreach ($expert->qualifications as $qualification)
                    <div class="qualification-item">
                        <div class="row">
                            <div class="col-md-5">
                                <strong>{{ $qualification['degree'] }}</strong>
                            </div>
                            <div class="col-md-4">
                                {{ $qualification['institution'] }}
                            </div>
                            <div class="col-md-3">
                                <span class="badge bg-secondary">{{ $qualification['year'] }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Schedules Section --}}
    @if ($expert->schedules && $expert->schedules->count() > 0)
        <div class="card section-card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom py-3">
                <h5 class="card-title mb-0">
                    <i class="fas fa-clock me-2 text-primary"></i>
                    {{ __('labels.schedules') }}
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{{ __('labels.day_of_week') }}</th>
                                <th>{{ __('labels.start_time') }}</th>
                                <th>{{ __('labels.end_time') }}</th>
                                {{-- <th>{{ __('labels.status') }}</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($expert->schedules as $schedule)
                                <tr>
                                    <td>
                                        @if ($schedule->day_of_week)
                                            {{ __('labels.day_names.' . strtolower($schedule->day_of_week)) }}
                                        @endif
                                    </td>
                                    <td>{{ $schedule->start_time ? date('h:i A', strtotime($schedule->start_time)) : '-' }}
                                    </td>
                                    <td>{{ $schedule->end_time ? date('h:i A', strtotime($schedule->end_time)) : '-' }}
                                    </td>
                                    {{-- <td>
                                    @if ($schedule->is_active)
                                        <span class="badge bg-success">{{ __('labels.active') }}</span>
                                    @else
                                        <span class="badge bg-secondary">{{ __('labels.inactive') }}</span>
                                    @endif
                                </td> --}}
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

    {{-- Meta Information --}}
    @include('components.meta.stats', [
        'created_at' => $expert->created_at ?? null,
        'updated_at' => $expert->updated_at ?? null,
        'creater' => $expert->user->name ?? null,
        'creator_avatar' => $expert->user->profile_image ?? null,
    ])

@endsection