@extends('frontend.layouts.app')

@section('content')
    <!--Page Title-->
    <section class="page-title" style="background-image:url({{ asset('img/PhotoRoom1.webp') }});">

        <div class="auto-container">

            <h1 class="text-dark">Speakers</h1>
            <ul class="bread-crumb clearfix">

                <li><a href="{{ route('home') }}" class="text-dark">Home</a></li>

                <li class="text-dark">Speakers</li>
            </ul>
        </div>
    </section>
    <!--End Page Title-->



    <!-- Speker Detail -->

    <section class="speaker-detail">
        <div class="auto-container">
            <div class="row">
                <div class="image-column col-lg-4 col-md-12 col-sm-12">
                    <div class="image-box">
                        <figure class="image">
                            <img src="{{ $counsellor->display_image_url }}"
                                alt="{{ $counsellor->name ?? trim(($counsellor->first_name ?? '') . ' ' . ($counsellor->last_name ?? '')) ?: 'Counsellor' }}"
                                class="img-fluid">
                        </figure>
                    </div>
                </div>

                <div class="info-column col-lg-8 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="text-box">
                            <h3>{{ $counsellor->name ?? 'Not Found' }}</h3>
                            <p>{{ $counsellor->display_qualification ?? 'No qualification provided.' }}</p>
                            <h4>Skills</h4>
                            <ul>
                                @forelse ($counsellor->display_skills as $skill)
                                    <li>{{ $skill }}</li>
                                @empty
                                    <li>No skills provided.</li>
                                @endforelse
                            </ul>
                            <h4>Languages</h4>
                            <ul>
                                @forelse ($counsellor->display_languages as $language)
                                    <li>{{ $language }}</li>
                                @empty
                                    <li>No languages provided.</li>
                                @endforelse
                            </ul>
                            <h4>Achievements</h4>
                            <ul>
                                @forelse ($counsellor->display_achievements as $achievement)
                                    <li>{{ $achievement }}</li>
                                @empty
                                    <li>No achievements provided.</li>
                                @endforelse
                            </ul>

                            <button class="btn btn-secondary" onclick="handleAppointment()">Book an Appointment</button>

                            <script>
                                function handleAppointment() {
                                    const isAuthenticated = @json(auth()->check());
                                    const counsellorId = @json($counsellor->id);

                                    if (isAuthenticated) {
                                        // Redirect to the appointment booking page if authenticated
                                        window.location.href = `/user/bookAppointment/${counsellorId}`;
                                    } else {
                                        // Redirect to login with intended URL
                                        const intendedUrl = `/user/bookAppointment/${counsellorId}`;
                                        window.location.href = `{{ route('login') }}?redirect=${encodeURIComponent(intendedUrl)}`;
                                    }
                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--End Speker Detail -->



    <!-- Fluid Section One -->

    <section class="fluid-section-one">

        <div class="outer-box clearfix">



            <!-- Content Column -->

            <div class="content-column">

                <div class="shape-layers">

                    <div class="shape-2"></div>

                    <div class="shape-1"></div>

                </div>

                <div class="inner-column">

                    <h3>Modern Marketing <br>Summit Sydney 2018</h3>

                    <div class="text">Dolor sit amet consectetur elit sed do eiusmod tempor incd idunt labore et
                        dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut
                        aliquip exea commodo consequat</div>

                    <div class="btn-box"><a href="buy-ticket.html" class="theme-btn btn-style-four"><span
                                class="btn-title">Buy Ticket</span></a></div>

                </div>

            </div>



            <!-- Image Column -->

            <div class="image-column" style="background-image: url({{ asset('images/resource/image-1.jpg') }});">

                <div class="image-box">

                    <figure class="image"><img src="{{ asset('images/resource/image-1.jpg') }}" alt="">
                    </figure>

                </div>

            </div>

        </div>

    </section>

    <!--End Fluid Section One -->



    <!-- Pricing Section -->

    <section class="pricing-section-three">

        <div class="anim-icons">

            <span class="icon icon-line-1 wow zoomIn"></span>

            <span class="icon icon-circle-1 wow zoomIn"></span>

            <span class="icon icon-dots wow zoomIn"></span>

        </div>



        <div class="auto-container">

            <div class="sec-title text-center">

                <span class="title">Get Ticket</span>

                <h2>Choose a Ticket</h2>

            </div>



            <div class="outer-box">

                <div class="row">

                    <!-- Pricing Block -->

                    <div class="pricing-block-three col-lg-4 col-md-6 col-sm-12 wow fadeInUp">

                        <div class="inner-box">

                            <div class="title">Parson</div>

                            <h4 class="price">$19</h4>

                            <ul class="features">

                                <li>01 Conference Tickets</li>

                                <li>Free Lunch And Coffee</li>

                                <li>Certificate</li>

                            </ul>

                            <div class="btn-box">

                                <a href="buy-ticket.html" class="theme-btn btn-style-one"><span class="btn-title">BUY
                                        Ticket</span></a>

                            </div>

                        </div>

                    </div>



                    <!-- Pricing Block -->

                    <div class="pricing-block-three col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="400ms">

                        <div class="inner-box">

                            <div class="title">Family</div>

                            <h4 class="price">$59</h4>

                            <ul class="features">

                                <li>05 Conference Tickets</li>

                                <li>Free Lunch And Coffee</li>

                                <li>Certificate</li>

                            </ul>

                            <div class="btn-box">

                                <a href="buy-ticket.html" class="theme-btn btn-style-one"><span class="btn-title">BUY
                                        Ticket</span></a>

                            </div>

                        </div>

                    </div>



                    <!-- Pricing Block -->

                    <div class="pricing-block-three col-lg-4 col-md-6 col-sm-12 wow fadeInUp" data-wow-delay="1200ms">

                        <div class="inner-box">

                            <div class="title">GROUP</div>

                            <h4 class="price">$99</h4>

                            <ul class="features">

                                <li>10 Conference Tickets</li>

                                <li>Free Lunch And Coffee</li>

                                <li>Certificate</li>

                            </ul>

                            <div class="btn-box">

                                <a href="buy-ticket.html" class="theme-btn btn-style-one"><span class="btn-title">BUY
                                        Ticket</span></a>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <!--End Pricing Section -->



    <!-- Main Footer -->

    <footer class="main-footer">

        <!--Widgets Section-->

        <div class="widgets-section">

            <div class="auto-container">

                <div class="row">

                    <!--Big Column-->

                    <div class="big-column col-xl-6 col-lg-12 col-md-12 col-sm-12">

                        <div class="row">

                            <!--Footer Column-->

                            <div class="footer-column col-xl-7 col-lg-6 col-md-6 col-sm-12">

                                <div class="footer-widget about-widget">

                                    <div class="logo">

                                        <a href="index.html"><img src="{{ asset('images/logo.png') }}"
                                                alt="" /></a>

                                    </div>

                                    <div class="text">

                                        <p>We have very good strength in innovative technology and tools with over
                                            35 years of experience. We makes long-term investments goal in global
                                            companies in different sectors, mainly in Europe and other countries.
                                        </p>

                                    </div>

                                    <ul class="social-icon-one social-icon-colored">

                                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>

                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>

                                        <li><a href="#"><i class="fab fa-pinterest"></i></a></li>

                                        <li><a href="#"><i class="fab fa-youtube"></i></a></li>

                                        <li><a href="#"><i class="fab fa-dribbble"></i></a></li>

                                    </ul>

                                </div>

                            </div>



                            <!--Footer Column-->

                            <div class="footer-column col-xl-5 col-lg-6 col-md-6 col-sm-12">

                                <div class="footer-widget useful-links">

                                    <h2 class="widget-title">Useful Links</h2>

                                    <ul class="user-links">

                                        <li><a href="index-2.html">Home</a></li>

                                        <li><a href="about-us.html">About Us</a></li>

                                        <li><a href="services.html">Services</a></li>

                                        <li><a href="projects.html">Projects</a></li>

                                        <li><a href="blog.html">Blogs</a></li>

                                        <li><a href="contact.html">Contact Us</a></li>

                                    </ul>

                                </div>

                            </div>

                        </div>

                    </div>



                    <!--Big Column-->

                    <div class="big-column col-xl-6 col-lg-12 col-md-12 col-sm-12">

                        <div class="row">

                            <!--Footer Column-->

                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">

                                <!--Footer Column-->

                                <div class="footer-widget contact-widget">

                                    <h2 class="widget-title">Contact Us</h2>

                                    <!--Footer Column-->

                                    <div class="widget-content">

                                        <ul class="contact-list">

                                            <li>

                                                <span class="icon flaticon-clock"></span>

                                                <div class="text">Mon - Fri: 09:00 - 18:00</div>

                                            </li>



                                            <li>

                                                <span class="icon flaticon-phone"></span>

                                                <div class="text"><a href="tel:+1-345-5678-77">+1-345-5678-77</a></div>

                                            </li>



                                            <li>

                                                <span class="icon flaticon-paper-plane"></span>

                                                <div class="text"><a
                                                        href="mailto:support@example.com">support@example.com</a>
                                                </div>

                                            </li>



                                            <li>

                                                <span class="icon flaticon-worldwide"></span>

                                                <div class="text">13005 Greenville Avenue<br> California, TX
                                                    70240</div>

                                            </li>

                                        </ul>

                                    </div>

                                </div>

                            </div>



                            <!--Footer Column-->

                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">

                                <!--Footer Column-->

                                <div class="footer-widget instagram-widget">

                                    <h2 class="widget-title">Instagram Gallery</h2>

                                    <div class="widget-content">

                                        <div class="outer clearfix">

                                            <figure class="image">

                                                <a href="{{ asset('images/gallery/1.jpg') }}" class="lightbox-image"
                                                    title="Image Title Here"><img
                                                        src="{{ asset('images/resource/gw-1.jpg') }}" alt=""></a>

                                            </figure>



                                            <figure class="image">

                                                <a href="{{ asset('images/gallery/2.jpg') }}" class="lightbox-image"
                                                    title="Image Title Here"><img
                                                        src="{{ asset('images/resource/gw-2.jpg') }}" alt=""></a>

                                            </figure>



                                            <figure class="image">

                                                <a href="{{ asset('images/gallery/3.jpg') }}" class="lightbox-image"
                                                    title="Image Title Here"><img
                                                        src="{{ asset('images/resource/gw-3.jpg') }}" alt=""></a>

                                            </figure>



                                            <figure class="image">

                                                <a href="{{ asset('images/gallery/4.jpg') }}" class="lightbox-image"
                                                    title="Image Title Here"><img
                                                        src="{{ asset('images/resource/gw-4.jpg') }}" alt=""></a>

                                            </figure>



                                            <figure class="image">

                                                <a href="{{ asset('images/gallery/5.jpg') }}" class="lightbox-image"
                                                    title="Image Title Here"><img
                                                        src="{{ asset('images/resource/gw-5.jpg') }}" alt=""></a>

                                            </figure>



                                            <figure class="image">

                                                <a href="{{ asset('images/gallery/1.jpg') }}" class="lightbox-image"
                                                    title="Image Title Here"><img
                                                        src="{{ asset('images/resource/gw-6.jpg') }}" alt=""></a>

                                            </figure>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    @endsection