@extends('layouts.site.master')
@section('content')
    <div class="col-xl-4 col-md-6 col-sm-8 col-12 px-lg-0 px-3 mx-auto mt-lg-5 mt-0 pt-lg-4 pt-0">
        <a class="text-end mb-2 justify-content-end align-items-center d-flex font-14 mint-green"
           href="{{route('panel.dashboard')}}">
            بازگشت به پنل
            <img width="7" class="ms-1" src="{{asset('assets/site/img/article-more.svg')}}" alt="">
        </a>
        <div class="bg-white main-radius shadow-sm p-3">
            <p class="bold side-title position-relative max-w">
                مشخصات کارت
            </p>
            @if($order->getCanonicalStatus() === \App\Models\Order::STATUS_AWAITING_RECEIPT)
                <div class="alert alert-warning mt-3 mb-0">
                    سفارش ثبت شده است. لطفاً رسید واریز را در همین صفحه بارگذاری کنید.
                </div>
            @elseif($order->getCanonicalStatus() === \App\Models\Order::STATUS_RECEIPT_SUBMITTED)
                <div class="alert alert-success mt-3 mb-0">
                    رسید شما ثبت شده و در انتظار تایید ادمین است.
                </div>
            @elseif($order->getCanonicalStatus() === \App\Models\Order::STATUS_RECEIPT_REJECTED)
                <div class="alert alert-danger mt-3 mb-0">
                    رسید قبلی رد شده است. لطفاً در صورت نیاز رسید جدید را بارگذاری کنید.
                </div>
            @endif
            <i style="font-size: 100px;" class="bi-credit-card Charcoal-gray d-flex justify-content-center"></i>
            <div class="bg-body p-3 main-radius mt-3">
                <div class="d-flex justify-content-between pb-2 mb-3 border-bottom">
                <span class="font-14 medium-gray light">
                    نوع خدمات:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="font-14">
                        {{$order->service->title}}
                    </span>
                    </div>
                </div>
                <div class="d-flex justify-content-between pb-2 mb-3 border-bottom">
                <span class="font-14 medium-gray light">
                    نوع خرید:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="font-14 light-gray">
                        {{$order->getOrderTypeFarsi()}}
                    </span>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                <span class="font-14 medium-gray light">
                    مبلغ کل:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="font-14 dark-gray bold">
                       {{$order->getFormattedPriceFa()}}<span class="mint-green font-13 semi">تومان</span>
                    </span>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <div class="d-flex justify-content-between pb-2 mb-3 border-bottom">
                <span class="font-14 medium-gray light">
                    شماره کارت:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="text-content">
                          {{$setting->getSetting('card_number')}}
                    </span>
                        <button class="icon-btn border-0 p-0 bg-transparent"
                                onclick="copyToClipboard(this, '6037990887093489')">
                            <i class="bi-copy dark-gray d-flex  justify-content-center"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex justify-content-between pb-2 mb-3 border-bottom">
                <span class="font-14 medium-gray light">
                    شماره حساب:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="text-content">
                         {{$setting->getSetting('card_account')}}
                    </span>
                        <button class="icon-btn border-0 p-0 bg-transparent"
                                onclick="copyToClipboard(this, '9718381897')">
                            <i class="bi-copy dark-gray d-flex  justify-content-center"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex justify-content-between pb-2 mb-3 border-bottom">
                <span class="font-14 medium-gray light">
                    شماره شبا:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="text-content">
                        {{$setting->getSetting('card_sheba')}}
                    </span>
                        <button class="icon-btn border-0 p-0 bg-transparent"
                                onclick="copyToClipboard(this, '00087868989212')">
                            <i class="bi-copy dark-gray d-flex  justify-content-center"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                <span class="font-14 medium-gray light">
                    نام گیرنده:
                </span>
                    <div class="d-flex align-items-center gap-2">
                    <span class="text-content font-14">
                         {{$setting->getSetting('card_receiver')}}
                    </span>
                    </div>
                </div>
            </div>
            <p class="bold side-title position-relative max-w mt-4">
                بارگزاری رسید <span class="mint-green">(فیش کارت به کارت)</span>
            </p>
            @if(in_array($order->getCanonicalStatus(), [\App\Models\Order::STATUS_AWAITING_RECEIPT, \App\Models\Order::STATUS_RECEIPT_REJECTED], true))
            <form method="post" action="{{route('panel.order.cardStore')}}"  enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="order_id" value="{{$order->id}}">
                <div class="pt-3">
                    <div class="upload-area light flex-column" id="uploadArea">
                        <i class="bi-files dark-gray fs-2 justify-content-center" id="bi-files"></i>
                        <img id="preview" class="preview-image" alt="پیش‌نمایش">
                        <span class="placeholder-text d-flex mt-2" id="placeholderText">
                    کلیک کنید تا عکس آپلود شود
                </span>
                    </div>
                    <input name="image" type="file" id="fileInput" accept="image/*">
                </div>
                <button
                    class="first-page-btn-component mt-2 w-100 d-flex justify-content-center py-2 font-14 text-white main-radius btn-dark-gray"
                    type="submit">
                    ثبت اطلاعات
                </button>
            </form>
            @else
                <div class="alert alert-light border mt-3 mb-0">
                    در وضعیت فعلی نیازی به بارگذاری مجدد رسید نیست.
                </div>
            @endif
        </div>
    </div>
    <script>
        function copyToClipboard(button, text) {
            // استفاده از API مدرن کلیپ‌بورد
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    showSuccess(button);
                }).catch(err => {
                    console.error('خطا در کپی کردن: ', err);
                    fallbackCopyText(text, button); // روش جایگزین در صورت خطا
                });
            } else {
                // روش جایگزین برای مرورگرهای قدیمی یا محیط‌های ناامن
                fallbackCopyText(text, button);
            }
        }

        // روش جایگزین (Fallback) با استفاده از textarea
        function fallbackCopyText(text, button) {
            const textArea = document.createElement("textarea");
            textArea.value = text;

            // اطمینان از اینکه textarea خارج از دید است
            textArea.style.position = "fixed";
            textArea.style.left = "-۹۹۹۹px";
            textArea.style.top = "۰";

            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                document.execCommand('copy');
                showSuccess(button);
            } catch (err) {
                console.error('Fallback: Oops, unable to copy', err);
                alert('کپی کردن انجام نشد. لطفاً دستی کپی کنید.');
            }

            document.body.removeChild(textArea);
        }

        function showSuccess(button) {
            // تغییر آیکون به تیک
            const originalIcon = button.innerHTML;
            button.innerHTML = '✓';

            // بازگشت به حالت اول بعد از ۲ ثانیه
            setTimeout(() => {
                button.innerHTML = originalIcon;
            }, 2000);
        }
    </script>
    <script>

        const biiles = document.getElementById('bi-files');


        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');
        const placeholderText = document.getElementById('placeholderText');

        // باز کردن پنجره انتخاب فایل با کلیک روی دیو
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        // هندل کردن تغییر فایل (وقتی کاربر فایلی انتخاب کرد)
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    biiles.style.display = 'none'; // نمایش عکس
                    preview.style.display = 'block'; // نمایش عکس
                    placeholderText.textContent = 'فیش با موفقیت بارگزاری شد!'; // مخفی کردن متن
                }

                reader.readAsDataURL(file);
            }
        });

        // قابلیت Drag & Drop (کشیدن و رها کردن فایل)
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault(); /* جلوگیری از باز شدن فایل در تب جدید */
            uploadArea.style.backgroundColor = '#eee';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.backgroundColor = '#eee';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.backgroundColor = '#eee';

            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    placeholderText.style.display = 'none';
                }

                reader.readAsDataURL(file);
            }
        });
    </script>
@endsection