@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/range/app.css') }}">
@endsection

@section('content')
    <div style="padding-top: 200px;" class="section">
        <div style="max-width: 800px;" class="container">
            <div class="section-title text-center mb-12" data-aos="fade-up">
                <h2 class="title">Paypal</h2>
                <p class="sub-title">Lütfen ödemenizi aşağıdaki formdan yapınız.</p>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <ol class="wizard numeric">
                        <li class="done">
                            <span>1</span>
                            <p style="margin-left: -12px;">{{ __('platform.wizard.step-one') }}</p>
                        </li>
                        <li class="done">
                            <span>2</span>
                            <p style="margin-left: -10px;">{{ __('platform.wizard.step-two') }}</p>
                        </li>
                        <li class="done">
                            <span>3</span>
                            <p style="margin-left: -6px;">{{ __('platform.wizard.step-three') }}</p>
                        </li>
                        <li class="active">
                            <span>4</span>
                            <p style="margin-left: -9px;">{{ __('platform.wizard.step-four') }}</p>
                        </li>
                        <li>
                            <span>5</span>
                            <p style="margin-left: -8px;">{{ __('platform.wizard.step-five') }}</p>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="container text-center icon-up-down-animation">
        <!-- Section Title Start -->
        <div class="row text-center aos-init aos-animate" data-aos="fade-up">
            <div class="comment-form-wrap">
                <div class="comment-respond">
                    <div class="container-fluid">
                        <div class="contact-info" data-vivus-hover="">
                            <span>Lütfen ödeme yapmak istediğiniz tutarı giriniz.</span>
                        </div>
                        <div class="contact-info" data-vivus-hover="">
                            <input class="col-xs-12" id="card-number" name="amount" placeholder="Tutar" type="number">
                        </div>
                    </div>
                    <br>
                    <button class="btn btn-primary btn-hover-secondary" >Siparişi Tamamla</button>
                </div>
            </div>
        </div>
    </div>
    <br>
@endsection


@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>
    <script src="{{ asset('assets/js/range/app.js') }}"></script>
    <script src="{{ asset('assets/js/range/manifest.js') }}"></script>
    <script src="{{ asset('assets/js/range/vendor.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chat.js') }}"></script>
@endsection

@section('header_script')
    <script>

    </script>
@endsection
@section('script')
    <script>

    </script>
@endsection