@extends('layouts.master')

@section('title', 'Buy Leads - The Mini Port')

@section('content')
<style>
    .rfq-card {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }
    .rfq-card:hover {
        transform: translateY(-5px);
        border-left-color: #0d6efd;
    }
    .urgency-high { border-left-color: #dc3545 !important; }
    .urgency-medium { border-left-color: #ffc107 !important; }
    .urgency-low { border-left-color: #28a745 !important; }
    .filter-chip {
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .filter-chip:hover, .filter-chip.active {
        background-color: #0d6efd !important;
        color: white !important;
        border-color: #0d6efd !important;
    }
</style>

<!-- Hero Section -->
<section class="tw-bg-gradient-to-r tw-from-blue-600 tw-to-blue-800 tw-text-white tw-py-12">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="tw-text-4xl tw-font-bold tw-mb-3">
                    <i class="bi bi-lightning-fill tw-text-yellow-300 me-2"></i>
                    Live Buy Leads
                </h1>
                <p class="tw-text-blue-100 tw-text-lg tw-mb-0">
                    Connect with verified buyers actively looking for products. Quote now to grow your business!
                </p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                <div class="d-flex tw-gap-4 justify-content-lg-end">
                    <div class="text-center">
                        <h2 class="tw-text-3xl tw-font-bold tw-mb-0">{{ $rfqs->total() }}</h2>
                        <small class="tw-text-blue-200">Active Leads</small>
                    </div>
                    <div class="text-center">
                        <h2 class="tw-text-3xl tw-font-bold tw-mb-0">{{ $categories->count() }}</h2>
                        <small class="tw-text-blue-200">Categories</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- Main Content -->
<div class="tw-bg-gray-50 tw-py-8">
    <div class="container">
        <div class="row">
            <!-- Sidebar Filters -->
            <div class="col-lg-3 mb-4 mb-lg-0">
                <div style="position: sticky; top: 80px; z-index: 10;">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white fw-bold py-3 d-flex align-items-center">
                            <i class="bi bi-funnel me-2 tw-text-primary"></i> 
                            Filter Buy Leads
                        </div>
                        <div class="card-body">
                            <form action="{{ route('public.rfqs.index') }}" method="GET" id="filterForm">
                                <!-- Search -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-search me-1"></i> Search Keyword
                                    </label>
                                    <div class="input-group">
                                        <input type="text" name="q" class="form-control" value="{{ request('q') }}" placeholder="Product or description...">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-search"></i>
                                        </button>
                                    </div>
                                </div>

                                <!-- Category -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-grid me-1"></i> Category
                                    </label>
                                    <select name="category" class="form-select" onchange="document.getElementById('filterForm').submit()">
                                        <option value="">All Categories</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->name }}" {{ request('category') == $category->name ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Location Filter -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-geo-alt me-1"></i> Delivery Location
                                    </label>
                                    <div class="input-group">
                                        <input type="text" name="location" class="form-control" value="{{ request('location') }}" placeholder="City, State...">
                                        <button type="submit" class="btn btn-outline-secondary">
                                            <i class="bi bi-search"></i>
                                        </button>
                                    </div>
                                </div>

                                <!-- Country Filter -->
                                @if(isset($countries) && count($countries) > 0)
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-globe me-1"></i> Country
                                    </label>
                                    <select name="country" class="form-select" onchange="document.getElementById('filterForm').submit()">
                                        <option value="">All Countries</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country }}" {{ request('country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @endif

                                <!-- Sort By -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-sort-down me-1"></i> Sort By
                                    </label>
                                    <select name="sort" class="form-select" onchange="document.getElementById('filterForm').submit()">
                                        <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest First</option>
                                        <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest First</option>
                                        <option value="quantity_high" {{ request('sort') == 'quantity_high' ? 'selected' : '' }}>Quantity: High to Low</option>
                                        <option value="quantity_low" {{ request('sort') == 'quantity_low' ? 'selected' : '' }}>Quantity: Low to High</option>
                                    </select>
                                </div>

                                @if(request()->hasAny(['q', 'category', 'location', 'country', 'sort']))
                                    <a href="{{ route('public.rfqs.index') }}" class="btn btn-outline-secondary w-100">
                                        <i class="bi bi-x-circle me-1"></i> Clear All Filters
                                    </a>
                                @endif
                            </form>
                        </div>
                    </div>

                    <!-- Post Requirement CTA -->
                    <div class="card border-0 shadow-sm mt-3 tw-bg-gradient-to-br tw-from-yellow-50 tw-to-orange-50">
                        <div class="card-body text-center tw-p-4">
                            <div class="tw-w-12 tw-h-12 tw-mx-auto tw-bg-orange-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-3">
                                <i class="bi bi-megaphone tw-text-xl tw-text-orange-500"></i>
                            </div>
                            <h6 class="fw-bold tw-text-gray-800 tw-text-sm">Looking for Products?</h6>
                            <p class="tw-text-xs tw-text-gray-600 tw-mb-3">Post your requirement and let sellers find you!</p>
                            <a href="{{ route('post.requirement.index') }}" class="btn btn-warning btn-sm fw-bold w-100">
                                Post Requirement
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RFQ List -->
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h4 class="fw-bold mb-1">
                            @if(request('category'))
                                {{ request('category') }} Requirements
                            @else
                                All Buy Requirements
                            @endif
                        </h4>
                        <span class="text-muted small">
                            <i class="bi bi-check-circle-fill tw-text-green-500 me-1"></i>
                            {{ $rfqs->total() }} Verified Leads Found
                        </span>
                    </div>
                    <div class="d-flex tw-gap-2">
                        <button class="btn btn-outline-secondary btn-sm d-none d-md-block" id="gridViewBtn">
                            <i class="bi bi-grid"></i>
                        </button>
                        <button class="btn btn-outline-secondary btn-sm d-none d-md-block" id="listViewBtn">
                            <i class="bi bi-list"></i>
                        </button>
                    </div>
                </div>

                <div class="row g-4" id="rfqGrid">
                    @forelse($rfqs as $rfq)
                        @php
                            $daysOld = $rfq->created_at->diffInDays(now());
                            if ($daysOld <= 1) {
                                $urgencyClass = 'urgency-high';
                                $urgencyLabel = 'Urgent';
                                $urgencyBadge = 'bg-danger';
                            } elseif ($daysOld <= 3) {
                                $urgencyClass = 'urgency-medium';
                                $urgencyLabel = 'Active';
                                $urgencyBadge = 'bg-warning text-dark';
                            } else {
                                $urgencyClass = 'urgency-low';
                                $urgencyLabel = 'Open';
                                $urgencyBadge = 'bg-success';
                            }

                            // Check subscription status
                            $isPaidSeller = false;
                            if (auth()->check() && auth()->user()->hasRole('seller')) {
                                if (auth()->user()->seller && auth()->user()->seller->hasActiveSubscription()) {
                                    $isPaidSeller = true;
                                }
                            }

                            // Mask contact details
                            $processedDescription = $rfq->description;
                            if (!$isPaidSeller) {
                                // Mask Phone Numbers (10-12 digits, optional +, -, space)
                                $processedDescription = preg_replace('/(\+?\d{1,4}[-.\s]?)?(\(?\d{3}\)?[-.\s]?)?\d{3}[-.\s]?\d{4}/', '[Locked]', $processedDescription);
                                // Mask Emails
                                $processedDescription = preg_replace('/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/', '[Locked]', $processedDescription);
                            }
                        @endphp
                        <div class="col-md-6 rfq-item">
                            <div class="card rfq-card h-100 border-0 shadow-sm {{ $urgencyClass }}">
                                <div class="card-body">
                                    <!-- Header -->
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div class="flex-grow-1 me-2">
                                            <h5 class="card-title fw-bold tw-text-gray-800 mb-1 text-truncate" title="{{ $rfq->title }}">
                                                {{ $rfq->title }}
                                            </h5>
                                            <div class="d-flex tw-gap-2 tw-flex-wrap">
                                                <span class="badge {{ $urgencyBadge }} tw-text-xs">{{ $urgencyLabel }}</span>
                                                <span class="badge bg-light text-dark border tw-text-xs">
                                                    <i class="bi bi-clock me-1"></i>{{ $rfq->created_at->diffForHumans() }}
                                                </span>
                                            </div>
                                        </div>
                                        @if($daysOld == 0)
                                            <span class="badge bg-danger tw-animate-pulse">NEW</span>
                                        @endif
                                    </div>

                                    <!-- Meta Info -->
                                    <div class="tw-mb-3 d-flex tw-gap-3 tw-flex-wrap">
                                        <span class="tw-text-sm tw-text-gray-600">
                                            <i class="bi bi-tag tw-text-primary me-1"></i>
                                            {{ $rfq->category?->name ?? 'General' }}
                                        </span>
                                    </div>

                                    <!-- Description -->
                                    <p class="card-text tw-text-gray-600 tw-text-sm mb-3" style="min-height: 48px;">
                                        {{ Str::limit($processedDescription, 120) }}
                                    </p>

                                    <!-- Footer -->
                                    <div class="d-flex justify-content-between align-items-center border-top pt-3">
                                        <div class="d-flex align-items-center">
                                            <div class="tw-w-8 tw-h-8 tw-bg-gray-200 tw-rounded-full tw-flex tw-items-center tw-justify-center me-2">
                                                <i class="bi bi-person tw-text-gray-500"></i>
                                            </div>
                                            <div>
                                                <small class="tw-text-xs tw-text-gray-500 d-block">Buyer</small>
                                                <small class="tw-font-medium tw-text-gray-700">{{ $rfq->buyer?->user?->name ?? 'Verified Buyer' }}</small>
                                            </div>
                                        </div>
                                        <div class="tw-flex tw-gap-2">
                                            <a href="{{ route('public.rfqs.show', $rfq->id) }}" class="btn btn-primary btn-sm fw-bold">
                                                <i class="bi bi-lightning-fill me-1"></i> Quote Now
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Location Footer -->
                                    @if($rfq->delivery_location)
                                        <div class="tw-mt-3 tw-pt-2 tw-border-t tw-border-dashed">
                                            <small class="tw-text-gray-500">
                                                <i class="bi bi-geo-alt me-1"></i> Delivery: {{ $rfq->delivery_location }}
                                            </small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-body text-center py-5">
                                    <div class="tw-w-24 tw-h-24 tw-mx-auto tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-4">
                                        <i class="bi bi-inbox tw-text-4xl tw-text-gray-400"></i>
                                    </div>
                                    <h5 class="fw-bold tw-text-gray-800">No Buy Leads Found</h5>
                                    <p class="tw-text-gray-500 tw-mb-4">Try adjusting your filters or check back later for new requirements.</p>
                                    <a href="{{ route('public.rfqs.index') }}" class="btn btn-primary">
                                        <i class="bi bi-arrow-counterclockwise me-1"></i> View All Leads
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>

                <!-- Pagination -->
                <div class="mt-4 d-flex justify-content-center">
                    {{ $rfqs->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Floating CTA for Mobile -->
<div class="d-lg-none tw-fixed tw-bottom-4 tw-left-4 tw-right-4 tw-z-50">
    <a href="{{ route('post.requirement.index') }}" class="btn btn-warning btn-lg w-100 fw-bold shadow-lg tw-rounded-full">
        <i class="bi bi-plus-lg me-2"></i> Post Your Requirement
    </a>
</div>
@endsection