@extends('layouts.app')

@section('content')
  @php
        $banner = !empty($cmsPage->szBannerImage)
            ? asset('uploads/abouts/' . $cmsPage->szBannerImage)
            : asset('uploads/abouts/brief.jpg');
    @endphp

       <section class="page-banner position-relative d-flex align-items-end"
        style="background-image:url('{{ $banner }}');
           background-position:center;
           background-size:cover;
           background-repeat:no-repeat;
           min-height:450px;">

        <div class="position-absolute top-0 start-0 w-100 h-100 banner-overlay"></div>

        <div class="container position-relative text-white pb-5">

            <span class="page-tag">
                
            </span>

            <h1 class="display-3 fw-bold mb-3">
               {{ __('messages.director_desk') }}
            </h1>

            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                           {{ __('messages.home') }}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#" class="text-white text-decoration-none">
                              {{ __('messages.director_desk') }}
                        </a>
                    </li>
                </ol>
            </nav>

        </div>

    </section>
    <section class="director-profile-page py-5">
        <div class="container">

            <div class="row g-5">

                <!-- Left Sidebar -->
                <div class="col-lg-4">

                    <div class="director-sidebar sticky-top">

                        <div class="director-card">

                            <div class="director-image-wrapper">
                                <img src="{{ asset('uploads/director-desk/' . $directorDesk->szImageName) }}"
                                    class="director-image" alt="{{ lang($directorDesk->szImageTitle,$directorDesk->szImageTitleHindi) }}">
                            </div>

                            <div class="director-info">

                                <h2 class="director-name">
                                    {{ strtoupper(lang($directorDesk->szImageTitle,$directorDesk->szImageTitleHindi)) }}
                                </h2>

                                <div class="director-designation">
                                    {{ lang($directorDesk->szDesignation,$directorDesk->szDesignationHindi) }}
                                </div>

                                <div class="director-department">
                                    {{ lang($directorDesk->szDepartment,$directorDesk->szDepartmentHindi) }}
                                </div>

                                @if (!empty($directorDesk->szEmail))
                                    <div class="director-email">
                                        <i class="fas fa-envelope me-2"></i>
                                        {{ $directorDesk->szEmail }}
                                    </div>
                                @endif
                            <div class="director-social mt-4">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-x-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-youtube"></i></a>
                        </div>
                            </div>

                        </div>



                    </div>

                </div>

                <!-- Right Content -->
                <div class="col-lg-8">

                    <div class="content-card">

                        <span class="content-badge">
                           {{ __('messages.director_desk') }}
                        </span>

                        <h1 class="content-title">
                            {{ lang($directorDesk->szDepartment,$directorDesk->szDepartmentHindi) }}
                        </h1>

                        <!-- Short Content -->
                        <div id="shortContent">
                            {!!lang($directorDesk->szContent,$directorDesk->szContentHindi) !!}
                        </div>

                        <!-- Full Content -->
                        <div id="fullContent" style="display:none;">
                           {!! lang($directorDesk->szContent, $directorDesk->szContentHindi) !!}
                        </div>

                       

                    </div>

                </div>

            </div>

        </div>
    </section>
@endsection