@extends('front.layouts.app')
@section('title',$seoTags->seo_title)
@section('description',$seoTags->seo_description)
@section('keywords',$seoTags->seo_keyword)
@section('tags',$seoTags->seo_tags)
@push('schema')
    {!! \App\Helpers\SchemaHelper::render(
        \App\Helpers\SchemaHelper::department(
            $dept_title->title,
            strip_tags($dept_title->description ?? ''),
            url()->current(),
            $dept_title->cover_image_url
                ? route('departments.show-images', [$dept_title->id,'cover_image_url'])
                : '',
            $dept_title->faq
        )
    ) !!}
@endpush
@section('content')
<style>
    #dept{
        font-size: 25px;
        color: #ffffff;
        background-color: var(--primary-red-color);
        padding: 20px 30px;
        margin-bottom: 0;
    }
    /* Active accordion styling (red when open) */
    .accordion-button:not(.collapsed) {
        background-color: #b00000 !important; /* Red */
        color: #fff !important; /* White text */
        box-shadow: none !important;
    }

    /* Remove blue focus glow */
    .accordion-button:focus {
        box-shadow: none !important;
        border-color: #b00000 !important;
    }

    /* Hover color (red text on hover) */
    .accordion-button:hover {
        color: #b00000;
    }

    /* Optional: body text justification & spacing */
    .accordion-body {
        text-align: justify;
        line-height: 1.6;
    }
</style>
    {{-- Start Page Banner Area --}}
    @foreach($departmentDetails as $dept)
        <div class="department-banner-area bg-5 pt-100">
            <img class="dept-img img-fluid"
                 src="{{ route('departments.show-images', [$dept->id,'department_banner_url']) }}"
                 alt="{{ $dept->department_banner_url_name  }}">

            <div class="container">
                <div class="department-banner-content">
                    <p class="display-1 fw-bold">Department Details</p>
                    <ul>
                        <li>
                            <a href="{{ route('home') }}">
                                <i class="ri-home-8-line"></i>
                                Home
                            </a>
                        </li>
                        <li>
                            <span>Departments</span>
                        </li>
                        <li>
                            <span>{{$dept->title}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        {{--   End Page Banner Area --}}

        {{-- Start Department Area--}}
        <div class="department-orthopedics-area pt-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-12">
                        <div class="department-content mr-15">
                            @if(!empty($dept->cover_image_url))
                                <div class="department-cover-images">
                                    <img class="dept-img img-fluid"
                                         src="{{ route('departments.show-images', [$dept->id,'cover_image_url']) }}"
                                         alt="{{ $dept->cover_image_name  }}">
                                </div>
                            @endif
                            <div class="gap-mb-30 my-2"></div>
                           <h1>MTH Department of {{ $dept_title->title }}</h1>
                            @if($dept->description != '' || null)
                                <h2>Description</h2>
                                <p>{!! $dept->description !!}</p>
                            @endif
                            <!-- End Our Mison Area -->
                            <div class="gap-mb-30"></div>
                                @if(!empty($faqs))
                                    {{-- Faq--}}
                                    <div class="col-lg-12 faqs mb-3">
                                        <p class="fs-3 fw-bold mt-3 bg-color-0057b8 p-2 text-white">FAQs</p>

                                        <div class="accordion accordion-flush" id="accordionCourseSections">
                                            @if(!empty($dept->faq))
                                                @foreach(json_decode($dept->faq, true) as $index => $faq)
                                                    <div class="accordion-item">
                                                        <h2 class="accordion-header" id="faq-heading{{ $index }}">
                                                            <button class="accordion-button collapsed" type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#faq-collapse{{ $index }}"
                                                                    aria-expanded="false"
                                                                    aria-controls="faq-collapse{{ $index }}">
                                                                {{ $index + 1 }}. {{ $faq['question'] }}
                                                            </button>
                                                        </h2>
                                                        <div id="faq-collapse{{ $index }}"
                                                             class="accordion-collapse collapse"
                                                             aria-labelledby="faq-heading{{ $index }}"
                                                             data-bs-parent="#accordionCourseSections">
                                                            <div class="accordion-body" style="text-align: justify;">
                                                                {{ $faq['answer'] }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <p class="p-3 small">No FAQs available for this department.</p>
                                            @endif
                                        </div>
                                    </div>
                                    {{-- End Faq--}}
                                @endif

                        </div>
                        {{--                        <h2>Our Locations</h2>--}}

                        {{--                        <iframe class="mb-5" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13607.773475364696!2d73.0768741!3d31.4982404!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x392241fab14bf1fd%3A0x497d9b02ce190384!2sMadinah%20Teaching%20Hospital!5e0!3m2!1sen!2s!4v1704696668529!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe>--}}

                    </div>

                    @endforeach
                    <div class="col-lg-4">
                        <div class="sidebar-wrap ml-15 mb-4">
                            <div class="sidebar-widget departments">
                                <p id="dept">Select Departments</p>
                                <ul>
                                    @foreach($departments as $d)
                                        <li>
                                            <a href="{{route('departments-details',$d->slug)}}">
                                                {{$d->title}}
                                                <i class="ri-arrow-right-s-line"></i>
                                            </a>
                                        </li>

                                    @endforeach
                                </ul>
                                @if(count($departments) >= 10)
                                    <div class="text-center pb-4">
                                        <a href="{{route('departments')}}">See More</a>

                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- End Department Orthopedics Area -->

        {{--  Department Researches--}}
        <div class="container my-5">
            <div class="research-title mb-4">
                <p class="h1">Research</p>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive dept-researches">
                        <table id="indexDataTable"
                               class="table table-bordered table-striped table-hover table-responsive w-100 pt-1">
                            <thead class="table" style="background-color: #da0808;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>

        <!-- Start Knock us Area -->
        <div class="knock-us-area bg-color-0057b8 ptb-100">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12">
                        <div class="knock-us-content text-center">
                            <p class="h3 text-white">Get in touch with us today to get medical services</p>
                        </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.departments.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