@extends('layouts.buyer')

@section('title', 'Dashboard')

@section('buyer-content')
    <!-- Welcome Banner -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4 position-relative">
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); z-index: 0;"></div>
        <!-- Decor Pattern -->
        <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 20px 20px; z-index: 0;"></div>
        <div class="position-absolute bottom-0 end-0 opacity-25" style="transform: translate(20%, 20%);">
            <svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="#3b82f6" d="M44.7,-76.4C58.9,-69.2,71.8,-59.1,81.6,-46.6C91.4,-34.1,98.1,-19.2,95.8,-4.9C93.5,9.3,82.2,22.9,71,34.3C59.8,45.7,48.7,54.9,36.6,62.8C24.5,70.7,11.4,77.3,-0.9,78.9C-13.2,80.4,-25.4,76.9,-37.3,70C-49.2,63.1,-60.8,52.8,-69.4,40.4C-78,28,-83.6,13.4,-82.1,-0.9C-80.6,-15.2,-72,-29.2,-61.8,-40.5C-51.6,-51.8,-39.8,-60.4,-27.2,-68.6C-14.6,-76.8,-1.2,-84.6,11,-83.6C23.2,-82.6,44.7,-72.8,44.7,-76.4Z" transform="translate(100 100)" />
            </svg>
        </div>
        
        <div class="card-body p-4 p-lg-5 position-relative z-1 text-white">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div>
                    <h2 class="fw-bold mb-2">Welcome back, {{ Auth::user()->name }}! 👋</h2>
                    <p class="mb-0 opacity-75 fs-5 fw-light">Manage your sourcing requirements and quotes efficiently.</p>
                </div>
                <div>
                    <a href="{{ route('post.requirement.index') }}" class="btn btn-primary btn-lg rounded-pill px-4 fw-bold shadow-lg hover-lift">
                        <i class="bi bi-plus-lg me-2"></i>Post New Requirement
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden group-hover-lift">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute top-0 end-0 p-3" style="opacity: 0.1;">
                        <i class="bi bi-megaphone display-1 text-primary"></i>
                    </div>
                    <div class="position-relative z-1">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 bg-primary bg-opacity-10 p-2 text-primary">
                                <i class="bi bi-megaphone fs-4"></i>
                            </div>
                            <h6 class="ms-3 mb-0 text-muted fw-bold small text-uppercase spacing-1">Requirements</h6>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $rfqCount }}</h2>
                        <a href="{{ route('buyer.rfqs.index') }}" class="stretched-link"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden group-hover-lift">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute top-0 end-0 p-3" style="opacity: 0.1;">
                        <i class="bi bi-chat-quote display-1 text-success"></i>
                    </div>
                    <div class="position-relative z-1">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 bg-success bg-opacity-10 p-2 text-success">
                                <i class="bi bi-chat-quote fs-4"></i>
                            </div>
                            <h6 class="ms-3 mb-0 text-muted fw-bold small text-uppercase spacing-1">Quotes Received</h6>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $quotesReceived }}</h2>
                        <a href="{{ route('buyer.quotes.index') }}" class="stretched-link"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden group-hover-lift">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute top-0 end-0 p-3" style="opacity: 0.1;">
                        <i class="bi bi-hourglass-split display-1 text-warning"></i>
                    </div>
                    <div class="position-relative z-1">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 bg-warning bg-opacity-10 p-2 text-warning">
                                <i class="bi bi-hourglass-split fs-4"></i>
                            </div>
                            <h6 class="ms-3 mb-0 text-muted fw-bold small text-uppercase spacing-1">Pending Review</h6>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $pendingQuotes }}</h2>
                        <a href="#" class="stretched-link"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden group-hover-lift">
                <div class="card-body p-4 position-relative">
                    <div class="position-absolute top-0 end-0 p-3" style="opacity: 0.1;">
                        <i class="bi bi-check-circle display-1 text-purple"></i>
                    </div>
                    <div class="position-relative z-1">
                        <div class="d-flex align-items-center mb-3">
                            <div class="rounded-3 bg-purple bg-opacity-10 p-2 text-purple" style="color: #7c3aed;">
                                <i class="bi bi-check-circle fs-4"></i>
                            </div>
                            <h6 class="ms-3 mb-0 text-muted fw-bold small text-uppercase spacing-1">Deals Done</h6>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark">{{ $acceptedQuotes }}</h2>
                        <a href="#" class="stretched-link"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Row -->
    <div class="row g-4">
        <!-- Left: Recent Quotes & RFQs -->
        <div class="col-lg-8">
            <!-- Recent Quotes Received -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-header bg-transparent py-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-inbox-fill me-2 text-primary"></i>Recent Quotes
                    </h6>
                    <a href="{{ route('buyer.quotes.index') }}" class="btn btn-sm btn-light rounded-pill px-3">View All</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4 py-3" style="font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">Seller</th>
                                    <th class="text-end pe-4 py-3" style="font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentQuotes as $quote)
                                    <tr>
                                        <td class="ps-4">
                                            <div class="d-flex align-items-center">
                                                @if($quote->seller && $quote->seller->logo)
                                                    <img src="{{ asset('storage/' . $quote->seller->logo) }}" class="rounded-circle me-3 shadow-sm" style="width: 40px; height: 40px; object-fit: cover;">
                                                @else
                                                    <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center me-3 text-primary fw-bold" style="width: 40px; height: 40px;">
                                                        {{ strtoupper(substr($quote->seller->company_name ?? 'S', 0, 1)) }}
                                                    </div>
                                                @endif
                                                <div>
                                                    <div class="fw-bold text-dark">{{ $quote->seller->company_name ?? 'Seller' }}</div>
                                                    <small class="text-muted d-block text-truncate" style="max-width: 200px;">{{ $quote->rfq->title ?? 'N/A' }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-end pe-4">
                                            <div class="fw-bold text-success">₹{{ number_format($quote->price, 0) }}</div>
                                            {!! $quote->status_badge !!}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center py-5">
                                            <div class="mb-3">
                                                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                                    <i class="bi bi-inbox fs-3 text-muted opacity-50"></i>
                                                </div>
                                            </div>
                                            <p class="text-muted mb-0">No quotes received yet.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Active Requirements -->
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-transparent py-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-list-check me-2 text-success"></i>My Requirements
                    </h6>
                    <a href="{{ route('buyer.rfqs.index') }}" class="btn btn-sm btn-light rounded-pill px-3">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4 py-3" style="font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">Requirement</th>
                                <th class="py-3" style="font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">Quotes</th>
                                <th class="py-3" style="font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">Status</th>
                                <th class="text-end pe-4 py-3" style="font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentRfqs as $rfq)
                                <tr>
                                    <td class="ps-4">
                                        <div class="fw-bold text-dark text-truncate" style="max-width: 200px;">{{ $rfq->title }}</div>
                                        <small class="text-muted">{{ $rfq->created_at->format('d M Y') }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary-subtle text-primary rounded-pill px-3">{{ $rfq->quotes_count ?? 0 }} quotes</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $rfq->status == 'open' ? 'success' : 'secondary' }} rounded-pill px-2">
                                            {{ ucfirst($rfq->status) }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-4">
                                        <a href="{{ route('buyer.rfqs.show', $rfq->id) }}" class="btn btn-sm btn-light border rounded-circle shadow-sm" data-bs-toggle="tooltip" title="View Details">
                                            <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <div class="mb-3">
                                            <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                                <i class="bi bi-clipboard-plus fs-3 text-muted opacity-50"></i>
                                            </div>
                                        </div>
                                        <p class="mb-3 text-muted">No requirements posted yet.</p>
                                        <a href="{{ route('post.requirement.index') }}" class="btn btn-primary btn-sm rounded-pill px-4">
                                            Post Your First Requirement
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Right: Quick Actions & Stats -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-header bg-transparent py-3">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-lightning-fill me-2 text-warning"></i>Quick Actions
                    </h6>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('post.requirement.index') }}" class="list-group-item list-group-item-action py-3 d-flex align-items-center px-4 border-0 border-bottom">
                        <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="bi bi-plus-lg fs-5"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-dark">Post Requirement</div>
                            <small class="text-muted">Request quotes from suppliers</small>
                        </div>
                        <i class="bi bi-chevron-right ms-auto text-muted small opacity-50"></i>
                    </a>
                    <a href="{{ route('public.products.index') }}" class="list-group-item list-group-item-action py-3 d-flex align-items-center px-4 border-0 border-bottom">
                        <div class="rounded-3 bg-success bg-opacity-10 text-success p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="bi bi-search fs-5"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-dark">Browse Products</div>
                            <small class="text-muted">Find products & services</small>
                        </div>
                        <i class="bi bi-chevron-right ms-auto text-muted small opacity-50"></i>
                    </a>
                    <a href="{{ route('buyer.profile') }}" class="list-group-item list-group-item-action py-3 d-flex align-items-center px-4 border-0">
                        <div class="rounded-3 bg-info bg-opacity-10 text-info p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="bi bi-person-gear fs-5"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-dark">Edit Profile</div>
                            <small class="text-muted">Update your information</small>
                        </div>
                        <i class="bi bi-chevron-right ms-auto text-muted small opacity-50"></i>
                    </a>
                </div>
            </div>

            <!-- Activity Summary -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-header bg-transparent py-3">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-bar-chart-fill me-2 text-info"></i>Activity Summary
                    </h6>
                </div>
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted fw-medium"><i class="bi bi-dot me-1 text-primary"></i>Inquiries Sent</span>
                        <span class="fw-bold text-dark">{{ $inquiriesCount }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted fw-medium"><i class="bi bi-dot me-1 text-danger"></i>Favorites</span>
                        <span class="fw-bold text-dark">{{ $favoritesCount }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted fw-medium"><i class="bi bi-dot me-1 text-warning"></i>Saved Searches</span>
                        <span class="fw-bold text-dark">{{ $savedSearchesCount }}</span>
                    </div>
                </div>
            </div>

            <!-- Recent Inquiries -->
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header bg-transparent py-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-envelope me-2 text-success"></i>Recent Inquiries
                    </h6>
                    <a href="{{ route('buyer.inquiries.index') }}" class="btn btn-sm btn-link p-0 text-decoration-none fw-medium">View All</a>
                </div>
                <div class="list-group list-group-flush">
                    @forelse($recentInquiries->take(3) as $inquiry)
                        <div class="list-group-item py-3 px-4 border-0 border-bottom">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="fw-bold small text-dark">{{ Str::limit($inquiry->seller->company_name ?? 'Seller', 20) }}</span>
                                <small class="text-muted">{{ $inquiry->created_at->diffForHumans() }}</small>
                            </div>
                            <small class="text-muted d-block text-truncate">{{ $inquiry->message }}</small>
                        </div>
                    @empty
                        <div class="text-center py-5">
                            <div class="mb-3">
                                <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="bi bi-envelope-open fs-4 text-muted opacity-50"></i>
                                </div>
                            </div>
                            <div class="text-muted small">No inquiries found.</div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection