@extends('layouts.admin.app')

@section('title', 'Deal Explorer')

@section('content')

@php
    $listUrl       = route('admin.deal-explorer.list');
    $detailUrl     = route('admin.deal-explorer.show');
    $viewUrl       = route('admin.deal-explorer.view');
    $favoriteUrl   = route('admin.deal-explorer.favorite');
    $unfavoriteUrl = route('admin.deal-explorer.unfavorite');
@endphp

<x-layouts.admin.page-container
    title="Deal Explorer"
    subtitle="Browse and compare property opportunities"
    :breadcrumbs="[['label'=>'Dashboard','route'=>'admin.dashboard'],['label'=>'Deal Explorer']]"
>
    <div
        id="deal-explorer"
        x-data="dealExplorer({
            listUrl:         @js($listUrl),
            detailUrl:       @js($detailUrl),
            viewUrl:         @js($viewUrl),
            favoriteUrl:     @js($favoriteUrl),
            unfavoriteUrl:   @js($unfavoriteUrl),
            csrfToken:       @js(csrf_token()),
            isAuthenticated: true,
        })"
    >
        {{-- Toolbar --}}
        <div class="mb-4">
            <x-deal-explorer.toolbar context="admin" />
        </div>

        {{-- Tabs --}}
        <div class="mb-4 flex items-center gap-1 border-b border-border">
            <button
                type="button"
                id="de-tab-all"
                @click="setTab('all')"
                :class="activeTab === 'all' ? 'border-b-2 border-primary-600 text-primary-600 font-semibold' : 'text-muted-foreground hover:text-foreground'"
                class="px-4 py-2 text-sm transition-colors"
            >All</button>
            <button
                type="button"
                id="de-tab-recent"
                @click="setTab('recent')"
                :class="activeTab === 'recent' ? 'border-b-2 border-primary-600 text-primary-600 font-semibold' : 'text-muted-foreground hover:text-foreground'"
                class="px-4 py-2 text-sm transition-colors"
            >Recent Viewed</button>
            <button
                type="button"
                id="de-tab-favourites"
                @click="setTab('favourites')"
                :class="activeTab === 'favourites' ? 'border-b-2 border-primary-600 text-primary-600 font-semibold' : 'text-muted-foreground hover:text-foreground'"
                class="px-4 py-2 text-sm transition-colors"
            >Favourites</button>
        </div>

        {{-- Active Filters Tags --}}
        <div x-show="hasActiveFilters()" x-cloak class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs text-muted-foreground font-medium me-1">Active Filters:</span>
            
            {{-- Availability tag --}}
            <template x-if="filters.availability">
                <span class="de-active-chip">
                    <span x-text="'Availability: ' + (filters.availability === 'sale' ? 'For Sale' : (filters.availability === 'rent' ? 'For Rent' : 'For Sale & Rent'))"></span>
                    <button type="button" @click="removeFilter('availability')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Property Type tag --}}
            <template x-if="filters.property_type">
                <span class="de-active-chip">
                    <span x-text="'Type: ' + filters.property_type"></span>
                    <button type="button" @click="removeFilter('property_type')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Sale Status tag --}}
            <template x-if="filters.property_sale_status">
                <span class="de-active-chip">
                    <span x-text="'Sale Status: ' + filters.property_sale_status"></span>
                    <button type="button" @click="removeFilter('property_sale_status')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Rent Status tag --}}
            <template x-if="filters.property_rent_status">
                <span class="de-active-chip">
                    <span x-text="'Rent Status: ' + filters.property_rent_status"></span>
                    <button type="button" @click="removeFilter('property_rent_status')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- State tag --}}
            <template x-if="filters.state">
                <span class="de-active-chip">
                    <span x-text="'State: ' + filters.state"></span>
                    <button type="button" @click="removeFilter('state')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- City tag --}}
            <template x-if="filters.city">
                <span class="de-active-chip">
                    <span x-text="'City: ' + filters.city"></span>
                    <button type="button" @click="removeFilter('city')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Postal Code tag --}}
            <template x-if="filters.postal_code">
                <span class="de-active-chip">
                    <span x-text="'Postal: ' + filters.postal_code"></span>
                    <button type="button" @click="removeFilter('postal_code')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Min Area tag --}}
            <template x-if="filters.min_area">
                <span class="de-active-chip">
                    <span x-text="'Min Area: ' + filters.min_area + ' SQM'"></span>
                    <button type="button" @click="removeFilter('min_area')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Max Area tag --}}
            <template x-if="filters.max_area">
                <span class="de-active-chip">
                    <span x-text="'Max Area: ' + filters.max_area + ' SQM'"></span>
                    <button type="button" @click="removeFilter('max_area')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Min Sale Price tag --}}
            <template x-if="filters.min_sale_price">
                <span class="de-active-chip">
                    <span x-text="'Min Sale: ₹' + Number(filters.min_sale_price).toLocaleString()"></span>
                    <button type="button" @click="removeFilter('min_sale_price')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Max Sale Price tag --}}
            <template x-if="filters.max_sale_price">
                <span class="de-active-chip">
                    <span x-text="'Max Sale: ₹' + Number(filters.max_sale_price).toLocaleString()"></span>
                    <button type="button" @click="removeFilter('max_sale_price')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Min Rent Price tag --}}
            <template x-if="filters.min_rent_price">
                <span class="de-active-chip">
                    <span x-text="'Min Rent: ₹' + Number(filters.min_rent_price).toLocaleString()"></span>
                    <button type="button" @click="removeFilter('min_rent_price')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Max Rent Price tag --}}
            <template x-if="filters.max_rent_price">
                <span class="de-active-chip">
                    <span x-text="'Max Rent: ₹' + Number(filters.max_rent_price).toLocaleString()"></span>
                    <button type="button" @click="removeFilter('max_rent_price')" class="de-active-chip-btn">
                        <x-heroicon-o-x-mark class="h-3.5 w-3.5 flex-shrink-0" />
                    </button>
                </span>
            </template>

            {{-- Clear All button --}}
            <button
                type="button"
                @click="resetFilters()"
                class="inline-flex items-center gap-1 rounded-full border border-red-200 bg-red-50 px-2.5 py-1 text-xs font-bold text-red-600 transition-colors hover:bg-red-100 dark:border-red-900/30 dark:bg-red-950/20 dark:text-red-400 dark:hover:bg-red-950/40"
            >
                <x-heroicon-o-trash class="h-3.5 w-3.5 flex-shrink-0" />
                Clear All
            </button>
        </div>

        {{-- Skeleton loader --}}
        <div x-show="loading && total === 0" x-cloak class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach(range(1, 8) as $i)
                <x-deal-explorer.skeleton-card />
            @endforeach
        </div>

        {{-- Cards container --}}
        <div id="de-cards-container" x-show="!loading || total > 0" x-html="cardsHtml">
        </div>

        {{-- Pagination --}}
        <div id="de-pagination" class="mt-6" x-html="paginationHtml">
        </div>

        {{-- Property Detail Modal --}}
        <x-deal-explorer.property-detail-modal />

    </div>
</x-layouts.admin.page-container>

@push('styles')
<style>
    .de-fav-active svg { color: rgb(239 68 68) !important; }
</style>
@endpush

@endsection