@extends('site.master')
@section('main-content')

    <section class="af-hdr mb-4">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="d-flex justify-content-center align-items-center">
                        <h1 class="fs-4 fw-bold text-white">
                            {{ isset($title) ? $title : '' }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d-main">
        <div class="container mb-3 pb-3">
            <div class="row">
                <div class="col-lg-3 col-12 mb-3">
                    <div class=" title text-nowrap fs-6 mb-2 fw-bold text-secondary">
                        {{-- {{ isset($title) ? $title : 'None' }} --}}
                        @lang('language.about-us')
                    </div>
                    <div class="">
                        <img src="{{ asset('images/icon/news-notice/detail-icon.svg') }}" alt="" width="">
                    </div>
                    <div class="d-flex flex-column flex-grow-1 ">
                        <ul class="list-unstyled sidemenu-cont-s">
                            {{--  --}}
                        </ul>
                    </div>
                </div>

                <div class="col-lg-9 col-12 mb-3">
                    <div class="news-head mb-3">
                        <div class="border-bottom border-1 border-secondary mb-3">
                            <div class="row">
                                <div class="col-10">
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb mb-2 d-flex align-items-center gap-2">
                                            <li class="breadcrumb-item">
                                                <a href="{{ URL::to('/') }}" class="text-decoration-none text-black-50">
                                                    <i class="bi-house-door-fill"></i>
                                                </a>
                                            </li>
                                            {{-- <li class="text-black-50">
                                                {{ isset($page_content->tag) ? $page_content->tag : 'None' }}
                                            </li> --}}
                                            <li class="breadcrumb-item text-blue" aria-current="page">
                                                @lang('language.about_us') >
                                                {{ isset($title) ? $title : '' }}

                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                           {{--  --}}
                        </div>

                        <div class="container-fluid">
                            {{-- @if ($departments)
                            <div class="accordion" id="accordionExample">
                                @foreach ($departments as $department)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{$department->id}}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{$department->slug}}" aria-expanded="false" aria-controls="{{$department->id}}">
                                            {{$department->name}}
                                            </button>
                                        </h2>
                                        <div id="{{$department->slug}}" class="accordion-collapse collapse" aria-labelledby="heading{{$department->id}}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                            {{$department->slug}}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @endif --}}
                            <div class="d-flex flex-column flex-grow-1 ">
                                <ul class="list-unstyled sidemenu-cont-s">
                                    @php
                                        $parent_dept = '';
                                    @endphp
                                    @foreach ($departments as $department)
                                        <div class="nav-item">
                                            @if ($department->parent_id == 0)
                                                @php
                                                    $parent_dept = $department->id;
                                                @endphp
                                                <a class="collapse-button items-cont-s ps-4 d-flex align-items-center p-3 justify-content-start border-bottom border-2 dropdown-toggle {{ $loop->first ? 'active' : '' }}"
                                                    href="#{{ $department->slug }}" role="button" data-bs-toggle="collapse"
                                                    data-tag={{ $department->slug }} data-bs-target="#{{ $department->slug }}"
                                                    aria-controls="navbarMenuName" aria-expanded="false">
                                                    <span class="nav-link-title">{{ $department->name }}</span>
                                                </a>
                                            @endif

                                            @if ($department->id == $parent_dept)
                                                <div id="{{ $department->slug }}"
                                                    class="nav-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                                    data-bs-parent="#navbarMenu" hs-parent-area="#navbarMenu">
                                                    @foreach ($departments as $dept)
                                                        @if ($dept->parent_id == $department->id)
                                                            <a class="collapse-button items-cont-a ps-4 d-flex align-items-center p-3 justify-content-start border-bottom border-2"
                                                                id="{{ $dept->slug }}" href="#{{ $dept->slug }}"
                                                                data-tag="{{ $dept->slug }}" role="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#{{ $dept->slug }}">{{ $dept->name }}</a>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between mb-3 p-2 bg-light-blue d-none">
                            <div class="d-flex h-100 align-items-center">
                                <!-- <i class="fa-solid fa-circle-info fa-xl"></i> -->
                                <i class="bi-info-square-fill text-primary me-2"></i>
                                <span>
                                    के तपाईं आफूले हेरेको जानकारीबाट सन्तुष्ट हुनुहुन्छ?
                                </span>
                            </div>
                            <form class="checkbox align-item-center fsc-8">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                    <label class="form-check-label" for="inlineCheckbox1">धेरै
                                        सन्तुष्ट</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                                    <label class="form-check-label" for="inlineCheckbox2">सन्तुष्ट</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
                                    <label class="form-check-label" for="inlineCheckbox3">सामान्य
                                        गुनासो</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option4">
                                    <label class="form-check-label" for="inlineCheckbox4">धेरै
                                        असन्तुष्ट</label>
                                </div>

                                <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
                                <label class="btn btn-primary btn-sm fs-7" for="btn-check-2">पेश गर्नुहोस्</label>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection