@extends('website.layout.app')

@section('content')

    <!-- Section 1: Image -->
    <div class="boxs">
        <div class="box">
            <img src="./images/Ar-icone-bar.jpg.webp" alt="" />
        </div>
    </div>

    <!-- Notification Messages -->
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
 

    <!-- Product Information -->
    <div class="product">
        <div class="container">
            <h1>متبقي في المخزون فقط <span>{{ $products->num_of_paces }}</span> قطعة</h1>
            <div class="product_specification">
                <h2>مواصفات المنتج:</h2>
                <ul>
                    <li>-{{ $products->short_desc }}</li>
                    <li>-{{ $products->product_spec }}</li>
                </ul>
                <span>– تتكون المجموعة من :</span>
                <p style="margin-top: 20px; width: 200px">
                    @php
                        $longDescWrapped = wordwrap($products->long_desc, ceil(strlen($products->long_desc) / 5), "\n");
                    @endphp
                    @foreach (explode("\n", $longDescWrapped) as $line)
                        <li>-{{ $line }}</li>
                    @endforeach
                </p>
            </div>
        </div>
    </div>

    <!-- Timer Section -->
    <div class="timer-container">
        <h2>باقي على انتهاء الخصم</h2>
        <div class="timer">
            <div class="time-unit">
                <span id="days">00</span>
                <div>أيام</div>
            </div>
            <div class="time-unit">
                <span id="hours">00</span>
                <div>ساعات</div>
            </div>
            <div class="time-unit">
                <span id="minutes">00</span>
                <div>دقائق</div>
            </div>
            <div class="time-unit">
                <span id="seconds">00</span>
                <div>ثواني</div>
            </div>
        </div>
    </div>

    <!-- Payment Form -->
    <form action="{{ route('check_out', ['id' => $products->id]) }}" method="POST">
        @csrf
        <div class="order-form">
            <div class="payment-methods">
                <button type="button" class="payment-method active" value="offline" onclick="setPaymentMethod('offline')">الدفع عند التسليم</button>
                <button type="button" class="payment-method" value="online" onclick="setPaymentMethod('online')">الدفع اون لاين</button>
            </div>
            <input type="hidden" name="way_payment" id="way_payment" value="offline" />
            <h2 id="payment-title">الدفع عند التسليم</h2>
    
            <!-- Display general errors -->
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
    
            <div class="form-group">
                <label for="name">الاسم الثاني *</label>
                <input type="text" class="form-control" name="name" id="name"   />
                @error('name')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
    
            <div class="form-group">
                <label for="phone">الجوال *</label>
                <input type="text" class="form-control" id="phone" name="mobile" placeholder="+966"   />
                <small>يرجى عدم ادخال كود الدولة وابدأ بالرقم 5 او 05</small>
                @error('mobile')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
    
            <div class="form-group">
                <label for="address">العنوان *</label>
                <textarea class="form-control" name="address" id="address"  ></textarea>
                @error('address')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
    
            <div class="form-group">
                <label>اختر العرض:</label>
                @if($offers && $offers->count())
                    @foreach($offers as $offer)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="offer{{ $offer->id }}" name="offer_id" value="{{ $offer->id }}"   />
                            <label class="form-check-label" for="offer{{ $offer->id }}">{{ $offer->name }}</label>
                        </div>
                    @endforeach
                @else
                    <p>No offers available.</p>
                @endif
                @error('offer_id')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
    
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="fast-delivery" />
                <label class="form-check-label" for="fast-delivery">مشاركة الموقع لتوصيل سريع</label>
            </div>
    
            <button type="submit" class="btn submit-btn">تأكيد الطلب</button>
        </div>
    </form>
    

    <script>
        function setPaymentMethod(method) {
            document.getElementById('way_payment').value = method;
            document.getElementById('payment-title').innerText = method === 'offline' ? 'الدفع عند التسليم' : 'الدفع اون لاين';

            document.querySelectorAll('.payment-method').forEach(button => {
                button.classList.remove('active');
            });
            document.querySelector(`button[value="${method}"]`).classList.add('active');
        }
    </script>

@endsection