@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">#{{ $booking->id }}</span>
                </div>
                <div class="status-badge pending">
                    <span>در انتظار پرداخت</span>
                    <span class="tick-icon">⏳</span>
                </div>
            </div>

            <div class="main-info-center" style="text-align: center; margin: 20px 0;">
                <h1 style="font-size: 1.8rem; font-weight: bold; color: white; margin-bottom: 5px;">{{ $booking->class_name }}</h1>
                <div class="plan-duration" style="display: inline-block; background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem;">
                    {{ $booking->session_count }} جلسه آموزشی
                </div>
            </div>

            <div class="details-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;">
                <div class="detail-box right">
                    <span class="d-label" style="font-size: 0.85rem; color: rgba(255,255,255,0.5);">متقاضی:</span>
                    <span class="d-value" style="font-weight: bold; color: white;">{{ $profile->first_name }} {{ $profile->last_name }}</span>
                </div>
                <div class="detail-box left" style="text-align: left;">
                    <span class="d-label" style="font-size: 0.85rem; color: rgba(255,255,255,0.5);">مبلغ قابل پرداخت:</span>
                    <span class="d-value" style="font-weight: bold; color: var(--accent-color); font-size: 1.25rem;">{{ number_format($booking->toman) }} تومان</span>
                </div>
            </div>
        </div>

        <div class="divider" style="height: 1px; background: rgba(255,255,255,0.1); margin: 30px 0;"></div>

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

        {{-- روش‌های پرداخت --}}
        <div class="plans-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
            
            {{-- زرین‌پال --}}
            <div class="plan-card payment-method-card" style="background: #1e293b; border-radius: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.05); text-align: center;">
                <div class="plan-content">
                    <div class="method-icon" style="font-size: 3rem; margin-bottom: 10px;">💳</div>
                    <h3 class="plan-title" style="font-size: 1.2rem; font-weight: bold; color: white; margin-bottom: 5px;">درگاه آنلاین بانکی</h3>
                    <p class="plan-desc" style="font-size: 0.85rem; color: #94a3b8;">پرداخت شتابی با کلیه کارت‌ها</p>
                </div>
                <form action="{{ route('booking.payment.zarinpal') }}" method="POST" style="margin-top: 15px;">
                    @csrf
                    <input type="hidden" name="booking_id" value="{{ $booking->id }}">
                    <button type="submit" class="btn-buy btn-zarinpal" style="width: 100%; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; padding: 12px; border-radius: 12px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <span>💳</span> پرداخت آنلاین
                    </button>
                </form>
            </div>

            {{-- کارت به کارت --}}
            <div class="plan-card payment-method-card" style="background: #1e293b; border-radius: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.05); text-align: center;">
                <div class="plan-content">
                    <div class="method-icon" style="font-size: 3rem; margin-bottom: 10px;">🏧</div>
                    <h3 class="plan-title" style="font-size: 1.2rem; font-weight: bold; color: white; margin-bottom: 5px;">کارت به کارت</h3>
                    <p class="plan-desc" style="font-size: 0.85rem; color: #94a3b8;">واریز به کارت و ارسال رسید</p>
                </div>
                <button type="button" onclick="openCardModal()" class="btn-buy btn-card" style="width: 100%; background: linear-gradient(135deg, #0d9488, #0f766e); color: white; padding: 12px; border-radius: 12px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px;">
                    <span>🏧</span> انتقال کارت به کارت
                </button>
            </div>

            {{-- تلگرام استارز --}}
            @if ($booking->stars > 0)
                <div class="plan-card payment-method-card" style="background: #1e293b; border-radius: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.05); text-align: center;">
                    <div class="plan-content">
                        <div class="method-icon" style="font-size: 3rem; margin-bottom: 10px;">⭐️</div>
                        <h3 class="plan-title" style="font-size: 1.2rem; font-weight: bold; color: white; margin-bottom: 5px;">Telegram Stars</h3>
                        <p class="plan-desc" style="font-size: 0.85rem; color: #94a3b8;">پرداخت از طریق برنامه تلگرام</p>
                    </div>
                    <button type="button" onclick="payWithStars(this)" class="btn-buy btn-stars" style="width: 100%; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: 12px; border-radius: 12px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px;">
                        <span>⭐️</span> پرداخت با {{ $booking->stars }} ستاره
                    </button>
                </div>
            @endif

            {{-- کریپتو --}}
            <div class="plan-card payment-method-card" style="background: #1e293b; border-radius: 20px; padding: 20px; border: 1px solid rgba(255,255,255,0.05); text-align: center;">
                <div class="plan-content">
                    <div class="method-icon" style="font-size: 3rem; margin-bottom: 10px;">💎</div>
                    <h3 class="plan-title" style="font-size: 1.2rem; font-weight: bold; color: white; margin-bottom: 5px;">کریپتو / تتر</h3>
                    <p class="plan-desc" style="font-size: 0.85rem; color: #94a3b8;">پرداخت با USDT در شبکه TON</p>
                </div>
                <button type="button" onclick="payWithCrypto(this)" class="btn-buy btn-crypto" style="width: 100%; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; padding: 12px; border-radius: 12px; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px;">
                    <span>💎</span> پرداخت تتر
                </button>
            </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($booking->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
                <!-- این فیلد را به عنوان رسید موقت می‌گذاریم که در کنترلر بررسی می‌شود -->
                <!-- اما برای کلاس، در اینجا از ورودی order به عنوان consult استفاده می‌کنیم یا می‌توانیم آن را مستقیماً به ادمین وصل کنیم. -->
                <!-- برای سادگی، کلاس‌ها را با ثبت مستقیم در دیتابیس به صورت دستی در پنل هم می‌توان هندل کرد. اما اینجا به عنوان ورودی رسید آپلود می‌شود -->
                <input type="hidden" name="consult_order_id" value="0"> <!-- به عنوان فلگ موقت -->
                
                <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; 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; }
    .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; }
    .toast-icon { width: 30px; height: 30px; font-size: 20px; display: grid; place-items: center; }
    .toast-close { background: transparent; border: none; font-size: 1.25rem; color: #94a3b8; cursor: pointer; }
    .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-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; }
</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('booking.payment.stars') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ booking_id: "{{ $booking->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('booking.payment.crypto') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ booking_id: "{{ $booking->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