@extends('payment.layouts.layout')
@php($step = $transaction->status ===1? 5 :3)

@section('content')

    <!-- start request form -->
    <section class=''>
        <div class="full-container">
            <div class="row uk-width-2-3@s uk-width-1-1">
                <ul uk-accordion class='accordion-item'>
                    <li>
                        <a class="uk-accordion-title bold chec" href="#"> سياسة وش شروط دم لايت <span><input class="uk-checkbox" checked='false' type="checkbox"> تأكيد</span> </a>
                        <div class="uk-accordion-content policy">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>

                    </li>
                </ul>
                <ul uk-accordion class='accordion-item'>
                    <li>
                        <a class="uk-accordion-title bold" href="#">أهم الأسئلة الشائعة</a>
                        <div class="uk-accordion-content policy">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="uk-margin-large-bottom uk-margin-large-top">
                    <div class="uk-width-1-3@s uk-width-1-1">
                        <a class="btn">الرجوع للصفحة الرئيسية</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end request form -->
    <!-- start pay -->
    <section class='payment'>
        <div class="full-container">
            <div class="row">
                <div class="uk-grid uk-large-grid">
                    @if ($transaction->status !==1)

                        <div class="uk-width-2-3@s uk-width-1-1">
                            <h3>طريقة الدفع</h3>
                            <ul class='payment-methods uk-grid-medium uk-child-width-1-2 uk-child-width-1-4@s uk-grid' toggle-child='active'>
                                <li class='active' view-form='mastercard'><div class='item-content'><img src="{{ asset('assets/img/mastercard.png') }}" alt=""><i class='check fas fa-check'></i></div></li>
                                <li class='' view-form='visa'><div class='item-content'><img src="{{ asset('assets/img/visa.png') }}" alt=""><i class='check fas fa-check'></i></div></li>
                                <li class='' view-form='paypal'><div class='item-content'><img src="{{ asset('assets/img/paypal.png') }}" alt=""><i class='check fas fa-check'></i></div></li>
                            </ul>
                            <div class="uk-margin-large-top">
                                <form class="uk-width-1-2@s uk-width-1-1 active" form-name='mastercard' form-active>
                                    <div class="uk-child-width-1-1 uk-grid">
                                        <div class="uk-margin">
                                            <label for="">رقم البطاقة</label>
                                            <input type="text" class="uk-input" placeholder='**** **** **** ****'>
                                        </div>
                                        <div class="uk-margin">
                                            <div class='uk-grid uk-grid-small uk-child-width-1-2'>
                                                <div>
                                                    <label for="">تاريخ الأنتهاء</label>
                                                    <input type="text" class="uk-input" placeholder="22/25">
                                                </div>
                                                <div>
                                                    <label for="">رمز الحماية</label>
                                                    <input type="text" class="uk-input" placeholder="CVV">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uk-margin">
                                            <button class="btn active">استمرار</button>
                                        </div>
                                    </div>
                                </form>
                                <form class="uk-width-1-2@s uk-width-1-1" form-name='visa'>
                                    <div class="uk-child-width-1-1 uk-grid">
                                        <div class="uk-margin">
                                            <label for="">رقم البطاقة</label>
                                            <input type="text" class="uk-input" placeholder='**** **** **** ****'>
                                        </div>
                                        <div class="uk-margin">
                                            <div class='uk-grid uk-grid-small uk-child-width-1-2'>
                                                <div>
                                                    <label for="">تاريخ الأنتهاء</label>
                                                    <input type="text" class="uk-input" placeholder="22/25">
                                                </div>
                                                <div>
                                                    <label for="">رمز الحماية</label>
                                                    <input type="text" class="uk-input" placeholder="CVV">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="uk-margin">
                                            <button class="btn active">استمرار</button>
                                        </div>
                                    </div>
                                </form>
                                <form class="uk-width-1-2@s uk-width-1-1" form-name='paypal'>
                                    <div class="uk-child-width-1-1 uk-grid">
                                        <div class="uk-margin">
                                            <a class="btn active" href="{{url( $transaction->payment_link )}}">ادفع</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endif
                    <div class="uk-width-1-3@s uk-width-1-1">
                        <div class="uk-card uk-card-default uk-card-body">
                            <h3 class="card-title mark">تفاصيل الحجز</h3>
                            <ul class='card-list'>
                                <li>
                                    <div class="icon">
                                        <img src="{{ asset('assets/img/1.png') }}" alt="">
                                    </div>
                                    <div class="text bold">مناسبة زراج</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='fas fa-map-marker-alt'></i>
                                    </div>
                                    <div class="text">{{$transaction->webmail->from_city}}</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='far fa-calendar-check'></i>
                                    </div>
                                    <div class="text">{{$transaction->webmail->date->format('Y M d')}}</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='far fa-clock'></i>
                                    </div>
                                    <div class="text">{{$transaction->webmail->date->format('H:i:s')}}</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='fas fa-star-half-alt'></i>
                                    </div>
                                    <div class="text">10, Seq 2020</div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class='fas fa-dollar-sign'></i>
                                    </div>
                                    <div class="text">ضريبة 15%</div>
                                </li>
                            </ul>
                            <div>
                                <div class="uk-grid uk-child-width-1-2 uk-margin-small-top">
                                    <div><h4>السعر الكلي</h4></div>
                                    <div class=''><span class='uk-align-left mark bold'>{{$transaction->total ?? 0}} ريال</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end pay -->

@endsection