@extends('layouts.main-app')

@section('title')

@section('content')
    @include('layouts.navbar')

    <div class="w-full h-full relative">
        <img class="absolute w-full h-96 object-cover" src="{{ asset('images/images/banner-blogs.png') }}"
            alt="age-limit-icon">
        <div class="relative text-center py-32">
            <h1 class="text-5xl text-white anton-regular">BLOGS</h1>
            <p class="text-white py-2"><a href="{{ url('/') }}" class="hover:text-[#ef5400]">HOME</a> / BLOGS</p>
        </div>

        <div class="px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-3 py-12 sm:py-24 container max-w-screen-xl mx-auto gap-8">
            <div class="grid col-span-1 lg:col-span-2">
                <div class="space-y-6 sm:space-y-8">
                    @foreach ($blogs as $blog)
                        <div class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
                            <div class="p-4 sm:p-6">
                                @if ($blog->image)
                                    <img class="w-full h-48 sm:h-72 object-cover rounded-lg" 
                                        src="{{ asset($blog->image) }}"
                                        alt="{{ $blog->title }}">
                                @endif

                                <h1 class="anton-regular text-xl sm:text-2xl py-2 mt-2">{{ strtoupper($blog->title) }}</h1>
                                <p class="text-sm sm:text-base text-gray-600">{{ \Carbon\Carbon::parse($blog->created_at)->format('F d, Y') }}</p>
                                <p class="py-2 text-sm sm:text-base">{!! Str::limit(strip_tags($blog->content), 250, '...') !!}</p>
                                <a href="{{ route('blogs.show', ['slug' => $blog->slug]) }}" 
                                   class="inline-block group">
                                    <div class="p-2 bg-orange-500 rounded-full hover:bg-orange-600 transition duration-300">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" class="fill-white transform group-hover:translate-x-1 transition-transform duration-300">
                                            <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path>
                                        </svg>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="mt-8 lg:mt-0">
                <div class="border-2 rounded-lg px-4 py-6 sm:px-6 bg-white">
                    <div class="max-w-md mx-auto">
                        <!-- Search Section -->
                        <div class="relative">
                            <form action="{{ route('blogs.search') }}" method="GET" onsubmit="return false;">
                                <input type="text" 
                                       id="search-input"
                                       name="query"
                                       placeholder="Search blogs..." 
                                       class="w-full px-4 py-3 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#ef5400] text-sm sm:text-base"
                                       oninput="filterBlogs()">
                                <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                        class="h-5 w-5 text-gray-400"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M11 19a8 8 0 100-16 8 8 0 000 16zm4.293-4.293l5.414 5.414" />
                                    </svg>
                                </button>
                            </form>
                        </div>

                        <!-- Latest Posts Section -->
                        <div class="py-4" id="blog-list">
                            <h1 class="font-semibold py-2 sm:py-4">Latest Post</h1>
                            <!-- Latest Post Items -->
                            <div class="space-y-4">
                                @foreach ($blogs->sortByDesc('created_at')->take(3) as $latestBlog)
                                    <div class="blog-item flex gap-3 sm:gap-8 py-2 sm:py-4" data-title="{{ $latestBlog->title }}">
                                        <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover" 
                                            src="{{ $latestBlog->image ? asset($latestBlog->image) : asset('images/images/business1.png') }}"
                                            alt="{{ $latestBlog->title }}">
                                        <div class="flex-1 min-w-0">
                                            <h1 class="font-semibold text-sm sm:text-base truncate">
                                                {{ $latestBlog->category ? $latestBlog->category->name : '' }}
                                            </h1>
                                            <p class="text-xs sm:text-sm text-gray-400">
                                                {{ \Carbon\Carbon::parse($latestBlog->created_at)->format('F d, Y') }}
                                            </p>
                                            <h1 class="text-sm sm:text-base line-clamp-2">{{ $latestBlog->title }}</h1>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <!-- Tags Section -->
                            <div class="mt-6">
                                <h1 class="font-semibold mb-4">Tags</h1>
                                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-4 w-full max-w-md mx-auto">
                                    @foreach ($categories as $category)
                                        <div class="border border-gray-300 p-2 sm:p-4 text-center text-sm sm:text-base truncate">
                                            {{ $category->name }}
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Advertisement Banner -->
                            <div class="py-4 flex justify-center">
                                <img class="w-full h-auto" 
                                    src="{{ asset('images/images/ads banner.png') }}"
                                    alt="blog topics banner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   {{-- Custome footer  layout for this page --}}
<div>
    <div class="pt-14 relative">
        <!-- Background Image -->
        <img class="w-full object-cover absolute top-0 left-0 z-0 h-full"
            src="{{ asset('images/images/tdt-newsletter-background.png') }}"
            alt="A striking visual of an orange backdrop paired with a white surface, creating a bold color contrast.">

        <!-- Content Wrapper -->
        <div class="relative flex flex-col lg:flex-row items-center justify-center py-2 pb-24 mb-10 gap-6 lg:gap-4 z-10 px-4 lg:px-8 text-center lg:text-left lg:bg-transparent">
            <!-- Sign-up Title -->
            <h1 class="text-white text-xl lg:text-2xl mb-2 lg:mb-0">
                Sign up for the news and deals
            </h1>

            <!-- Newsletter Heading -->
            <h1 class="text-black lg:text-white anton-regular text-3xl lg:text-5xl mb-4 lg:mb-0 whitespace-nowrap">
                NEWS<span class="lg:text-black text-[#ef5400]"> LETTER</span>
            </h1>

            <!-- Email Input -->
            <input type="email" name="email" placeholder="Enter your email"
                class="w-full max-w-sm lg:w-72 h-12 lg:h-16 rounded-lg py-2 px-4 text-gray-700 mb-4 lg:mb-0">

            <!-- Discover More Button -->
            <div class="w-full max-w-sm lg:w-auto">
                <a href="#discover-more"
                    class="bg-white text-lg font-normal px-6 py-3 rounded-xl flex items-center justify-center transition duration-300 gap-4 w-full lg:w-96 shadow-lg hover:bg-[#ef5400] group">
                    <div class="rounded-full bg-[#ef5400] p-2 group-hover:bg-white">
                        <img src="{{ asset('images/icons/icon-button-white.png') }}" alt="Discover More Icon"
                            class="w-6 h-6">
                    </div>
                    <p class="text-[#ef5400] group-hover:text-white">Discover More</p>
                </a>
            </div>
        </div>
    </div>


    <div class="container mx-auto flex flex-col lg:flex-row items-center lg:items-start pb-4 px-4 lg:px-0 ">
        <!-- Company Info Section -->
        <div class="flex-1 text-center lg:text-left mb-6 lg:mb-0">
            <img src="{{ asset('images/logo/tdt-powersteel-logo.png') }}" alt="tdt powersteel logo"
                class="mx-auto lg:mx-0 mb-4 lg:mb-2">
            <p class="py-2 text-sm lg:text-base">
                is one of the most reliable and trusted brands in the Philippine steel supply and distribution industry.
                Our goal is to provide premium quality and innovative solutions.
            </p>
        </div>

        <!-- Grid Line Divider - Hidden on small screens -->
        <img src="{{ asset('images/icons/grid-line.png') }}" alt="grid line"
            class="hidden md:block px-4 h-32 lg:h-44 mb-4 lg:mb-0">

        <!-- Contact Information Section -->
        <div class="flex-1 text-center lg:text-left mb-6 lg:mb-0">
            <h1 class="text-2xl lg:text-3xl"><span class="text-[#ef5400] py-2">Get</span> Connected</h1>
            <p class="py-2 text-sm lg:text-base w-full">
                Address: 1017 Vicente Cruz St. Sampaloc Manila, Philippines <br>
                Tel/Fax: (02) 8831 - 0000 / (02) 8230 - 2906 <br>
                Mobile: 0932 888 7777 <br>
                Email: TT
            </p>
        </div>

        <!-- Grid Line Divider - Hidden on small screens -->
        <img src="{{ asset('images/icons/grid-line.png') }}" alt="grid line"
            class="hidden md:block px-4 h-32 lg:h-44 mb-4 lg:mb-0">

        <!-- Business Hours Section -->
        <div class="flex-1 text-center lg:text-left">
            <h1 class="text-2xl lg:text-3xl"><span class="text-[#ef5400] py-2">Business</span> Hours</h1>
            <p class="py-2 text-sm lg:text-base">
                TDT Powersteel Corporation <br>
                Monday to Friday: 8:00am to 5:30pm <br>
                Saturday: Closed <br>
                Sunday: Closed
            </p>
        </div>
    </div>

    <div class="relative">
        <img class="w-full h-full object-cover absolute" src="{{ asset('images/images/background-socials.png') }}"
            alt="">
        <div class="relative anton-regular pt-6">
            <h1 class="text-white text-3xl text-center">FOLLOW ON <span class="text-[#ef5400]">SOCIAL MEDIA</span>
            </h1>
            <div class="flex justify-center gap-4 py-4">
                <img class="w-10 h-10" src="{{ asset('images/icons/icon-facebook.png') }}" alt="icon-facebook">
                <img class="w-10 h-10" src="{{ asset('images/icons/icon-linkedin.png') }}" alt="icon-linkedin">
                <img class="w-10 h-10" src="{{ asset('images/icons/icon-instagram.png') }}" alt="icon-instagram">
                <img class="w-10 h-10" src="{{ asset('images/icons/icon-pinterest.png') }}" alt="icon-pinterest">
            </div>
        </div>
    </div>
    <div class="container mx-auto py-4">
        <div class="flex flex-col lg:flex-row justify-between items-center">
            <div class="flex gap-4 mb-4 lg:mb-0">
                <a href="{{ url('/about-us') }}" class="text-sm lg:text-base">ABOUT</a>
                <a href="{{ url('/products') }}" class="text-sm lg:text-base">PRODUCT</a>
                <a href="{{ url('/blogs') }}" class="text-sm lg:text-base">BLOGS</a>

            </div>

            <div class="text-sm text-center lg:text-left">
                Copyright TDT Powersteel Corporation 2024, Designed & Developed by R Web Solutions
            </div>
        </div>
    </div>

</div>
{{-- 
    @include('layouts.footer') --}}

<script>
    function filterBlogs() {
        const query = document.getElementById('search-input').value.toLowerCase();
        const blogItems = document.querySelectorAll('.blog-item');

        blogItems.forEach(item => {
            const title = item.getAttribute('data-title').toLowerCase();
            if (title.includes(query)) {
                item.style.display = ''; // Show item
            } else {
                item.style.display = 'none'; // Hide item
            }
        });
    }
</script>

@endsection