@extends('layout.app')
@section('css')
    <style>
        /*
        *
        * ==========================================
        * CUSTOM UTIL CLASSES
        * ==========================================
        *
        */

        /* Rounded tabs */

        @media (min-width: 576px) {
        .rounded-nav {
        border-radius: 50rem !important;
        }
        }

        @media (min-width: 576px) {
        .rounded-nav .nav-link {
        border-radius: 50rem !important;
        }
        }

        /* With arrow tabs */

        .nav-link.active {
        position: relative;
        }

        .nav-link.active::after {
        content: '';
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #2b90d9;
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        }

        /* lined tabs */

        .nav-link {
        border: none;
        border-bottom: 3px solid transparent;
        }

        .nav-link:hover {
        border: none;
        border-bottom: 3px solid transparent;
        }

        .nav-link.active {
        background: none;
        color: #555;
        border-color: #2b90d9;
        }

        /*
        *
        * ==========================================
        * FOR DEMO PURPOSE
        * ==========================================
        *
        */

        .nav-pills .nav-link {
        color: #555;
        }

        .text-uppercase {
        letter-spacing: 0.1em !important;
        }
    </style>
@endsection
@section('content')
    <div class="slider-area2 section-bg2" data-background="{{$dept->banner_image}}">
        <div class="slider-height2 d-flex align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hero-cap hero-cap2">
                            <h2>{{$dept->name}}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->

    <section class="home-blog-area section-padding40">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-xl-8 col-lg-8 col-md-8">
                    {{-- @if($content) --}}
                       <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        @php
                            $categories = App\Models\DepartmentCategory::where('status',1)->get();
                        @endphp
                       @foreach($categories as $key => $category)
                    <li class="nav-item" role="presentation" style="padding-right: 4rem;">
                        <button class="nav-link text-uppercase @if($key === 0) active @endif" id="pills-{{ $category->id }}-tab" data-bs-toggle="pill"
                            data-bs-target="#pills-{{ $category->id }}" type="button" role="tab" aria-controls="pills-{{ $category->id }}"
                            aria-selected="@if($key === 0) true @else false @endif" style="font-weight: 600;">
                            {{ $category->name }}
                        </button>
                    </li>
                    @endforeach
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        @foreach($categories as $key => $category)
                        <div class="tab-pane fade @if($key === 0) show active @endif" id="pills-{{ $category->id }}" role="tabpanel"
                            aria-labelledby="pills-{{ $category->id }}-tab">
                            @php
                               $data = App\Models\Content::where('department_id', $dept->id)->where('dept_category_id',$category->id)->first();
                            @endphp
                            @if ($data)
                              <div class="container">
                                {!!$data->content!!}
                              </div>
                            @else
                                <p style="text-align: center; color:red;padding:4rem;">No Contents Uploaded</p>
                            @endif

                        </div>
                        @endforeach
                    </div>
                    {{-- @else
                        <h3 style="display: flex; justify-content:center; text-transform:uppercase;"><strong>No Contents Uploaded</strong></h3> --}}
                    {{-- @endif --}}
                </div>
                <div class="col-xl-4 col-lg-8 col-md-4">
                    <div class="sidebar pl">
                        <ul>
                            <h5 class="department-heading"><span style="color: #f4582d;">Other</span> Links</h5>
                            @php
                                $dept = App\Models\Department::where('category',$dept->category)->where('id','!=',$dept->id)->where('status', 1)->get();
                              
                            @endphp
                            @forelse ($dept as $category )
                                <li style="background: url('{{ asset('icon/right-way.png') }}') no-repeat 2px 2px transparent;"><a href="{{route('department-details',$category->slug)}}">{{$category->name}}</a></li>
                                <hr>
                            @empty
                                <li><a href="javascript:void(0)">No Records Updated</a></li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection