@section('title', $department->name)
@extends('front.new.layouts.app')
@section('content')
    <div class="school-page-block">
        <main role="main">
            <div class="top-banner top-banner-overlay">
                <img class="department-detail-banner" src="{{URL('/')}}/front/images/new-giu/department/banner/{{$department->banner}}"
                     alt="">
                <div class="perfect-left">
                    <h1>{{$department->name}}</h1>
                </div>
            </div>
        </main>
    </div>
    <div class="container main-fac-new-wrapper mt-5">
        <div class="row fac-profile mt-3">
            <div class="col-lg-9 col-md-12 mt-2 order-lg-2 px-0">

                @if(isset($department->hod_message))
                    <div class="col-lg-12 fac-message p-2 ms-lg-3">
                        <div class="text-center message-wrap p-4">
                            <h1 class="hod-msg mt-2">MESSAGE OF HOD</h1>
                            <img src="{{asset('front/new/img/commas-new.png')}}" height="30" alt=""
                                 class="comma-icon img-1">
                            <img src="{{asset('front/new/img/commas-new.png')}}" height="30" alt=""
                                 class="comma-icon img-2">
                            <div class="message-wrap">
                                {{--    School of Nursing HOD image hide on the order of Sir Qasim GIU--}}
                                @if($department->slug != 'school-of-nursing')
                                        @if(isset($department->hod_image))
                                            <div class="image-handling">
                                                <img
                                                    src="{{URL('/')}}/front/images/new-giu/department/hod/{{$department->hod_image}}"
                                                    class="float-start me-3">
                                            </div>
                                        @endif
                                @endif
                                <p>{!! $department->hod_message !!}</p>
                                {{--    School of Nursing HOD name and designaion hide on the order of Sir Qasim GIU--}}
                                @if($department->slug != 'school-of-nursing')
                                        <div class="text-end">
                                            <h5 class="mb-0">{{$department->hod_name}}</h5>
                                            <p class="text-end mt-0">{{$department->hod_designation}}</p>
                                        </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row  pb-5 faculty-detail-mv">
                    <div class="col-lg-6 qec-vision-mision ">
                        <div class="qec-vision-block text-center bg-yellow  py-2 my-2 px-sm-4 ms-lg-3">
                            <h3 class="pt-3"><span class="text-white">VISION</span></h3>
                        </div>
                        <div class="vision-mision-content card-body px-md-4 mt-3 ms-lg-3">
                            <p>{!! $department->vision !!}</p>
                        </div>
                    </div>
                    <div class="col-lg-6 qec-vision-mision">
                        <div class="qec-vision-block text-center bg-yellow text-white  py-2 my-2 px-sm-4">
                            <h3 class="pt-3"><span class="text-white">MISSION</span></h3>
                        </div>
                        <div class="vision-mision-content card-body px-md-4 mt-3">
                            <p>{!! $department->mission !!}</p>
                        </div>
                    </div>
                </div>

                <div class="content-new-wrapper table-responsive">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 order-lg-2 ms-lg-1">
                                @if(isset($department->objective))
                                    <div class="row fac-objective-content mt-lg-5">
                                        <div class="col-lg-12 g-0">

                                            <div class="fac-obj-border mt-lg-4 mt-5">
                                                <h1>OBJECTIVE</h1>
                                            </div>
                                            {!!$department->objective!!}
                                        </div>
                                    </div>
                                @endif
                                @if(isset($department->scope))
                                    <div class="row fac-scope-content">
                                        <div class="col-lg-12 g-0">
                                            <div class="fac-sco-border">
                                                <h1>ABOUT US</h1>
                                            </div>
                                            {!! $department->scope !!}
                                        </div>
                                    </div>
                                @endif
                                @if(isset($department->career_opportunities))
                                    <div class="row fac-career-content mt-1 mb-3">
                                        <div class="col-lg-12 g-0">
                                            <div class="fac-car-border">
                                                <h1>CAREER OPPORTUNITIES</h1>
                                            </div>
                                            {!! $department->career_opportunities !!}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-12">
                <div class="row">
                    <div class="quick-link-pages pt-4 pb-2 px-3">
                        <div class="heading">
                            <button class="btn py-3 w-100">QUICK LINKS</button>
                        </div>
                        <div class="pages mt-5">
                            <div class="d-flex my-3">
                                <div class="tab-icon">
                                    <i class="icon-next-link pe-2 icomooms"></i>
                                </div>
                                <div class="tab-texts">
                                    <a href="{{ route('history') }}"><p>Introducing GIU</p></a>
                                </div>
                            </div>
                            <div class="d-flex my-3">
                                <div class="tab-icon">
                                    <i class="icon-next-link pe-2 icomooms"></i>
                                </div>
                                <div class="tab-texts">
                                    <a href="{{route('history-lahore')}}"><p>History of Lahore</p></a>
                                </div>
                            </div>
                            <div class="d-flex my-3">
                                <div class="tab-icon">
                                    <i class="icon-next-link pe-2 icomooms"></i>
                                </div>
                                <div class="tab-texts">
                                    <a href="{{route('history') }}#vission"><p>Vision & Mission</p></a>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="fac-admission-open my-5">
                        <div class="text-center pt-4">
                            <p class="p-admission mb-0 text-white">ADMISSIONS </p>
                            <p class="p-open text-white mt-2">OPEN 2026</p>
                        </div>
                        <div class="row my-5 ">
                            <div class="col-lg-12 fac-btn-apply">
                                <a href="https://admission.giu.edu.pk/login" target="_blank">
                                    <button class="btn btn-danger fac-btn-1 ">
                                        APPLY NOW <i class="fa fa-angle-right ms-1" aria-hidden="true"
                                                     style="font-size:1.75rem"></i>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>

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