@extends('layouts.app')

@section('content')
    <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" style="top:100px;">

                        <div class="director-card">

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

                            <div class="director-info">

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

                                <div class="director-designation">
                                    {{ $directorDesk->szDesignation }}
                                </div>

                                <div class="director-department">
                                    {{ $directorDesk->szDepartment }}
                                </div>

                                @if (!empty($directorDesk->szEmail))
                                    <div class="director-email">
                                        <i class="fas fa-envelope me-2"></i>
                                        {{ $directorDesk->szEmail }}
                                    </div>
                                @endif

                            </div>

                        </div>

                        {{-- <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>

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

                    <div class="content-card">

                        <span class="content-badge">
                            Director's Desk
                        </span>

                        <h1 class="content-title">
                            {{ $directorDesk->szDepartment }}
                        </h1>

                        <!-- Short Content -->
                        <div id="shortContent">
                            {!! \Illuminate\Support\Str::limit(strip_tags($directorDesk->szContent), 1200) !!}
                        </div>

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

                        <button id="toggleContent" class="btn-read-more">
                            Read More
                        </button>

                    </div>

                </div>

            </div>

        </div>
    </section>
@endsection