@extends('frontend.layouts.master')
@section('meta_title', 'Counselors Details' . ' || ' . $setting->app_name)

@section('contents')
<!-- breadcrumb-area -->
<x-frontend.breadcrumb :title="__('')" :links="[['url' => route('home'), 'text' => __('Home')], ['url' => '', 'text' => __('Counselors Details')]]" />
<!-- breadcrumb-area-end -->

<!-- instructor-details-area -->
<section class="instructor__details-area section-pt-120 section-pb-90">
    <div class="container">
        <div class="row">
            <div class="col-xl-9">
                <div class="instructor__details-wrap">
                    <div class="instructor__details-info">
                        <div class="instructor__details-thumb">
                            <img src="{{ asset($model->thumb_image) }}" alt="img">
                        </div>
                        <div class="instructor__details-content">


                            <h2 class="title">{{ $model->title }}</h2>
                            <span class="designation">{{ $model?->user?->job_title }}</span>
                            <ul class="list-wrap">
                                <li>
                                    <i class="fas fa-phone"></i>
                                    <a href="tel:{{ $model->phone }}">{{ $model->phone }}</a>
                                </li>
                                @if($model->whatapp)
                                <li>
                                    <i class="fab fa-whatsapp"></i>
                                    <a target="_blank" href="{{ $model->whatapp }}">WhatsApp</a>
                                </li>
                                @endif
                                <li>
                                    <i class="fas fa-envelope"></i>
                                    <a href="mailto:{{ $model->email }}">{{ $model->email }}</a>
                                </li>
                                @if ($model?->user?->country?->name)
                                <li><i class="fas fa-search-location"></i><a
                                        href="javascript:;">{{ $model?->user?->country?->name }}</a></li>
                                @endif
                            </ul>
                            <p>{{ $model?->user?->short_bio }}</p>
                            <div class="instructor__details-social">
                                <ul class="list-wrap">
                                    @if ($model?->user?->facebook)
                                    <li><a target="_blank" href="{{ $model?->user?->facebook }}"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    @endif
                                    @if ($model?->user?->twitter)
                                    <li><a target="_blank" href="{{ $model?->user?->twitter }}"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    @endif
                                    @if ($model?->user?->linkedin)
                                    <li><a target="_blank" href="{{ $model?->user?->linkedin }}"><i class="fab fa-linkedin"></i></a>
                                    </li>
                                    @endif
                                    @if ($model?->user?->github)
                                    <li><a target="_blank" href="{{ $model?->user?->github }}"><i class="fab fa-youtube"></i></a></li>
                                    @endif
                                    @if ($model?->user?->website)
                                    <li><a target="_blank" href="{{ $model?->user?->website }}"><i class="fas fa-link"></i></a></li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="instructor__details-biography">
                        <!-- <h4 class="title">{{ __('Biography') }}</h4> -->
                        <p>{!! clean(nl2br($model->description)) !!}</p>
                    </div>
                    @if(count($experience))
                    <div class="instructor__details-Skill">
                        <h4 class="title">{{ __('Experience') }}</h4>
                        <!-- Timeline 1 - Bootstrap Brain Component -->
                        <div class="bsb-timeline-1">
                            <div class="container">
                                <div class="row">
                                    <div class="col-10 col-md-8 col-xl-8">

                                        <ul class="timeline">
                                            @foreach ($experience as $exp)
                                            <li class="timeline-item">
                                                <div class="timeline-body">
                                                    <div class="timeline-content">
                                                        <div class="card border-0">
                                                            <div class="card-body p-0">
                                                                <h6 class="card-subtitle text-secondary mb-1">
                                                                    
                                                                    {{ formatDate($exp['start_date']) }} -
                                                                    
                                                                    {{ formatDate($exp['end_date']) }}
                                                                </h6>
                                                                <h5 class="card-title mb-3">
                                                                    {{ $exp['company'] }}
                                                                </h5>
                                                                <h6 class="card-subtitle text-secondary mb-1">
                                                                    {{ $exp['position'] }}
                                                                </h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    @endif
                    <!-- @if(count($educations))
                    <div class="instructor__details-Skill">
                        <h4 class="title">{{ __('Education') }}</h4>
                        <div class="bsb-timeline-1">
                            <div class="container">
                                <div class="row">
                                    <div class="col-10 col-md-8 col-xl-6">

                                        <ul class="timeline">
                                            @foreach ($educations as $education)
                                            <li class="timeline-item">
                                                <div class="timeline-body">
                                                    <div class="timeline-content">
                                                        <div class="card border-0">
                                                            <div class="card-body p-0">
                                                                <h6 class="card-subtitle text-secondary mb-1">
                                                                    {{ formatDate($education->start_date) }} -
                                                                    {{ $education->current == 1 ? 'Present' : formatDate($education->end_date) }}
                                                                </h6>

                                                                <h5 class="card-title mb-3">
                                                                    {{ $education->organization }}
                                                                </h5>
                                                                <h6 class="card-subtitle text-secondary mb-1">
                                                                    {{ $education->degree }}
                                                                </h6>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            @endforeach
                                        </ul>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    @endif -->

                    @if(count($faqs))
                    <div class="instructor__details-Skill">
                        <h4 class="title">{{ __('Faqs') }}</h4>

                        <div class="row">
                            <div class="col-12 col-md-12 col-xl-12">

                                <div class="accordion" id="accordionExample">
                                                                        @foreach ($faqs as $faq)
                                                                        <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne{{$key}}">
                                            <button class="accordion-button {{ $key==0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne{{$key}}" aria-expanded="false" aria-controls="collapseOne{{$key}}">
                                                {{ $faq['question'] }}
                                            </button>
                                        </h2>
                                        <div id="collapseOne{{$key}}" class="accordion-collapse collapse {{ $key==0 ? 'show' : '' }}" aria-labelledby="headingOne{{$key}}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                {{ $faq['answer'] }}
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if(count($universitiesModels))
                    <div class="instructor__details-Skill">
                        <h4 class="title">{{ __('Top Universities') }}</h4>
                        <div class="row">
                            <div class="col-12 col-md-12 col-xl-12 top-universities">
                                <ul class="d-flex flex-wrap">
                                    @foreach ($universitiesModels as $universities)
                                    <li class="col-md-4">{{ $universities->name }}</li>
                                    @endforeach
                                </ul>
                                <!-- Add more rows as needed -->
                            </div>
                        </div>

                    </div>
                    @endif

                    @if($model->universitie_details)
                    <div class="instructor__details-Skill">
                        <h4 class="title">{{ __('Top Universities') }}</h4>
                        <div class="row">
                            <div class="col-12 col-md-12 col-xl-12 top-universities">
                            <p>{!! clean(nl2br($model->universitie_details)) !!}</p>
                                <!-- Add more rows as needed -->
                            </div>
                        </div>

                    </div>
                    @endif
                </div>
            </div>
            <div class="col-xl-3">
                <div class="instructor__sidebar">
                    <h4 class="title">{{ __('Quick Contact') }}</h4>
                    <p>{{ __('Feel free to contact me through mail') }}!</p>
                    <form action="{{ route('counselors-connect', $model->id) }}" method="POST">
                        @csrf
                        <div class="form-grp">
                            <input type="text" placeholder="Name" name="name">
                        </div>
                        <div class="form-grp">
                            <input type="email" placeholder="E-mail" name="email">
                        </div>
                        <div class="form-grp">
                            <input type="text" placeholder="Phone" name="phone">
                        </div>
                        <div class="form-grp">
                            <textarea name="message" placeholder="Type Message"></textarea>
                        </div>
                        @if (Cache::get('setting')->recaptcha_status === 'active')
                        <div class="form-group mt-3">
                            <div class="g-recaptcha overflow-hidden"
                                data-sitekey="{{ Cache::get('setting')->recaptcha_site_key }}"></div>
                        </div>
                        @endif
                        <button type="submit" class="btn arrow-btn">{{ __('Send Message') }} <img
                                src="{{ asset('frontend/img/icons/right_arrow.svg') }}" alt="img"
                                class="injectable"></button>
                    </form>



                    <div class="row justify-content-center mt-4">
                        <div class="col-md-12">
                            <!-- Call Button -->
                            @if($model->whatapp)
                            <a href="tel:{{ $model->phone }}" class="custom-btn btn-call mb-3">
                                <i class="fas fa-phone"></i> Get A Call Back
                            </a>
                            @endif
                            <!-- WhatsApp Button -->
                            @if($model->whatapp)
                            <a target="_blank" href="{{ $model->whatapp }}" class="custom-btn btn-whatsapp">
                                <i class="fab fa-whatsapp"></i> Chat with Our Expert
                            </a>
                            @endif
                        </div>
                    </div>


                </div>


            </div>
        </div>
    </div>
</section>
<!-- instructor-details-area-end -->
@endsection

@push('scripts')
<!-- <script src="{{ asset('frontend/js/default/internships-page.js') }}"></script> -->
<style>
    .breadcrumb__bg {
        padding: 20px 0;
    }

    .courses__item {
        min-height: 388px;
        max-height: 388px;
    }

    .section-py-120 {
        padding: 60px 0;
    }

    .btn.btn-primary:hover {
        color: #ffffff;
    }

    .accordion-button {
        font-weight: 600;
    }

    .section-pt-120 {
        padding-top: 30px;
    }

    .top-universities ul {
        padding-left: 0;
        /* Remove default padding */
        list-style-type: none;
    }

    .top-universities ul li {
        color: #221E73;
        /* Same color for text */
        padding-right: 20px;
        /* Add some spacing between items */
        padding-bottom: 10px;
        /* Add some spacing between rows */
    }
</style>

<style>
    .custom-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        width: 100%;
        border-radius: 8px;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
    }

    .btn-call {
        background-color: #221E73;
        /* Purple background color */
        color: white;
    }
    
    .btn-call:hover,
    .btn-whatsapp:hover {
        color: white;
    }

    .btn-whatsapp {
        background-color: #25D366;
        /* WhatsApp green */
        color: white;
    }

    .custom-btn i {
        margin-right: 10px;
        /* Spacing between icon and text */
    }
    .instructor__details-thumb img {
   
        object-fit: contain !important;
}
</style>
@endpush