@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('Buy Your Currency Now') }}
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>
         

      <style>
    .postbox-review-form {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 900px;
        margin: auto;
    }
    .postbox-review-form span {
        font-size: 22px;
        font-weight: bold;
        color: rgb(138, 21, 56);
        display: block;
        text-align: center;
        margin-bottom: 15px;
    }
    .postbox-review-input input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }
    .postbox-review-input {
        margin-bottom: 15px;
    }
    .postbox-review-button {
        text-align: center;
    }
    .tr-btn-green {
        background: rgb(138, 21, 56);
        color: #FFD700;
        padding: 12px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
    }
    .tr-btn-green:hover {
        background: rgb(138, 21, 56);
    }
</style>
<div class="postbox-review-form" style="margin-top: 50px;">
    <span class="tr-inner-contact-title">
        <i class="fa fa-shopping-cart"></i>  
        {{ \App\Helpers\TranslationHelper::translate('Buy Now') }}
    </span>
    <form method="POST" id="contactForm" action="{{ route('create-buy-couronne') }}">
        @csrf
        <div class="row">
            <div class="col-lg-6">
                <div class="postbox-review-input">
                    <label for="first_name">{{ \App\Helpers\TranslationHelper::translate('Full Name') }}</label>
                    <input type="text" id="first_name" placeholder="{{ \App\Helpers\TranslationHelper::translate('Full Name') }}" name="first_name" value="{{ old('first_name') }}" required />
                    @error('first_name')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
           
            <div class="col-lg-6">
    <div class="postbox-review-input">
        <label for="wallet_number">{{ \App\Helpers\TranslationHelper::translate('Wallet Number') }}</label>
        <input type="text" id="wallet_number" placeholder="{{ \App\Helpers\TranslationHelper::translate('Wallet Number') }}" name="wallet_number" value="{{ old('wallet_number') }}" required />
        @error('wallet_number')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
</div>
            <div class="col-lg-6">
                <div class="postbox-review-input">
                    <label for="email">{{ \App\Helpers\TranslationHelper::translate('Your Email') }}</label>
                    <input type="email" id="email" placeholder="{{ \App\Helpers\TranslationHelper::translate('Your Email') }}" name="email" value="{{ old('email') }}" required />
                    @error('email')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-lg-6">
                <div class="postbox-review-input">
                    <label for="phone">{{ \App\Helpers\TranslationHelper::translate('Mobile') }}</label>
                    <input type="tel" id="phone" placeholder="{{ \App\Helpers\TranslationHelper::translate('Mobile') }}" name="phone" value="{{ old('phone') }}" required />
                    @error('phone')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-lg-6">
                <div class="postbox-review-input">
                    <label for="number_card">{{ \App\Helpers\TranslationHelper::translate('Number of currencies') }}</label>
                    <input type="number" id="number_card" placeholder="{{ \App\Helpers\TranslationHelper::translate('Number of currencies') }}" name="number_card" value="{{ old('number_card') }}" required min="1" />
                    @error('number_card')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>

         {{-- <div class="col-lg-6">
    <div class="postbox-review-input">
        <label for="total_price">{{ \App\Helpers\TranslationHelper::translate('Total Price') }}</label>
        <div class="input-group">
            <input type="text" id="total_price" name="total_price" value="0" readonly class="form-control">
            <span class="input-group-text">دولار</span>
        </div>
        @error('total_price')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
</div> --}}

            <div class="col-lg-6">
                <div class="postbox-review-input">
                    <label for="total_price">{{ \App\Helpers\TranslationHelper::translate('Total price in dollars:$') }}</label>
                    <input type="text" id="total_price" name="total_price" value="0" readonly />
                    @error('total_price')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="postbox-review-button mt-30">
            <button type="submit" class="tr-btn-green">
                {{ \App\Helpers\TranslationHelper::translate('Buy Now') }}
            </button>
        </div>
    </form>
</div>

@endsection

@push('js')



  
 <script>
    document.addEventListener("DOMContentLoaded", function() {
        let numberCardInput = document.getElementById("number_card");
        let totalPriceInput = document.getElementById("total_price");

        let cardPrice = 1; // سعر البطاقة ثابت = 1

        numberCardInput.addEventListener("input", function() {
            let number = parseInt(this.value) || 0;
            totalPriceInput.value = number * cardPrice;
        });
    });
</script>


{{-- <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