@extends('frontend.layouts.partials.app')
@section('title', 'Rate')
@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">{{ $rate->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">Rates</a>
                    <p class="tracking-tight">>></p>
                    <a href="#" class="font-bold">{{ $rate->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 Rates</h2>
                @foreach ($ratesList as $item)
                    <a href="{{ route('rate.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">
            <!-- Rate Description and Image -->
            <div class="flex flex-col lg:flex-row gap-8">
                <div class="lg:w-2/3 p-4">
                    {!! $rate->description !!}
                </div>
                <div class="lg:w-1/3 flex justify-center">
                    <img src="{{ asset('storage/' . $rate->photo) }}" class="w-full max-w-[300px]  h-full md:max-h-[250px]"
                        alt="Rate Image" />
                </div>
            </div>

            <!-- Additional Content (Rate Image and Features) -->
            @isset($rate->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">
                            Rate Image
                        </h2>
                        <img src="{{ asset('storage/' . $rate->image) }}" class="w-full max-w-[600px]" alt="Rate Visual" />
                    </div>
                    <div class="lg:w-1/2">
                        @if ($rate->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 ($rate->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($rate->featureRequirementsDetails) && $rate->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 ($rate->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($rate->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>{{ $rate->name }}</strong>.
                    </p>
                    <div class="flex justify-start">
                        <a href="{{ asset(\Storage::disk('uploads')->url($rate->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" id="document-section">
    {{-- Search Form --}}
    <div x-data="{
        search: '{{ request('search') }}',
        timeout: null,
        updateQuery() {
            clearTimeout(this.timeout);
            if (this.search.length >= 3 || this.search.length === 0) {
                this.timeout = setTimeout(() => {
                    const url = new URL(window.location.href);
                    if (this.search.length === 0) {
                        url.searchParams.delete('search');
                    } else {
                        url.searchParams.set('search', this.search);
                    }
                    window.location.href = url.toString() + '#document-section';
                }, 500);
            }
        }
    }" class="w-full max-w-3xl mx-auto mb-6">
        <input type="text" x-model="search" x-on:input="updateQuery" placeholder="Search documents..."
            class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#004d6e] focus:border-transparent text-gray-700 placeholder-gray-400" />
    </div>

    @if ($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-0 xl:pr-20 animate-slide-in">
                @foreach ($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">
                        <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>

                        <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>
                @endforeach
            </div>

            <!-- PAGINATION -->
            <div class="pt-6">
                {{ $featureFilesDetails->appends(request()->query())->onEachSide(1)->links('vendor.pagination.tailwind-custom') }}
            </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