@extends('frontend.layouts.app')

@section('title', $title)

@section('meta')
    <meta property="og:title" content="{{ $og_title ?? $title ?? config('app.name') }}" />
    <meta property="og:description" content="{{ $og_description ?? '' }}" />
    <meta property="og:image" content="{{ asset($og_image ?? 'default-og-image.jpg') }}" />
    <meta name="description" content="{{ $meta_description ?? '' }}">
    <meta name="keywords" content="{{ $meta_keyword ?? '' }}">
@endsection


@push('style')
    <style>
        li a.active {
            font-weight: bolder !important;
        }

        .agent-btn {
            background-color: #fff;
            border: 1px solid #dcdcdc;
            color: #333;
            font-weight: 500;
            border-radius: 6px;
            padding: 5px 12px;
            transition: all 0.2s ease-in-out;
        }

        .agent-btn:hover {
            background-color: #f5f5f5;
            border-color: #c0c0c0;
            color: #000;
            text-decoration: none;
        }
    </style>

@endpush





@section('content')

    @include('frontend.layouts.includes.breadcrumb', ['links' => [[$title => route('ads.search')]]])


    <!-- ======================= Ads Listings Start  ============================ -->
    <div class="listings_section pt-2 pb-3">
        <div class="container">
            <div class="bg-light rounded-1 shadow-sm">
                <div class="listing_heading p-3 border-bottom">
                    <div class="d-flex align-items-center justify-content-between">
                        <!-- location -->
                        <div>
                            <div class="select_location">
                                <button type="button" class="border-0 bg-transparent" data-bs-toggle="modal"
                                    data-bs-target="#locationModal">
                                    <i class="fa fa-location-dot me-2"></i>
                                    {{ $location->name ?? 'Ghana' }}
                                </button>
                            </div>
                        </div>
                        <!-- category -->
                        <div class="select_category">
                            <button type="button" class="border-0 bg-transparent" data-bs-toggle="modal"
                                data-bs-target="#categoryModal">
                                <i class="fa fa-tag me-2"></i>
                                @if(!empty($scategory))

                                    {{ $scategory->name }}
                                @elseif(!empty($category))
                                    {{ $category->name }}
                                @else
                                    All Category
                                @endif
                            </button>
                        </div>
                        <!-- search -->
                        <div class="d-block d-lg-none">
                            <button type="button" class="btn btn-light" data-bs-toggle="offcanvas"
                                data-bs-target="#filterOffcanvas" aria-controls="filterOffcanvas">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="lucide lucide-sliders-horizontal-icon lucide-sliders-horizontal">
                                    <line x1="21" x2="14" y1="4" y2="4" />
                                    <line x1="10" x2="3" y1="4" y2="4" />
                                    <line x1="21" x2="12" y1="12" y2="12" />
                                    <line x1="8" x2="3" y1="12" y2="12" />
                                    <line x1="21" x2="16" y1="20" y2="20" />
                                    <line x1="12" x2="3" y1="20" y2="20" />
                                    <line x1="14" x2="14" y1="2" y2="6" />
                                    <line x1="8" x2="8" y1="10" y2="14" />
                                    <line x1="16" x2="16" y1="18" y2="22" />
                                </svg>
                            </button>
                        </div>

                        <div class="d-none d-lg-block w-50">
                            <div class="listing_search">
                                <form action="{{ request()->fullUrl() }}" method="get">

                                    @if(!empty(request('sort_by')))
                                        <input type="hidden" name="sort_by" value="{{ request('sort_by') }}">
                                    @endif

                                    @if(!empty(request('filter_by')))
                                        @foreach(request('filter_by') as $filter_by)
                                            <input type="hidden" name="filter_by[]" value="{{ $filter_by }}">
                                        @endforeach
                                    @endif

                                    <div class="input-group">
                                        <input type="text" name="search" id="search"
                                            class="form-control shadow-none rounded-pill rounded-end-0" required
                                            placeholder="What are you looking for?"
                                            value="{{ request()->get('search') ?? '' }}">
                                        <button type="submit" class="btn btn-primary rounded-pill rounded-start-0">
                                            <i class="fa fa-search text-white"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="container">
            <div class="bg-white">
                <div class="">
                    <div class="row">

                        <!-- listings ads -->
                        <div class="col-lg-9">
                            @foreach($users as $agent)
                                <div class="card my-3 shadow-sm border-0" style="border-radius: 8px; overflow: hidden;">
                                    <a href="{{ route('seller.shop', [$agent->id, $agent->name]) }}"
                                        class="text-decoration-none text-dark">
                                        <div class="d-flex flex-column flex-md-row">

                                            {{-- Profile Image --}}
                                            <div class="flex-shrink-0" style="width: 150px;">
                                                <img src="{{ getPhoto($agent->image) }}" alt="{{ $agent->name }}" class="w-100"
                                                    style="aspect-ratio: 1/1; object-fit: cover;">
                                            </div>

                                            {{-- Info Section --}}
                                            <div class="p-3 flex-grow-1 small">
                                                <h6 class="fw-bold mb-1">{{ $agent->name }}</h6>
                                                <p class="text-muted mb-2">{{ $agent->company_name }}</p>

                                                {{-- Properties --}}
                                                <div class="d-flex align-items-center mb-2 flex-wrap">
                                                    <span class="badge bg-primary me-2 mb-1">
                                                        {{ number_format($agent->ads_count) }} Ads
                                                    </span>
                                                </div>

                                                {{-- Actions --}}
                                                <div>
                                                    <a href="tel:{{ $agent->phone }}"
                                                        class="btn btn-sm me-2 d-inline-flex align-items-center agent-btn">
                                                        <img src="/images/phoneOutline.svg" width="16" height="16" class="me-1">
                                                        Call
                                                    </a>

                                                    <a href="mailto:{{ $agent->email }}"
                                                        class="btn btn-sm d-inline-flex align-items-center agent-btn">
                                                        <img src="/images/mailOutline.svg" width="16" height="16" class="me-1">
                                                        Email
                                                    </a>
                                                </div>


                                            </div>

                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>

                        <!-- sticky sidebar -->
                        <div class="col-lg-3">
                            <div class="card my-3 border-0 shadow-sm position-sticky" style="top: 20px;">
                                <div class="card-body small">

                                    {{-- Title --}}
                                    <h6 class="fw-bold mb-4">Here’s How to Find an Agent</h6>

                                    {{-- Step 1 --}}
                                    <div class="d-flex align-items-start mb-3">
                                        <img src="/images/start-your-search.svg" alt="Start Your Search" width="28"
                                            height="28" class="me-2">
                                        <div>
                                            <strong class="d-block">Start Your Search</strong>
                                            <p class="mb-0 text-muted">
                                                Explore agents based on location, property type, language and more to find
                                                the one that best fits your needs.
                                            </p>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    {{-- Step 2 --}}
                                    <div class="d-flex align-items-start">
                                        <img src="/images/get-in-touch.svg" alt="Get in Touch" width="28" height="28"
                                            class="me-2">
                                        <div>
                                            <strong class="d-block">Get in Touch</strong>
                                            <p class="mb-0 text-muted">
                                                Interested in a property? Reach out to the agent to arrange a viewing.
                                            </p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ======================= Ads Listings End  ============================ -->

    @include('frontend.layouts.includes.category_modal')
    @include('frontend.layouts.includes.location_modal')

@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            function toggleCityDivision() {
                if (window.innerWidth <= 991) {
                    $('.cities_wrapper').on('click', function () {
                        $('.location_city').hide();
                        $('.LocalArea').show();
                    });

                    $('.backCityDivision').on('click', function () {
                        $('.location_city').show();
                        $('.LocalArea').hide();
                    });
                } else {
                    $('.cities_wrapper').off('click');
                    $('.backCityDivision').off('click');
                }
            }

            toggleCityDivision();
            $(window).resize(function () {
                toggleCityDivision();
            });
        });

        $(document).ready(function () {
            $('.filterInput').on('change', function () {
                $(this).closest('form').submit();
            });
        });
    </script>

@endpush