@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  fnt-fam-ser">
                            @lang('language.organizational_structure') </h1>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d-main">
        <div class="container-custom-a mb-3 pb-3">
            <div class="row">
                <div class="col-lg-3 col-12 mb-3">
                    <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="col-lg-9 col-12 mb-3">
                    <div class="news-head mb-3">
                        <div class="container-fluid">
                            @foreach ($departments as $department)
                                <div class="my-cust-collapse collapse {{$department->slug}} {{$loop->first ? 'show': ''}}" id="{{$department->slug}}">

                                    <div class="border-bottom border-1 border-secondary mb-3">
                                        <div class="row">
                                            <div class="col-10">
                                                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                                                    <ol class="breadcrumb mb-2">
            
                                                        <li class="breadcrumb-item">
                                                            <a href="{{ URL::to('/') }}" class="text-decoration-none text-blue"> <i
                                                                    class="fa-solid fa-house"></i></a>
                                                            </a>
                                                        </li>
                                                        <li class="breadcrumb-item active" aria-current="page">
                                                            <span>
                                                                <h3 class="heading-4 fs-6 fw-bold fnt-fam-ser text-blue text-nowrap">
                                                                    {{ isset($department->name) ? $department->name : '' }}</h3>
                                                            </span>
                                                        </li>
                                                    </ol>
                                                </nav>
                                            </div>
                                            <div class="col-2">
                                                <span class="text-black-50 px-1"><i class="fa-solid fa-print fa-lg"></i></span>
                                                <span class="text-black-50 px-1"><i class="fa-solid fa-share-nodes fa-lg"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="container-fluid">
                                        @if ($department)
                                            <div class="dtail-image pt-3 mb-3">
                                                <img src="{{ asset($department->image) }}" alt="page_content" class="mb-2 w-100">
                                            </div>
                                            <div class="dtail-content  text-p fs-7 lh-lg text-justify">
                                                {!! isset($department->description) ? html_entity_decode($department->description, ENT_QUOTES, 'UTF-8') : '' !!}
                                            </div>
                                        @endif
                                    </div>

                                    <section id="index-box" class="container-fluid">
                                        <div class="row">
                                            <div class=" index-box d-flex align-items-center justify-content-evenly mb-3 p-2 ">
                                                <div class="">
                                                    <!-- <i class="fa-solid fa-circle-info fa-xl"></i> -->
                                                    <img src="{{ asset('images/icon/news-notice/Info Squared.svg') }}" alt=""
                                                        width="45px">
                                                </div>
            
                                                <span class="fs-7">
                                                    के तपाईं आफूले हेरेको जानकारीबाट सन्तुष्ट हुनुहुन्छ?
                                                </span>
            
                                                <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>
                                    </section>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection