@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @include($activeTemplate . 'partials.breadcrumb')
    <div class="donor-search-area">
        <div class="container">
            <form method="GET" action="{{ route('donor.search') }}" class="donor-search-form">
                <div class="donor-search-form__field">
                    <label>@lang('Blood Group')</label>
                    <select class="select" name="blood_id">
                        <option value="" selected="" disabled="">@lang('Select Group')</option>
                        @foreach ($bloods as $blood)
                            <option value="{{ $blood->id }}" @if (@$bloodId == $blood->id) selected @endif>
                                {{ __($blood->name) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="donor-search-form__field">
                    <label>@lang('City')</label>
                    <select class="select" name="city_id">
                        <option value="" disabled="" selected="">@lang('Select One')</option>
                        @foreach ($cities as $city)
                            <option value="{{ $city->id }}" @if(@$cityId == $city->id) selected @endif>
                                {{ __($city->name) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="donor-search-form__field">
                    <label>@lang('Donor Type')</label>
                    <select class="select" name="gender">
                        <option value="" selected="" disabled="">@lang('Select One')</option>
                        <option value="1" @if (@$gender == 1) selected @endif>@lang('Male')</option>
                        <option value="2" @if (@$gender == 2) selected @endif>@lang('Female')</option>
                    </select>
                </div>

                <div class="donor-search-form__btn">
                    <button type="submit" class="btn btn-md btn--base">@lang('Search')</button>
                </div>
            </form>
        </div>
    </div>

    <section class="pt-50 pb-50 shade--bg">
        <div class="container">
            <div class="row">
                <div class="col-xl-2 col-lg-3 col-md-4 d-md-block d-none">
                    @php
                        echo showAd('220x474');
                    @endphp
                </div>
                <div class="col-xl-8 col-lg-9 col-md-8">
                    @if(@$bloodBanks && count($bloodBanks) > 0)
                        <div class="row gy-4 mb-5">
                            <div class="col-lg-12">
                                <h3>@lang('Blood Banks')</h3>
                            </div>
                            @foreach($bloodBanks as $bloodBank)
                                <div class="col-lg-6 col-md-12 col-sm-6">
                                    <div class="donor-item">
                                        <div class="donor-item__content">
                                            <h5 class="donor-item__name text-wrap" style="word-break: break-word; white-space: normal;">{{ __($bloodBank->name) }}</h5>
                                            <ul class="donor-item__list mt-2">
                                                <li class="text-truncate">
                                                    <i class="las la-map-marker-alt"></i> @lang('City') :
                                                    {{ __($bloodBank->city?->name) }}
                                                </li>
                                                <li>
                                                    <i class="las la-phone"></i>@lang('Contact') : <span
                                                        class="text--base"><a href="tel:{{ $bloodBank->contact_number }}">{{ $bloodBank->contact_number }}</a></span>
                                                </li>
                                            </ul>
                                            <div class="mt-2">
                                                <a href="tel:{{ $bloodBank->contact_number }}" class="btn btn-sm btn--base"><i class="las la-phone"></i> @lang('Call Now')</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <hr>
                        <div class="col-lg-12 mt-5">
                            <h3>@lang('Donors')</h3>
                        </div>
                    @endif

                    <div class="row gy-4 mt-2">
                        @forelse($donors as $donor)
                            <div class="col-lg-6 col-md-12 col-sm-6">
                                <div class="donor-item has--link">
                                    <a href="{{ route('donor.details', [slug($donor->name), encrypt($donor->id)]) }}"
                                        class="item--link"></a>
                                    <div class="donor-item__thumb">
                                        <img src="{{ getImage('assets/images/donor/' . $donor->image, getFilePath('donor')) }}"
                                            alt="@lang('image')">
                                    </div>
                                    <div class="donor-item__content">
                                        <h5 class="donor-item__name text-wrap" style="word-break: break-word; white-space: normal;">{{ __($donor->name) }}</h5>
                                        <ul class="donor-item__list mt-2">
                                            <li class="text-truncate">
                                                <i class="las la-map-marker-alt"></i> @lang('City') :
                                                {{ __($donor->city?->name) }}
                                            </li>
                                            <li>
                                                <i class="las la-tint"></i>@lang('Blood Group') : <span
                                                    class="text--base">({{ __($donor->blood?->name) }})</span>
                                            </li>
                                            <li>
                                                <i class="las la-phone"></i>@lang('Contact') : <span
                                                    class="text--base"><a href="tel:{{ $donor->phone }}" style="position: relative; z-index: 2;">{{ $donor->phone }}</a></span>
                                            </li>
                                        </ul>
                                        <div class="mt-2 d-flex flex-wrap gap-2">
                                            <a href="{{ route('donor.details', [slug($donor->name), encrypt($donor->id)]) }}"
                                                class="btn btn-sm btn--base shadow-none" style="position: relative; z-index: 2;">@lang('View Profile')</a>
                                            <a href="tel:{{ $donor->phone }}" class="btn btn-sm btn--base shadow-none" style="position: relative; z-index: 2;"><i class="las la-phone"></i> @lang('Call Now')</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <h3 class="text-center">{{ $emptyMessage }}</h3>
                        @endforelse
                    </div>
                    <nav class="mt-4 pagination-md">
                        {{ paginateLinks($donors) }}
                    </nav>
                </div>
                <div class="col-xl-2 d-xl-block d-none">
                    @php
                        echo showAd('220x474');
                    @endphp
                </div>
            </div>
        </div>
    </section>
@endsection
