@extends('front.user.partials.layout' , ['active' => 'balance' , 'page' => __('balance')])

@section('profile_content')

    <div class="portlet">
        <div class="portlet__head">
            <div class="portlet__head-label">
                <div class="portlet__head-title">@lang('balance')</div>
            </div>
        </div>
        <div class="portlet__body p-3">
            <div class="widget__item-4">
                <div class="widget__item-content">
                    <h3 class="widget__item-title">My Balance</h3>
                    <h3 class="widget__item-price">0$</h3>
                </div>
                <div class="widget__item-action-2">
                    <button class="general_btn_xs" data-toggle="modal" data-target="#ModalBalance"><i class="far fa-plus mr-1"></i>Add Balance</button>
                    <!-- Modal-->
                    <div class="modal fade" id="ModalBalance" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="wrapper-balance">
                                    <div class="step-one">
                                        <h5 class="modal-title">Charge Your Balance</h5>
                                        <div class="widget_card"><i class="far fa-credit-card"></i></div>
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input class="form-control" type="text"/>
                                        </div><a class="btn-balance mx-lg-5" id="ShowStepTow" href="#">Next</a>
                                    </div>
                                    <div class="step-tow">
                                        <h5 class="modal-title">Step 2: Credit Card Payment</h5>
                                        <div class="form-group">
                                            <label>CARD HOLDER NAME</label>
                                            <input class="form-control" type="text"/>
                                        </div>
                                        <div class="form-group">
                                            <label>CARD NUMBER</label>
                                            <input class="form-control" type="text" id="number" maxlength="19"/>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label>Expire Date</label>
                                                    <input class="form-control datetimepicker" type="text"/>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label>CVV</label>
                                                    <input class="form-control" type="text"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group"><a class="btn-balance mx-lg-5" id="ShowStepThree" href="#">Next</a></div>
                                    </div>
                                    <div class="step-three">
                                        <div class="check-success"><img src="images/check.png" alt=""/>
                                            <p class="check-success-title">You Paid Successfully </p>
                                            <p class="check-success-price">50.00$</p>
                                        </div><a class="btn-balance mx-lg-5" href="">My Balance</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-balance">
                <tbody>
                <tr>
                    <td class="number">#01545</td>
                    <td class="price">$34</td>
                    <td class="date"><i class="far fa-clock"></i>09:30 AM 19/10/2020</td>
                    <td class="details"><a href="">Details</a></td>
                </tr>
                <tr>
                    <td class="number">#01545</td>
                    <td class="price">$34</td>
                    <td class="date"><i class="far fa-clock"></i>09:30 AM 19/10/2020</td>
                    <td class="details"><a href="">Details</a></td>
                </tr>
                <tr>
                    <td class="number">#01545</td>
                    <td class="price">$34</td>
                    <td class="date"><i class="far fa-clock"></i>09:30 AM 19/10/2020</td>
                    <td class="details"><a href="">Details</a></td>
                </tr>
                <tr>
                    <td class="number">#01545</td>
                    <td class="price">$34</td>
                    <td class="date"><i class="far fa-clock"></i>09:30 AM 19/10/2020</td>
                    <td class="details"><a href="">Details</a></td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center mb-4">
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">More<i class="fal fa-arrow-right pl-2"></i></a></li>
                </ul>
            </nav>
        </div>
    </div>

@endsection