@extends('vcardTemplates.vcard11.app')
@section('title')
{{__('auth.home')}}
@endsection
@section('page_css')
    <link href="{{ asset('assets/css/home.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('page_name')
    {{__('auth.about')}}
@endsection
@section('content')
    <div class="tab-content p-sm-4 p-3" id="v-pills-tabContent">
        <div class="home-tab tab-pane fade show active" id="v-pills-home" role="tabpanel"
             aria-labelledby="v-pills-home-tab">
            <div class="hero-about">
                <div class="row">
                    <div class=" col-xl-6">
                        <p class="text-white  mb-1">{{ $vcard->occupation }}</p>
                        <p class="text-white  mb-1">{{ $vcard->job_title }}</p>
                        <p class="small-title text-white">{{ ucwords($vcard->company) }}</p>
                        <h2 class="text-white fs-34 fw-5 mb-4 d-inline-block">
                            {{ strtoupper($vcard->first_name.' '.$vcard->last_name) }}
                            @if ($vcard->is_verified)
                            <i class="verification-icon bi-patch-check-fill"></i>
                            @endif
                        </h2>
                        <p class="text-white fs-20 mb-2">{{__('messages.common.description')}}</p>
                        <div class="text-white profile-description fs-14 mb-3 fw-normal ">
                          <p class="profile-description"> {!! $vcard->description !!}</p>
                        </div>
                    </div>
                    @if ((isset($managesection) && $managesection['contact_list']) || empty($managesection))
                        @if(isset($vcard->first_name))
                            <div class="col-xl-6 ps-3">
                                <div class="desc">
                                    <div class=" d-flex mb-2 ">
                                        <div class="icon me-4">
                                            <i class="fa-solid fa-user"></i>
                                        </div>
                                        <div class="">
                                            <span>{{__('messages.common.name')}} :</span>
                                            <a class="ps-2 fs-14">{{ strtoupper($vcard->first_name.' '.$vcard->last_name) }}</a>
                                        </div>
                                    </div>
                                    @if($vcard->location)
                                        <div class=" d-flex mb-2">
                                            <div class="icon me-4">
                                                <i class="fa-sharp fa-solid fa-location-dot"></i>
                                            </div>
                                            <div class="">
                                                <span>{{__('messages.user.location')}} :</span>
                                                <a class="ps-2 fs-14">{!! ucwords($vcard->location) !!}</a>
                                            </div>
                                        </div>
                                    @endif
                                    @if($vcard->dob)
                                        <div class=" d-flex mb-2">
                                            <div class="icon me-4">
                                                <i class="fa-solid fa-star"></i>
                                            </div>
                                            <div class="">
                                                <span>{{__('messages.vcard.dob')}} :</span>
                                                <a class="ps-2 fs-14">{{ $vcard->dob }}</a>
                                            </div>
                                        </div>
                                    @endif
                                    @if($vcard->phone || $vcard->alternative_phone)
                                        <div class=" d-flex mb-2">
                                            <div class="icon me-4">
                                                <i class="fa-solid fa-phone"></i>
                                            </div>
                                            <div class="d-flex ">
                                                <span>{{__('auth.contact')}}&nbsp:</span>
                                                <div class="d-flex flex-wrap">
                                                    @if($vcard->phone)
                                                        <a href="tel:+{{ $vcard->region_code }}{{ $vcard->phone }}"
                                                        class="ps-2 fs-14" dir="ltr">+ {{ $vcard->region_code }}
                                                            {{ $vcard->phone }}</a>
                                                    @endif
                                                    @if($vcard->alternative_phone)
                                                        <a href="tel:+{{ $vcard->alternative_region_code }}{{ $vcard->alternative_phone }}"
                                                        class="ps-2 fs-14" dir="ltr">+ {{ $vcard->alternative_region_code }}
                                                            {{ $vcard->alternative_phone }}</a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    {{--                            <a href="{{ route('vcard.show.portfolio',$vcard->url_alias) }}"--}}
                                    {{--                               class="btn btn-primary fs-14 mt-3">MY PORTFOLIO<i--}}
                                    {{--                                        class="fa-solid fa-arrow-right text-white ms-3"></i></a>--}}
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
                {{--                <div class="row">--}}
                {{--                    <div class="col-sm-4 col-6 text-white text-center py-4">--}}
                {{--                        <h2 class="fs-1 fw-6">--}}
                {{--                            <span class="counter" data-countto="145" data-duration="3000">0</span>--}}
                {{--                        </h2>--}}
                {{--                        <h3 class="fs-6 mb-0 mt-3">FINISHED PROJECTS</h3>--}}
                {{--                    </div>--}}
                {{--                    <div class="col-sm-4 col-6 text-white text-center py-4">--}}
                {{--                        <h2 class="fs-1 fw-6">--}}
                {{--                            <span class="counter" data-countto="825" data-duration="3000">0</span>--}}
                {{--                        </h2>--}}
                {{--                        <h3 class="fs-6 mb-0 mt-3">WORKING HOURS</h3>--}}
                {{--                    </div>--}}
                {{--                    <div class="col-sm-4 col-6 text-white text-center py-4">--}}
                {{--                        <h2 class="fs-1 fw-6">--}}
                {{--                            <span class="counter" data-countto="15" data-duration="3000">0</span>--}}
                {{--                        </h2>--}}
                {{--                        <h3 class="fs-6 mb-0 mt-3">AWARDS WON</h3>--}}
                {{--                    </div>--}}
                {{--                </div>--}}
            </div>
            <!-- start services section -->
            @if ((isset($managesection) && $managesection['services']) || empty($managesection))
            @if(checkFeature('services') && $vcard->services->count())
                <section class="services-section pt-30 mt-5">
                    <div class="section-heading mb-40">
                        <h2 class="fs-22 text-white ps-4">{{__('messages.services')}}</h2>
                    </div>
                                        @if ($vcard->services_slider_view)
                    <div class="row services-slider-view">
                        @foreach ($vcard->services as $service)
                            <div>
                                <div
                                    class="service-card card my-1 h-100">
                                        <div class="tag d-flex justify-content-center align-items-center">
                                            <span class="fs-6 text-white">{{ $serviceCount++ }}</span>
                                        </div>
                                        <a href="{{ $service->service_url ?? 'javascript:void(0)' }}"
                                            class="text-decoration-none img {{ $service->service_url ? 'pe-auto' : 'pe-none' }}"
                                            target="{{ $service->service_url ? '_blank' : '' }}">
                                            <img src="{{ $service->service_icon }}"
                                                class="card-img-top service-new-image" alt="{{ $service->name }}"
                                                loading="lazy">
                                        </a>
                                    <div class="">
                                        <h5 class="card-title title-text">{{ ucwords($service->name) }}</h5>
                                        <p
                                            class="card-text description-text {{ \Illuminate\Support\Str::length($service->description) > 170 ? 'more' : '' }}">
                                            {!! \Illuminate\Support\Str::limit($service->description, 170, '...') !!}</p>
                                        @if ($vcard->show_service_enquiry_btn == true)
                                            @if ($service->service_url)
                                                <div class="text-center mt-2">
                                                    <a href="{{ $service->service_url ?? 'javascript:void(0)' }}"
                                                        target="{{ $service->service_url ? '_blank' : '' }}"
                                                        class="btn btn-primary-enquiry @if(!$service->service_url) disabled @endif">
                                                        <span>{{ __('messages.contact_us.enquiry') }}</span>
                                                    </a>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @else
                    <div class="row">
                        @foreach($vcard->services as $service)
                            <div class="col-md-6 mb-sm-5 mb-4">
                                <div class="card flex-sm-row p-sm-4 p-3 h-100">
                                    <div class="tag d-flex justify-content-center align-items-center">
                                        <span class="fs-6 text-white">{{ $serviceCount++ }}</span>
                                    </div>
                                    <div class="card-img-top">
                                        <img src="{{ $service->service_icon }}" height="70" width="70"
                                             class="object-fit-cover  custom-border-radius">
                                    </div>
                                    <div class="card-body p-0 ps-sm-4 pt-sm-0 pt-3">
                                        <a class="text-decoration-none text-white"
                                           href="{{ $service->service_url ?? '#' }}" target="_blank">
                                            <h5 class="card-title fs-18">{{ $service->name }}</h5>
                                            {{--                                        @php--}}
                                            {{--                                            $service->description = strlen($service->description) > 200 ? substr($service->description,0,200).'..                                                         .':$service->description--}}

                                            {{--                                        @endphp--}}
                                            <p class="card-text fs-14  mb-0 {{ \Illuminate\Support\Str::length($service->description) > 170 ? 'more' : ''}}">
                                                {!! \Illuminate\Support\Str::limit($service->description, 170, '...') !!}
                                            </p>
                                        </a>
                                        {{--                                        <div class="d-flex flex-wrap pt-3">--}}
                                        {{--                                            <span class="fs-12 text-white me-3">CODE</span>--}}
                                        {{--                                            <span class="fs-12 text-white me-3">DESIGN</span>--}}
                                        {{--                                            <span class="fs-12 text-white ">PHOTOSHOP</span>--}}
                                        {{--                                        </div>--}}
                                        @if ($vcard->show_service_enquiry_btn == true)
                                            @if ($service->service_url)
                                                <div class="text-center">
                                                    <a href="{{ $service->service_url ?? 'javascript:void(0)' }}"
                                                        target="{{ $service->service_url ? '_blank' : '' }}"
                                                        class="btn btn-primary-enquiry @if(!$service->service_url) disabled @endif">
                                                        <span>{{ __('messages.contact_us.enquiry') }}</span>
                                                    </a>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                    @endif
                </section>
            @endif
            @endif
        <!-- start product section -->
            @if(checkFeature('products') && $vcard->products->count())
                @if ((isset($managesection) && $managesection['products']) || empty($managesection))
                    <section class="services-section pt-30">
                        <div class="section-heading mb-5">
                            <h2 class="fs-22 text-white ps-4">{{__('messages.feature.products')}}</h2>
                            <div class="text-end ">
                                <a class="fs-6 ps-4 text-decoration-underline text-light" href="{{ $vcardProductUrl }}">{{__('messages.analytics.view_more')}}</a>
                                </div>
                        </div>
                                                <div class="row">
                            @foreach($vcardProducts  as $product)
                                <div class="col-md-6 mb-sm-5 mb-4">
                                    <a @if($product->product_url) href="{{ $product->product_url }}" @endif >
                                        <div class="card flex-sm-row p-sm-4 p-3 h-100">
                                            <div class="tag d-flex justify-content-center align-items-center">
                                                <span class="fs-6 text-white">{{ $ProductCount++ }}</span>
                                            </div>
                                            <div class="card-img-top">
                                                <a @if($product->product_url) href="{{ $product->product_url }}"
                                                target="_blank" @endif>
                                                <div class="card-img-top">
                                                        <img src="{{ $product->product_icon }}"
                                                            class="w-100 h-100 object-fit-cover custom-border-radius">
                                                    </div>
                                                </div>
                                            <div class="card-body p-0 ps-sm-4 pt-sm-0 pt-3">
                                                <div class="d-flex justify-content-between">
                                                <h5 class="card-title text-white fs-18">{{ $product->name }}</h5>
                                                    </div>
                                                @if($product->currency_id && $product->price)
                                                    <p class="text-white fs-14 pb-4 mb-0">
                                                        {{$product->currency->currency_icon}}{{getSuperAdminSettingValue('hide_decimal_values') == 1 ? number_format($product->price, 0) : number_format($product->price, 2)}}
                                                    </p>
                                                @elseif($product->price)
                                                    <p class=" text-white fs-14 pb-4 mb-0">{{ getUserCurrencyIcon($vcard->user->id) .' '. $product->price }}</p>
                                                @endif
                                            <div class="">
                                                <p class="card-text text-white fs-14 pb-4 mb-0">
                                                    {!! $product->description !!}
                                                </p>
                                            </div>
                                            @if ($vcard->show_service_enquiry_btn == true)
                                                @if ($service->service_url)
                                                    <div class="mb-2">
                                                        <a href="{{ $service->service_url ?? 'javascript:void(0)' }}"
                                                            target="{{ $service->service_url ? '_blank' : '' }}"
                                                            class="btn btn-primary-enquiry @if(!$service->service_url) disabled @endif">
                                                            <span>{{ __('messages.contact_us.enquiry') }}</span>
                                                        </a>
                                                    </div>
                                                @endif
                                            @endif
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach

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

            {{-- whatsapp store --}}
            @if ((isset($managesection) && $managesection['whatsapp_store']) || empty($managesection))
                @if ($whatsappStore->count())
                    <section class="services-section pt-30 mt-20">
                        <div class="section-heading mb-5">
                            <h2 class="fs-22 text-white ps-4">
                                {{ __('messages.feature.whatsapp_store') }}
                            </h2>
                        </div>

                        
                        <div class="row">
                            @foreach ($whatsappStore as $store)
                                <div class="col-md-6 mb-sm-5 mb-4">

                                    <div class="card flex-sm-row p-sm-4 p-3 h-100">

                                        <div class="tag d-flex justify-content-center align-items-center">
                                            <span class="fs-6 text-white">
                                                {{ $StoreCount++ }}
                                            </span>
                                        </div>

                                        <div class="card-img-top">
                                            <div class="card-img-top">
                                                <img src="{{ $store->cover_url }}" alt="store"
                                                    class="w-100 h-100 object-fit-cover custom-border-radius">
                                            </div>
                                        </div>

                                        <div class="card-body p-0 ps-sm-4 pt-sm-0 pt-3 text-center text-sm-start"
                                            @if (getLanguage($vcard->default_language) == 'Arabic' || getLanguage($vcard->default_language) == 'Persian') dir="rtl" @endif>

                                            <div class="d-flex justify-content-between align-items-center">
                                                <h5 class="card-title fs-18 text-white mb-2 whatsapp-store-name">
                                                    {{ $store->store_name }}
                                                </h5>
                                            </div>
                                            <div class="text-end mt-3">
                                                <a class="btn btn-primary btn-sm" target="_blank" href="{{ route('whatsapp.store.show', $store->url_alias) }}">
                                                    {{__('messages.vcard.visit_store')}}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif
            @endif

        <!-- end services section -->


            {{-- payment link --}}
            @if ((isset($managesection) && $managesection['payment_link']) || empty($managesection))
                @if (checkFeature('payment_link') && $vcard->paymentLinks->count())
                    <section class="services-section pt-30">
                        <div class="section-heading mb-5">
                            <h2 class="fs-22 text-white ps-4">{{ __('messages.vcard.payment_links') }}</h2>
                        </div>
                                                <div class="row">
                            @foreach ($vcard->paymentLinks as $paymentLink)
                                @php
                                    $iconUrl = optional(
                                        $paymentLink->getMedia('vcards/payment_link_image')->first(),
                                    )->getUrl();
                                    $paymentLinkData = getPaymentLinkUrl($paymentLink);
                                    $linkUrl = $paymentLinkData['linkUrl'];
                                    $isImageType = $paymentLinkData['isImageType'];
                                @endphp
                                <div class="col-md-6 mb-sm-5 mb-4">
                                    <div class="card flex-sm-row p-sm-4 p-3 h-100">
                                        <div class="tag d-flex justify-content-center align-items-center">
                                            <span class="fs-6 text-white">{{ $paymentLinkCount++ }}</span>
                                        </div>
                                        <div class="card-img-top">
                                            <img src="{{ $iconUrl }}"
                                                class="w-100 h-100 object-fit-cover custom-border-radius"
                                                alt="{{ $paymentLink->label }}">
                                        </div>
                                        <div class="card-body p-0 ps-sm-4 pt-sm-0 pt-3">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <h5 class="card-title fs-18 pl-strip-title">{{ $paymentLink->label }}</h5>
                                                <div class="ms-2">
                                                    @if ($paymentLink->display_type == \App\Models\VcardPaymentLink::UPI)
                                                        <a href="{{ $linkUrl }}"
                                                            class="btn btn-primary-enquiry btn-sm js-upi-pay d-inline-block d-md-none"
                                                            style="padding: 4px 15px; font-size: 0.85rem;"
                                                            data-upi-url="{{ $linkUrl }}"> {{ __('messages.vcard.pay') }} </a>
                                                    @elseif($paymentLink->display_type == \App\Models\VcardPaymentLink::LINK)
                                                        <a href="{{ $linkUrl }}" target="_blank"
                                                            class="btn btn-primary-enquiry btn-sm mt-0 mt-md-4"
                                                            style="padding: 7px 12px 5px 15px; font-size: 0.95rem;">
                                                            <i class="fa-solid fa-arrow-up-right-from-square me-1"></i>
                                                        </a>
                                                    @elseif($isImageType)
                                                        <img src="{{ $linkUrl }}" alt="{{ $paymentLink->label }}"
                                                            class="img-fluid rounded pl-strip-content-img" style="max-height: 85px;">
                                                    @endif
                                                </div>
                                            </div>
                                            @if (
                                                !(
                                                    $isImageType ||
                                                    $paymentLink->display_type == \App\Models\VcardPaymentLink::UPI ||
                                                    $paymentLink->display_type == \App\Models\VcardPaymentLink::LINK
                                                ))
                                                <p class="card-text fs-14 mb-0 description-text">
                                                    {!! nl2br(e($paymentLink->description)) !!}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif
            @endif

            <!-- start testimonials-section -->
            {{--testimonial--}}
            @if ((isset($managesection) && $managesection['testimonials']) || empty($managesection))
                @if(checkFeature('testimonials') && $vcard->testimonials->count())
                    <section class="testimonials-section position-relative mt-4 ">
                        @php $testimonialCount = 1;
                    $style = 'style';
                    $marginBottom = 'margin-bottom';
                        @endphp
                        <div class="section-heading ">
                            <h2 class="fs-22 text-white ps-4 " {{$style}}="{{$marginBottom}}: -10px;"
                            >{{__('messages.feature.testimonials')}}</h2>
                        </div>
                        <div class="slick-slider">
                            @foreach($vcard->testimonials as $testimonial)
                                <div class="col element element-1 @if($vcard->testimonials->count()==1) custom-margin-testimonial @endif h-100 m-0 mt-3 ">
                                    <a class="fs-14 ps-3"></a>
                                    <div class="card testimonial-2card-custom  mb-3 me-4 flex-sm-row p-4 h-100">
                                        <div class="tag d-flex justify-content-center align-items-center">
                                            <span class="fs-6 text-white">{{ $testimonialCount++ }}</span>
                                        </div>
                                        <div class="card-img-top">
                                            <img src="{{ $testimonial->image_url }}"
                                                class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="card-body p-0 ps-sm-4 pt-sm-0 pt-3">
                                            <h5 class="card-title fs-18">{{ucwords( $testimonial->name) }}</h5>
                                            <p class="card-text fs-14 {{ \Illuminate\Support\Str::length($testimonial->description) > 80 ? 'more' : ''}} mb-0">
                                                "{!! $testimonial->description !!} "
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif
            @endif
        <!-- end testimonials-section -->
        <!--insta feed-->
        @if ((isset($managesection) && $managesection['insta_embed']) || empty($managesection))
        @if (checkFeature('insta_embed') && $vcard->instagramEmbed->count())
        <div class="section-heading mb-5">
            @php $testimonialCount = 1;
            $style = 'style';
            $marginBottom = 'margin-bottom';
            @endphp
            <h2 class="fs-22 text-white ps-4" {{$style}}="{{$marginBottom}}: -10px;"
            >{{__('messages.feature.insta_embed')}}</h2>
        </div>
        <nav>
            <div class="row insta-toggle">
            <div class="nav nav-tabs px-0 border-0" id="nav-tab" role="tablist">
                <button class="d-flex align-items-center justify-content-center py-2 border-0 active postbtn instagram-btn text-center" id="nav-home-tab"
                    data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab"
                    aria-controls="nav-home" aria-selected="true">
                    <svg aria-label="Posts" class="svg-post-icon x1lliihq x1n2onr6 x173jzuc" fill="currentColor" height="24" role="img" viewBox="0 0 24 24" width="24">
                        <title>Posts</title>
                        <rect fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="3"></rect>
                        <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9.015" x2="9.015" y1="3" y2="21"></line>
                        <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.985" x2="14.985" y1="3" y2="21"></line>
                        <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21" x2="3" y1="9.015" y2="9.015"></line>
                        <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21" x2="3" y1="14.985" y2="14.985"></line>
                    </svg>
                </button>
                <button class="d-flex align-items-center justify-content-center py-2 border-0 instagram-btn reelsbtn text-center" id="nav-profile-tab" data-bs-toggle="tab"
                    data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile"
                    aria-selected="false">
                    <svg class="svg-reels-icon" viewBox="0 0 48 48" width="27" height="27">
                        <path d="m33,6H15c-.16,0-.31,0-.46.01-.7401.04-1.46.17-2.14.38-3.7,1.11-6.4,4.55-6.4,8.61v18c0,4.96,4.04,9,9,9h18c4.96,0,9-4.04,9-9V15c0-4.96-4.04-9-9-9Zm7,27c0,3.86-3.14,7-7,7H15c-3.86,0-7-3.14-7-7V15c0-3.37,2.39-6.19,5.57-6.85.46-.1.94-.15,1.43-.15h18c3.86,0,7,3.14,7,7v18Z" fill="currentColor" class="color000 svgShape not-active-svg"></path>
                        <path d="M21 16h-2.2l-.66-1-4.57-6.85-.76-1.15h2.39l.66 1 4.67 7 .3.45c.11.17.17.36.17.55zM34 16h-2.2l-.66-1-4.67-7-.66-1h2.39l.66 1 4.67 7 .3.45c.11.17.17.36.17.55z" fill="currentColor" class="color000 svgShape not-active-svg"></path>
                        <rect width="36" height="3" x="6" y="15" fill="currentColor" class="color000 svgShape"></rect><path d="m20,35c-.1753,0-.3506-.0459-.5073-.1382-.3052-.1797-.4927-.5073-.4927-.8618v-10c0-.3545.1875-.6821.4927-.8618.3066-.1797.6831-.1846.9932-.0122l9,5c.3174.1763.5142.5107.5142.874s-.1968.6978-.5142.874l-9,5c-.1514.084-.3188.126-.4858.126Zm1-9.3003v6.6006l5.9409-3.3003-5.9409-3.3003Z" fill="currentColor" class="color000 svgShape not-active-svg"></path>
                        <path d="m6,33c0,4.96,4.04,9,9,9h18c4.96,0,9-4.04,9-9v-16H6v16Zm13-9c0-.35.19-.68.49-.86.31-.18.69-.19,1-.01l9,5c.31.17.51.51.51.87s-.2.7-.51.87l-9,5c-.16.09-.3199.13-.49.13-.18,0-.35-.05-.51-.14-.3-.18-.49-.51-.49-.86v-10Zm23-9c0-4.96-4.04-9-9-9h-5.47l6,9h8.47Zm-10.86,0l-6.01-9h-10.13c-.16,0-.31,0-.46.01l5.99,8.99h10.61ZM12.4,6.39c-3.7,1.11-6.4,4.55-6.4,8.61h12.14l-5.74-8.61Z" fill="currentColor" class="color000 svgShape active-svg"></path>
                    </svg>
                </button>
            </div>
            </div>
        </nav>
                <div id="postContent">
                    <div class="row overflow-hidden m-0 mt-5">
                        <!-- "Post" content -->
                        @foreach ($vcard->InstagramEmbed as $InstagramEmbed)
                            @if ($InstagramEmbed->type == 0)
                                <div class="col-12 col-sm-6 instagramEmbed insta-feed-iframe">
                                    {!! $InstagramEmbed->embedtag !!}
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                <div id="reelContent">
                    <div class="row overflow-hidden  mt-5">
                        <!-- "Reel" content -->
                        @foreach ($vcard->InstagramEmbed as $InstagramEmbed)
                            @if ($InstagramEmbed->type == 1)
                                <div class="col-12 col-sm-6 mt-2 instagramEmbed insta-feed-iframe">
                                    {!! $InstagramEmbed->embedtag !!}
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
        </div>
        @endif
        @endif
          <!--insta feed end-->
        {{-- Linkedin --}}
        @if ((isset($managesection) && $managesection['linkedin_embed']) || empty($managesection))
            @if (checkFeature('linkedin_embed') && $vcard->linkedinEmbed->count())
                <div class="section-heading mb-5 pt-4">
                    @php $testimonialCount = 1;
                    $style = 'style';
                    $marginBottom = 'margin-bottom';
                    @endphp
                    <h2 class="fs-22 text-white ps-4" {{$style}}="{{$marginBottom}}: -10px;" >
                    {{ __('messages.feature.linkedin_embed') }}
                    </h2>
                    <div class="linkedin-feed pt-4">
                        <div class="row overflow-hidden m-0 mt-2" loading="lazy">
                            <!-- "Post" content -->
                            @foreach ($vcard->LinkedinEmbed as $LinkedinEmbed)
                                @if ($LinkedinEmbed->type == 0)
                                    <div class="col-12 col-sm-6 linkedinEmbed linkedin-feed-iframe">
                                        {!! $LinkedinEmbed->embedtag !!}
                                    </div>
                            @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        @endif
        @if ((isset($managesection) && $managesection['iframe']) || empty($managesection))
        @if (checkFeature('iframes') && $vcard->iframes->count())
        <div class="vcard-one__blog">
            <div class="section-heading">
                <h2 class="fs-22 text-white ps-4 mt-5">{{__('messages.vcard.iframe')}}</h2>
            </div>
            <div class="container iframe-section">
                <div class="iframe-slider">
                    @foreach ($vcard->iframes as $iframe)
                        <div class="col-12 mb-2 col">
                            <div class="card p-sm-2 border-0 w-70 d-flex align-items-center m-3">
                                <iframe src="{{ $iframe->url }}" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen width="100%" height="300">
                                </iframe>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
    @endif
            <!-- start client-section -->
            @if ((isset($managesection) && $managesection['galleries']) || empty($managesection))
                @if(checkFeature('gallery') && $vcard->gallery->count())
                    <section class="client-section">
                        <div class="section-heading mb-4">
                            <h2 class="fs-22 text-white ps-4 mt-5">{{__('messages.feature.gallery')}}</h2>
                        </div>

                        @php
                            $groupedGallery = $vcard->gallery
                                ->filter(function ($file) {
                                    return !empty($file->category_name);
                                })
                                ->groupBy('category_name');
                        @endphp
                        @if ($groupedGallery->isNotEmpty())
                            <div class="gallery-filter-nav d-flex flex-wrap justify-content-center gap-2 mb-25px mb-2">
                                <button type="button" class="gallery-filter-btn active" data-gallery-filter="all">
                                    {{ __('messages.all') }}
                                </button>
                                @foreach ($groupedGallery as $categoryName => $galleryItems)
                                    <button type="button" class="gallery-filter-btn"
                                        data-gallery-filter="{{ \Illuminate\Support\Str::slug($categoryName, '-') }}">
                                        {{ $categoryName }}
                                    </button>
                                @endforeach
                            </div>
                        @endif

                        <div class="gallery-filter-panel active" data-gallery-panel="all">
                            <div class="row">
                                @foreach($vcard->gallery as $file)
                                    @php
                                        $infoPath = pathinfo(public_path($file->gallery_image));
                                    $extension = $infoPath['extension'];
                                    @endphp
                                    <div class="col-md-3 col-6  mt-3">
                                        <div class="client-box w-100 h-100 ">
                                            <div class="client-img">
                                                @if($file->type == App\Models\Gallery::TYPE_IMAGE)
                                                    <a href="{{$file->gallery_image}}" data-lightbox="gallery-images-all"><img src="{{ $file->gallery_image }}"
                                                                                                                        class="w-100 h-100 object-fit-cover rounded"></a>
                                                @elseif($file->type == App\Models\Gallery::TYPE_FILE)
                                                    <a id="file_url" href="{{$file->gallery_image}}"
                                                    class="gallery-link gallery-file-link" target="_blank">
                                                        @if($extension=='pdf')
                                                            <img src="{{ asset('assets/images/pdf-icon.png') }}"
                                                                class="w-100 h-100 object-fit-cover rounded">
                                                        @endif
                                                        @if($extension=='xls')
                                                            <img src="{{ asset('assets/images/xls.png') }}"
                                                                class="w-100 h-100 object-fit-cover rounded">
                                                        @endif
                                                        @if($extension=='csv')
                                                            <img src="{{ asset('assets/images/csv-file.png') }}"
                                                                class="w-100 h-100 object-fit-cover rounded">
                                                        @endif
                                                        @if($extension=='xlsx')
                                                            <img src="{{ asset('assets/images/xlsx.png') }}"
                                                                class="w-100 h-100 object-fit-cover rounded">
                                                        @endif
                                                    </a>
                                                @elseif($file->type == App\Models\Gallery::TYPE_VIDEO)
                                                <div class="video-container d-flex align-items-center">
                                                    <video width="100%" controls>
                                                        <source src="{{ $file->gallery_image }}">
                                                    </video>
                                                </div>
                                                @elseif($file->type == App\Models\Gallery::TYPE_AUDIO)
                                                    <div class="audio-container">
                                                        <img src="{{ asset('assets/img/music.jpeg') }}" alt="Album Cover" class="audio-image" height="170">
                                                        <audio controls src="{{ $file->gallery_image }}" class="mt-2">
                                                            Your browser does not support the <code>audio</code> element.
                                                        </audio>
                                                    </div>
                                                @else
                                                    <iframe src="https://www.youtube.com/embed/{{ YoutubeID($file->link) }}"
                                                        class="w-100 h-100 object-fit-cover">
                                                    </iframe>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        @if ($groupedGallery->isNotEmpty())
                            @foreach ($groupedGallery as $categoryName => $galleryItems)
                                <div class="gallery-filter-panel" data-gallery-panel="{{ \Illuminate\Support\Str::slug($categoryName, '-') }}">
                                    <div class="row">
                                        @foreach($galleryItems as $file)
                                            @php
                                                $infoPath = pathinfo(public_path($file->gallery_image));
                                            $extension = $infoPath['extension'];
                                            @endphp
                                            <div class="col-md-3 col-6  mt-3">
                                                <div class="client-box w-100 h-100 ">
                                                    <div class="client-img">
                                                        @if($file->type == App\Models\Gallery::TYPE_IMAGE)
                                                            <a href="{{$file->gallery_image}}" data-lightbox="gallery-images-{{ \Illuminate\Support\Str::slug($categoryName, '-') }}"><img src="{{ $file->gallery_image }}"
                                                                                                                                class="w-100 h-100 object-fit-cover rounded"></a>
                                                        @elseif($file->type == App\Models\Gallery::TYPE_FILE)
                                                            <a id="file_url" href="{{$file->gallery_image}}"
                                                            class="gallery-link gallery-file-link" target="_blank">
                                                                @if($extension=='pdf')
                                                                    <img src="{{ asset('assets/images/pdf-icon.png') }}"
                                                                        class="w-100 h-100 object-fit-cover rounded">
                                                                @endif
                                                                @if($extension=='xls')
                                                                    <img src="{{ asset('assets/images/xls.png') }}"
                                                                        class="w-100 h-100 object-fit-cover rounded">
                                                                @endif
                                                                @if($extension=='csv')
                                                                    <img src="{{ asset('assets/images/csv-file.png') }}"
                                                                        class="w-100 h-100 object-fit-cover rounded">
                                                                @endif
                                                                @if($extension=='xlsx')
                                                                    <img src="{{ asset('assets/images/xlsx.png') }}"
                                                                        class="w-100 h-100 object-fit-cover rounded">
                                                                @endif
                                                            </a>
                                                        @elseif($file->type == App\Models\Gallery::TYPE_VIDEO)
                                                        <div class="video-container d-flex align-items-center">
                                                            <video width="100%" controls>
                                                                <source src="{{ $file->gallery_image }}">
                                                            </video>
                                                        </div>
                                                        @elseif($file->type == App\Models\Gallery::TYPE_AUDIO)
                                                            <div class="audio-container">
                                                                <img src="{{ asset('assets/img/music.jpeg') }}" alt="Album Cover" class="audio-image" height="170">
                                                                <audio controls src="{{ $file->gallery_image }}" class="mt-2">
                                                                    Your browser does not support the <code>audio</code> element.
                                                                </audio>
                                                            </div>
                                                        @else
                                                            <iframe src="https://www.youtube.com/embed/{{ YoutubeID($file->link) }}"
                                                                class="w-100 h-100 object-fit-cover">
                                                            </iframe>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </section>

                @endif
            @endif
            <div class="d-flex justify-content-center mt-5 text-white">
                @if(checkFeature('advanced'))
                    @if(checkFeature('advanced')->hide_branding && $vcard->branding == 0)
                        @if($vcard->made_by)
                            <a @if(!is_null($vcard->made_by_url)) href="{{$vcard->made_by_url}}"
                               @endif class="text-center text-decoration-none text-white" target="_blank">
                                <small>{{ __('messages.made_by') }} {{ $vcard->made_by }}</small></a>
                        @endif
                    @else
                        <div class="text-center">
                            <small>{{ __('messages.made_by') }} {{ $setting['app_name'] }}</small>
                        </div>
                    @endif
                @endif
            </div>
               <!-- Modal -->
               @if ((isset($managesection) && $managesection['news_latter_popup']) || empty($managesection))
                    <div class="modal fade" id="newsLatterModal" tabindex="-1" aria-labelledby="newsLatterModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog news-modal modal-dialog-centered">
                            <div class="modal-content animate-bottom" id="newsLatter-content">
                                <div class="newsmodal-header px-0 position-relative">
                                    <button type="button" class="btn-close p-1 position-absolute end-0" data-bs-dismiss="modal"
                                    aria-label="Close" id="closeNewsLatterModal"></button>
                                </div>
                                <div class="modal-body">
                                    <h3 class="content text-start mb-2">{{ __('messages.vcard.subscribe_newslatter') }}</h3>
                                    <p class="modal-desc text-start">{{ __('messages.vcard.update_directly') }}</p>
                                    <div class="mb-1 mt-3 d-flex gap-1 justify-content-center align-items-center email-input">
                                        <div class="d-flex align-items-center gap-1 w-100">
                                        <input type="email" class="form-control email-input w-100" placeholder="{{ __('messages.form.enter_your_email') }}" aria-label="Email" aria-describedby="button-addon2">
                                        <button class="btn btn-outline-secondary ms-1" type="button" id="email-send">{{ __('messages.subscribe') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
@endsection
<script>
    listenClick('.postbtn', function () {
    $('#postContent').addClass('d-block');
    $('#postContent').removeClass('d-none');
    $('#reelContent').addClass('d-none');
    $('#reelContent').removeClass('d-block');
});
listenClick('.reelsbtn', function () {
    $('#postContent').addClass('d-none');
    $('#postContent').removeClass('d-block');
    $('#reelContent').removeClass('d-none');
    $('#reelContent').addClass('d-block');
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $(document).on('click', '.gallery-filter-btn', function () {
            let filterKey = $(this).data("gallery-filter");

            $(".gallery-filter-btn").removeClass("active");
            $(this).addClass("active");

            $(".gallery-filter-panel").removeClass("active").hide();
            let activePanel = $('.gallery-filter-panel[data-gallery-panel="' + filterKey + '"]');
            activePanel.addClass("active").show();
        });
    });
</script>

<script>
    // UPI deep-link handler (opens payment apps on mobile)
    document.addEventListener('click', function(e) {
        const link = e.target.closest('.js-upi-pay');
        if (!link) return;

        const url = link.getAttribute('data-upi-url') || link.getAttribute('href');
        if (!url) return;

        e.preventDefault();
        window.location.href = url;
    });
</script>