@extends('mainlayout.layout')


@section('title')
@endsection

@push('css')
<link href="{{ asset('/web/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="{{ asset('/web/assets/libs/@chenfengyuan/datepicker/datepicker.min.css')}}">
@endpush


@section('content')

        <!-- start page title -->
            <div class="row" >
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0 font-size-18">Transaction</h4>
                    </div>
                </div>
            </div>                           
        <!-- end page title -->  

                    <div class="row">


                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-10">
                                                <h4 class="card-title" style="display:inline">Details</h4>
                                            </div>

                                            
                                        </div>
                                        
                                       
                                        <div class="row mt-2">
                                            
                
                                            <div class="col-lg-12 align-items-left mt-2">
                                                <div class="text-lg-left mt-4 mt-lg-0">
                                                    <div class="row mb-4">
                                                         <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Transaction ID</p>
                                                                <h5 class="mb-0">000000000</h5>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Receipt ID</p>
                                                                <h5 class="mb-0">500000000</h5>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">MSISDN (USER)</p>
                                                                <a href="/customers/view_customer/id"><h5 class="mb-0 text-coffee">255612345678</h5></a>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Amount paid</p>
                                                                <h5 class="mb-0">20,000</h5>
                                                            </div>
                                                        </div>

                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Balance Before Payment</p>
                                                                <h5 class="mb-0">0</h5>
                                                                
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Balance After Payment</p>
                                                                <h5 class="mb-0">20,000</h5>
                                                                
                                                            </div>
                                                        </div>

                                                        
                                                      
                                                    </div>

                                                </div>
                                            </div>
                
                                        </div>
                                        
                                        <div class="row mt-2">
                                            
                
                                            <div class="col-lg-12 align-items-left mt-2">
                                                <div class="text-lg-left mt-4 mt-lg-0">
                                                    <div class="row mb-4">
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Device</p>
                                                                <h5 class="mb-0">Samsung s10</h5>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Campaign</p>
                                                                <h5 class="mb-0">Mwendokasi</h5>
                                                            </div>
                                                        </div>
                                                         <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Paid By(Msisdn)</p>
                                                                <h5 class="mb-0">0712 000 000</h5>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Date</p>
                                                                <h5 class="mb-0">12-March-2021, 19:23:23</h5>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div>
                                                                <p class="text-muted mb-2">Status</p>
                                                                <h5 class="mb-0">Successful</h5>
                                                            </div>
                                                        </div>
                                                        
                                                        

                                                        
                                                      
                                                    </div>

                                                </div>
                                            </div>
                                        </div>


                                        
                                </div>
                            </div>

                         </div>

                    </div>




@endsection


@push('scripts')

    <script src="{{ asset('/web/assets/libs/@chenfengyuan/datepicker/datepicker.min.js')}}"></script>
    
    <script src="{{ asset('/web/assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>

@endpush