<div class="container">
    <div class="row" style="padding: 40px 0;">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"> Orders</h3>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-lg-1">
                                    <label for="" class="badge badge-primary">1</label>
                                </div>

                                <div class="col-lg-3">
                                    <p>Customer Mobile</p>
                                    <p>01829894659</p>
                                </div>

                                <div class="col-lg-2">
                                    <p>Price</p>
                                    <p>400/=</p>
                                </div>


                                <div class="col-lg-2">
                                    <p>Shipping</p>
                                    <p>40/=</p>
                                </div>

                                <div class="col-lg-2">
                                    <p>Quantity</p>
                                    <p>5</p>
                                </div>

                                <div class="col-lg-1">
                                    <button type="button" class="btn btn-rounded showReport" data-id="1">
                                        <i class="fa fa-chevron-down"></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-4 text-right">
                            <p class="btn btn-warning btn-rounded">Pending</p>
                            <a href="#" class="" style="color: #007BFF; ">
                                <i class="fa fa-check iconFa"></i>
                            </a>

                            <a href="#" class=""  style="color: #C4183C; ">
                                <i class="fa fa-times iconFaTrash"></i>
                            </a>

                        </div>

                        <!-- Collapse col-lg-12 -->

                        <div class="col-lg-12">
                            <hr>
                            <div class="row" id="reportShow1" style="display: none;transition:1s ease-out;">
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-3 p-0" >
                                            <p> Payment : <b>bKash</b></p>
                                        </div>

                                        <div class="col-lg-4 p-0">
                                            <p> bKash Number : <b>01234-567890</b></p>
                                        </div>

                                        <div class="col-lg-5  p-0">
                                            <p> Transaction ID : <b>d4e5D525</b></p>
                                        </div>
                                        <div class="col-lg-12">
                                            <p class="text-left">Merchant code :
                                                <a href="#"> 1006 </a>
                                            </p>
                                        </div>


                                        <div class="col-lg-12">
                                            <p class="text-left">Refer code : 1006</p>
                                        </div>

                                        <div class="col-lg-12">
                                            <p class="text-left">Referer Income: 31</p>
                                        </div>

                                        <div class="col-lg-12">
                                            <p class="text-left">Preference : </p>
                                        </div>

                                        <div class="col-lg-12">
                                            <p class="text-left">Address : Chittagong , Bangladesh </p>
                                        </div>


                                    </div>
                                </div>

                                <div class="col-lg-4">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Product Code</th>
                                                    <th>Quantity</th>
                                                    <th>Price</th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                <tr>
                                                    <td>10001</td>
                                                    <td>5</td>
                                                    <td>500</td>

                                                </tr>

                                            </tbody>


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

                            </div>
                        </div>

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

<script>
    $(document).on("click",".showReport",function(){
        var data = $(this).attr('data-id');
        $("#reportShow"+data).toggle()
    });
</script>

<style>
    .iconFa{
        height: 35px;
        width: 35px;
        border: 1px solid #007BFF;
        border-radius: 100%!important;
        padding: 8px;
        text-align: center;
        -webkit-transition: prop time;
        -moz-transition: prop time;
        -ms-transition: prop time;
        -o-transition: prop time;
        transition: prop time;
    }

    .iconFa:hover{
        background: #007BFF;
        color: #fff;
    }

    .iconFaTrash{
        height: 35px;
        width: 35px;
        border: 1px solid #C4183C;
        border-radius: 100%!important;
        padding: 8px;
        text-align: center;
        -webkit-transition: prop time;
        -moz-transition: prop time;
        -ms-transition: prop time;
        -o-transition: prop time;
        transition: prop time;
    }
    .iconFaTrash:hover{
        background: #C4183C;
        color: #fff;
    }

    a{
        text-decoration: none;
    }
</style>