@extends('layout.layout')

@section('title', 'Arama Sonuclari')

@section('styles')
    @parent
    <style>
        body {
            background: #f4f7fc;
            color: #102241;
            overflow-x: hidden;
        }

        .search-results-modern {
            --mk-text: #102241;
            --mk-muted: #697b9a;
            --mk-blue: #1268ff;
            --mk-line: #dbe5f3;
            --mk-card: #ffffff;
            width: 100vw;
            max-width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            padding: 34px 0 58px;
            overflow: hidden;
            background:
                radial-gradient(760px 280px at 90% 0%, rgba(18, 104, 255, .10), transparent 70%),
                linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
            font-family: "Inter", "Poppins", Arial, sans-serif;
        }

        .search-results-modern,
        .search-results-modern * {
            box-sizing: border-box;
        }

        .sr-container {
            width: min(1480px, calc(100% - 38px));
            margin: 0 auto;
        }

        .sr-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 20px;
        }

        .sr-kicker {
            margin: 0 0 8px;
            color: var(--mk-blue);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .sr-title {
            margin: 0;
            color: var(--mk-text);
            font-size: clamp(30px, 4vw, 46px);
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: 0;
        }

        .sr-desc {
            margin: 10px 0 0;
            color: var(--mk-muted);
            font-size: 15px;
        }

        .sr-filter-shell {
            margin-bottom: 26px;
            padding: 16px;
            border: 1px solid var(--mk-line);
            border-radius: 18px;
            background: rgba(255,255,255,.96);
            box-shadow: 0 18px 38px rgba(20, 54, 113, .09);
        }

        .sr-search-grid {
            display: grid;
            grid-template-columns: 1.2fr .9fr .9fr .9fr .9fr 1fr 1fr 132px;
            gap: 10px;
        }

        .sr-field {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 58px;
            padding: 8px 12px;
            border: 1px solid #e3ebf7;
            border-radius: 12px;
            background: #f8fbff;
        }

        .sr-field i {
            color: var(--mk-blue);
        }

        .sr-field label {
            display: block;
            margin: 0;
            color: #7587a5 !important;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .sr-field input,
        .sr-field select {
            width: 100%;
            min-height: 24px;
            padding: 0;
            border: 0;
            outline: 0;
            color: #142845;
            background: transparent;
            font-size: 13px;
            font-weight: 700;
        }

        .sr-search-submit {
            min-height: 58px;
            border: 0;
            border-radius: 12px;
            color: #fff;
            background: linear-gradient(180deg, #2378ff 0%, #0758e8 100%);
            font-weight: 800;
        }

        .sr-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 22px;
            align-items: start;
        }

        .mk-property-card {
            position: relative;
            overflow: hidden;
            min-width: 0;
            max-width: 100%;
            border: 1px solid var(--mk-line);
            border-radius: 18px;
            background: var(--mk-card);
            box-shadow: 0 14px 28px rgba(20, 54, 113, .08);
            transition: transform .18s ease, box-shadow .18s ease;
        }

        .mk-property-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 22px 42px rgba(20, 54, 113, .13);
        }

        .mk-property-link {
            display: block;
            width: 100%;
            min-width: 0;
            overflow: hidden;
            color: inherit;
            text-decoration: none;
        }

        .mk-property-media {
            position: relative;
            aspect-ratio: 1.28 / 1;
            background: #dce7f4;
        }

        .mk-property-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mk-property-badge {
            position: absolute;
            left: 12px;
            top: 12px;
            padding: 7px 10px;
            border-radius: 999px;
            color: #fff;
            background: #1268ff;
            font-size: 10px;
            font-weight: 800;
        }

        .mk-property-badge.is-live { background: #18b96f; }
        .mk-property-badge.is-done { background: #e33445; }

        .mk-bank-chip {
            position: absolute;
            left: 12px;
            bottom: 12px;
            display: inline-flex;
            align-items: center;
            min-width: 92px;
            height: 34px;
            padding: 5px 9px;
            border-radius: 10px;
            background: rgba(255,255,255,.92);
            box-shadow: 0 8px 16px rgba(0,0,0,.12);
        }

        .mk-bank-chip img {
            max-width: 100px;
            max-height: 24px;
            object-fit: contain;
        }

        .mk-property-body {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            padding: 16px;
        }

        .mk-property-head {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            color: #596985;
            font-size: 13px;
            font-weight: 700;
            min-width: 0;
            white-space: normal !important;
        }

        .mk-property-head span {
            min-width: 0;
            max-width: 48%;
            text-align: right;
            line-height: 1.35;
            white-space: normal !important;
            overflow-wrap: anywhere;
        }

        .mk-property-body h3 {
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 44px;
            margin: 10px 0 12px;
            color: var(--mk-text);
            font-size: 15px;
            line-height: 1.45;
            font-weight: 800;
            white-space: normal !important;
            overflow-wrap: anywhere;
            word-break: normal;
        }

        .mk-property-price {
            color: var(--mk-blue);
            font-size: 20px;
            font-weight: 800;
            line-height: 1.25;
            white-space: nowrap;
        }

        .mk-property-location {
            margin: 0 -16px 0;
            padding: 12px 16px 14px;
            border-top: 1px solid #edf2f8;
            border-bottom: 1px solid #edf2f8;
        }

        .mk-property-location span {
            display: block;
            color: #a6b0c2;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 7px;
        }

        .mk-property-location strong {
            display: block;
            color: #243756;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }

        .mk-property-facts {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 12px;
            color: #233b62;
            font-size: 11px;
            font-weight: 800;
        }

        .mk-property-facts span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 0 9px;
            border-radius: 9px;
            background: #eef4ff;
        }

        .mk-property-code {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 8px;
            margin: 12px -16px -16px;
            padding: 12px 16px 13px;
            border-top: 1px solid #edf2f8;
            color: #263656;
            font-size: 12px;
            font-weight: 700;
        }

        .mk-property-code span {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-width: 0;
        }

        .mk-property-code strong {
            font-weight: 800;
            color: #102241;
            overflow-wrap: anywhere;
        }

        .mk-fav {
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 3;
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 50%;
            color: #60738f;
            background: rgba(255,255,255,.92);
            box-shadow: 0 8px 16px rgba(0,0,0,.12);
        }

        .mk-fav.active { color: #e33445; }

        .sr-empty {
            grid-column: 1 / -1;
            padding: 36px;
            border: 1px dashed var(--mk-line);
            border-radius: 18px;
            color: var(--mk-muted);
            background: #fff;
            text-align: center;
            font-weight: 700;
        }

        @media (max-width: 1200px) {
            .sr-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .sr-search-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px) {
            .sr-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .sr-search-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .sr-container {
                width: calc(100vw - 36px);
                max-width: calc(100vw - 36px);
                padding: 0;
            }

            .sr-head {
                align-items: flex-start;
                flex-direction: column;
            }

            .sr-title,
            .sr-desc {
                max-width: 100%;
                white-space: normal !important;
                overflow-wrap: anywhere;
            }

            .sr-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .sr-search-grid {
                grid-template-columns: 1fr;
            }

            .sr-filter-shell {
                padding: 12px;
                border-radius: 16px;
            }

            .sr-search-submit {
                width: 100%;
            }

            .mk-property-card,
            .mk-property-link,
            .mk-property-media,
            .mk-property-body {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                overflow: hidden;
            }

            .mk-property-body * {
                max-width: 100%;
                min-width: 0;
            }

            .mk-property-head,
            .mk-property-code {
                display: block;
                width: 100%;
                max-width: 100%;
            }

            .mk-property-head span {
                max-width: 100%;
                text-align: left;
            }

            .mk-property-head span,
            .mk-property-code span,
            .mk-property-code strong {
                display: block;
                margin-bottom: 4px;
            }

            .mk-property-body h3 {
                min-height: auto;
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
                overflow: visible;
                text-overflow: initial;
                white-space: normal !important;
                overflow-wrap: break-word;
                word-break: break-word;
            }

            .mk-property-media {
                aspect-ratio: 1.18 / 1;
            }

            .mk-property-price {
                white-space: normal;
            }

            .mk-property-location strong,
            .mk-property-code span,
            .mk-property-code strong {
                max-width: 100%;
                overflow-wrap: break-word;
                word-break: break-word;
            }
        }
    </style>
@stop

@section('content')
    <main class="search-results-modern">
        <section class="sr-container">
            <header class="sr-head">
                <div>
                    <p class="sr-kicker">Arama sonuclari</p>
                    <h1 class="sr-title">
                        @if(request()->tender_status == '1')
                            &#304;hale s&#252;recindeki gayrimenkuller
                        @elseif(request()->tender_status == '2')
                            Teklif beklenen gayrimenkuller
                        @elseif(request()->tender_status == '3')
                            Hemen al gayrimenkulleri
                        @else
                            T&#252;m gayrimenkuller
                        @endif
                    </h1>
                    <p class="sr-desc">{{ count($properties) }} adet sonuc bulundu. Filtreleri degistirerek listeyi daraltabilirsiniz.</p>
                </div>
            </header>

            @php
                $selectedDistricts = $selectedDistricts ?? collect();
                $selectedDistrictValue = request()->district;
            @endphp

            <div class="sr-filter-shell">
                <form action="{{ route('search') }}" method="get">
                    <div class="sr-search-grid">
                        <div class="sr-field">
                            <i class="fas fa-search"></i>
                            <div>
                                <label>Kelime / &#304;lan No</label>
                                <input type="text" name="keyword" value="{{ request()->keyword }}" placeholder="&#304;lan ba&#351;l&#305;&#287;&#305; veya ilan kodu">
                            </div>
                        </div>
                        <div class="sr-field">
                            <i class="far fa-list-alt"></i>
                            <div>
                                <label>&#304;lan Tipi</label>
                                <select name="tender_status">
                                    <option value="" {{ request()->tender_status == '' ? 'selected' : '' }}>T&#252;m ilanlar</option>
                                    <option value="1" {{ request()->tender_status == '1' ? 'selected' : '' }}>&#304;hale s&#252;recinde</option>
                                    <option value="2" {{ request()->tender_status == '2' ? 'selected' : '' }}>Teklif beklenen</option>
                                    <option value="3" {{ request()->tender_status == '3' ? 'selected' : '' }}>Hemen al</option>
                                    <option value="completed" {{ request()->tender_status == 'completed' ? 'selected' : '' }}>&#304;halesi tamamlanan</option>
                                </select>
                            </div>
                        </div>
                        <div class="sr-field">
                            <i class="far fa-building"></i>
                            <div>
                                <label>Emlak Tipi</label>
                                <select name="property_type">
                                    <option value="" {{ request()->property_type == '' ? 'selected' : '' }}>T&#252;m t&#252;rler</option>
                                    <option value="0" {{ request()->property_type == '0' ? 'selected' : '' }}>Konut</option>
                                    <option value="1" {{ request()->property_type == '1' ? 'selected' : '' }}>&#304;&#351; Yeri</option>
                                    <option value="2" {{ request()->property_type == '2' ? 'selected' : '' }}>Arsa</option>
                                </select>
                            </div>
                        </div>
                        <div class="sr-field">
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <label>&#350;ehir</label>
                                <select name="city" class="js-search-city-district-source" data-district-target="#sr_district">
                                    <option value="" {{ request()->city == '' ? 'selected' : '' }}>Konum se&#231;in</option>
                                    @foreach ($cities as $city)
                                        <option value="{{ $city->name }}" data-city-id="{{ $city->id }}" {{ request()->city == $city->name ? 'selected' : '' }}>{{ $city->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="sr-field">
                            <i class="fas fa-map-pin"></i>
                            <div>
                                <label>&#304;l&#231;e</label>
                                <select name="district" id="sr_district" {{ $selectedDistricts->isEmpty() ? 'disabled' : '' }}>
                                    <option value="" {{ $selectedDistrictValue == '' ? 'selected' : '' }}>&#304;l&#231;e se&#231;in</option>
                                    @foreach ($selectedDistricts as $district)
                                        <option value="{{ $district->id }}" {{ (string) $selectedDistrictValue === (string) $district->id || (string) $selectedDistrictValue === (string) $district->name ? 'selected' : '' }}>{{ $district->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="sr-field">
                            <i class="fas fa-lira-sign"></i>
                            <div>
                                <label>Min. Tutar</label>
                                <input class="money" type="text" name="min_price" value="{{ request()->min_price }}" placeholder="Minimum">
                            </div>
                        </div>
                        <div class="sr-field">
                            <i class="fas fa-lira-sign"></i>
                            <div>
                                <label>Max. Tutar</label>
                                <input class="money" type="text" name="max_price" value="{{ request()->max_price }}" placeholder="Maksimum">
                            </div>
                        </div>
                        <button class="sr-search-submit" type="submit"><i class="fas fa-search"></i> Ara</button>
                    </div>
                </form>
            </div>

            <div class="sr-grid">
                @forelse ($properties as $property)
                    @php
                        $post = $property->post;
                        $cardVariant = request()->tender_status == '1'
                            ? 'active'
                            : (request()->tender_status == '2'
                                ? 'waiting'
                                : (request()->tender_status == 'completed' ? 'completed' : ''));
                    @endphp
                    @include('home.partials.modern-property-card', ['variant' => $cardVariant])
                @empty
                    <div class="sr-empty">Bu filtrelerle eslesen ilan bulunamadi.</div>
                @endforelse
            </div>
        </section>
    </main>
@stop

@section('scripts')
    @parent
    <script>
        $(document).ready(function () {
            $('.money').mask("#.##0", {reverse: true});
            $('.js-select2-cities').select2({
                dropdownAutoWidth : true,
            });

            var districtEndpoint = "{!! route('home.getDistrictsHome', ['id' => '__id__']) !!}";

            $('.js-search-city-district-source').on('change', function () {
                var $city = $(this);
                var $district = $($city.data('district-target'));
                var cityId = $city.find('option:selected').data('city-id');

                if (!$district.length) {
                    return;
                }

                $district.empty().append(new Option('\u0130l\u00e7e se\u00e7in', ''));

                if (!cityId) {
                    $district.prop('disabled', true).val('');
                    return;
                }

                $district.prop('disabled', true);

                fetch(districtEndpoint.replace('__id__', encodeURIComponent(cityId)), {
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(function (response) {
                        return response.ok ? response.json() : [];
                    })
                    .then(function (districts) {
                        districts.forEach(function (district) {
                            $district.append(new Option(district.text, district.id));
                        });
                        $district.prop('disabled', false).val('');
                    })
                    .catch(function () {
                        $district.prop('disabled', true).val('');
                    });
            });
        });
    </script>
@endsection