@extends("frontend.layouts.app")

@section("title")
    {{ app_name() }}
@endsection

@section("content")
    
  
  <section class="broker-box">
    <div class="search-box bg-warning py-3 mb-4">
        <div class="container">
        <div class="row">
            <form method="GET" action="{{ route('search.broker') }}">
                <div class="col-sm-6 me-auto d-flex ">
                    <input type="text" class="form-control " name="search" placeholder="Search brokers..." value="{{ request('search') }}">
                    <button class="btn btn-danger" type="submit">Search</button>
                </div>
            </form>
        </div>
        </div>
    </div>
    <div class="container">
    <div class="row">
        <!-- Sort Section -->
        <div class="d-flex justify-content-between align-items-center mb-5 mt-2 pb-4">
            <p>
                <!--<span>Sort by:</span>-->
                <label for="brokerFilter"> <strong>Filter by Reviews </strong> </label>
                <select id="brokerFilter" class="form-select d-inline-block w-auto mr-5">
                    <option value="" selected disabled>Select</option>
                    <option value="most_reviews" {{ request('brokerFilter') == 'most_reviews' ? 'selected' : '' }}>Most Reviews</option>
                </select>
                <label for="stateFilter" class="ml-5"> <strong>Filter by States </strong> </label>
                <select id="stateFilter" class="form-select d-inline-block w-auto">
                    <option value="">All States</option>
                    @foreach($states as $key => $state)
                        <option value="{{ $state->id }}" {{ request('stateFilter') == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                    @endforeach
                </select>
                <label for="categoryFilter" class="ml-5"> <strong>Filter by Category </strong> </label>
                <select id="categoryFilter" class="form-select d-inline-block w-auto">
                    <option value="">All Category</option>
                    @foreach($uniqueDeals??[] as $deal) 
                        <option value="{{ $deal }}" {{ request('categoryFilter') == $deal ? 'selected' : '' }}>{{ $deal }}</option>
                    @endforeach
                </select>
            </p>
            <p><a href="#" class="text-danger text-decoration-none fw-bold">Top Agents (90)</a></p>
        </div>

        <!-- Agent Card -->
        @foreach($brokers as $broker)
                <div class="card col-sm-12">
            <div class="row ">
            <!-- Agent Image -->
            <div class="col-md-3">
                <img src="{{!empty($broker->avatar) ? asset($broker->avatar) : '' }}" alt="Agent Image">
            </div>
            <!-- Agent Details -->
            <div class="col-md-6">
                <div class="card-body">
                    <h5 class="card-title fw-bold">{{ $broker->contact_name ?? '' }}</h5>
                    <p>{{ $broker->introduction ?? '' }}</p>
                    <div class="mb-3 card-inn-box">
                        <strong>Deals In:</strong>
                        <div class="card-box-info">
                            @php
                            if(!empty($broker->deals_in)){
                            $dealsIn = explode(',', $broker->deals_in);
                            @endphp
                            @foreach($dealsIn as $deal)
                            <p>{{ $deal }}</p>
                            @endforeach
                            @php
                            }
                            @endphp
                        </div>
                    </div>
                    <p class="m-0 text-bold"><strong>Operates In:</strong> {{ $broker->state }}</p>
                <!-- Agent Contact -->
                <!-- Buttons -->
                </div>
            </div>
            
            <div class="col-sm-1"></div>
            <div class="col-sm-2 card-end">
                <div class="card-mid text-end">
                    <div class="card-mid-top">
                        <h6 class="text-danger fw-bold mb-1">{{ $broker->company_name ?? '' }}</h6>
                        <p class="mb-1"><a href="tel:+{{ $broker->mobile }}">Phone: {{ $broker->mobile }}</a></p>
                        <p class="mb-3"><a href="mailto:{{ $broker->email }}">{{ $broker->email }}</a></p>
                    </div>
                    <div class="rating">
                        @for ($i = 1; $i <= 5; $i++)
                            <!--<a href="">-->
                                <i class="fas fa-star {{ $i <= $broker->average_stars ? 'text-warning' : 'text-muted' }}"></i>
                            <!--</a>-->
                        @endfor
                        <span>{{ $broker->average_stars }} stars</span>
                    </div>
                </div>
                <div class="btn-box">
                    <button class="btn btn-odd">Request Callback</button>
                    <!--<button class="btn">More Information</button>-->
                    <a href="{{route('broker.profile', $broker->user_id)}}" class="btn">More Information</a>
                </div>
            </div>
        </div>
        </div>
        @endforeach
    </div><!--row-->

    <div class="col-sm-12">
        <div class="pagination">
        <div class="page-num"><i class="fa-solid fa-arrow-left"></i></a></div>
        <div class="page-num">1</div>
        <div class="page-num">2</div>
        <div class="page-num">3</div>
        <div class="page-num">4</div>
        <div class="page-num">...</div>
        <div class="page-num">54</div>
        <div class="page-num"><i class="fa-solid fa-arrow-right"></i></a></div>
        </div>
    </div>

    </div>
  </section>
  
<script>
    function updateFilter() {
        let stateFilter = document.getElementById('stateFilter').value;
        let brokerFilter = document.getElementById('brokerFilter').value;
        let categoryFilter = document.getElementById('categoryFilter').value;

        let url = new URL("{{ route('brokers.filter') }}", window.location.origin);
        if (stateFilter) url.searchParams.set('stateFilter', stateFilter);
        if (brokerFilter) url.searchParams.set('brokerFilter', brokerFilter);
        if (categoryFilter) url.searchParams.set('categoryFilter', categoryFilter);

        window.location.href = url.toString();
    }

    document.getElementById('stateFilter').addEventListener('change', updateFilter);
    document.getElementById('brokerFilter').addEventListener('change', updateFilter);
    document.getElementById('categoryFilter').addEventListener('change', updateFilter);

</script>

@endsection