@extends('front.layouts.app')

@section('content')  

{{-- <div class="overlay" id="overlay">
    <div class="container h-100">
        <div class="row align-items-center justify-content-center h-100">
            <div class="col-md-4 text-center text-md-start">
                <p class="coming-soon">{{ \App\Helpers\TranslationHelper::translate('This content will be available soon') }}</p>
            </div>
            <div class="col-md-4 text-center">
                <button class="lock-btn" onclick="unlockContent()">
                    <img src="{{ asset('front/assets/img/lock.png') }}" alt="" class="img-fluid">
                </button>
            </div>
        </div>
    </div>
</div> --}}
 <section class="hero-section">
            <div class="overlay"></div>
            <div class="container">
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-10 text-center">
                        <div class="text-hero-7">
                            <h2 data-aos="zoom-in" data-aos-duration="1000">
                           {{ \App\Helpers\TranslationHelper::translate('Order Purchase Details') }}
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<div class="receipt-container" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
    <h2 style="color:rgb(138, 21, 56)">
        <i class="fas fa-file-invoice" style="margin-left: 10px;"></i>
        {{ \App\Helpers\TranslationHelper::translate('Order Purchase Details') }}
    </h2>
    <div class="details" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
        <p><strong>{{ \App\Helpers\TranslationHelper::translate('Name') }}:</strong> {{ $order->first_name }}</p>
        <p><strong>{{ \App\Helpers\TranslationHelper::translate('Email') }}:</strong> {{ $order->email }}</p>
         <p><strong>{{ \App\Helpers\TranslationHelper::translate('wallet number') }}:</strong> {{ $order->wallet_number }}</p>
        <p><strong>{{ \App\Helpers\TranslationHelper::translate('Phone') }}:</strong> {{ $order->phone }}</p>
        {{-- <p><strong>{{ \App\Helpers\TranslationHelper::translate('Card Category Type') }}:</strong> {{ $order->cards->category_card }}</p> --}}
        {{-- <p><strong>{{ \App\Helpers\TranslationHelper::translate('Card Name') }}:</strong> {{ $order->cards->categorycolid->name }}</p> --}}
        <p><strong>{{ \App\Helpers\TranslationHelper::translate('Number of Currenne') }}:</strong> {{ $order->number_card }}</p>
        <p><strong>{{ \App\Helpers\TranslationHelper::translate('Price of One Card') }}:1$</strong></p>
        <p><strong>{{ \App\Helpers\TranslationHelper::translate('Total Price Cards') }}:</strong> {{ $order->total_price }}</p>
    </div>

    <div class="payment-method">
        <h3 style="color: rgb(138, 21, 56)">{{ \App\Helpers\TranslationHelper::translate('You can purchase by transferring to the IBAN number.') }}</h3>
        <h3 style="font-weight: bold;">{{setting('iban_number')}}</h3>
        <div class="payment-buttons">
            <a href="{{ route('site.home') }}" class="payment-btn paypal-btn">
    {{ \App\Helpers\TranslationHelper::translate('Back to Home') }}
</a>

            {{-- <button class="payment-btn paypal-btn">{{ \App\Helpers\TranslationHelper::translate('PayPal') }}</button> --}}
            {{-- <button class="payment-btn paypal-btn">{{ \App\Helpers\TranslationHelper::translate('Back to Home') }}</button> --}}
            {{-- <button class="payment-btn invoice-btn">{{ \App\Helpers\TranslationHelper::translate('Visa Card') }}</button> --}}
        </div>
    </div>
</div>

<style>

    /* Container Styling */
    .receipt-container {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        max-width: 600px;
        margin: 20px auto;
        box-shadow: 0 4px 8px rgba(217, 172, 172, 0.1);
    }

    .receipt-container h2 {
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
    }

    .details p {
        font-size: 16px;
        margin: 10px 0;
        color: #555;
    }

    .details strong {
        color: #333;
    }

    /* Payment Method Section */
    .payment-method {
        text-align: center;
        margin-top: 30px;
    }

    .payment-method h3 {
        font-size: 20px;
        margin-bottom: 15px;
        color: #333;
    }

    .payment-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .payment-btn {
        padding: 12px 25px;
        font-size: 16px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 150px;
        color: white;
    }

    .paypal-btn {
        background-color: rgb(138, 21, 56);
    }

    .paypal-btn:hover {
        background-color: rgb(138, 21, 56);
    }

    .fawry-btn {
        background-color: #f3b72e;
    }

    .fawry-btn:hover {
        background-color: #d89e24;
    }

    .invoice-btn {
        background-color: #8A8A8A;
    }

    .invoice-btn:hover {
        background-color: #8A8A8A;
    }
</style>

@endsection

@push('js')


{{-- <script>
function unlockContent() {
    let overlay = document.getElementById("overlay");
    overlay.style.opacity = "0";

    setTimeout(() => {
        overlay.style.display = "none";
        document.getElementById("main-content").style.display = "block";
    }, 300);
}
</script> --}}
@endpush