@extends('frontend3')

@section('styles')

@endsection

@section('content')

    <div id="siteContent" class="site-content">
        <div class="container my-12 has-mw-on-xs-screen">
            <div class="row">
                <div class="col-xs-12 col-md-3">
                    <div class="mb-12 hidden-md hidden-lg">
                        <button class="ht-sidebar-collapse-toggle collapsed ht-depth-1" type="button"
                                data-toggle="collapse" data-target="#collapsedSidebarCardList" aria-expanded="false">
                            Hiển thị danh mục<i class="ion-android-more-vertical"></i></button>
                    </div>
                    <div class="navbar-collapse collapse ht-depth-1 mb-12 pa-0" id="collapsedSidebarCardList">
                        <div class="pa-12">
                            <div class="ht-sidebar-card">
                                <div class="card-header">
                                    <div class="flex">
                                        <div class="flex-item-dw text-center"><a href="#"
                                                                                 class="sidebar-title-link  active  choose_device"
                                                                                 data-type="3">Website</a></div>
                                        <div class="flex-item-dw text-center"><a href="#"
                                                                                 class="sidebar-title-link  choose_device"
                                                                                 data-type="4">App
                                                Mobile</a></div>
                                    </div>
                                </div>
                                <div class="card-content">
                                    @include('frontend3.manual.sidebar')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-md-9">
                    <div class="ht-depth-1">
                        <div class="pa-12">
                            <div class="ht-breadcrumb_wrap">
                                <ul class="ht-breadcrumb ht-styled-scroll">
                                    <li>
                                        <a href="https://itro.vn">Trang
                                            chủ</a></li>
                                    <li>
                                        <a href="/huong-dan-su-dung">Hướng dẫn sử dụng</a>
                                    </li>
                                </ul>
                            </div>
                            <hr class="my-12">
                            <div class="ht-card-list_header">
                                <div class="flex-item flex-item-dynamic-width">
                                    <h1 class="cl_h_title cl_h_title-lg">Hướng dẫn sử dụng</h1>
                                </div>
                            </div>
                            <hr class="my-12">
                            <div class="ht-news-card-list">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="application/javascript">
    $(document).on('click', '.choose_device', function () {
        var type_device = $(this).attr('data-type');

        $('.choose_device').removeClass('active');
        var that = this;
        $.ajax({
            url: '{{ url('get-sidebar-manual') }}',
            type: 'get',
            data: {
                type_device: type_device
            },
            dataType: 'json',
            success: function (response) {
                $('.sidebar-cat-list').html(response.data);
                $(that).addClass('active');
            }
        });
    });


    $(document).on('click', '.cate-posts', function () {
        var data_href = $(this).attr('data-href');

        var that = this;
        $.ajax({
            url: data_href,
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('.ht-news-card-list').html(response.data);

            }
        });
    });


    $(document).ready(function () {
        $.ajax({
            url: '{{ url('get-sidebar-manual') }}',
            type: 'get',
            data: {
                type_device: 3
            },
            dataType: 'json',
            success: function (response) {
                $('.sidebar-cat-list').html(response.data).find('.cate-posts').first().click();
                $('.choose_device ').first().addClass('active');
            }
        });
    });
</script>
@endpush