@extends('layouts.app')

@section('title', __('messages.golden_circle'))

@section('content')
<div class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h1 class="display-4 fw-bold premium-font text-dark mb-3">{{ __('messages.golden_circle') }}</h1>
            <p class="lead text-muted mx-auto" style="max-width: 700px;">
                {{ __('messages.vip_profiles_desc') }}
            </p>
            <div class="bg-gold mx-auto mt-4" style="width: 80px; height: 3px;"></div>
        </div>

        {{-- New: Purpose Section --}}
        <div class="row g-4 mb-5 pb-5">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm rounded-4 bg-white p-4 text-center purpose-card">
                    <div class="icon-box mx-auto mb-3 bg-gold-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
                        <i class="bi bi-award-fill text-gold fs-2"></i>
                    </div>
                    <h5 class="fw-bold premium-font text-teal">{{ __('messages.elite_selection') }}</h5>
                    <p class="small text-muted mb-0">{{ __('messages.elite_selection_desc') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm rounded-4 bg-white p-4 text-center purpose-card">
                    <div class="icon-box mx-auto mb-3 bg-gold-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
                        <i class="bi bi-airplane-engines-fill text-gold fs-2"></i>
                    </div>
                    <h5 class="fw-bold premium-font text-teal">{{ __('messages.global_discovery') }}</h5>
                    <p class="small text-muted mb-0">{{ __('messages.global_discovery_desc') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm rounded-4 bg-white p-4 text-center purpose-card">
                    <div class="icon-box mx-auto mb-3 bg-gold-light rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 70px; height: 70px;">
                        <i class="bi bi-globe-americas text-gold fs-2"></i>
                    </div>
                    <h5 class="fw-bold premium-font text-teal">{{ __('messages.island_to_world') }}</h5>
                    <p class="small text-muted mb-0">{{ __('messages.island_to_world_desc') }}</p>
                </div>
            </div>
        </div>

        <div class="row g-4 justify-content-center">
            @forelse ($vipProfiles as $vip)
            <div class="col-lg-10">
                <div class="card vip-profile-card overflow-hidden border-0 shadow-lg rounded-4 mb-4 position-relative">
                    <div class="premium-badge position-absolute top-0 end-0 m-3 z-index-10">
                        <span class="badge bg-gold text-white px-3 py-2 rounded-pill shadow-sm">
                            <i class="bi bi-gem me-1"></i> VIP
                        </span>
                    </div>
                    <div class="row g-0">
                        {{-- Left: Image --}}
                        <div class="col-md-4 col-lg-3 bg-white p-3 text-center d-flex align-items-center justify-content-center border-end border-light">
                            <div class="profile-image-wrapper rounded-4 overflow-hidden shadow-sm" style="width: 180px; height: 180px;">
                                <img src="{{ $vip->photo_url }}" class="w-100 h-100" alt="{{ $vip->name }}" style="object-fit: cover;">
                            </div>
                        </div>

                        {{-- Right: Details --}}
                        <div class="col-md-8 col-lg-9 p-4 bg-white d-flex flex-column">
                            <h4 class="fw-bold text-dark premium-font mb-3">{{ $vip->name }}</h4>
                            
                            <div class="vip-details-grid mb-4">
                                @php $details = $vip->parsed_details; @endphp
                                @if(count($details) > 0)
                                    <div class="row g-3 details-container" id="details-{{ $vip->id }}">
                                        @foreach($details as $label => $value)
                                            <div class="col-sm-6 col-md-4 detail-card-item {{ $loop->index >= 6 ? 'd-none' : '' }}">
                                                <div class="detail-item p-2 rounded-3 hover-bg-gold-light transition-all">
                                                    <span class="text-uppercase small fw-bold text-muted d-block" style="letter-spacing: 0.5px;">{{ str_replace('_', ' ', $label) }}</span>
                                                    <span class="text-dark fw-bold">{{ $value }}</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    @if(count($details) > 6)
                                        <div class="text-center mt-3">
                                            <button class="btn btn-link text-gold fw-bold text-decoration-none btn-sm toggle-details" data-target="details-{{ $vip->id }}">
                                                <span>{{ __('Show More') }}</span> <i class="bi bi-chevron-down ms-1"></i>
                                            </button>
                                        </div>
                                    @endif
                                @else
                                    <div class="bg-gold-light p-3 rounded-4 flex-grow-1">
                                        <p class="text-muted mb-0" style="line-height: 1.6; font-size: 1.1rem;">{{ $vip->details }}</p>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="d-flex align-items-center justify-content-between mt-auto pt-3 border-top">
                                <div class="text-muted small">
                                    <i class="bi bi-patch-check-fill text-info me-1"></i> Verified VIP Member
                                </div>
                                @php
                                    $number = $vip->whatsapp_number;
                                    // Remove any non-numeric characters just in case
                                    $number = preg_replace('/[^0-9]/', '', $number);
                                    // Prepend 94 if it doesn't start with 94 or 0
                                    if (!str_starts_with($number, '94')) {
                                        if (str_starts_with($number, '0')) {
                                            $number = '94' . substr($number, 1);
                                        } else {
                                            $number = '94' . $number;
                                        }
                                    }
                                    $whatsapp_msg = "Hello, I am interested in the VIP profile: " . $vip->name . ". Please provide more details.";
                                    $whatsapp_url = "https://wa.me/" . $number . "?text=" . urlencode($whatsapp_msg);
                                @endphp
                                <a href="{{ $whatsapp_url }}" target="_blank" class="btn btn-whatsapp-green rounded-pill px-5 py-2 fw-bold shadow-sm text-white">
                                    <i class="bi bi-whatsapp me-2"></i> {{ __('messages.know_more') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12 text-center py-5">
                <i class="bi bi-star text-gold display-1 mb-4 d-block"></i>
                <h3 class="fw-bold">Coming Soon</h3>
                <p class="text-muted fs-5">Our exclusive VIP circle is being curated. Stay tuned.</p>
                <a href="/" class="btn btn-teal rounded-pill px-4 mt-3">Back to Home</a>
            </div>
            @endforelse
        </div>

        <div class="mt-5 d-flex justify-content-center">
            {{ $vipProfiles->links() }}
        </div>
    </div>
</div>

<style>
    .vip-profile-card {
        background: #fff;
        border: 1px solid rgba(197, 160, 89, 0.2) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .vip-profile-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(197, 160, 89, 0.15) !important;
    }
    .bg-gold-light {
        background-color: rgba(197, 160, 89, 0.05) !important;
        border: 1px solid rgba(197, 160, 89, 0.1);
    }
    .text-gold { color: #C5A059 !important; }
    .bg-gold { background-color: #C5A059 !important; }
    .btn-gold {
        background-color: #C5A059;
        color: white;
        border: none;
    }
    .btn-gold:hover {
        background-color: #a6854a;
        color: white;
    }
    .detail-item {
        border-left: 3px solid transparent;
        background-color: #fdfbf7;
        border: 1px solid rgba(197, 160, 89, 0.05);
    }
    .detail-item:hover {
        border-left: 3px solid #C5A059;
        background-color: rgba(197, 160, 89, 0.08);
        transform: translateX(5px);
    }
    .transition-all {
        transition: all 0.3s ease;
    }
    .purpose-card {
        transition: all 0.3s ease;
        border: 1px solid rgba(197, 160, 89, 0.1) !important;
    }
    .purpose-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(15, 76, 92, 0.1) !important;
        border-color: rgba(15, 76, 92, 0.2) !important;
    }
    .hover-bg-gold-light:hover {
        background-color: rgba(197, 160, 89, 0.1);
    }
    .btn-whatsapp-green {
        background-color: #25D366;
        border: none;
        transition: all 0.3s ease;
    }
    .btn-whatsapp-green:hover {
        background-color: #128C7E;
        transform: scale(1.05);
        color: white;
    }
</style>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const toggleButtons = document.querySelectorAll('.toggle-details');
        
        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const container = document.getElementById(targetId);
                const items = container.querySelectorAll('.detail-card-item');
                const isExpanded = this.getAttribute('aria-expanded') === 'true';
                
                items.forEach((item, index) => {
                    if (index >= 6) {
                        if (isExpanded) {
                            item.classList.add('d-none');
                        } else {
                            item.classList.remove('d-none');
                        }
                    }
                });
                
                if (isExpanded) {
                    this.setAttribute('aria-expanded', 'false');
                    this.querySelector('span').textContent = 'Show More';
                    this.querySelector('i').className = 'bi bi-chevron-down ms-1';
                    // Optional: scroll back to card top if needed
                } else {
                    this.setAttribute('aria-expanded', 'true');
                    this.querySelector('span').textContent = 'Show Less';
                    this.querySelector('i').className = 'bi bi-chevron-up ms-1';
                }
            });
        });
    });
</script>
@endpush
@endsection