@extends('layouts.portal')

@section('content')
<style>
    .profile-page {
        max-width: 1200px;
        margin: 8rem auto 6rem;
        padding: 0 1.5rem;
        min-height: calc(100vh - 16rem);
        display: flex;
        align-items: center;
    }

    /* Unified Single Profile Card Container */
    .unified-profile-card {
        background: var(--card-bg, rgba(17, 24, 39, 0.75));
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        border-radius: 28px;
        padding: 3.5rem;
        backdrop-filter: blur(16px);
        width: 100%;
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
    }

    /* 2-Column Grid Layout inside Card */
    .profile-layout-grid {
        display: grid;
        grid-template-columns: 350px 1fr;
        gap: 3.5rem;
        align-items: start;
        width: 100%;
    }

    /* Left Column: Sidebar Profile */
    .profile-sidebar {
        position: sticky;
        top: 6rem;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        padding-right: 3.5rem;
    }

    .profile-avatar {
        width: 180px;
        height: 180px;
        margin: 0 auto 1.5rem;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        border: 4px solid var(--primary, #6366F1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.5rem;
        overflow: hidden;
        box-shadow: 0 0 35px rgba(99, 102, 241, 0.25);
    }

    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .counsellor-name {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.75rem;
        font-weight: 800;
        color: #FFF;
        margin: 0 0 0.4rem;
        line-height: 1.25;
    }

    .subtitle {
        color: var(--accent, #10B981);
        font-weight: 600;
        font-size: 1.05rem;
        margin-bottom: 1.5rem;
        line-height: 1.35;
    }

    /* Contact details inside sidebar */
    .contact-info-list {
        text-align: left;
        margin-bottom: 2.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 1.5rem;
    }

    .contact-info-item {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        font-size: 0.92rem;
        color: var(--text-muted, #9CA3AF);
    }

    .contact-info-item .icon {
        font-size: 1.1rem;
        min-width: 20px;
        text-align: center;
    }

    .contact-info-item .val {
        word-break: break-all;
        color: #E5E7EB;
    }

    /* Action bar in sidebar */
    .action-bar-sidebar {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }

    .action-bar-sidebar .btn-book {
        background: linear-gradient(135deg, #6366F1, #8B5CF6);
        color: #FFF;
        padding: 0.95rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.95rem;
        border: none;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
        display: block;
        text-align: center;
    }

    .action-bar-sidebar .btn-book:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 28px rgba(99, 102, 241, 0.45);
    }

    .action-bar-sidebar .btn-back {
        background: rgba(255,255,255,0.05);
        color: #D1D5DB;
        padding: 0.9rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        border: 1px solid rgba(255,255,255,0.12);
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        display: block;
        text-align: center;
    }

    .action-bar-sidebar .btn-back:hover {
        background: rgba(255,255,255,0.1);
        color: #FFF;
    }

    /* Right Column: Detailed Grid Boxes inside single card */
    .profile-main-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem;
    }

    .section-box {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s, border-color 0.2s;
    }

    .section-box:hover {
        border-color: rgba(99, 102, 241, 0.2);
    }

    .section-box.span-2 {
        grid-column: span 2;
    }

    .section-box h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: #FFF;
        margin: 0 0 1.2rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.2rem 2rem;
    }

    .info-item {
        padding: 0.4rem 0;
    }

    .info-item .label {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted, #9CA3AF);
        margin-bottom: 0.3rem;
        font-weight: 600;
    }

    .info-item .value {
        color: #E5E7EB;
        font-size: 0.98rem;
        line-height: 1.5;
        word-break: break-word;
    }

    .info-item .value.highlight {
        color: var(--accent, #10B981);
        font-weight: 600;
    }

    /* Bio block */
    .bio-text {
        color: #D1D5DB;
        line-height: 1.8;
        font-size: 0.98rem;
    }

    /* Skills / Tags */
    .tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .tag {
        background: rgba(99, 102, 241, 0.15);
        color: #A5B4FC;
        border: 1px solid rgba(99, 102, 241, 0.25);
        padding: 0.4rem 1rem;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 500;
        transition: background 0.2s;
    }

    .tag:hover {
        background: rgba(99, 102, 241, 0.25);
    }

    /* Responsive */
    @media (max-width: 900px) {
        .unified-profile-card {
            padding: 2rem;
        }

        .profile-layout-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }

        .profile-sidebar {
            position: relative;
            top: 0;
            border-right: none;
            padding-right: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 2.5rem;
        }

        .profile-main-content {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .section-box.span-2 {
            grid-column: span 1;
        }
    }
</style>

@php
    // Helper: decode JSON if the value is JSON, otherwise return as-is (or explode by comma)
    if (!function_exists('parseMaybeJson')) {
        function parseMaybeJson($value) {
            if (empty($value)) return [];
            $decoded = json_decode($value, true);
            if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
                // Flatten in case of nested arrays or key-value JSON
                return array_map(function($item) {
                    return is_array($item) ? implode(', ', $item) : $item;
                }, $decoded);
            }
            // Not JSON — fallback to comma-separated string
            return array_map('trim', explode(',', $value));
        }
    }

    if (!function_exists('parseMaybeJsonSingle')) {
        function parseMaybeJsonSingle($value) {
            if (empty($value)) return null;
            $decoded = json_decode($value, true);
            if (json_last_error() === JSON_ERROR_NONE) {
                if (is_array($decoded)) {
                    return implode(', ', $decoded);
                }
                return $decoded;
            }
            return $value;
        }
    }
@endphp

<div class="profile-page">
    <div class="unified-profile-card">
        <div class="profile-layout-grid">
            
            <!-- LEFT COLUMN: Profile Info & Actions -->
            <div class="profile-sidebar">
                <div class="profile-avatar">
                    @if($profile && $profile->profile_image)
                        <img src="{{ asset($profile->profile_image) }}" alt="{{ $counsellor->first_name }}">
                    @elseif($profile && $profile->avatar_url)
                        <img src="{{ $profile->avatar_url }}" alt="{{ $counsellor->first_name }}">
                    @else
                        🧑‍⚕️
                    @endif
                </div>
                
                <h1 class="counsellor-name">
                    {{ $profile->first_name ?? $counsellor->first_name }} {{ $profile->last_name ?? $counsellor->last_name ?? '' }}
                </h1>
                
                <div class="subtitle">
                    {{ $profile->title ?? $counsellor->specialization ?? 'Counselor & Clinical Psychologist' }}
                </div>
                
                <div class="contact-info-list">
                    @if($profile && $profile->contact_email)
                        <div class="contact-info-item">
                            <span class="icon">📧</span>
                            <span class="val">{{ $profile->contact_email }}</span>
                        </div>
                    @elseif($counsellor->email)
                        <div class="contact-info-item">
                            <span class="icon">📧</span>
                            <span class="val">{{ $counsellor->email }}</span>
                        </div>
                    @endif
                    
                    @if($profile && $profile->contact_phone)
                        <div class="contact-info-item">
                            <span class="icon">📞</span>
                            <span class="val">{{ $profile->contact_phone }}</span>
                        </div>
                    @elseif($profile && $profile->phone_number)
                        <div class="contact-info-item">
                            <span class="icon">📞</span>
                            <span class="val">{{ $profile->phone_number }}</span>
                        </div>
                    @endif
                    
                    @if($profile && $profile->country)
                        <div class="contact-info-item">
                            <span class="icon">📍</span>
                            <span class="val">{{ $profile->country }}</span>
                        </div>
                    @endif
                </div>
                
                <div class="action-bar-sidebar">
                    <a href="{{ route('booking.create', $counsellor->id) }}{{ request()->query('simulate_host') ? '?simulate_host=' . request()->query('simulate_host') : (session('simulated_host') ? '?simulate_host=' . session('simulated_host') : '') }}" class="btn-book">
                        📅 Book Appointment
                    </a>
                    @if($tenant && $tenant->custom_domain)
                        <a href="/?simulate_host={{ $tenant->custom_domain }}" class="btn-back" style="border-color: rgba(99, 102, 241, 0.3); color: #A5B4FC;">
                            🌐 Visit Practice Site
                        </a>
                    @endif
                    <a href="{{ url()->previous() }}" class="btn-back">
                        &larr; Back
                    </a>
                </div>
            </div>
            
            <!-- RIGHT COLUMN: Detailed Grid Boxes -->
            <div class="profile-main-content">
                
                {{-- About / Bio --}}
                @if($profile && $profile->bio)
                    <div class="section-box span-2">
                        <h3>📝 About</h3>
                        <div class="bio-text">{!! nl2br(e($profile->bio)) !!}</div>
                    </div>
                @endif

                {{-- Life Quote --}}
                @if($profile && $profile->life_quote)
                    <div class="section-box span-2" style="border-left: 4px solid var(--accent, #10B981);">
                        <h3>💬 Life Quote</h3>
                        <p style="color: #D1D5DB; font-style: italic; font-size: 1.05rem; line-height: 1.7; padding-left: 0.5rem;">
                            "{{ parseMaybeJsonSingle($profile->life_quote) }}"
                        </p>
                    </div>
                @endif

                {{-- Professional Details --}}
                <div class="section-box">
                    <h3>💼 Professional Details</h3>
                    <div class="info-grid">
                        @if($profile && $profile->experience)
                            <div class="info-item">
                                <div class="label">Experience</div>
                                <div class="value highlight">{{ parseMaybeJsonSingle($profile->experience) }} Years</div>
                            </div>
                        @endif
                        @if($profile && $profile->higher_degree)
                            <div class="info-item">
                                <div class="label">Higher Degree</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->higher_degree) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->expertise)
                            <div class="info-item">
                                <div class="label">Expertise</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->expertise) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->qualification)
                            <div class="info-item">
                                <div class="label">Qualification</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->qualification) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->membership_association)
                            <div class="info-item">
                                <div class="label">Membership / Association</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->membership_association) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->experience_detail)
                            <div class="info-item" style="grid-column: 1 / -1;">
                                <div class="label">Experience Details</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->experience_detail) }}</div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Education --}}
                @if($profile && ($profile->degree || $profile->master_degree))
                    <div class="section-box">
                        <h3>🎓 Education</h3>
                        <div class="info-grid">
                            @if($profile->degree)
                                <div class="info-item">
                                    <div class="label">Degree</div>
                                    <div class="value">{{ parseMaybeJsonSingle($profile->degree) }}</div>
                                </div>
                            @endif
                            @if($profile->university)
                                <div class="info-item">
                                    <div class="label">University</div>
                                    <div class="value">{{ parseMaybeJsonSingle($profile->university) }}</div>
                                </div>
                            @endif
                            @if($profile->education_start_year || $profile->education_end_year)
                                <div class="info-item">
                                    <div class="label">Year</div>
                                    <div class="value">{{ $profile->education_start_year ?? '—' }} – {{ $profile->education_end_year ?? 'Present' }}</div>
                                </div>
                            @endif
                            @if($profile->master_degree)
                                <div class="info-item">
                                    <div class="label">Master's Degree</div>
                                    <div class="value">{{ parseMaybeJsonSingle($profile->master_degree) }}</div>
                                </div>
                            @endif
                            @if($profile->master_university)
                                <div class="info-item">
                                    <div class="label">Master's University</div>
                                    <div class="value">{{ parseMaybeJsonSingle($profile->master_university) }}</div>
                                </div>
                            @endif
                            @if($profile->master_start_year || $profile->master_end_year)
                                <div class="info-item">
                                    <div class="label">Master's Year</div>
                                    <div class="value">{{ $profile->master_start_year ?? '—' }} – {{ $profile->master_end_year ?? 'Present' }}</div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Skills & Languages --}}
                @if(($profile && $profile->skills) || ($profile && $profile->languages))
                    <div class="section-box">
                        <h3>🎯 Skills & Languages</h3>
                        @if($profile->skills)
                            <div style="margin-bottom: 1.5rem;">
                                <div class="info-item" style="padding: 0;">
                                    <div class="label" style="margin-bottom: 0.5rem;">Skills</div>
                                </div>
                                <div class="tags-row">
                                    @foreach(parseMaybeJson($profile->skills) as $skill)
                                        <span class="tag">{{ trim($skill) }}</span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        @if($profile->languages)
                            <div>
                                <div class="info-item" style="padding: 0;">
                                    <div class="label" style="margin-bottom: 0.5rem;">Languages</div>
                                </div>
                                <div class="tags-row">
                                    @foreach(parseMaybeJson($profile->languages) as $lang)
                                        <span class="tag" style="background: rgba(16, 185, 129, 0.12); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.25);">{{ trim($lang) }}</span>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                @endif

                {{-- Certificates & Achievements --}}
                @if($profile && ($profile->certificate_title || $profile->achievements))
                    <div class="section-box">
                        <h3>🏆 Certificates & Achievements</h3>
                        <div class="info-grid">
                            @if($profile->certificate_title)
                                <div class="info-item">
                                    <div class="label">Certificate Title</div>
                                    <div class="value">{{ parseMaybeJsonSingle($profile->certificate_title) }}</div>
                                </div>
                            @endif
                            @if($profile->achievements)
                                <div class="info-item" style="grid-column: 1 / -1;">
                                    <div class="label">Achievements</div>
                                    <div class="value">{{ parseMaybeJsonSingle($profile->achievements) }}</div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Contact & Office --}}
                <div class="section-box span-2">
                    <h3>📍 Contact & Location</h3>
                    <div class="info-grid">
                        @if($profile && $profile->office_address)
                            <div class="info-item" style="grid-column: 1 / -1;">
                                <div class="label">Office Address</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->office_address) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->address)
                            <div class="info-item" style="grid-column: 1 / -1;">
                                <div class="label">Address</div>
                                <div class="value">{{ parseMaybeJsonSingle($profile->address) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->gender)
                            <div class="info-item">
                                <div class="label">Gender</div>
                                <div class="value">{{ ucfirst($profile->gender) }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->gst_number)
                            <div class="info-item">
                                <div class="label">GST Number</div>
                                <div class="value">{{ $profile->gst_number }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->contact_person)
                            <div class="info-item">
                                <div class="label">Contact Person</div>
                                <div class="value">{{ $profile->contact_person }}</div>
                            </div>
                        @endif
                        @if($profile && $profile->contact_number)
                            <div class="info-item">
                                <div class="label">Contact Number</div>
                                <div class="value">{{ $profile->contact_number }}</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
@endsection