@extends('layouts.base_portal')
@section('inner_content')
<div class="row">
    <div class="col">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-9">
                <div class="row m-b-15 m-l-5 m-r-10">
                    <div class="col b-a b-grey rounded bg-master-light">
                        <div class="row">
                            <div class="col padding-20">
                                <div class="row align-items-center justify-conten-center">
                                    <div class="col-auto pointer">
                                        <i class="fa fs-30 fa-fw fa-square-o"></i>
                                    </div>
                                    <div class="col">
                                        <h5 class="no-margin font-heading">Invoice No</h5>
                                    </div>
                                    <div class="col">
                                        <h5 class="no-margin">Invoice Date</h5>
                                    </div>
                                    <div class="col">
                                        <h5 class="no-margin">Status</h5>
                                    </div>
                                    <div class="col">
                                        <h5 class="no-margin">Amount</h5>
                                    </div>
                                    <div class="col-auto invisible">
                                        <div class="btn btn-default no-border">
                                            <i class="fa fa-angle-up"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <list-component section="containerListSection" :endpoint="route('api.address.district.list')">
                    <template slot="list" slot-scope="{data}">
                        <payments-billing-components :data="data"></payments-billing-components>
                    </template>
                </list-component>
            </div>
            <div class="col-12 col-sm-12 col-md-3">
                <div class="row align-items-center">
                    <div class="col b-a b-grey rounded padding-25">
                        <div class="row">
                            <div class="col">
                                <h6 class="semi-bold muted">Payment Summary</h6>
                            </div>
                        </div>
                        <div class="row align-items-center justify-content-center">
                            <div class="col-auto">
                                <div class="padding-5">
                                    <i class="fa fa-angle-up"></i>
                                </div>
                            </div>
                            <div class="col p-l-0">
                                <h6 class="semi-bold text-primary">2 Invoice Selected</h6>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col-auto">
                                        <h6 class="no-margin">x1</h6>
                                    </div>
                                    <div class="col">
                                        <h6 class="no-margin">lorem ipsum</h6>
                                    </div>
                                    <div class="col-auto">
                                        <h6 class="no-margin">52x62x635 CM</h6>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-auto">
                                        <h6 class="no-margin">x1</h6>
                                    </div>
                                    <div class="col">
                                        <h6 class="no-margin">lorem ipsum</h6>
                                    </div>
                                    <div class="col-auto">
                                        <h6 class="no-margin">52x62x635 CM</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col">
                                <h6 class="normal m-t-5 m-b-5">Shipping Fee</h6>
                            </div>
                            <div class="col-auto">
                                <h6 class="normal m-t-5 m-b-5">RM 212.15</h6>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <h6 class="normal m-t-5 m-b-5">Serrvice Fee</h6>
                            </div>
                            <div class="col-auto">
                                <h6 class="normal m-t-5 m-b-5">RM 41.25</h6>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <h6 class="normal m-t-5 m-b-5">Discount</h6>
                            </div>
                            <div class="col-auto">
                                <h6 class="normal m-t-5 m-b-5">RM 0.00</h6>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col">
                                <h6 class="normal">Total Payments</h6>
                            </div>
                            <div class="col-auto">
                                <h6 class="text-primary bold">RM 3300.00</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection