@extends('layouts.app')

@section('content')
<div class="container consulting-container">

    @php
        $iconMap = [
            'resume' => '📄',
            'portfolio' => '🎨',
            'archicad_project' => '🏗️',
            'revit_project' => '📐',
            'vectorworks_project' => '🖊️',
            'allplan_project' => '🏢',
            'bim_consult' => '🌐',
            'career' => '💼',
            'academic' => '🎓',
            'other' => '💬',
        ];

        if(isset($selectedType) && $selectedType) {
            $backUrl = route('consulting');
            $backLabel = __('consulting.back_to_categories', ['default' => 'بازگشت به دسته‌ها']);
        } else {
            $backUrl = route('menu');
            $backLabel = __('menu.menu', ['default' => 'منو']);
        }
    @endphp
    
    <a href="{{ $backUrl }}" class="btn-back-icon-top" aria-label="{{ $backLabel }}">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
        </svg>
    </a>

    <div class="consulting-header">
        @if(isset($selectedType) && $selectedType)
            <h1>
                <span class="header-icon">{{ $iconMap[$selectedType] ?? '💬' }}</span>
                @lang('consulting.types.' . $selectedType)
            </h1>
        @else
            <h1>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
                </svg>
                @lang('menu.consulting', ['default' => 'مشاوره'])
            </h1>
             <p class="text-muted typing-effect">
                <span id="typing-text">مسیر حرفه‌ای خود را با راهنمایی متخصصان هموار کنید.</span>
                <span id="typing-output"></span>
            </p>
        @endif
    </div>

    @if(!isset($selectedType) || !$selectedType)
        <h3>@lang('consulting.select_topic', ['default' => 'موضوع مشاوره را انتخاب کنید'])</h3>
        <div class="item-grid">
            @foreach($categories as $type)
                <a href="{{ route('consulting', ['type' => $type]) }}" class="item-card item-card--folder">
                    <span class="item-card__icon">
                        {{ $iconMap[$type] ?? '💬' }}
                    </span>
                    <span class="item-card__label">@lang('consulting.types.' . $type)</span>
                    <span class="item-card__badge">@lang('consulting.active', ['default' => 'فعال'])</span>
                </a>
            @endforeach
        </div>
    @else
        <div class="item-grid">
            @foreach($plans as $plan)
                <div class="item-card item-card--file">
                    <div class="plan-time-badge">{{ $plan->minutes }} @lang('consulting.minutes', ['default' => 'دقیقه'])</div>
                    
                    <span class="item-card__icon">
                        {{ $iconMap[$plan->type] ?? '📋' }}
                    </span>
                    
                    <span class="item-card__label">{{ $plan->title }}</span>
                    
                    <p class="text-muted small mt-2 px-2" style="font-size: 0.9rem; opacity: 0.8;">
                        {{ Str::limit($plan->description, 80) }}
                    </p>
                    
                    <div class="plan-pricing">
                        @if($plan->price_toman == 0)
                            <span class="price text-success">@lang('consulting.free', ['default' => 'رایگان'])</span>
                        @else
                            <span class="price">{{ number_format($plan->price_toman) }}</span>
                            <span class="currency">@lang('dashboard.toman')</span>
                        @endif
                    </div>

                    <button type="button" class="item-card__action-label btn-buy-plan" 
                            data-plan-id="{{ $plan->id }}" 
                            data-url="{{ route('adviser.order.initiate') }}">
                            @if($plan->price_toman == 0)
                                @lang('consulting.book_free', ['default' => 'رزرو رایگان'])
                            @else
                                @lang('consulting.book_now', ['default' => 'رزرو نوبت'])
                            @endif
                    </button>
                </div>
            @endforeach
        </div>
    @endif

</div>

<div id="profileModal" class="modal-overlay" style="display: none;">
    <div class="registration-card item-card modal-content">
        <button type="button" class="close-modal" onclick="closeProfileModal()">×</button>
        <div class="card-header">
            <h3>📝 @lang('consulting.form_title', ['default' => 'تکمیل پرونده'])</h3>
            <p class="text-muted">@lang('consulting.form_desc', ['default' => 'برای نهایی کردن رزرو، لطفاً مشخصات زیر را تکمیل کنید.'])</p>
        </div>
        
        <form id="profileForm" data-url="{{ route('adviser.profile.store') }}">
            @csrf
            <div class="form-grid">
                <div class="form-group">
                    <label>@lang('dashboard.first_name')</label>
                    <input type="text" name="first_name" required>
                </div>
                <div class="form-group">
                    <label>@lang('dashboard.last_name')</label>
                    <input type="text" name="last_name" required>
                </div>
                <div class="form-group">
                    <label>@lang('menu.phone')</label>
                    <input type="tel" name="phone_number" required placeholder="0912..." style="direction: ltr;">
                </div>
            </div>
            <button type="submit" class="custom-modal-button mt-4">
                @lang('consulting.submit_profile', ['default' => 'ثبت و ادامه'])
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<style>
    @import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

    .consulting-container, .consulting-container * { font-family: 'Vazirmatn', sans-serif; }

    :root {
        --consult-primary: #8b5cf6;
        --consult-primary-hover: #6c5ce7;
        --consult-primary-dark: #6c5ce7;
        --consult-bg: #e0e5ec;
        --consult-border: rgba(108, 92, 231, 0.25);
    }

    .consulting-header h1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 900; color: #4a5568;
        text-align: center; margin: 1rem 0 1rem;
        display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    }
    .header-icon { font-size: 1.2em; }
    .consulting-header h1 svg { width: 1.2em; height: 1.2em; color: #6c5ce7; }
    
    .consulting-container h3 {
        color: #4a5568; text-align: center; margin-bottom: 2rem; font-weight: 800;
        position: relative; padding-bottom: 10px; margin-top: 2rem;
    }

    .item-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem;
    }
    @media (max-width: 992px) { .item-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 576px) { .item-grid { grid-template-columns: 1fr; } }

    .item-card {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1rem; padding: 2.5rem 2rem; min-height: 200px;
        background: #e0e5ec;
        border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 24px;
        color: #4a5568; text-decoration: none; text-align: center;
        cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8);
    }
    .item-card:hover {
        transform: translateY(-8px);
        box-shadow: 14px 14px 28px rgba(163, 177, 198, 0.8), -14px -14px 28px rgba(255, 255, 255, 0.9);
    }

    .item-card__icon { font-size: 3rem; margin-bottom: 0.5rem; }
    .item-card__label { font-size: 1.2rem; font-weight: 700; color: #4a5568; margin-top: 0.5rem; }
    
    .item-card__badge {
        position: absolute; top: 15px; left: 15px; 
        background: #6c5ce7; color: #fff;
        font-size: 0.8rem; font-weight: 700; padding: 0.5rem 0.75rem; border-radius: 10px;
        box-shadow: 2px 2px 6px rgba(108, 92, 231, 0.3); z-index: 2;
    }

    .item-card--file { padding-bottom: 5rem; justify-content: flex-start; padding-top: 3.5rem; }
    .plan-time-badge {
        position: absolute; top: 0; left: 0; right: 0;
        background: #6c5ce7; color: #fff;
        font-size: 0.9rem; font-weight: 700; padding: 8px;
    }
    .plan-pricing { margin-top: auto; margin-bottom: 1rem; }
    .plan-pricing .price { font-size: 1.5rem; font-weight: 900; color: #6c5ce7; }
    .plan-pricing .currency { font-size: 0.9rem; color: #718096; margin-right: 5px; }
    .text-success { color: #10b981 !important; }

    .item-card__action-label {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: #6c5ce7; color: #fff; border: none;
        padding: 1rem; font-weight: 700; font-size: 1rem;
        transition: 0.3s; width: 100%; cursor: pointer;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .item-card:hover .item-card__action-label { background: #5b4bc4; }

    /* Modal Styles */
    .modal-overlay {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.6); z-index: 9999;
        display: flex; align-items: center; justify-content: center;
        backdrop-filter: blur(5px);
    }
    .modal-content {
        width: 90%; max-width: 500px;
        background: #e0e5ec; cursor: default;
        transform: none !important; margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 12px 12px 24px rgba(163, 177, 198, 0.7), -12px -12px 24px rgba(255, 255, 255, 0.8);
        color: #4a5568;
    }
    .close-modal {
        position: absolute; top: 10px; right: 15px;
        background: none; border: none; color: #4a5568;
        font-size: 2rem; cursor: pointer; z-index: 10;
    }
    .close-modal:hover { color: #6c5ce7; }

    .form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; width: 100%; text-align: right; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #4a5568; font-size: 0.9rem; font-weight: bold; }
    .form-group input {
        width: 100%; padding: 12px; border-radius: 12px;
        background: #e0e5ec; border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
        color: #4a5568; outline: none; transition: 0.3s;
        font-family: 'Vazirmatn';
    }
    .form-group input:focus { border-color: #6c5ce7; }
    
    .custom-modal-button {
        width: 100%; padding: 1rem; border-radius: 14px; border: none;
        background: #6c5ce7; color: #fff; font-weight: 800; font-size: 1.1rem;
        cursor: pointer; transition: 0.3s;
        box-shadow: 3px 3px 6px rgba(108, 92, 231, 0.3);
    }
    .custom-modal-button:hover { background: #e0e5ec; color: #6c5ce7; box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.8); }
    
    .text-muted { color: #718096; text-align: center; }
    .typing-effect { min-height: 24px; margin-bottom: 2rem;}
</style>

<script>
let pendingPlanId = null;

function closeProfileModal() {
    document.getElementById('profileModal').style.display = 'none';
}

function processBooking(planId, url, btnElement) {
    const originalText = btnElement.innerHTML;
    btnElement.disabled = true;
    btnElement.innerHTML = '⏳ ...';

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
        body: JSON.stringify({ plan_id: planId })
    })
    .then(response => response.json())
    .then(data => {
        btnElement.disabled = false;
        btnElement.innerHTML = originalText;

        if (data.status === 'profile_required') {
            pendingPlanId = planId; 
            document.getElementById('profileModal').style.display = 'flex';
        } 
        else if (data.status === 'free_success') {
            alert(data.message);
            window.location.href = data.redirect_url;
        } 
        else if (data.status === 'payment_required') {
            window.location.href = data.redirect_url;
        }
        else {
            alert(data.message || 'خطایی رخ داد');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('خطای شبکه رخ داد.');
        btnElement.disabled = false;
        btnElement.innerHTML = originalText;
    });
}

document.addEventListener('DOMContentLoaded', function() {
    
    // کلیک روی دکمه‌های رزرو
    document.querySelectorAll('.btn-buy-plan').forEach(button => {
        button.addEventListener('click', function() {
            processBooking(this.dataset.planId, this.dataset.url, this);
        });
    });

    // ثبت فرم پروفایل به صورت ایجکس
    const profileForm = document.getElementById('profileForm');
    if(profileForm){
        profileForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const url = this.dataset.url;
            const formData = new FormData(this);
            const btn = this.querySelector('button[type="submit"]');
            const originalBtnText = btn.innerHTML;
            
            btn.innerHTML = 'در حال ثبت...';
            btn.disabled = true;

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if(data.status === 'success') {
                    closeProfileModal();
                    // تلاش مجدد برای خرید پلنی که کاربر انتخاب کرده بود
                    if(pendingPlanId) {
                        const btnPlan = document.querySelector(`.btn-buy-plan[data-plan-id="${pendingPlanId}"]`);
                        if(btnPlan) {
                            processBooking(pendingPlanId, btnPlan.dataset.url, btnPlan);
                        }
                    }
                } else {
                    alert('خطا در ثبت اطلاعات.');
                }
            })
            .catch(err => {
                alert('خطای شبکه');
            })
            .finally(() => {
                btn.innerHTML = originalBtnText;
                btn.disabled = false;
            });
        });
    }

    // تایپ افکت
    const typingText = document.getElementById('typing-text');
    const typingOutput = document.getElementById('typing-output');
    if (typingText && typingOutput) {
        const text = typingText.innerHTML;
        typingText.style.display = 'none'; 
        let i = 0;
        const speed = 40;
        function type() {
            if (i < text.length) {
                typingOutput.innerHTML += text.charAt(i);
                i++;
                setTimeout(type, speed);
            }
        }
        type();
    }
});
</script>
@endpush