@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')

    <div x-data="departmentPage()">

        <!-- Department Overview -->
        @if (!$department->employees || $department->employees->count() === 0)
        <section class="department-overview-section">
            <div class="container">
                <div class="row align-items-center">
                    @if ($department->short_des)
                            <p class="lead text-muted">{{ $department->short_des }}</p>
                        @endif
                    <div class="col-lg-6 mb-4 order-lg-2">
                        <img src="{{ $department->image ? Storage::url($department->image) : 'https://ui-avatars.com/api/?name=' . urlencode($department->name) . '&size=600&background=1a3a5c&color=fff' }}"
                            alt="{{ $department->name }}" class="img-fluid rounded"
                            style="cursor:pointer; width:100%; height:350px; object-fit:cover;"
                            @click="openLightbox('{{ $department->image ? Storage::url($department->image) : '' }}', '{{ addslashes($department->name) }}')">
                    </div>
                    <div class="col-lg-6 mb-4 order-lg-1">

                        @if ($department->description)
                            <div class="dept-description mt-3 ">
                                {!! $department->description !!}
                            </div>
                        @endif

                        {{-- Contact info --}}
                        <div class="d-flex flex-wrap gap-3 mt-4">
                            @if ($department->email)
                                <a href="mailto:{{ $department->email }}" class="dept-contact-badge">
                                    <i class="bi bi-envelope me-1"></i> {{ $department->email }}
                                </a>
                            @endif
                            @if ($department->phone)
                                <a href="tel:{{ $department->phone }}" class="dept-contact-badge">
                                    <i class="bi bi-telephone me-1"></i> {{ $department->phone }}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @endif

        <!-- Services -->
        @if ($department->services && count($department->services) > 0)
            <section class="services-section py-5 bg-light">
                <div class="container">
                    <h2 class="section-title">Our Services</h2>
                    <div class="row">
                        @foreach ($department->services as $index => $service)
                            <div class="col-lg-4 col-md-6 mb-4" x-intersect.once="revealCard({{ $index }})"
                                :style="revealed[{{ $index }}] ?
                                    'opacity:1; transform:translateY(0); transition: all 0.5s ease ' + (
                                        {{ $index }} * 0.1) + 's' :
                                    'opacity:0; transform:translateY(30px)'">
                                <div class="service-card h-100">
                                    @if (!empty($service['icon']))
                                        <i class="{{ $service['icon'] }} service-icon"></i>
                                    @else
                                        <i class="bi bi-gear service-icon"></i>
                                    @endif
                                    <h4>{{ $service['title'] ?? '' }}</h4>
                                    @if (!empty($service['description']))
                                        <p>{{ $service['description'] }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        {{-- Lightbox --}}
        <!-- Department Members / Experts -->
        @if ($department->employees && $department->employees->count() > 0)
            <section class="employees-section py-5">
                <div class="container">
                    <div class="row g-4 mt-2 justify-content-center">
                        @foreach ($department->employees as $employee)
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div class="employee-card text-center p-4 bg-white rounded-4 shadow-sm h-100 hover-up border d-flex flex-column">
                                    <div class="mb-3">
                                        <img src="{{ $employee->image ? Storage::url($employee->image) : 'https://ui-avatars.com/api/?name=' . urlencode($employee->name) . '&size=200' }}"
                                            alt="{{ $employee->name }}"
                                            class="img-fluid rounded-circle shadow-sm"
                                            style="width: 120px; height: 120px; object-fit: cover;">
                                    </div>
                                    <h5 class="fw-bold text-dark mb-1">{{ $employee->name }}</h5>
                                    <p class="text-muted small mb-3">{{ $employee->designation }}</p>

                                    <!-- Social Links -->
                                    <div class="social-links mb-3 d-flex justify-content-center gap-2">
                                        @if($employee->facebook)
                                            <a href="{{ $employee->facebook }}" target="_blank" class="text-secondary hover-primary fs-5"><i class="bi bi-facebook"></i></a>
                                        @endif
                                        @if($employee->twitter)
                                            <a href="{{ $employee->twitter }}" target="_blank" class="text-secondary hover-primary fs-5"><i class="bi bi-twitter"></i></a>
                                        @endif
                                        @if($employee->linkedin)
                                            <a href="{{ $employee->linkedin }}" target="_blank" class="text-secondary hover-primary fs-5"><i class="bi bi-linkedin"></i></a>
                                        @endif
                                        @if($employee->instagram)
                                            <a href="{{ $employee->instagram }}" target="_blank" class="text-secondary hover-primary fs-5"><i class="bi bi-instagram"></i></a>
                                        @endif
                                    </div>

                                    @if($employee->bio_text || $employee->bio_pdf)
                                        <div class="mt-auto pt-3">
                                            <button class="btn btn-sm btn-outline-info rounded-pill px-3"
                                                data-bs-toggle="modal" data-bs-target="#modal-employee-bio-{{ $employee->id }}">
                                                Bio <i class="bi bi-person ms-1"></i>
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Employee Bio Modal -->
                            @if($employee->bio_text || $employee->bio_pdf)
                            <div class="modal fade" id="modal-employee-bio-{{ $employee->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-xl">
                                    <div class="modal-content border-0 overflow-hidden rounded-4 shadow-2xl" style="background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);">
                                        <div class="modal-header border-0 pb-0">
                                            <h5 class="modal-title fw-bold text-dark ps-3 pt-2">{{ $employee->name }}</h5>
                                            <button type="button" class="btn-close shadow-none p-3" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body p-4 p-md-5 pt-0 mt-3 text-start">
                                            @if($employee->bio_text)
                                                <div class="full-message-text text-muted lh-lg text-justify" style="font-size: 1.05rem; color: #475569 !important; max-height: 400px; overflow-y: auto; padding-right: 10px;">
                                                    {!! $employee->bio_text !!}
                                                </div>
                                            @elseif($employee->bio_pdf)
                                                <div class="ratio ratio-16x9" style="min-height: 600px;">
                                                    <iframe src="{{ Storage::url($employee->bio_pdf) }}" allowfullscreen style="width: 100%; height: 100%; border: none;"></iframe>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="modal-footer border-0 bg-light p-3">
                                            <button type="button" class="btn btn-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <template x-teleport="body">
            <div x-show="lightbox.open" x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0" @keydown.escape.window="lightbox.open = false"
                @click.self="lightbox.open = false"
                style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:99999;display:flex;align-items:center;justify-content:center;">
                <div style="position:relative;max-width:90vw;max-height:90vh;text-align:center;">
                    <button @click="lightbox.open = false"
                        style="position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;">
                        &times;
                    </button>
                    <img :src="lightbox.src" :alt="lightbox.alt"
                        style="max-width:90vw;max-height:80vh;border-radius:8px;object-fit:contain;">
                    <p x-text="lightbox.alt" style="color:#fff;margin-top:12px;"></p>
                </div>
            </div>
        </template>

    </div>

@endsection

@push('styles')
    <style>
        .dept-icon-wrap i {
            font-size: 3rem;
            color: var(--primary, #1a3a5c);
            background: rgba(26, 58, 92, 0.08);
            width: 70px;
            height: 70px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .dept-contact-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 50px;
            color: #334155;
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .dept-contact-badge:hover {
            background: var(--primary, #1a3a5c);
            color: #fff;
            border-color: var(--primary, #1a3a5c);
        }

        /* .service-card {
            padding: 2rem;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
            transition: transform 0.3s, box-shadow 0.3s;
            border-top: 3px solid transparent;
        }

        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
            border-top-color: var(--primary, #1a3a5c);
        } */

        .service-icon {
            font-size: 2.2rem;
            color: var(--primary, #1a3a5c);
            margin-bottom: 1rem;
            display: block;
        }

        .service-card h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #1e293b;
        }

        .service-card p {
            color: #64748b;
            font-size: 0.95rem;
            margin-bottom: 0;
            line-height: 1.7;
        }
    </style>
@endpush

@push('scripts')
    <script>
        function departmentPage() {
            return {
                lightbox: {
                    open: false,
                    src: '',
                    alt: ''
                },
                revealed: @json(array_fill(0, count($department->services ?? []), false)),

                revealCard(index) {
                    this.revealed[index] = true;
                },

                openLightbox(src, alt) {
                    if (!src) return;
                    this.lightbox = {
                        open: true,
                        src,
                        alt
                    };
                },
            };
        }
    </script>
@endpush