@extends('admin.layouts.contentLayoutMaster')

@section('title','銷售報表')

@section('vendor-styles')

@endsection

@section('page-styles')
    <style>
        /*!* 设置table-responsive容器的最大高度为500px *!*/
        /*.table-responsive {*/
        /*    max-height: 600px;*/
        /*    overflow-y: auto; !* 添加滚动条 *!*/
        /*}*/

        /*!* 设置tbody的最大高度为500px *!*/
        /*.table-responsive tbody {*/
        /*    display: block; !* 将tbody设置为块级元素 *!*/
        /*}*/

        /*!* 设置表格的宽度等于thead的宽度 *!*/
        /*.table-responsive thead,*/
        /*.table-responsive tbody tr {*/
        /*    display: table;*/
        /*    width: 100%;*/
        /*    table-layout: fixed; !* 确保表格布局固定 *!*/
        /*}*/

        /*!* 设置thead和tbody各列的宽度 *!*/
        /*.table-responsive thead {*/
        /*    width: calc(100% - 17px); !* 减去滚动条的宽度 *!*/
        /*}*/

        /*!* 隐藏tbody中的td的垂直边框，避免滚动条出现时错位 *!*/
        /*.table-responsive tbody td {*/
        /*    border: none;*/
        /*    border-bottom: 1px solid #ddd; !* 添加底部边框来分隔行 *!*/
        /*}*/
    </style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">
            <form class="form form-horizontal" method="POST" id="main_form">
                <div class="d-flex justify-content-end p-0" >
                    {{ $now }}
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="row mx-0">
                                    <div class="col-xl-4 col-md-12 d-flex align-items-center pl-0">
                                        <h6 class="mr-75"> 活動名稱 </h6>
                                        <h6 class="show_activity_name mr-75 text-bold-500"> {{ $commission->activity->name }} </h6>
                                    </div>
                                    <div class="col-xl-4 col-md-12 d-flex align-items-center pl-0">
                                        <h6 class="mr-75"> 團媽 </h6>
                                        <h6 class="show_administrator_name mr-75 text-bold-500"> {{ $commission->administrator->name }} </h6>
                                    </div>
                                    <div class="col-xl-4 col-md-12 d-flex align-items-right pl-0 justify-content-end">
{{--                                        <a href="{{ url()->current(). '?export=1' }}">--}}
{{--                                            <button class="btn btn-success glow mr-1 " type="button"><i class='bx bx-download'></i></button> --}}
{{--                                        </a>--}}
                                        <a href="{{ url()->current() }}">
                                            <button class="btn btn-primary glow mr-1 " type="button"><i class='bx bx-revision'></i></button> 
                                        </a>
                                        <a href="{{ Route('admin.commission.index') }}">
                                            <button class="btn btn-light glow mr-1 " type="button"><i class='bx bx-left-arrow-alt'></i></button> 
                                        </a>
                                    </div>
                                </div>
                                <hr>

                                <div class="card-content">
                                    <div class="card-body">
                                        <ul class="nav nav-tabs justify-content-center" role="tablist">
                                            <li class="nav-item">
                                                <a aria-controls="summary" aria-selected="false" class="nav-link active" data-toggle="tab" href="#summary_tab" id="summary-tab" role="tab">
                                                    <i class="bx bx-coin align-middle"></i> <span class="align-middle">總覽</span>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a aria-controls="products" aria-selected="false" class="nav-link" data-toggle="tab" href="#products_tab" id="products-tab" role="tab">
                                                    <i class="bx bx-coin align-middle"></i> <span class="align-middle">商品銷售統計</span>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a aria-controls="orders" aria-selected="false" class="nav-link" data-toggle="tab" href="#orders_tab" id="orders-tab" role="tab">
                                                    <i class="bx bx-coin align-middle"></i> <span class="align-middle">銷售訂單明細</span>
                                                </a>
                                            </li>

                                        </ul>
                                        <div class="tab-content">
                                            @include('admin.commission.tab.summary')
                                            @include('admin.commission.tab.products')
                                            @include('admin.commission.tab.orders')
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')

@endsection

@section('page-scripts')
<script>

</script>
@endsection