@extends('front.layouts.app')
@section('title',$seoDetails->seo_title)
@section('description',$seoDetails->seo_description)
@section('keywords',$seoDetails->seo_keyword)
@section('tags',$seoDetails->seo_tags)
@push('schema')
    @foreach($memberDetails as $member)
        {{-- Person Schema --}}
        {!! \App\Helpers\SchemaHelper::render(
            \App\Helpers\SchemaHelper::person(
                $member->name,
                $member->designation ?? '',
                route('our-team.getImage', [$member->id, $member->image_url_name]),
                url()->current(),
                strip_tags($member->description ?? '')
            )
        ) !!}
    @endforeach

    {{-- FAQ Schema --}}
    @if($faqs->isNotEmpty())
        {!! \App\Helpers\SchemaHelper::render(
            \App\Helpers\SchemaHelper::faq(
                $faqs->map(fn($faq) => [
                    'question' => $faq->question,
                    'answer'   => strip_tags($faq->answer),
                ])->toArray()
            )
        ) !!}
    @endif
@endpush
@section('content')
    <style>
        .faculty-card {
            position: relative;
            display: flex;
            background: #d9d5cf;
            padding: 25px 25px 25px 120px;
            margin: 30px auto;
            max-width: 100%;
            min-height: 200px;
        }
        .primary-red-color {
            background: #9c0000;
            }
        /* Red vertical strip */
        .left-strip {
            position: absolute;
            left: 0;
            top: 0;
            width: 150px;
            height: 100%;
            background: #9c0000;
        }

        /* Image between red & grey */
        .faculty-image {
            position: absolute;
            left: 55px;
            top: 50%;
            transform: translateY(-50%);
            width: 150px;
            height: 180px;
            /*background: #fff;*/
            padding: 2px;
        }

        .faculty-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Content */
        .faculty-content {
            flex: 1;
            padding-left: 140px;
        }

        .faculty-content h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
        }

        .designation {
            font-size: 23px;
            margin-bottom: 15px;
        }


        .details p {
            font-size: 14px;
            margin: 6px 0;
        }

        .details a {
            color: #1a73e8;
            text-decoration: none;
            word-break: break-word;
        }
        @media (max-width: 768px) {
            .faculty-card {
                padding: 20px;
                padding-top: 200px;
            }

            .left-strip {
                width: 100%;
                height: 80px;
            }

            .faculty-image {
                left: 50%;
                top: 40px;
                transform: translateX(-50%);
                width: 160px;
                height: 180px;
            }

        }
        @media (max-width: 768px) {

            .faculty-content {
                padding-left: 0;
                margin-top: 25px;
                text-align: center;
            }

        }
        .sidebar-widget {
            background-color: #f1f5f8;
            margin-bottom: 6px; !important;
        }
    </style>
    <!-- Start Page Banner Area -->
    @foreach($memberDetails as $member)
        <!-- Start Doctor Details Area -->
        <div class="doctor-details-area">
            <div class="container">
                <div class="doctor-details-content">

                    <div class="faculty-card">
                        <div class="left-strip"></div>

                        <div class="faculty-image">
                            <img src="{{route('our-team.getImage',[$member->id,$member->image_url_name]) }}" alt="Prof. Dr. Aisha Sajid">
                        </div>

                        <div class="faculty-content">
                            <h1>{{$member->name}}</h1>
                            <p class="designation">{{$member->designation}}</p>
                            <p>{!!$member->education!!}</p>

                            <div class="details">
{{--                                @if(!empty($member->education))--}}
{{--                                    <p><strong>Education:</strong>{!!$member->education!!}</p>--}}
{{--                                @endif--}}

                                    @if(!empty($member->oric_id))
                                    <p><strong>ORIC ID:</strong>{{$member->oric_id}}</p>
                                    @endif

                                    @if(!empty($member->email))
                                    <p><strong>Email:</strong><a href="mailto:{{$member->email}}">  {{$member->email}}</a></p>
                                    @endif

                                    @if(!empty($member->scholar_account))
                                        <p><strong>Google Scholar Account:</strong> {{$member->scholar_account}}</p>
                                    @endif

                                    @if(!empty($member->experience))
                                        <p><strong>Experience:</strong> {{$member->experience}}</p>
                                    @endif
                            </div>
                        </div>
                    </div>
                </div>
{{--@php--}}
{{--dd($member->exprience)--}}
{{-- @endphp--}}
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12">
                        @if(!empty($member->description))
                        <h2>Profile Overview</h2>
                        {!! $member->description !!}
                        @endif
                        @if(!empty($member->expertise_areas))
                        <h2>Areas of Expertise</h2>
                        {!! $member->expertise_areas !!}
                        @endif
                        @if(!empty($member->summary))
                            <h2>Professional Summary</h2>
                            {!! $member->summary !!}
                        @endif

                        @if(!empty($member->role))
                            <h2>Role at Madina Teaching Hospital</h2>
                            {!! $member->role !!}
                        @endif

                    </div>
                </div>





                <div class="pt-100">
                    <div class="row">
                        <div class="col-lg-8">
                            @if($faqs->isNotEmpty())
                                <div class="mt-0 mb-5">
                                    <div class="mb-4 p-3 border primary-red-color">
                                        <h2 class="fw-bold text-white  mb-0">Frequently Asked Questions</h2>
                                    </div>

                                    <div class="accordion accordion-flush" id="faqAccordion">
                                        @foreach($faqs as $index => $faq)
                                            <div class="accordion-item border rounded-3 shadow-sm">
                                                <p class="accordion-header" id="heading{{ $index }}">
                                                    <button class="accordion-button {{ $index > 0 ? 'collapsed' : '' }} fw-semibold py-3 px-4 {{ $index === 0 ? 'bg-white text-dark' : '' }}"
                                                            type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#collapse{{ $index }}"
                                                            aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                                            aria-controls="collapse{{ $index }}"
                                                            style="{{ $index === 0 ? 'color: dark !important;' : '' }}">
                                                        <span class="badge {{ $index === 0 ? 'primary-red-color text-white' : 'primary-red-color' }} rounded-circle me-3 d-inline-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 0.85rem;">Q</span>
                                                        {{ $faq->question }}
                                                    </button>
                                                </p>
                                                <div id="collapse{{ $index }}"
                                                     class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                                                     aria-labelledby="heading{{ $index }}"
                                                     data-bs-parent="#faqAccordion">
                                                    <div class="accordion-body p-4 bg-light">
                                                        <div class="d-flex">
                                                            <span class="badge primary-red-color rounded-circle me-3 d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width: 28px; height: 28px; font-size: 0.85rem;">A</span>
                                                            <div class="flex-grow-1">
                                                                {!! $faq->answer !!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="mt-0 mb-5">
                                    <div class="mb-4 p-3 border primary-red-color">
                                        <h2 class="fw-bold text-white mb-0">Frequently Asked Questions</h2>
                                    </div>
                                    <div class="text-center py-5 text-muted">
                                        <p class="fs-5">No frequently asked questions available at the moment.</p>
                                    </div>
                                </div>
                            @endif


                        </div>

                        <div class="col-lg-4">
                            <div class="sidebar-wrap ml-15">
                                @if($member->sitting_time != '')
                                    <div class="sidebar-widget review">
                                        <h3>Sitting Time</h3>
                                        <ul class="text-center">
                                            <li >
                                                {!! $member->sitting_time !!}
                                            </li>
                                        </ul>
                                    </div>
                                @endif

                                @if($member->speciality != '')
                                    <div class="sidebar-widget review">
                                        <h3>Speciality</h3>
                                        <ul class="text-center">
                                            <li>
                                                {!! $member->speciality !!}
                                            </li>
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                {{--  Author Researches--}}
                <div class="container my-5">
                    <div class="research-title mb-4">
                        <h2 class="fw-bold">Research</h2>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive team-member-researches">
                                <table id="indexDataTable"
                                       class="table table-bordered table-striped table-hover table-responsive w-100 pt-1">
                                    <thead class="table primary-red-color" style="color: white">
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Department</th>
                                    <th>Journal</th>
                                    <th>Date</th>
                                    <th>Author</th>
                                    <th>Actions</th>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    <!-- End Doctor Details Area -->

    <!-- Start Knock us Area -->
    <div class="knock-us-area primary-red-color ptb-100">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-12">
                    <div class="knock-us-content">
                        <h2 class="text-white fw-bold">Get in touch with us today to get medical services</h2>
                    </div>
                </div>

                {{--                <div class="col-lg-4">--}}
                {{--                    <div class="knock-us-btn">--}}
                {{--                        <a href="#" class="default-btn active">Book An Appointment</a>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
            </div>
        </div>
    </div>
    <!-- End Knock us Area -->
@endsection
@push('footer-scripts')
    <script type="text/javascript" src="{{ asset('manager/datatable/datatables.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            let detail_slug = "{{ $slug }}";
            let URL = "{{ route('get.our-team.researches',':slug') }}";
            URL = URL.replace(':slug', detail_slug);

            //Datatable
            $('#indexDataTable').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                order: [[0, "desc"]],
                ajax: {
                    "type": "GET",
                    "url": URL,
                },
                columns: [
                    {data: 'id', orderable: false},
                    {data: 'title'},
                    {data: 'department_id'},
                    {data: 'journal'},
                    {data: 'year'},
                    {data: 'author'},
                    {data: null},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        width: '100px',
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        targets: -1,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {

                            let detail = "{{ route('research.detail', ':id') }}";
                            detail = detail.replace(':id', row.id);


                            return '<div class="d-flex">' +

                                '<a class="me-1" href="' + detail + '"><span class="badge text-light" style="background-color: #da0808;"> Read More</span></a>' +

                                '</div>'

                        }
                    }


                ]
            });
        });

        function selectRange() {
            $('.dataTable').DataTable().ajax.reload()
        }
    </script>
@endpush