@extends('layouts.buyer')

@section('title', 'RFQ Details')

@section('buyer-content')
    <!-- Page Header -->
    <div class="page-header">
        <div>
            <h3 class="page-title">Requirement Details</h3>
            <p class="text-muted mb-0">View details and manage quotes for this requirement</p>
        </div>
        <a href="{{ route('buyer.rfqs.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Back to List
        </a>
    </div>

    <div class="row g-4">
        <!-- RFQ Details -->
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-file-text me-2 text-primary"></i>Requirement Information
                    </h6>
                    <span class="badge bg-{{ $rfq->status == 'open' ? 'success' : 'secondary' }} rounded-pill px-3">
                        {{ ucfirst($rfq->status) }}
                    </span>
                </div>
                <div class="card-body p-4">
                    <h4 class="fw-bold text-dark mb-3">{{ $rfq->title }}</h4>
                    
                    <div class="bg-light rounded p-3 mb-4 border-start border-4 border-primary">
                        <h6 class="fw-bold text-muted small text-uppercase mb-2">Description</h6>
                        <p class="mb-0 text-dark">{{ $rfq->description }}</p>
                    </div>

                    <div class="row g-4">

                        <div class="col-md-6">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded bg-info-subtle text-info p-2 me-3">
                                    <i class="bi bi-tag fs-5"></i>
                                </div>
                                <div>
                                    <small class="text-muted d-block">Category</small>
                                    <span class="fw-bold">{{ $rfq->category->name ?? $rfq->category }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded bg-warning-subtle text-warning p-2 me-3">
                                    <i class="bi bi-geo-alt fs-5"></i>
                                </div>
                                <div>
                                    <small class="text-muted d-block">Delivery Location</small>
                                    <span class="fw-bold">{{ $rfq->delivery_location }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded bg-purple-subtle text-purple p-2 me-3">
                                    <i class="bi bi-calendar-event fs-5"></i>
                                </div>
                                <div>
                                    <small class="text-muted d-block">Posted Date</small>
                                    <span class="fw-bold">{{ $rfq->created_at->format('d M Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quotes Section -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-chat-quote me-2 text-primary"></i>Received Quotes
                    </h6>
                    <span class="badge bg-primary-subtle text-primary rounded-pill">
                        {{ $rfq->quotes->count() }} Quotes
                    </span>
                </div>
                <div class="card-body p-0">
                    @forelse($rfq->quotes as $quote)
                        <div class="p-4 border-bottom {{ $quote->status == 'pending' ? 'bg-warning-subtle bg-opacity-10' : '' }}">
                            <div class="row align-items-center">
                                <div class="col-lg-5">
                                    <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: 48px; height: 48px; object-fit: cover;">
                                        @else
                                            <div class="rounded-circle bg-primary-subtle text-primary d-flex align-items-center justify-content-center me-3 fw-bold fs-5" style="width: 48px; height: 48px;">
                                                {{ strtoupper(substr($quote->seller->company_name ?? 'S', 0, 1)) }}
                                            </div>
                                        @endif
                                        <div>
                                            <h6 class="fw-bold mb-0 text-dark">
                                                {{ $quote->seller->company_name ?? 'Seller' }}
                                                @if($quote->seller && $quote->seller->isPaid())
                                                    <i class="bi bi-patch-check-fill text-warning ms-1" title="Premium Seller"></i>
                                                @endif
                                            </h6>
                                            <small class="text-muted">
                                                <i class="bi bi-clock me-1"></i> {{ $quote->created_at->diffForHumans() }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 text-center mt-3 mt-lg-0">
                                    <div class="fw-bold text-success fs-5">₹{{ number_format($quote->revised_price ?? $quote->price, 0) }}</div>
                                    <small class="text-muted">Quoted Price</small>
                                </div>
                                <div class="col-lg-2 text-center mt-3 mt-lg-0">
                                    {!! $quote->status_badge !!}
                                </div>
                                <div class="col-lg-2 text-end mt-3 mt-lg-0">
                                    <a href="{{ route('buyer.quotes.show', $quote->id) }}" class="btn btn-primary-gradient btn-sm shadow-sm">
                                        <i class="bi bi-eye me-1"></i> Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-5">
                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center mx-auto mb-4" style="width: 60px; height: 60px;">
                                <i class="bi bi-inbox fs-2 text-muted opacity-50"></i>
                            </div>
                            <h6 class="fw-bold mb-1">No Quotes Yet</h6>
                            <p class="text-muted small mb-0">We have notified relevant suppliers. Quotes will appear here.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Sidebar Info -->
        <div class="col-lg-4">
            <div class="card bg-primary-subtle border-0 mb-4">
                <div class="card-body p-4">
                    <div class="d-flex align-items-start">
                        <div class="rounded bg-white text-primary p-2 me-3 flex-shrink-0 shadow-sm">
                            <i class="bi bi-lightbulb fs-5"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-2 text-primary">What happens next?</h6>
                            <ul class="list-unstyled small text-muted mb-0">
                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Suppliers review your requirement.</li>
                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Interested suppliers send quotes.</li>
                                <li class="mb-2"><i class="bi bi-circle text-secondary me-2"></i>You review quotes and chat with sellers.</li>
                                <li><i class="bi bi-circle text-secondary me-2"></i>Accept the best quote to proceed.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-info-circle me-2 text-primary"></i>Quick Actions
                    </h6>
                </div>
                <div class="list-group list-group-flush">
                    @if($rfq->status == 'open')
                        <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center text-danger" onclick="confirm('Close this requirement?')">
                            <span><i class="bi bi-x-circle me-2"></i>Close Requirement</span>
                            <i class="bi bi-chevron-right small"></i>
                        </button>
                    @endif
                    <a href="{{ route('post.requirement.index') }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-plus-circle me-2"></i>Post Similar Requirement</span>
                        <i class="bi bi-chevron-right small"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection