@extends('frontend.layouts.app')
@section('title', app()->getLocale() === 'np' ? $service->name_np : $service->name_en)
@section('meta', app()->getLocale() === 'np' ? $service->description_np : $service->description_en)
@section('content')

    <!-- banner-section -->
    <section class="relative">
        <div class="mb-10">
            <img src="{{ asset('assets/images/become-an-agent/breadcrumb-serv.jpg') }}"
                alt="{{ app()->getLocale() === 'np' ? $service->name_np : $service->name_en }}"
                class="h-60 w-full object-cover" />
        </div>
        <div class="absolute w-full top-20">
            <div class="flex flex-col space-y-8 ml-10">
                <h3 class="text-2xl md:text-4xl font-extrabold text-white">
                    {{ app()->getLocale() === 'np' ? $service->name_np : $service->name_en }}
                </h3>
                <div class="flex space-x-5 items-center">
                    <a href="{{ route('homepage') }}"
                        class="text-white font-bold">{{ __('service-detail.breadcrumb.home') }}</a>
                    <p class="text-white text-base fony-bold hover:cursor-pointer">></p>
                    <a href="{{ route('services') }}"
                        class="text-white font-bold">{{ __('service-detail.breadcrumb.services') }}</a>
                    <p class="text-white text-base fony-bold hover:cursor-pointer">></p>
                    <a href="{{ route('serviceDetail', $service->slug) }}" class="text-accent font-bold">
                        {{ app()->getLocale() === 'np' ? $service->name_np : $service->name_en }}
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <section class="overflow-x-hidden">
        <div class="p-4 md:ml-8 lg:my-4 lg:mx-20 lg:mb-2">
            <div class="flex flex-col items-center">
                <h1 class="font-bold text-accent uppercase text-base lg:text-lg tracking-wider">
                    {{ app()->getLocale() === 'np' ? 'हुलास रेमिटेन्स बारेमा' : 'About Hulas Remittance' }}
                </h1>
                <p class="text-2xl text-black font-bold md:text-4xl text-center mt-3">
                    {{ app()->getLocale() === 'np' ? $service->name_np : $service->name_en }}
                </p>

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

    <section class="flex flex-col gap-10 px-6 md:px-10 lg:px-20 xl:px-40 max-w-6xl w-full mx-auto my-10">
        <!-- Service Content -->
        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">

            <!-- Image Section -->
            @isset($service->file)
                <div class="w-full lg:w-1/2 flex justify-center">
                    <img src="{{ asset('storage/' . $service->file) }}"
                        alt="{{ app()->getLocale() === 'np' ? $service->name_np : $service->name_en }}"
                        class="w-full max-w-md h-80 rounded-md object-cover bg-gray-100"
                        onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder.webp') }}';" />
                </div>
            @endisset

            <!-- Text Content -->
            <div class="w-full lg:w-1/2 space-y-6">
                <p class="text-gray-600 text-base md:text-lg lg:text-justify">
                    @if (app()->getLocale() === 'np' && isset($service->description_np))
                        {!! $service->description_np !!}
                    @elseif(isset($service->description_en))
                        {!! $service->description_en !!}
                    @else
                        {{ __('service-detail.no_description') }}
                    @endif
                </p>
            </div>

        </div>
    </section>



    <!-- How it works section -->
    <div class="p-4 md:ml-8 lg:my-4 lg:mx-20 lg:mb-2">
        <div class="flex flex-col items-center">
            <h1 class="font-bold text-accent uppercase text-base lg:text-lg tracking-wider">
                {{ __('service-detail.how_it_works.title') }}
            </h1>
            <p class="text-2xl text-black font-bold md:text-4xl text-center mt-3">
                {{ __('service-detail.how_it_works.subtitle') }}
            </p>
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl line-clamp-3">
                {{ __('service-detail.how_it_works.description') }}
            </p>
        </div>
    </div>
    <section class="flex justify-center ">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4 md:px-0 mx-10 sm:m-20 xl:mx-40 items-center">

            @isset($service->translation_names)
                @foreach ($service->translation_names as $index => $name)
                    @php
                        $hasLink =
                            isset($service->external_link) &&
                            isset($service->external_link[$index]) &&
                            !empty($service->external_link[$index]);
                        $cardTag = $hasLink ? 'a' : 'div';
                        $cardAttr = $hasLink ? 'href="' . $service->external_link[$index] . '" target="_blank"' : '';

                        // Localized name
                        $localizedName =
                            app()->getLocale() === 'np' ? $service->translation_names_np[$index] ?? $name : $name;

                        // Localized description
                        if (app()->getLocale() === 'np' && isset($service->translation_descriptions_np)) {
                            $localizedDesc =
                                $service->translation_descriptions_np[$index] ??
                                ($service->translation_descriptions[$index] ?? null);
                        } else {
                            $localizedDesc = $service->translation_descriptions[$index] ?? null;
                        }
                    @endphp

                    <div
                        class="relative bg-white rounded-2xl shadow-md p-8 hover:shadow-xl border border-gray-100
                            transition-transform ease-in-out duration-300 max-w-[420px] h-auto no-underline">

                        <!-- Icon -->
                        <div
                            class="flex items-center justify-center w-16 h-16 bg-accent/10 text-accent rounded-full mx-auto mb-4">
                            @isset($service->translation_icons)
                                @if (isset($service->translation_icons[$index]))
                                    <img src="{{ asset('storage/' . $service->translation_icons[$index]) }}"
                                        alt="{{ $localizedName }}" class="w-10 h-10 object-contain">
                                @endif
                            @endisset
                        </div>

                        <!-- Title -->
                        <h2 class="text-lg md:text-xl text-black font-semibold text-center mb-4">
                            {{ $localizedName }}
                        </h2>

                        <!-- Description with Read More / Less -->
                        @if ($localizedDesc)
                            <div x-data="{ expanded: false }" class="text-center">
                                <!-- limit to ~120 chars when collapsed -->
                                <p class="text-gray-600 text-base md:text-base">
                                    <span
                                        x-text="expanded ? `{!! strip_tags($localizedDesc) !!}`.trim() : `{!! \Illuminate\Support\Str::limit(strip_tags($localizedDesc), 400) !!}`.trim()"></span>
                                </p>
                                <button type="button" @click="expanded = !expanded"
                                    class="mt-2 text-accent font-medium hover:underline focus:outline-none text-sm">
                                    <span x-text="expanded ? '{{ __('Read Less') }}' : '{{ __('Read More') }}'"></span>
                                </button>
                            </div>
                        @endif

                        <!-- Optional arrow in bottom-right corner -->
                        @if ($hasLink)
                            <a {!! $cardAttr !!} class="absolute bottom-4 right-4">
                                <div class="w-8 h-8 flex items-center justify-center rounded-full bg-accent/10">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-black" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17 7l-10 10m0-10h10v10" />
                                    </svg>
                                </div>
                            </a>
                        @endif
                    </div>
                @endforeach
            @endisset
        </div>
    </section>

@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush