@extends('layouts.main-app')

@section('title')

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

    <div class="container mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div>
                <!--Display Selected Product Item-->
                <img src="{{ asset('images/images/Angle Bar Img (SinglePage).png') }}" alt="Selected Product Item"
                    class="w-full h-auto object-cover rounded-lg">
            </div>
            <div class="py-14">
                <!--Display Selected Product Item-->
                <h1 class="anton-regular text-6xl py-2">ANGLE <span class="text-[#ef5400]">BAR</span></h1>
                <p>Powersteel's angle bar is really of excellent quality trusted by civil professionals and used in so many
                    different construction works. <span class="font-bold">Call us now for quotation</span></p>
                <div class="grid grid-cols-3 py-4 gap-8">
                    <div class="w-full">
                        <img src="{{ asset('images/images/anglebar_img1.png') }}" alt="Selected Product Item"
                            class="w-full h-auto object-cover rounded-lg">
                    </div>
                    <div class="w-full">
                        <img src="{{ asset('images/images/anglebar_img2.png') }}" alt="Selected Product Item"
                            class="w-full h-auto object-cover rounded-lg">
                    </div>
                    <div class="w-full">
                        <img src="{{ asset('images/images/anglebar_img3.png') }}" alt="Selected Product Item"
                            class="w-full h-auto object-cover rounded-lg">
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full pt-8 pb-52">
            <!-- Tab Navigation -->
            <div class="flex border-b">
                <button id="fullDescriptionTab" onclick="showTab('fullDescription')"
                    class="px-4 py-2 text-gray-800 border-b-2 border-[#ef5400]">
                    Full Description
                </button>
                <button id="additionalInfoTab" onclick="showTab('additionalInfo')"
                    class="px-4 py-2 text-gray-600 hover:text-gray-800 border-b-2 border-[#ef5400]">
                    Additional Information
                </button>
            </div>

            <!-- Tab Content -->
            <div id="fullDescription" class="p-4">
                <h2 class="text-xl font-semibold mb-2">Description</h2>
                <p class="text-gray-700">
                    Angle bar, also known as “L-bar”, “L-bracket” or “angle iron,” is a metal in the form of a right angle.
                    Steel angle bar is the most widely used structural steel by the construction industry because of its
                    very
                    economical cost. Structural steel angles are manufactured by rolling pre-heated blooms to form an angle
                    shape.
                    We make sure our angle bars are produced under strict quality controls conforming to ASTM A36
                    specification.
                    We offer equal and unequal angle steels according to the depth of legs and depending on the customer’s
                    requirement.
                    Steel angle bars are necessary for building power towers, trusses for roofing, communication towers,
                    engineering
                    projects, billboards, and other steel structure buildings. Steel angle bars could also be found in our
                    everyday
                    life like industrial shelves, classical coffee tables, chairs, waiting sheds, and so on, apart from
                    industrial
                    and engineering applications.
                </p>
            </div>

            <div id="additionalInfo" class="p-4 hidden">
                <h2 class="text-xl font-semibold mb-2">Additional Information</h2>
                <p class="text-gray-700">
                    Additional details about the product can go here. Include specifications, dimensions, usage tips, or
                    other
                    relevant information that would be useful for the customer.
                </p>
            </div>
            <div class="py-14">
                <h1 class="anton-regular text-3xl md:text-4xl lg:text-6xl text-center lg:text-left">RELATED PRODUCTS</h1>
                <div class="flex flex-col md:flex-row md:flex-wrap md:justify-center lg:justify-start gap-4 py-8">
                    <!-- Product Card 1 -->
                    <div
                        class="relative w-full max-w-xs md:max-w-[45%] lg:max-w-xs overflow-hidden rounded-lg border border-gray-300">
                        <img src="{{ asset('images/images/anglebar_img3.png') }}" alt="Aluminum Angle Bar"
                            class="w-full h-auto">
                        <div class="absolute bottom-0 w-full bg-[#ef5400] text-white text-center py-2">
                            Aluminum Angle Bar
                        </div>
                    </div>

                    <!-- Product Card 2 -->
                    <div
                        class="relative w-full max-w-xs md:max-w-[45%] lg:max-w-xs overflow-hidden rounded-lg border border-gray-300">
                        <img src="{{ asset('images/images/anglebar_img3.png') }}" alt="Stainless Steel Angle Bar"
                            class="w-full h-auto">
                        <div class="absolute bottom-0 w-full bg-[#ef5400] text-white text-center py-2">
                            Stainless Steel Angle Bar
                        </div>
                    </div>

                    <!-- Product Card 3 -->
                    <div
                        class="relative w-full max-w-xs md:max-w-[45%] lg:max-w-xs overflow-hidden rounded-lg border border-gray-300">
                        <img src="{{ asset('images/images/anglebar_img3.png') }}" alt="Equal Angle Bar"
                            class="w-full h-auto">
                        <div class="absolute bottom-0 w-full bg-[#ef5400] text-white text-center py-2">
                            Equal Angle Bar
                        </div>
                    </div>
                </div>
            </div>

        </div>

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

    <script>
        function showTab(tab) {
            // Hide both sections initially
            document.getElementById('fullDescription').classList.add('hidden');
            document.getElementById('additionalInfo').classList.add('hidden');
            document.getElementById('fullDescriptionTab').classList.remove('border-[#ef5400]', 'text-gray-800');
            document.getElementById('additionalInfoTab').classList.remove('border-[#ef5400]', 'text-gray-800');

            // Show the selected tab and style the active button
            if (tab === 'fullDescription') {
                document.getElementById('fullDescription').classList.remove('hidden');
                document.getElementById('fullDescriptionTab').classList.add('border-[#ef5400]', 'text-gray-800');
            } else {
                document.getElementById('additionalInfo').classList.remove('hidden');
                document.getElementById('additionalInfoTab').classList.add('border-[#ef5400]', 'text-gray-800');
            }
        }
    </script>
@endsection