@extends('frontend.layouts.partials.app')
@section('title', 'Service')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>

    <section class="h-[250px] px-4 md:px-6 lg:h-[300px] flex items-center bg-gradient-to-tr from-[#22c1c3] to-[#004d6e]">
        <div class="w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-center">
            <div class="flex flex-col space-y-4 text-white text-center lg:text-left">
                <p class="uppercase text-3xl sm:text-4xl lg:text-5xl font-extrabold px-4 md:px-10">{{ $service->name }}
                </p>
                <div
                    class="flex justify-center lg:justify-start space-x-2 text-lg sm:text-xl lg:text-2xl items-center px-4 md:px-10">
                    <a href="{{ route('homepage') }}" class="capitalize font-semibold">Home</a>
                    <p class="tracking-tight">>></p>
                    <a href="{{ URL::previous() }}" class="capitalize font-semibold">Services</a>
                    <p class="tracking-tight">>></p>
                    <a href="#" class="font-bold">{{ $service->name }}</a>
                </div>
            </div>
            <img src="{{ asset('assets/img/agricultureLoan.jpg') }}"
                class="hidden lg:block border-2 rounded-xl lg:w-[250px] xl:w-[300px] lg:mt-6 lg:mr-10" alt="" />
        </div>
    </section>



    <section class="flex flex-col lg:flex-row gap-6 px-4 sm:px-8 lg:px-20 xl:px-40 py-10">
        <!-- Left Menu -->
        <div class="basis-full lg:basis-[30%]">
            <div class="bg-white p-6 rounded-xl shadow-md hidden  lg:block">
                <h2 class="text-2xl font-bold text-gray-800 mb-6">Other Services</h2>
                @foreach ($servicesList as $item)
                    <a href="{{ route('service.detail', $item->slug) }}"
                        class="flex items-center justify-between bg-gray-50 hover:bg-blue-50 rounded-xl px-4 py-3 mb-3 transition-all duration-300 group border-l-4 border-brandBlue">
                        <span class="text-sm font-semibold text-gray-700 group-hover:text-blue-600 line-clamp-2">
                            {{ $item->name }}
                        </span>
                        <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors duration-300"
                            fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                @endforeach
            </div>
        </div>

        <!-- Main Content -->
        <div class="w-full lg:w-3/4 space-y-12">
            <!-- Service Description and Image -->
            <div class="flex flex-col lg:flex-row gap-8">
                <div class="lg:w-2/3 p-4">
                    {!! $service->description !!}
                </div>
                <div class="lg:w-1/3 flex justify-center">
                    <img src="{{ asset('storage/' . $service->photo) }}"
                        class="w-full max-w-[300px]  h-full md:max-h-[250px]" alt="Service Image" />
                </div>
            </div>

            <!-- Additional Content (Service Image and Features) -->
            @isset($service->image)
                <div class="flex flex-col lg:flex-row gap-8">
                    <div class="lg:w-1/2">
                        <h2 class="text-[#004d6e] font-bold uppercase border-2 p-2 mb-4 border-[#004d6e] rounded-full w-fit">
                            Service Image
                        </h2>
                        <img src="{{ asset('storage/' . $service->image) }}" class="w-full max-w-[600px]"
                            alt="Service Visual" />
                    </div>
                    <div class="lg:w-1/2">
                        @if ($service->featurePointsDetails->isNotEmpty())
                            <h3
                                class="text-[#004d6e] font-bold uppercase border-2 p-2 border-[#004d6e] rounded-full w-fit mb-4">
                                Salient Features
                            </h3>
                            <ul class="space-y-3">
                                @foreach ($service->featurePointsDetails as $featurePoint)
                                    <li class="bg-gray-100 p-3 rounded-md list-none">{{ $featurePoint->feature_point_name }}
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                </div>
            @endisset
        </div>
    </section>

    <section class="flex flex-col lg:flex-row gap-10 lg:px-24 py-12">
        @if (isset($service->featureRequirementsDetails) && $service->featureRequirementsDetails->isNotEmpty())
            <div class="w-full lg:w-1/4 p-6">
                <h2
                    class="w-56 flex justify-center text-[#004d6e] font-bold uppercase border-2 p-2 border-[#004d6e] rounded-l-full rounded-tr-full">
                    Required Documents
                </h2>
                <ul class="mt-8 space-y-4">
                    @foreach ($service->featureRequirementsDetails as $featureRequirement)
                        <li class="flex items-center space-x-3">
                            <img src="{{ asset('assets/img/hand.png') }}" class="w-6 h-6" alt="hand icon" />
                            <span class="text-gray-800">{{ $featureRequirement->feature_requirement_name }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        @isset($service->file)
            <div class="w-full lg:w-3/4 space-y-10">
                <div class="bg-white rounded-xl  p-6">
                    <h2
                        class="w-44 flex justify-center text-[#004d6e] font-bold uppercase border-2 p-2 mb-4 border-[#004d6e] rounded-l-full rounded-tr-full">
                        Download Here
                    </h2>
                    <p class="text-gray-700 mb-6 text-sm md:text-base">
                        Please click below to download the file related to <strong>{{ $service->name }}</strong>.
                    </p>
                    <div class="flex justify-start">
                        <a href="{{ asset(\Storage::disk('uploads')->url($service->file)) }}" target="_blank" download
                            class="transition transform hover:scale-105">
                            <img src="{{ asset('assets/img/folder.png') }}" class="w-28 sm:w-32 cursor-pointer"
                                alt="Download File" />
                        </a>
                    </div>
                </div>
            </div>
        @endisset
    </section>


    <section class="p-5 lg:pl-10 flex flex-col space-y-12">
        @if (isset($service->featureFilesDetails) && $service->featureFilesDetails->isNotEmpty())
            <div class="flex flex-col space-y-5">
                <h3
                    class="w-44 flex justify-center text-[#004d6e] font-bold uppercase border-2 p-2 border-[#004d6e] rounded-l-full rounded-tr-full animate-fade-in-up">
                    Documents
                </h3>
                <div class="grid gap-3 grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 pr-20 animate-slide-in">
                    @forelse ($service->featureFilesDetails as $featureFile)
                        <div x-data="{
                            hover: false,
                            fileType: (() => {
                                const file = '{{ $featureFile->product_file_path }}';
                                if (file.endsWith('.pdf')) return 'pdf';
                                if (file.endsWith('.docx') || file.endsWith('.doc')) return 'word';
                                if (file.endsWith('.jpg') || file.endsWith('.png')) return 'image';
                                if (file.endsWith('.zip') || file.endsWith('.rar')) return 'archive';
                                return 'default';
                            })()
                        }" @mouseenter="hover = true" @mouseleave="hover = false"
                            class="w-full p-6 bg-white border border-gray-200 rounded-lg shadow-lg hover:shadow-2xl transition-transform duration-300 ease-in-out transform hover:scale-105 hover:rotate-1">
                            <!-- File Icon and Name -->
                            <div class="flex items-center mb-4 animate-fade-in">
                                <i
                                    :class="{
                                        'fas fa-file-pdf text-red-500 text-3xl': fileType === 'pdf',
                                        'fas fa-file-word text-blue-500 text-3xl': fileType === 'word',
                                        'fas fa-file-image text-green-500 text-3xl': fileType === 'image',
                                        'fas fa-file-archive text-yellow-500 text-3xl': fileType === 'archive',
                                        'fas fa-file-alt text-gray-500 text-3xl': fileType === 'default'
                                    }"></i>
                                <h5 class="ml-4 text-xl font-bold text-gray-900">{{ $featureFile->product_file_name }}
                                </h5>
                            </div>

                            <!-- FeatureFile Link -->
                            <a target="__blank"
                                href="{{ asset(\Storage::disk('uploads')->url($featureFile->product_file_path)) }}"
                                class="relative inline-flex items-center justify-center w-full px-5 py-3 text-sm font-medium text-white bg-brandBlue rounded-lg overflow-hidden group transition-all duration-300 ease-out hover:bg-blue-600">
                                <i
                                    class="fas fa-download text-xl transition-transform duration-300 ease-in-out transform group-hover:-translate-x-8"></i>
                                <span
                                    class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out ml-8">
                                    <span>Download</span>
                                </span>
                            </a>
                        </div>
                    @empty
                        <!-- No FeatureFiles Message -->
                        <div
                            class="col-span-full text-center flex flex-col items-center justify-center h-64 animate-bounce-in">
                            <h3 class="text-lg text-gray-500 mb-4">We're preparing new content for you. It will be
                                available
                                here
                                soon.</h3>
                        </div>
                    @endforelse
                </div>
            </div>
        @endif
    </section>

    <section class="hidden relative mt-20 lg:block justify-center items-center">
        <img src="{{ asset('assets/img/background_2.jpg') }}" class="h-[450px] w-full" alt="" />
        <div class="absolute top-10 px-10 w-full">
            <div class="flex flex-col space-y-8 text-center justify-center mx-auto w-full items-center">
                <h2 class="text-white text-4xl font-bold text-center">Contact Us</h2>
                <p class="text-white text-xl max-w-3xl text-center mx-auto">

                </p>

                <div class=" bg-white text-[#333] p-10 rounded-lg items-center">
                    <div class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 lg:items-center">
                        <div class="flex space-x-5">
                            <img src="{{ asset('assets/img/email_me.png') }}" class="w-23 h-20" alt="" />
                            <div class="flex flex-col space-y-3">
                                <h4 class="uppercase text-xl font-bold">Email Address</h4>
                                <p class="max-w-lg">
                                    Reach out to us for any inquiries, support, or feedback. <br>
                                    info@goodwill.net.np <br>
                                    contact@goodwill.net.np <br>
                                </p>

                            </div>
                        </div>
                        <div class="flex space-x-5">
                            <img src="{{ asset('assets/img/calling.png') }}" class="w-20 h-20" alt="" />
                            <div class="flex flex-col space-y-3">
                                <h4 class="uppercase text-xl font-bold">Phone Number</h4>
                                <p class="max-w-lg">
                                    Get in touch through our contact form, email, or phone, and we'll respond promptly.
                                    <br>
                                    01-4544039 <br>
                                </p>
                            </div>
                        </div>
                        <div class="flex space-x-5">
                            <img src="{{ asset('assets/img/socials.png') }}" class="w-23 h-20" alt="" />
                            <div class="flex flex-col space-y-3">
                                <h4 class="uppercase text-xl font-bold">Social Community</h4>
                                <p class="max-w-lg">
                                    We're here to assist you and ensure you have the best experience possible. <br>
                                    <!-- social -->
                                    @if (isset($settings->facebook_link) ||
                                            isset($settings->instagram_link) ||
                                            isset($settings->tiktok_link) ||
                                            isset($settings->medium_link) ||
                                            isset($settings->linkedin_link))
                                        <div class="items-center justify-center flex space-x-2 pr-3 mt-4">
                                            @if (isset($settings->facebook_link))
                                                <div
                                                    class="flex items-center justify-center w-6 h-6  hover:cursor-pointer hover:bg-gray-200 transition ease-in-out duration-200">
                                                    <a href="{{ $settings->facebook_link }}">
                                                        <img src="{{ asset('assets/img/fb.png') }}"
                                                            class="w-5 h-5 md:w-5 md:h-5" alt="" />
                                                    </a>
                                                </div>
                                            @endif
                                            @if (isset($settings->instagram_link))
                                                <div
                                                    class="flex items-center justify-center w-6 h-6  hover:cursor-pointer hover:bg-gray-200 transition ease-in-out duration-200">
                                                    <a href="{{ $settings->instagram_link }}"><img
                                                            src="{{ asset('assets/img/instagram.png') }}"
                                                            class="w-5 h-5 md:w-5 md:h-5" alt="" /></a>
                                                </div>
                                            @endif
                                            @if (isset($settings->tiktok_link))
                                                <div
                                                    class="flex items-center justify-center w-6 h-6  hover:cursor-pointer hover:bg-gray-200 transition ease-in-out duration-200">
                                                    <a href="{{ $settings->tiktok_link }}">
                                                        <img src="{{ asset('assets/img/tik-tok.png') }}"
                                                            class="w-5 h-5 md:w-5 md:h-5" alt="" />
                                                    </a>
                                                </div>
                                            @endif
                                            @if (isset($settings->medium_link))
                                                <div
                                                    class="flex items-center justify-center w-6 h-6  hover:cursor-pointer hover:bg-gray-200 transition ease-in-out duration-200">
                                                    <a href="{{ $settings->medium_link }}">
                                                        <img src="{{ asset('assets/img/medium.png') }}"
                                                            class="w-5 h-5 md:w-5 md:h-5" alt="" />
                                                    </a>
                                                </div>
                                            @endif
                                            @if (isset($settings->linkedin_link))
                                                <div
                                                    class="flex items-center justify-center w-6 h-6  hover:cursor-pointer hover:bg-gray-200 transition ease-in-out duration-200">
                                                    <a href="{{ $settings->linkedin_link }}">
                                                        <img src="{{ asset('assets/img/linkedin.png') }}"
                                                            class="w-5 h-9 md:w-5 md:h-5" alt="" />
                                                    </a>
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection