@extends('layouts.app')

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

        {{-- نمایش پیام‌های سیستم --}}
        @if(session('success'))
            <div class="alert-box success">
                <span class="icon">✅</span>
                <p>{{ session('success') }}</p>
            </div>
        @endif

        @if(session('error'))
            <div class="alert-box error">
                <span class="icon">⚠️</span>
                <p>{{ session('error') }}</p>
            </div>
        @endif

        {{-- کامپوننت Toast برای نمایش پیام‌های جاوااسکریپت --}}
        <div id="toast" class="toast" role="status">
            <div class="toast-icon" id="toastIcon">✅</div>
            <div class="toast-content">
                <div class="toast-title" id="toastTitle"></div>
                <div class="toast-text" id="toastText"></div>
            </div>
            <button type="button" class="toast-close" onclick="hideToast()">×</button>
        </div>

        <div class="section-header">
            <h2>روش پرداخت را انتخاب کنید</h2>
            <p>برای نهایی کردن رزرو نوبت، لطفاً یکی از روش‌های زیر را انتخاب کنید.</p>
        </div>

        {{-- کارت خلاصه سفارش --}}
        <div class="premium-sub-card">
            <div class="glow-effect"></div>

            <div class="card-header-row">
                <div class="order-id-wrapper">
                    <span class="label">شماره سفارش:</span>
                    <span class="value">#{{ $order->id }}</span>
                </div>
                <div class="status-badge pending">
                    <span>در انتظار پرداخت</span>
                    <span class="tick-icon">⏳</span>
                </div>
            </div>

            <div class="main-info-center">
                <h1>
                    @if(Lang::has('consulting.types.' . $order->type))
                        @lang('consulting.types.' . $order->type)
                    @else
                        {{ $order->type }}
                    @endif
                </h1>
                <div class="plan-duration">
                    {{ $order->minutes }} دقیقه مشاوره تخصصی
                </div>
            </div>

            <div class="details-grid">
                <div class="detail-box right">
                    <span class="d-label">نام متقاضی</span>
                    <span class="d-value">{{ $order->customer_first_name }} {{ $order->customer_last_name }}</span>
                </div>
                <div class="detail-box left">
                    <span class="d-label">مبلغ قابل پرداخت</span>
                    <span class="d-value price-highlight">
                        {{ number_format($order->price_toman) }} تومان
                    </span>
                </div>
                @if($order->price_star > 0)
                <div class="detail-box right">
                    <span class="d-label">قیمت ارزی</span>
                    <span class="d-value">{{ $order->price_star }} Stars</span>
                </div>
                @endif
            </div>
        </div>

        <div class="divider"></div>

        <div class="section-header">
            <h2>درگاه‌های پرداخت</h2>
        </div>

        {{-- گرید روش‌های پرداخت --}}
        <div class="plans-grid">
            
            {{-- 1. پرداخت آنلاین (زرین‌پال) --}}
            <div class="plan-card payment-method-card">
                <div class="plan-content">
                    <div class="method-icon">💳</div>
                    <h3 class="plan-title">پرداخت آنلاین</h3>
                    <p class="plan-desc">پرداخت امن با کلیه کارت‌های بانکی</p>
                </div>
                <div class="payment-actions">
                    <form action="{{ route('payment.request') }}" method="POST" class="w-100">
                        @csrf
                        {{-- فیلد مخفی مهم برای تشخیص سفارش مشاوره در کنترلر --}}
                        <input type="hidden" name="consult_order_id" value="{{ $order->id }}">
                        
                        <button type="submit" class="btn-buy btn-zarinpal">
                            <span>💳</span> اتصال به درگاه بانکی
                        </button>
                    </form>
                </div>
            </div>

            {{-- 2. کارت به کارت --}}
            <div class="plan-card payment-method-card">
                <div class="plan-content">
                    <div class="method-icon">🏧</div>
                    <h3 class="plan-title">کارت به کارت</h3>
                    <p class="plan-desc">ثبت فیش واریزی (بررسی دستی)</p>
                </div>
                <div class="payment-actions">
                    <button type="button" class="btn-buy btn-card" onclick="openCardModal()">
                        <span>📄</span> ثبت فیش
                    </button>
                </div>
            </div>

            {{-- 3. تلگرام استارز --}}
            @if($order->price_star > 0)
            <div class="plan-card payment-method-card">
                <div class="plan-content">
                    <div class="method-icon">⭐️</div>
                    <h3 class="plan-title">Telegram Stars</h3>
                    <p class="plan-desc">پرداخت سریع درون‌برنامه‌ای تلگرام</p>
                </div>
                <div class="payment-actions">
                    <button type="button" class="btn-buy btn-stars" onclick="payWithStars(this)">
                        <span>✨</span> پرداخت {{ $order->price_star }} Stars
                    </button>
                </div>
            </div>
            @endif

            {{-- 4. کریپتوکارنسی --}}
            <div class="plan-card payment-method-card">
                <div class="plan-content">
                    <div class="method-icon">💎</div>
                    <h3 class="plan-title">کریپتوکارنسی</h3>
                    <p class="plan-desc">پرداخت با تتر (USDT) یا تون‌کوین</p>
                </div>
                <div class="payment-actions">
                    <button type="button" class="btn-buy btn-crypto" onclick="payWithCrypto(this)">
                        <span>💎</span> پرداخت کریپتو
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- مودال کارت به کارت --}}
<div id="cardModal" class="modal-overlay" onclick="closeCardModal()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="modal-header">
            <h3>ثبت فیش واریزی</h3>
            <button class="modal-close" onclick="closeCardModal()">×</button>
        </div>
        
        <div class="modal-body">
            <p class="modal-text">
                مبلغ 
                <strong style="color: var(--accent-color)">{{ number_format($order->price_toman) }}</strong> 
                تومان را به کارت زیر واریز کنید:
            </p>

            <div class="card-info-box" onclick="copyCardNumber()">
                <div class="card-detail-row">
                    <span class="detail-label">به نام:</span>
                    <span class="detail-value">مصطفی مهدوی پور</span>
                </div>
                <div class="card-divider"></div>
                <div class="card-detail-row">
                    <span class="detail-label">شماره کارت:</span>
                    <span class="detail-value card-number-font" id="cardNumberToCopy">6037-9974-8833-2675</span>
                </div>
                <div class="copy-hint">برای کپی کلیک کنید</div>
            </div>

            <form action="{{ route('payment.cardToCard') }}" method="POST" class="card-form" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="consult_order_id" value="{{ $order->id }}">
                
                <div class="upload-area" id="drop-area">
                    <input type="file" name="receipt" id="receipt" accept="image/*" hidden required>
                    <div class="upload-content" id="upload-content">
                        <div class="upload-icon">☁️</div>
                        <p class="upload-text">تصویر فیش را اینجا رها کنید</p>
                    </div>
                    <div class="preview-container" id="preview-container" style="display: none;">
                        <img id="preview-image" src="" alt="Receipt Preview">
                        <button type="button" class="remove-btn" onclick="removeImage(event)">×</button>
                    </div>
                </div>

                <button type="submit" class="btn-submit-card" id="submitBtn" disabled>
                    ارسال فیش برای بررسی
                </button>
            </form>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-color: #2563eb;
        --secondary-color: #1e40af;
        --accent-color: #10b981;
        --text-muted: #9ca3af;
    }
    .store-wrapper { min-height: 100vh; padding: 40px 20px; direction: rtl; font-family: 'Vazirmatn', sans-serif; display: flex; justify-content: center; }
    .store-container { width: 100%; max-width: 800px; }
    
    .section-header { text-align: center; margin-bottom: 30px; color: #fff; }
    .section-header h2 { font-size: 1.5rem; margin-bottom: 5px; font-weight: 800; }
    .section-header p { color: var(--text-muted); font-size: 0.9rem; }

    .premium-sub-card { 
        background: linear-gradient(135deg, #37307aa3, #2e1a89); 
        border-radius: 24px; padding: 30px; 
        position: relative; overflow: hidden; 
        box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); 
        border: 1px solid rgba(255, 255, 255, 0.1); 
        color: #fff; margin-bottom: 40px; 
    }
    .glow-effect { position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%); pointer-events: none; }
    
    .card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .order-id-wrapper { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); font-family: monospace; letter-spacing: 1px; }
    .status-badge { padding: 4px 12px; border-radius: 8px; font-size: 0.85rem; display: flex; align-items: center; gap: 5px; }
    .status-badge.pending { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: #fbbf24; }

    .main-info-center { text-align: center; margin: 30px 0; }
    .main-info-center h1 { font-size: 1.8rem; margin-bottom: 10px; font-weight: 900; }
    .plan-duration { display: inline-block; background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; }
    
    .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 25px; }
    .detail-box { display: flex; flex-direction: column; gap: 5px; }
    .detail-box.right { text-align: right; }
    .detail-box.left { text-align: left; }
    .d-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }
    .d-value { font-size: 1rem; font-weight: 700; color: #fff; }
    .price-highlight { color: var(--accent-color); font-size: 1.3rem; }

    .divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 30px 0; }

    .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .payment-method-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; }
    
    .plan-card { background: #1e293b; border-radius: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; }
    .plan-card:hover { transform: translateY(-5px); border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
    .plan-content { text-align: center; color: #e2e8f0; margin-bottom: 20px; }
    .method-icon { font-size: 3rem; margin-bottom: 10px; }
    .plan-title { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 5px; }
    .plan-desc { font-size: 0.85rem; color: #94a3b8; }
    
    .w-100 { width: 100%; }
    .btn-buy { width: 100%; color: white; padding: 14px; border: none; border-radius: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; position: relative; overflow: hidden; }
    .btn-buy:hover { filter: brightness(1.1); transform: translateY(-2px); }
    .btn-buy:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    
    .btn-zarinpal { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
    .btn-card { background: linear-gradient(135deg, #0d9488, #0f766e); }
    .btn-stars { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .btn-crypto { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

    /* Modal Styles */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: 0.3s; }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-content { background: #1e293b; width: 90%; max-width: 420px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); color: white; overflow: hidden; }
    .modal-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
    .modal-close { background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; }
    .modal-body { padding: 25px; }
    .modal-text { text-align: center; margin-bottom: 20px; color: #cbd5e1; }
    
    .card-info-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 16px; margin-bottom: 20px; border: 1px dashed rgba(255,255,255,0.2); cursor: pointer; transition: 0.2s; }
    .card-info-box:active { transform: scale(0.98); }
    .card-detail-row { display: flex; justify-content: space-between; margin: 5px 0; }
    .card-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 10px 0; }
    .card-number-font { font-family: monospace; font-size: 1.1rem; letter-spacing: 1px; color: var(--accent-color); }
    .copy-hint { font-size: 0.75rem; text-align: center; color: rgba(255,255,255,0.5); margin-top: 8px; }

    .upload-area { border: 2px dashed rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; margin-bottom: 20px; position: relative; min-height: 120px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.2); }
    .upload-icon { font-size: 2rem; margin-bottom: 10px; }
    .preview-container { position: absolute; top:0; left:0; width:100%; height:100%; background:#1e293b; border-radius: 16px; }
    .preview-container img { width:100%; height:100%; object-fit: contain; }
    .remove-btn { position: absolute; top:10px; right:10px; background: rgba(239,68,68,0.9); color:white; border-radius:50%; width:30px; height:30px; border:none; cursor:pointer; }
    .btn-submit-card { width: 100%; background: var(--accent-color); padding: 14px; border-radius: 14px; border:none; font-weight:bold; cursor:pointer; color:#000; }
    .btn-submit-card:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Alert & Toast */
    .alert-box { padding: 15px; border-radius: 12px; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; font-weight: bold; }
    .alert-box.success { background: #d1fae5; color: #065f46; border: 1px solid #34d399; }
    .alert-box.error { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; }
    
    .toast { position: fixed; z-index: 9999; top: 20px; right: 20px; max-width: 350px; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; gap: 10px; transform: translateY(-50px); opacity: 0; transition: 0.3s; pointer-events: none; color: #1f2937; direction: rtl; }
    .toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
</style>

<script>
    const I18N = {
        success: 'عملیات موفق',
        error: 'خطا',
        sending: 'در حال پردازش...',
        networkError: 'خطای شبکه رخ داد',
        copied: 'شماره کارت کپی شد'
    };

    function showToast(type, title, text) {
        const toast = document.getElementById('toast');
        document.getElementById('toastTitle').textContent = title;
        document.getElementById('toastText').textContent = text;
        document.getElementById('toastIcon').textContent = (type === 'success') ? '✅' : '⚠️';
        toast.style.borderRight = (type === 'success') ? '5px solid #10b981' : '5px solid #ef4444';
        toast.classList.add('show');
        setTimeout(() => hideToast(), 5000);
    }
    function hideToast() { document.getElementById('toast').classList.remove('show'); }

    function openCardModal() { document.getElementById('cardModal').classList.add('active'); }
    function closeCardModal() { document.getElementById('cardModal').classList.remove('active'); }
    
    function copyCardNumber() {
        const num = document.getElementById('cardNumberToCopy').innerText;
        navigator.clipboard.writeText(num.replace(/-/g, '')).then(() => {
            showToast('success', I18N.success, I18N.copied);
        });
    }

    // مدیریت فایل آپلود
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('receipt');
    const submitBtn = document.getElementById('submitBtn');
    
    if(dropArea) {
        dropArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', function() {
            if(this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    document.getElementById('preview-image').src = e.target.result;
                    document.getElementById('preview-container').style.display = 'block';
                    document.getElementById('upload-content').style.display = 'none';
                    submitBtn.disabled = false;
                };
                reader.readAsDataURL(this.files[0]);
            }
        });
    }
    function removeImage(e) {
        e.stopPropagation();
        fileInput.value = '';
        document.getElementById('preview-container').style.display = 'none';
        document.getElementById('upload-content').style.display = 'block';
        submitBtn.disabled = true;
    }

    // پرداخت استارز
    async function payWithStars(btn) {
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = I18N.sending;

        try {
            const response = await fetch("{{ route('consulting.payment.stars') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ order_id: "{{ $order->id }}" })
            });
            const data = await response.json();
            
            if (data.success) {
                showToast('success', I18N.success, data.message);
            } else {
                showToast('error', I18N.error, data.message);
            }
        } catch (e) {
            showToast('error', I18N.error, I18N.networkError);
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    }

    // پرداخت کریپتو
    async function payWithCrypto(btn) {
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = I18N.sending;

        try {
            const response = await fetch("{{ route('payment.crypto') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ consult_order_id: "{{ $order->id }}" })
            });
            const data = await response.json();
            
            if (data.success) {
                showToast('success', I18N.success, data.message);
            } else {
                showToast('error', I18N.error, data.message);
            }
        } catch (e) {
            showToast('error', I18N.error, I18N.networkError);
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    }
</script>
@endsection