@extends('quanlynhatro.landing_layout')

@section('styles')

@endsection

@section('meta')
    <meta property="og:url" content="{{ url()->current() }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Hướng dẫn sử dụng -  Phần mềm quản lý nhà trọ ITRO"/>
    <meta property="og:description"
          content="Chi tiết từ A-Z cách sử dụng và cài đặt phần mềm quản lý nhà trọ ITRO. Với những hướng dẫn này sẽ giúp cho bạn cài đặt và sử dụng một cách đơn giản mà hiệu quả nhất"/>
    <meta property="og:image" content="https://quanlynhatro.com/ogimage_qlnt.jpg"/>
@endsection

@section('content')

    @include('frontend3.header_landing')

    <div class="block-breadcrumb">
        <div class="container">
            <nav class="nav-breadcrumb" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item"><a href="/huong-dan-su-dung">Hướng dẫn sử dụng</a></li>

                </ol>
            </nav>
        </div>
    </div>
    <div class="block-manual">
        <div class="container">
            <div class="block-manual__wrap">
                <div class="block-manual__cnt">
                    <div class="row">
                        <div class="col-lg-auto mb-3 mb-lg-0">
                            <div class="block-manual__sbr">
                                <div class="l-manual-menu">
                                    <a href="#Collapse__UserManualMenu" class="l-manual-menu__tgl btn btn-block btn-default collapsed d-block d-lg-none" data-toggle="collapse">Menu</a>
                                    <div id="Collapse__UserManualMenu" class="l-manual-menu__mni collapse d-lg-block">
                                        <div class="l-manual-menu__navtabs nav nav-tabs">
                                            <a href="#Tab__SidebarManualMenu01"  class="active" data-toggle="tab" role="tab" aria-selected="true">
                                                <i class="mdi mdi-laptop"></i>Website
                                            </a>
                                            <a href="#Tab__SidebarManualMenu02" data-toggle="tab" role="tab"  aria-selected="false">
                                                <i class="mdi mdi-cellphone"></i>Mobile App
                                            </a>
                                        </div>
                                        <div class="tab-content">
                                            <div id="Tab__SidebarManualMenu01" class="tab-pane fade role= active show" role="tabpanel">
                                                <ol class="l-manual-menu__list">
                                                    @php
                                                       // $child = App\Models\Category::query()->where('parent_id', 3)->pluck('id')->toArray();

           $items = App\Models\Category::query()->where('parent_id', 3)->orderBy('order', 'asc')->orderBy('name', 'asc')->get();
                                                    @endphp
                                                    @foreach($items as $item)
                                                        <li>
                                                            <a class="cate-posts " data-href="{{ url('/blog/danh-muc/'. $item->slug) }}" href="#">{{ $item->name }}</a>
                                                            @php $children = App\Models\Category::query()->where('parent_id', $item->id)->orderBy('order', 'asc')->orderBy('name', 'asc')->get()@endphp
                                                            @if($children->count() > 0)
                                                                <ol>
                                                                    @foreach($children as $child)
                                                                        <li>
                                                                        <a class="cate-posts " data-href="{{ url('/blog/danh-muc/'. $child->slug) }}" href="#">{{ $child->name }}</a>
                                                                        </li>
                                                                    @endforeach

                                                                </ol>
                                                                @endif
                                                        </li>
                                                        @endforeach
                                                </ol>
                                            </div>
                                            <div id="Tab__SidebarManualMenu02" class="tab-pane fade " tabpanel="">
                                            <ol class="l-manual-menu__list">
                                                @php
                                                    // $child = App\Models\Category::query()->where('parent_id', 3)->pluck('id')->toArray();

        $items = App\Models\Category::query()->where('parent_id', 4)->orderBy('order', 'asc')->orderBy('name', 'asc')->get();
                                                @endphp
                                                @foreach($items as $item)
                                                    <li>
                                                        <a class="cate-posts " data-href="{{ url('/blog/danh-muc/'. $item->slug) }}" href="#">{{ $item->name }}</a>
                                                        @php $children = App\Models\Category::query()->where('parent_id', $item->id)->orderBy('order', 'asc')->orderBy('name', 'asc')->get()@endphp
                                                        @if($children->count() > 0)
                                                            <ol>
                                                                @foreach($children as $child)
                                                                    <li>
                                                                        <a class="cate-posts " data-href="{{ url('/blog/danh-muc/' . $child->slug) }}" href="#">{{ $child->name }}</a>
                                                                    </li>
                                                                @endforeach

                                                            </ol>
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg">
                        <div class="block-manual__hdr">
                            <h1 class="block-manual__tle">Hướng dẫn sử dụng</h1>
                        </div>
                        <div class="block-manual__cnt" id="manual-content">

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

@push('scripts')
    <script>
        $(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) {
                    $('#manual-content').html(response.data);

                }
            });
        });

        $(document).ready(function () {
          //  $('.sub').wrapAll("<ol></ol>");

            var cnt = 0;

            var data_href = $('.cate-posts').first().attr('data-href');
            $.ajax({
                url: data_href,
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    $('#manual-content').html(response.data);

                }
            });
        });
    </script>
@endpush
