@extends('GoBizOriginal::Website.layouts.index', [
    'nav' => true,
    'banner' => false,
    'footer' => true,
    'cookie' => true,
    'setting' => true,
    'title' => __('Directory Listing'),
])

@section('content')
    <section class="pt-8 pb-28">
        <div class="container mx-auto px-4">

            <!-- Top Badge -->
            <div class="flex justify-center mb-6">
                <div
                    class="
                bg-{{ $template_config->template_color }}-100
                text-{{ $template_config->template_color }}-600
                px-2 py-1 text-xs font-bold inline-block rounded
            ">
                    {{ __('Directory') }}
                </div>
            </div>

            <!-- Heading -->
            <h1 class="font-heading text-center text-4xl lg:text-5xl font-bold mb-4 max-w-3xl mx-auto">
                {{ __('Explore Our Professional Directory') }}
            </h1>

            <!-- Subtitle -->
            <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">
                {{ __('Browse verified profiles and discover skilled professionals across various industries.') }}
            </p>

            <!-- Search Bar -->
            <form method="GET" action="" class="max-w-md mx-auto mb-10">
                <div class="flex items-center gap-2">
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="{{ __('Search profiles or stores...') }}"
                        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">

                    <button type="submit"
                        class="px-4 py-2 bg-{{ $template_config->template_color }}-500 text-white rounded-lg hover:bg-{{ $template_config->template_color }}-600">
                        {{ __('Search') }}
                    </button>
                </div>
            </form>

            @if ($business_cards->count() > 0)

                <div class="flex flex-wrap -m-4">

                    @foreach ($business_cards as $businessCard)
                        <div class="w-full md:w-1/4 lg:w-1/3 p-4">
                            <a href="{{ route('profile', $businessCard->card_url) }}" target="_blank">

                                <div
                                    class="bg-{{ $template_config->template_color }}-50 p-8 rounded-lg hover:shadow transition h-full flex flex-col">

                                    <!-- Profile Image -->
                                    <div class="w-full bg-white rounded mb-6 flex items-center justify-center overflow-hidden"
                                        style="height: 223px; background-color: #DBDBDB;">
                                        <img src="{{ asset(file_exists(public_path($businessCard->profile)) ? asset($businessCard->profile) : asset('images/default-profile.jpg')) }}"
                                            alt="{{ $businessCard->title }}"
                                            class="object-contain h-full w-full">
                                    </div>

                                    <!-- Title -->
                                    <h3
                                        class="text-{{ $template_config->template_color }}-600 text-xl font-bold text-center">
                                        {{ $businessCard->title }}
                                    </h3>

                                    <!-- Role Type -->
                                    <p class="font-bold text-center mb-2">
                                        {{ $businessCard->card_type == 'vcard' ? __('vCard') : __('Store') }}
                                    </p>

                                    <!-- Description (Single line with tooltip) -->
                                    <p class="text-gray-500 text-center mb-4 truncate"
                                        title="{{ $businessCard->sub_title }}">
                                        {{ $businessCard->sub_title }}
                                    </p>

                                </div>

                            </a>
                        </div>
                    @endforeach

                </div>

                <!-- Pagination -->
                @if ($business_cards->lastPage() > 1)
                    <div class="text-center mt-10">
                        {{ $business_cards->links('vendor.pagination.directory') }}
                    </div>
                @endif
            @else
                <div class="flex justify-center py-20">
                    <div class="text-center">
                        <h3 class="text-2xl font-bold text-gray-700">
                            {{ __('No Profiles / Stores Found!!!') }}
                        </h3>
                    </div>
                </div>
            @endif

        </div>
    </section>

    <style>
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
@endsection