@extends('company.app')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <section class="section-py bg-body first-section-pt">
            <div class="container">
                <div class="card px-3">
                    <div class="row">
                        <div class="col-lg-7 card-body border-end p-md-8">
                            <h4 class="mb-2">Ödeme Ekranı</h4>
                            <p class="mb-0">
                                Bu ekrandan belirlediğiniz tutarda veya fatura özelinde ödeme yapabilirsiniz.<br> Fatura özelinde ödeme yapmak için fatura detayı kısmından ödeme bağlantısına tıklayınız.
                            </p>

                            <div id="form-credit-card">
                                <h4 class="mt-8 mb-6">Kredi Kartı Bilgileri</h4>
                                <form>
                                    <div class="row g-6">
                                        <div class="col-12">
                                            <label class="form-label" for="billings-card-num">Kart Numarası</label>
                                            <div class="input-group input-group-merge">
                                                <input
                                                    type="text"
                                                    id="billings-card-num"
                                                    class="form-control billing-card-mask"
                                                    placeholder="7465 8374 5837 5067"
                                                    aria-describedby="paymentCard" />
                                                <span class="input-group-text cursor-pointer p-1" id="paymentCard"
                                                ><span class="card-type"></span
                                                    ></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label" for="billings-card-name">İsim Soyisim</label>
                                            <input type="text" id="billings-card-name" class="form-control" placeholder="İsim - Soyisim" />
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label" for="billings-card-date">Son Kullanma Tarihi</label>
                                            <input
                                                type="text"
                                                id="billings-card-date"
                                                class="form-control billing-expiry-date-mask"
                                                placeholder="MM/YY" />
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label" for="billings-card-cvv">Güvenlik Numarası</label>
                                            <input
                                                type="text"
                                                id="billings-card-cvv"
                                                class="form-control billing-cvv-mask"
                                                maxlength="3"
                                                placeholder="965" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-5 card-body p-md-8">
                            <h4 class="mb-2">Ödenecek Tutar</h4>
                            <div class="mt-5">
                                <div class="d-flex justify-content-between align-items-center">
                                    <p class="mb-0">Tutar Giriniz</p>
                                    <h6 class="mb-0"><input type="number" name="price" onchange="$('#recharge').text('₺'+$(this).val())" class="form-control"></h6>
                                </div>
                                <hr />
                                <div class="d-flex justify-content-between align-items-center mt-4 pb-1">
                                    <p class="mb-0">Çekilecek Tutar</p>
                                    <h6 class="mb-0" id="recharge"></h6>
                                </div>
                                <div class="d-grid mt-5">
                                    <button class="btn btn-success">
                                        <span class="me-2">Ödemeyi Tamamla</span>
                                        <i class="icon-base ti tabler-arrow-right scaleX-n1-rtl"></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('css')

@endsection
@section('js')

@endsection
@section('head')

@endsection