@extends('layouts.app')

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

    {{-- دکمه بازگشت هوشمند --}}
    @php
        // آیکون‌ها به صورت SVG تعریف شده‌اند تا جایگزین ایموجی شوند
        $svgIcons = [
            'resume' => '<path d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />',
            'portfolio' => '<path d="M2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />',
            'career' => '<path d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />',
            'academic' => '<path d="M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />',
            'default' => '<path d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />'
        ];

        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">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
        </svg>
        <span class="btn-back-text">{{ $backLabel }}</span>
    </a>

    <div class="consulting-header">
        @if(isset($selectedType) && $selectedType)
            <h1>
                @lang('consulting.types.' . $selectedType)
            </h1>
        @else
            <h1>@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">
                    <div class="icon-circle">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            @if(array_key_exists($type, $svgIcons))
                                {!! $svgIcons[$type] !!}
                            @elseif(str_contains($type, 'project') || str_contains($type, 'bim'))
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
                            @else
                                {!! $svgIcons['default'] !!}
                            @endif
                        </svg>
                    </div>
                    <span class="item-card__label">@lang('consulting.types.' . $type)</span>
                    <span class="arrow-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                        </svg>
                    </span>
                </a>
            @endforeach
        </div>
    @else
        <div class="item-grid plans-grid-layout">
            @foreach($plans as $plan)
                <div class="item-card item-card--plan">
                    <div class="plan-header">
                        <div class="plan-icon">
                            <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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                            </svg>
                        </div>
                        <div class="plan-duration">{{ $plan->minutes }} @lang('consulting.minutes', ['default' => 'دقیقه'])</div>
                    </div>
                    
                    <h4 class="item-card__title">{{ $plan->title }}</h4>
                    
                    <p class="item-card__desc">
                        {{ Str::limit($plan->description, 90) }}
                    </p>
                    
                    <div class="plan-footer">
                        <div class="plan-pricing">
                            @if($plan->price_toman == 0)
                                <span class="price free">@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="btn-select-plan" 
                                data-plan-id="{{ $plan->id }}" 
                                data-url="{{ route('adviser.order.initiate') }}">
                                <span>انتخاب</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
                                </svg>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

</div>

<div id="profileModal" class="modal-overlay" style="display: none;">
    <div class="registration-card modal-content">
        <div class="modal-header-simple">
            <h3>@lang('consulting.form_title', ['default' => 'تکمیل مشخصات'])</h3>
            <button type="button" class="close-modal-simple" onclick="closeProfileModal()">×</button>
        </div>
        <p class="text-desc">برای نهایی‌سازی رزرو، لطفاً فرم زیر را پر کنید.</p>
        
        <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 placeholder="مثال: علی">
                </div>
                <div class="form-group">
                    <label>@lang('dashboard.last_name')</label>
                    <input type="text" name="last_name" required placeholder="مثال: محمدی">
                </div>
                <div class="form-group full-width">
                    <label>@lang('menu.phone')</label>
                    <input type="tel" name="phone_number" required placeholder="0912..." style="direction: ltr; text-align: left;">
                </div>
                <div class="form-group full-width">
                    <label>@lang('dashboard.email', ['default' => 'ایمیل (اختیاری)'])</label>
                    <input type="email" name="email" placeholder="example@mail.com" style="direction: ltr; text-align: left;">
                </div>
            </div>
            <button type="submit" class="btn-submit-modal 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 { font-family: 'Vazirmatn', sans-serif; max-width: 1000px; margin: 0 auto; padding-bottom: 50px; }

    :root {
        --primary: #6366f1;
        --primary-dark: #4f46e5;
        --secondary: #1e293b;
        --card-bg: #1e293b;
        --text-light: #f1f5f9;
        --text-muted: #94a3b8;
        --border: rgba(255,255,255,0.08);
    }

    /* هدر و دکمه بازگشت */
    .btn-back-icon-top {
        display: inline-flex; align-items: center; gap: 8px; 
        padding: 8px 16px; background: rgba(255,255,255,0.05); 
        border: 1px solid var(--border); border-radius: 12px; 
        color: var(--text-muted); text-decoration: none; 
        transition: 0.2s; margin-bottom: 20px; font-size: 0.9rem;
    }
    .btn-back-icon-top:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .btn-back-icon-top svg { width: 18px; height: 18px; }

    .consulting-header { text-align: center; margin-bottom: 40px; }
    .consulting-header h1 { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
    .text-muted { color: var(--text-muted); font-size: 0.95rem; }
    .typing-effect { min-height: 24px; }

    .consulting-container h3 { 
        color: var(--text-light); margin-bottom: 20px; font-size: 1.1rem; 
        border-right: 4px solid var(--primary); padding-right: 10px; 
    }

    /* گرید کارت‌ها */
    .item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    
    /* استایل کارت دسته‌بندی (Folder) */
    .item-card--folder {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--card-bg); padding: 20px; border-radius: 16px;
        border: 1px solid var(--border); text-decoration: none; color: var(--text-light);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative; overflow: hidden;
    }
    .item-card--folder:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .icon-circle {
        width: 48px; height: 48px; background: rgba(99, 102, 241, 0.1); 
        border-radius: 12px; display: flex; align-items: center; justify-content: center;
        color: var(--primary); margin-left: 15px; flex-shrink: 0;
    }
    .icon-circle svg { width: 24px; height: 24px; }
    .item-card__label { font-weight: 700; font-size: 1rem; flex-grow: 1; }
    .arrow-icon { color: var(--text-muted); transition: 0.2s; }
    .item-card--folder:hover .arrow-icon { transform: translateX(-5px); color: #fff; }

    /* استایل کارت پلن (Plan) */
    .item-card--plan {
        background: var(--card-bg); border-radius: 20px; padding: 24px;
        border: 1px solid var(--border); display: flex; flex-direction: column;
        transition: 0.3s;
    }
    .item-card--plan:hover { border-color: var(--primary); transform: translateY(-5px); }
    
    .plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
    .plan-icon { color: var(--text-muted); }
    .plan-icon svg { width: 32px; height: 32px; }
    .plan-duration { font-size: 0.85rem; color: var(--primary); background: rgba(99,102,241,0.1); padding: 4px 10px; border-radius: 20px; font-weight: 700; }
    
    .item-card__title { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 10px; }
    .item-card__desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
    
    .plan-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; border-top: 1px solid var(--border); padding-top: 15px; }
    .plan-pricing .price { font-size: 1.2rem; font-weight: 800; color: #fff; }
    .plan-pricing .price.free { color: #10b981; }
    .plan-pricing .currency { font-size: 0.8rem; color: var(--text-muted); margin-right: 4px; }
    
    .btn-select-plan {
        background: var(--primary); color: #fff; border: none; padding: 8px 16px;
        border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer;
        display: flex; align-items: center; gap: 6px; transition: 0.2s;
    }
    .btn-select-plan:hover { background: var(--primary-dark); }
    .btn-select-plan svg { width: 16px; height: 16px; }

    /* مودال */
    .modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
        display: flex; align-items: center; justify-content: center; z-index: 9999;
    }
    .registration-card {
        background: #0f172a; width: 90%; max-width: 450px; border-radius: 20px;
        padding: 30px; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }
    .modal-header-simple { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .modal-header-simple h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0; }
    .close-modal-simple { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }
    .text-desc { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 25px; }
    
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .full-width { grid-column: span 2; }
    .form-group label { display: block; margin-bottom: 6px; color: #cbd5e1; font-size: 0.85rem; }
    .form-group input {
        width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.05);
        border: 1px solid var(--border); border-radius: 10px; color: #fff; outline: none;
        transition: 0.2s; font-family: inherit;
    }
    .form-group input:focus { border-color: var(--primary); background: rgba(255,255,255,0.08); }
    
    .btn-submit-modal {
        width: 100%; padding: 12px; background: var(--primary); border: none;
        border-radius: 12px; color: #fff; font-weight: 800; margin-top: 20px; cursor: pointer;
        transition: 0.2s;
    }
    .btn-submit-modal:hover { background: var(--primary-dark); }
</style>

<script>
let pendingPlanId = null;

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

function processBooking(planId, url, btnElement) {
    // اگر دکمه آیکون دارد، متن اصلی را درست ذخیره کنیم
    const originalContent = btnElement.innerHTML;
    btnElement.disabled = true;
    btnElement.innerHTML = '<span style="font-size:0.9rem">⏳</span>';

    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 = originalContent;

        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.action) { 
             window.location.href = data.action;
        }
        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 = originalContent;
    });
}

document.addEventListener('DOMContentLoaded', function() {
    
    // دکمه‌های انتخاب پلن
    document.querySelectorAll('.btn-select-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-select-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