{% extends '../layout.server.view.html' %} {% block cssFile %}
<link href="/css/table.css" rel="stylesheet">
<link href="/css/blockcontact.css" rel="stylesheet">
{% endblock %} {% block content %}
<style>
    @media only screen and (max-width:767px) {
        .row.register-form a.button {
            display: flex !important;
            justify-content: center;
            align-items: center;
            margin: auto !important;
            margin-bottom: 10px !important;
        }

        h1.title-document {
            margin-top: 10px !important;
            margin-bottom: 0 !important;
        }
    }

    table#tableDocument {
        border: 1px solid #cccccc70 !important;
    }
</style>
<!-- table pc -->
<section class="table">
    <div class="container">
        <div class="row">
            <h1 class="title-document"
                style="font-size: 22px;text-align: center;margin-top: 30px;margin-bottom: 30px;text-transform: uppercase;line-height: 28px;">
                Danh sách văn bản pháp
                luật về
                <br>
                hóa đơn, hóa đơn điện tử</h1>
            <table id="tableDocument" class="bTable table table-hover" data-search="true">
                <thead>
                    <tr>
                        <th class="td-Order" style="" data-field="" data-label="STT">
                            <div class="th-inner ">STT</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th class="td-DocumentType" style="text-align: left !important; " data-field="DocumentTypeName"
                            data-label="Loại văn bản">
                            <div class="th-inner ">Số văn bản</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th class="td-Number" style="text-align: left; " data-field="Number" data-label="Số/Ký hiệu">
                            <div class="th-inner ">
                                <h2>Số/Ký hiệu</h2>
                            </div>
                            <div class="fht-cell"></div>
                        </th>
                        <th class="td-DateStart" style="text-align: left; " data-field="DateStart"
                            data-label="Ngày ban hành">
                            <div class="th-inner ">Ngày ban hành</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th class="td-DateEffect" style="text-align: left; " data-field="DateEffect"
                            data-label="Hiệu lực">
                            <div class="th-inner ">Hiệu lực</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th class="td-DocumentName" style="" data-field="DocumentName" data-label="Tên ban hành">
                            <div class="th-inner ">Tên văn bản</div>
                            <div class="fht-cell"></div>
                        </th>
                        <th class="" style="text-align: center; width: 100px; " data-field="AttackFile">
                            <div class="th-inner "></div>
                            <div class="fht-cell"></div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in document %}
                    <tr id="page-content" data-index="0">
                        <td class="td-Order" style="" data-label="STT"><span> {{item.stt}}</span></td>
                        <td class="td-DocumentType" style="text-align: left !important; " data-label="Loại văn bản">
                            {{item.loaivanban}}</td>
                        <td class="td-Number" style="text-align: left; " data-label="Số/Ký hiệu">{{item.sovanban}}</td>
                        <td class="td-DateStart" style="text-align: left; " data-label="Ngày ban hành">
                            {{item.ngaybanhanh}}</td>
                        <td class="td-DateEffect" style="text-align: left; " data-label="Hiệu lực">{{item.hieuluc}}</td>
                        <td class="td-DocumentName" style="" data-label="Tên ban hành">{{item.tenvanban}} </td>
                        <td class="" style="text-align: center; width: 100px; "> <a class="link-document"
                                href="{{item.xemchitiet}}" target="_blank"><button type="button"
                                    class="btn btn-primary">Chi tiết</button></a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- table mobie -->
<section class="table-mobile">
    <div class="data">
        <div class="container">
            <div class="row">
                {% for item in document %}
                <div class="col-md-12">
                    <p class="title-document" data-label="Loại văn bản"><span>{{item.loaivanban}}</span></p>
                    <p class="title-document" data-label="Số văn bản"><span>{{item.sovanban}}</span></p>
                    <p class="title-document" data-label="Ngày ban hành"><span>{{item.ngaybanhanh}}</span></p>
                    <p class="title-document" data-label="Hiệu lực"><span>{{item.hieuluc}}</span></p>
                    <p class="title-document" data-label="Tên văn bản"><span>{{item.tenvanban}}</span>
                    </p>
                    <p style="text-align:right">
                        <button class="btn btn-main" style="height: 32px;">
                            <a style="color: #fff;" href="{{item.xemchitiet}}" target="_blank">Chi tiết</a>
                        </button>
                    </p>
                </div>
                {% endfor %}

            </div>

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

<!-- phan trang -->
<div class="paging">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul id="pagination-demo" class="sync-pagination pagination-sm"></ul>
                <input class="totalPage" style="display: none" value="{{ totalPage }}" />
            </div>
        </div>
    </div>
</div>


<!-- contact -->
<section class="contact">
    <div class="container">
        <div class="row">
            <p style="text-align:center;font-size: 24px;color: #0093dd;font-weight: 500;">
                LIÊN HỆ MUA HÀNG
            </p>
        </div>
        <div class="row register-form" style="margin-top: 20px;margin-bottom: 20px;">
            <!-- <div class="col-md-4"> -->
            <a class="button buy-now" href="/bang-gia">
                Mua ngay
            </a>
            <!-- </div> -->
            <!-- <div class="col-md-4"> -->
            <a href="/dang-ky" class="button use-trial">Dùng thử</a>
            <!-- </div> -->
            <!-- <div class="col-md-4"> -->
            <a href="/dang-ky-lam-dai-ly" class="button agency">Đăng ký đại lý</a>
            <!-- </div> -->
        </div>
        <div class="row">
            <p style="text-align:center;font-size: 22px;color: #0093dd;">
                Hotline: <span><a style="color: #0093dd;text-decoration: none;" href="tel:0896133588">0896
                        133
                        588</a></span>
            </p>
        </div>
    </div>
</section>


{% endblock %} {% block jsFile %}
<script src="/assets/frontend/pages/scripts/jquery.twbsPagination.min.js" type="text/javascript"></script>
<!-- paging -->
<script>
    $(document).ready(function () {
        // let totalPage = {{ totalPage }};
        var totalPage = parseInt($(".totalPage").val());
        $('#pagination-demo').twbsPagination({
            totalPages: totalPage,
            href: '?page={% raw %}{{number}}{% endraw %}',
            startPage: 1,
            last: 'Cuối cùng',
            first: 'Đầu tiên',
            next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
            prev: '<i class="fa fa-angle-left" aria-hidden="true"></i>'
        });
    });
</script>

{% endblock %}