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

@section('content')
    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">
                        {{ app()->getLocale() == 'np' ? $pages->name_np : $pages->name_en }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">Home</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <p class="text-white font-bold hover:cursor-pointer">
                            {{ app()->getLocale() == 'np' ? $pages->name_np : $pages->name_en }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <!-- Heading Section -->
        <div class="text-center mx-auto max-w-8xl pt-10 mb-10 md:mb-12">
            <!-- Subtitle -->
            <p
                class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                Navigate Fast
            </p>

            <!-- Main Title -->
            <h2
                class="max-w-lg mb-6 font-sans text-2xl text-center leading-none lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                <span class="relative inline-block text-[#5da174]">
                    <svg viewBox="0 0 52 24" fill="currentColor"
                        class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                        <defs>
                            <pattern id="page-builder-pattern" x="0" y="0" width=".135" height=".30">
                                <circle cx="1" cy="1" r=".7"></circle>
                            </pattern>
                        </defs>
                        <rect fill="url(#page-builder-pattern)" width="52" height="24"></rect>
                    </svg>
                    <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                        {{ app()->getLocale() == 'np' ? $pages->name_np : $pages->name_en }}
                    </span>
                </span>
            </h2>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto line-clamp-3 text-gray-600 font-medium">
                Access important pages and resources quickly to explore our website with ease.
            </p>
        </div>

        @isset($pages)
            <div class="m-6 max-w-8xl mx-auto">
                <!-- Section 1 -->

                <div class="flex flex-col items-start">

                    <!-- Content -->
                    <div class="flex-1 flex m-6 text-justify">
                        {!! app()->getLocale() == 'np' ? $pages->description_np : $pages->description_en !!}
                    </div>


                    <!-- Image -->
                    <div class="mx-4 flex-1 flex flex-row flex-wrap justify-center lg:justify-left  items-center text-center ">
                        @php
                            $images = is_string($pages->images) ? json_decode($pages->images, true) : $pages->images;
                        @endphp
                        @if (!empty($images))
                            @foreach ($images as $image)
                                <img class="rounded-xl object-contain max-w-xs h-auto p-2  " src="{{ asset($image) }}"
                                    alt="{{ $pages->name_en }}" />
                            @endforeach
                        @endif
                    </div>
                </div>

                <!-- Downloads-->
                @php
                    $files = json_decode($pages->documents, true);
                @endphp

                @if (!empty($files))
                    <div class="w-full">
                        <h3 class="text-primary p-3 font-bold text-lg">{{ __('media-and-stories-detail.downloads') }}</h3>
                        <div id="iconContainer" class="flex flex-col justify-center gap-6">

                            @foreach ($files as $file)
                                @php
                                    $filename = basename($file);
                                    $extension = pathinfo($filename, PATHINFO_EXTENSION);
                                    $filepath = public_path($file);
                                    $filesize = file_exists($filepath)
                                        ? round(filesize($filepath) / 1024 / 1024, 2) . ' MB'
                                        : '';
                                @endphp

                                <a href="{{ asset($file) }}" download
                                    class="download-item flex flex-col justify-between p-3 bg-white rounded-xl shadow hover:shadow-md transition duration-300 w-full"
                                    data-filename="{{ $filename }}" data-size="{{ $filesize }}">
                                    <div class="file-info flex flex-row justify-between items-center">
                                        <div>
                                            <span class="filename font-semibold text-sm">{{ $filename }}</span>
                                        </div>
                                        <button type="button"
                                            class="download-btn px-4 py-2 tracking-wide text-white bg-blue-600 rounded hover:bg-blue-700 transition text-sm"
                                            aria-label="Download {{ $filename }}">
                                            Download
                                        </button>
                                    </div>
                                </a>
                            @endforeach

                        </div>
                    </div>
                @endif
            </div>
        @endisset
    </section>
@endsection

@push('scripts')
    @include('frontend.layouts.partials.documents-format')
@endpush