@extends('layouts.web')

@section('content')

<style>
    :root{
      --primary:#7D26C2;
      --primary-light:#9d53e6;
      --light-bg:#f8f5ff;
      --card-radius:16px;
      --shadow:0 8px 25px rgba(125, 38, 194, 0.12);
    }

    body{
      background: var(--light-bg);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .header{
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: white;
      padding: 2.5rem 1rem;
      border-radius: var(--card-radius);
      margin-bottom: 2.5rem;
      text-align: center;
    }

    .category-card{
      background: white;
      border-radius: var(--card-radius);
      padding: 1.75rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--shadow);
      border-left: 5px solid var(--primary);
      transition: transform 0.3s ease;
    }
    
    .category-card:hover{
      transform: translateY(-5px);
    }

    .category-icon{
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      margin-bottom: 1.25rem;
    }

    .category-icon i {
        color: white;
        font-size: 1.8rem;
    }

    .category-title{
      font-weight: 700;
      color: #333;
      font-size: 1.3rem;
      margin-bottom: 0.75rem;
    }

    .covers-list{
      list-style: none;
      padding: 0;
      margin: 1rem 0;
    }

    .covers-list li{
      padding: 0.4rem 0;
      color: #555;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .covers-list li:before{
      content: "✓";
      color: var(--primary);
      font-weight: bold;
    }

    .price-tag{
      background: rgba(125, 38, 194, 0.1);
      color: var(--primary);
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1.1rem;
      display: inline-block;
      margin-bottom: 1rem;
    }

    .btn-primary-custom{
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 10px;
      font-weight: 600;
      width: 100%;
      transition: all 0.3s ease;
    }

    .btn-primary-custom:hover{
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(125, 38, 194, 0.2);
      color: white;
    }

    .quick-nav{
      background: white;
      border-radius: var(--card-radius);
      padding: 1.25rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow);
      position: sticky;
      top: 20px;
      z-index: 100;
    }

    .nav-btn{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.25rem;
      background: rgba(125, 38, 194, 0.08);
      border-radius: 10px;
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .nav-btn:hover, .nav-btn.active{
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: white;
      border-color: var(--primary);
    }

    .footer{
      text-align: center;
      padding: 2rem 0;
      color: #666;
      font-size: 0.9rem;
      border-top: 1px solid rgba(125, 38, 194, 0.1);
      margin-top: 3rem;
    }

    .emergency-card{
      background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      color: white;
      border-radius: var(--card-radius);
      padding: 2rem;
      text-align: center;
      margin: 2rem 0;
    }

    .emergency-btn{
      background: white;
      color: #ff6b6b;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 10px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .emergency-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
    }

    .process-step{
      text-align: center;
      padding: 1.5rem;
    }

    .step-number{
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.2rem;
      margin: 0 auto 1rem;
    }

    /* Mobile Navigation */
    .mobile-nav{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      display: flex;
      justify-content: space-around;
      padding: 1rem;
      border-top: 2px solid rgba(125, 38, 194, 0.1);
      z-index: 1000;
    }

    .mobile-nav a{
      color: #888;
      text-decoration: none;
      text-align: center;
      font-size: 0.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
    }

    .mobile-nav a.active{
      color: var(--primary);
    }

    .mobile-nav i{
      font-size: 1.2rem;
    }

    @media (min-width: 992px){
      .mobile-nav{ display: none; }
      body{ padding-bottom: 0; }
    }

    @media (max-width: 991px){
      body{ padding-bottom: 70px; }
      .header{ padding: 2rem 1rem; }
      .quick-nav{ position: static; }
    }

    /* Loading spinner for button */
    .btn-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid transparent;
        border-radius: 50%;
        border-top-color: #ffffff;
        animation: spin 0.6s linear infinite;
        margin-right: 0.5rem;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Icon preview in database format */
    .icon-demo {
        display: inline-block;
        margin-left: 0.5rem;
        font-size: 0.8rem;
        color: #666;
    }
</style>

<!-- Header -->
<div class="header">
    <h1 class="mb-3">{{ $consultation->hero_title ?? 'Legal Consultation Categories' }}</h1>
    <p class="lead mb-4">{{ $consultation->hero_short_des ?? 'Choose your issue and connect with an expert instantly' }}</p>
    <div class="d-flex gap-3 justify-content-center flex-wrap">
        @if($consultation->hero_video_url ?? null)
            <button class="btn btn-light" onclick="window.open('{{ $consultation->hero_video_url }}')">
                <i class="bi bi-camera-video me-2"></i> {{ $consultation->hero_video_text ?? 'Video Consultation' }}
            </button>
        @endif
        @if($consultation->hero_cta_phone ?? null)
            <a href="tel:{{ $consultation->hero_cta_phone }}" class="btn btn-outline-light">
                <i class="bi bi-telephone me-2"></i> {{ $consultation->hero_cta_text ?? 'Call Now' }}
            </a>
        @endif
    </div>
</div>

<!-- Quick Navigation -->
<div class="quick-nav d-none d-md-block">
    <h5 class="mb-3 fw-bold" style="color:#7D26C2;"><i class="bi bi-funnel me-2"></i> Quick Categories</h5>
    <div class="d-flex flex-wrap gap-2">
        @foreach($categories as $category)
            <a href="#category-{{ $category->id }}" class="nav-btn">
                @if($category->icon)
                {!! $category->icon !!}
                @else
                    <i class="bi bi-tag"></i>
                @endif
                {{ $category->name }}
            </a>
        @endforeach
    </div>
</div>

<!-- How It Works -->
<div class="row text-center mb-4">
    <div class="col-md-4 process-step">
        <div class="step-number">1</div>
        <h5>{{ $consultation->progress_1_title ?? 'Choose Category' }}</h5>
        <p class="text-muted small">{{ $consultation->progress_1_des ?? 'Select your legal issue' }}</p>
    </div>
    <div class="col-md-4 process-step">
        <div class="step-number">2</div>
        <h5>{{ $consultation->progress_2_title ?? 'Select Expert' }}</h5>
        <p class="text-muted small">{{ $consultation->progress_2_des ?? 'Pick from available experts' }}</p>
    </div>
    <div class="col-md-4 process-step">
        <div class="step-number">3</div>
        <h5>{{ $consultation->progress_3_title ?? 'Get Consultation' }}</h5>
        <p class="text-muted small">{{ $consultation->progress_3_des ?? 'Connect via video/call' }}</p>
    </div>
</div>

<!-- Categories Grid -->
<div class="row">
    @forelse($categories as $category)
        <div class="col-md-6 col-lg-4" id="category-{{ $category->id }}">
            <div class="category-card">
                <!-- Category Icon Display -->
                <div class="category-icon">
                    @if($category->icon)
                        {!! $category->icon !!}
                    @else
                        <i class="bi bi-tag"></i>
                    @endif
                </div>
                
                <!-- Category Name -->
                <h3 class="category-title">{{ $category->name }}</h3>
                
                <!-- Price Range -->
                <div class="price-tag">৳{{ $category->min_amount }} - ৳{{ $category->max_amount }}</div>
                
                <!-- Short Description -->
                <p>{{ $category->short_description }}</p>
                
                <!-- Duration (if available) -->
                @if($category->time)
                    <div class="text-muted small mb-3">
                        <i class="bi bi-clock me-1"></i> Duration: {{ $category->time }} minutes
                    </div>
                @endif

                <!-- Consultation Button -->
                <button class="btn-primary-custom mt-2" 
                        onclick="bookConsultation({{ $category->id }}, '{{ $category->name }}')"
                        id="consult-btn-{{ $category->id }}">
                    <i class="bi bi-calendar-check me-2"></i> Consultation
                </button>

               
            </div>
        </div>
    @empty
        <div class="col-12 text-center py-5">
            <p class="text-muted">No consultation categories available at the moment.</p>
        </div>
    @endforelse
</div>

<!-- Emergency Section -->
@if($consultation && ($consultation->emergency_title || $consultation->emergency_call_phone))
    <div class="emergency-card">
        <h3 class="mb-3" >{{ $consultation->emergency_title ?? 'Need Emergency Legal Help?' }}</h3>
        <p class="mb-4">{{ $consultation->emergency_des ?? '24/7 Emergency Helpline' }}: {{ $consultation->emergency_call_phone ?? '12345' }}</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            @if($consultation->emergency_call_phone)
                <a href="tel:{{ $consultation->emergency_call_phone }}" class="emergency-btn text-decoration-none">
                    <i class="bi bi-telephone me-2"></i> {{ $consultation->emergency_call_text ?? 'Call Emergency' }}
                </a>
            @endif
            @if($consultation->emergency_whatsapp_number)
                <a href="https://wa.me/{{ $consultation->emergency_whatsapp_number }}" class="btn btn-outline-light text-decoration-none">
                    <i class="bi bi-whatsapp me-2"></i> {{ $consultation->emergency_whatsapp_text ?? 'WhatsApp Help' }}
                </a>
            @endif
        </div>
    </div>
@endif

<!-- Mobile Navigation -->
<div class="mobile-nav d-lg-none">
    <a href="#" class="active">
        <i class="bi bi-grid"></i>
        <span>Categories</span>
    </a>
    <a href="#" onclick="bookConsultation('emergency')">
        <i class="bi bi-telephone"></i>
        <span>Emergency</span>
    </a>
    <a href="#" onclick="bookConsultation('video')">
        <i class="bi bi-camera-video"></i>
        <span>Video</span>
    </a>
    <a href="#" onclick="bookConsultation('call')">
        <i class="bi bi-chat"></i>
        <span>Call</span>
    </a>
</div>

<script>
// Store consultation data for easy access
const consultationData = {
    categories: @json($categories),
    consultation: @json($consultation)
};

function bookConsultation(categoryId, categoryName = '') {
    const button = document.getElementById(`consult-btn-${categoryId}`);
    
    // Handle emergency, video, call shortcuts
    if(categoryId === 'emergency') {
        window.location.href = 'tel:{{ $consultation->emergency_call_phone ?? "12345" }}';
        return;
    } else if(categoryId === 'video') {
        window.open('{{ $consultation->hero_video_url ?? "#" }}');
        return;
    } else if(categoryId === 'call') {
        window.location.href = 'tel:{{ $consultation->hero_cta_phone ?? "12345" }}';
        return;
    }
    
    // Show loading state on button
    if(button) {
        const originalText = button.innerHTML;
        button.innerHTML = '<span class="btn-spinner"></span> Processing...';
        button.disabled = true;
    }
    
    // Log the booking attempt
    console.log('Booking consultation:', {
        category_id: categoryId,
        category_name: categoryName,
        timestamp: new Date().toISOString()
    });

    
    // Simulate API call (replace with actual booking logic)
    setTimeout(() => {
        if(button) {
            // Success - redirect to booking page or show confirmation
            alert(`consultation for ${categoryName}\n\nThis will be open later.`);
            
            // Reset button
            button.innerHTML = '<i class="bi bi-calendar-check me-2"></i> Consultation';
            button.disabled = false;
            
            // Uncomment to redirect to actual booking page
            // window.location.href = `/consultation/book/${categoryId}`;
        }
    }, 1000);
}

// Function to preview icon changes (useful for debugging)
function previewIcon(iconClass) {
    console.log('Icon class:', iconClass);
    // You can add a preview modal here if needed
}

// Smooth scroll for navigation links
document.querySelectorAll('.nav-btn').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        if(targetElement) {
            targetElement.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Update active navigation based on scroll
window.addEventListener('scroll', function() {
    const sections = document.querySelectorAll('[id^="category-"]');
    const navBtns = document.querySelectorAll('.nav-btn');
    
    let currentSection = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        if(window.scrollY >= sectionTop - 200) {
            currentSection = '#' + section.getAttribute('id');
        }
    });
    
    navBtns.forEach(btn => {
        btn.classList.remove('active');
        if(btn.getAttribute('href') === currentSection) {
            btn.classList.add('active');
        }
    });
});

// Initialize tooltips or any other features
document.addEventListener('DOMContentLoaded', function() {
    console.log('Consultation page loaded with', consultationData.categories.length, 'categories');
    
    // Log all category icons for debugging
    consultationData.categories.forEach(cat => {
        console.log(`Category: ${cat.name}, Icon: ${cat.icon || 'default'}`);
    });
});
</script>

@endsection