@extends('layouts.master')

@section('title', $rfq->title . ' - Buy Leads')

@section('content')
<style>
    .timeline-item::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 30px;
        bottom: -20px;
        width: 2px;
        background: #e5e7eb;
    }
    .timeline-item:last-child::before {
        display: none;
    }
</style>

@php
    $daysOld = $rfq->created_at->diffInDays(now());
    if ($daysOld <= 1) {
        $urgencyClass = 'bg-danger';
        $urgencyLabel = 'Urgent';
        $urgencyIcon = 'bi-lightning-fill';
    } elseif ($daysOld <= 3) {
        $urgencyClass = 'bg-warning text-dark';
        $urgencyLabel = 'Active';
        $urgencyIcon = 'bi-clock-fill';
    } else {
        $urgencyClass = 'bg-success';
        $urgencyLabel = 'Open';
        $urgencyIcon = 'bi-check-circle-fill';
    }
@endphp

<!-- Hero Section -->
<section class="tw-bg-gradient-to-r tw-from-blue-600 tw-to-blue-800 tw-text-white tw-py-8">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb tw-text-blue-200 mb-0">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="tw-text-blue-200 text-decoration-none hover:tw-text-white">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('public.rfqs.index') }}" class="tw-text-blue-200 text-decoration-none hover:tw-text-white">Buy Leads</a></li>
                <li class="breadcrumb-item tw-text-white" aria-current="page">Buy Lead #{{ $rfq->id }}</li>
            </ol>
        </nav>
        
        <div class="d-flex flex-wrap align-items-center gap-3 mb-2">
            <span class="badge {{ $urgencyClass }} tw-py-2 tw-px-3">
                <i class="bi {{ $urgencyIcon }} me-1"></i> {{ $urgencyLabel }}
            </span>
            <span class="badge bg-light text-dark tw-py-2 tw-px-3">
                <i class="bi bi-tag-fill me-1"></i> {{ $rfq->category ?? 'General' }}
            </span>
            @if($daysOld == 0)
                <span class="badge bg-danger tw-animate-pulse tw-py-2 tw-px-3">NEW TODAY</span>
            @endif
        </div>
        
        <h1 class="tw-text-3xl tw-font-bold tw-mb-2">{{ $rfq->title }}</h1>
        
        <div class="d-flex flex-wrap gap-4 tw-text-blue-100 tw-text-sm">
            <span><i class="bi bi-clock me-1"></i> Posted {{ $rfq->created_at->diffForHumans() }}</span>
            <span><i class="bi bi-calendar me-1"></i> {{ $rfq->created_at->format('d M Y') }}</span>
            @if($rfq->delivery_location)
                <span><i class="bi bi-geo-alt-fill me-1"></i> {{ $rfq->delivery_location }}</span>
            @endif
        </div>
    </div>
</section>

<!-- Main Content -->
<div class="tw-bg-gray-50 tw-py-8">
    <div class="container">
        <div class="row g-4">
            <!-- Left: RFQ Details -->
            <div class="col-lg-8">
                <!-- Requirement Overview Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white tw-border-b tw-border-gray-100 tw-py-4">
                        <h5 class="fw-bold mb-0">
                            <i class="bi bi-file-text tw-text-primary me-2"></i>
                            Requirement Overview
                        </h5>
                    </div>
                    <div class="card-body tw-p-6">
                        <!-- Key Metrics -->
                        <div class="row g-4 mb-4">
                            <div class="col-6 col-md-3">
                                <div class="tw-bg-blue-50 tw-rounded-lg tw-p-4 text-center h-100">
                                    <div class="tw-text-blue-600 tw-text-2xl tw-font-bold">
                                        {{ $rfq->quantity ?? 'N/A' }}
                                    </div>
                                    <div class="tw-text-gray-500 tw-text-sm">Quantity</div>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="tw-bg-green-50 tw-rounded-lg tw-p-4 text-center h-100">
                                    <div class="tw-text-green-600 tw-text-2xl tw-font-bold">
                                        {{ $rfq->budget ? '₹' . number_format($rfq->budget) : 'Open' }}
                                    </div>
                                    <div class="tw-text-gray-500 tw-text-sm">Budget</div>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="tw-bg-purple-50 tw-rounded-lg tw-p-4 text-center h-100">
                                    <div class="tw-text-purple-600 tw-text-2xl tw-font-bold">
                                        {{ $rfq->unit ?? 'Units' }}
                                    </div>
                                    <div class="tw-text-gray-500 tw-text-sm">Unit</div>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="tw-bg-orange-50 tw-rounded-lg tw-p-4 text-center h-100">
                                    <div class="tw-text-orange-600 tw-text-2xl tw-font-bold">
                                        {{ $rfq->delivery_location ?? 'India' }}
                                    </div>
                                    <div class="tw-text-gray-500 tw-text-sm">Delivery</div>
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="tw-border-t tw-border-gray-100 tw-pt-4">
                            <h6 class="fw-bold tw-text-gray-800 mb-3">
                                <i class="bi bi-card-text me-2 tw-text-primary"></i>
                                Detailed Description
                            </h6>
                            <div class="tw-bg-gray-50 tw-rounded-lg tw-p-4">
                                <p class="tw-text-gray-700 mb-0" style="white-space: pre-line; line-height: 1.8;">{{ $rfq->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buyer Info Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white tw-border-b tw-border-gray-100 tw-py-4">
                        <h5 class="fw-bold mb-0">
                            <i class="bi bi-person-circle tw-text-primary me-2"></i>
                            Buyer Information
                        </h5>
                    </div>
                    <div class="card-body tw-p-6">
                        <div class="d-flex align-items-center">
                            <div class="tw-w-16 tw-h-16 tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white tw-text-2xl tw-font-bold me-4">
                                {{ strtoupper(substr($rfq->buyer?->user?->name ?? 'B', 0, 1)) }}
                            </div>
                            <div>
                                <h6 class="fw-bold tw-text-gray-800 mb-1">{{ $rfq->buyer?->user?->name ?? 'Verified Buyer' }}</h6>
                                <p class="tw-text-gray-500 tw-text-sm mb-0">
                                    <i class="bi bi-patch-check-fill tw-text-blue-500 me-1"></i>
                                    Verified Member since {{ $rfq->buyer?->created_at?->format('M Y') ?? 'N/A' }}
                                </p>
                            </div>
                        </div>
                        
                        @auth
                            @if(auth()->user()->hasRole('seller'))
                                <div class="tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-100">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <div class="tw-text-gray-500 tw-text-sm">Company</div>
                                            <div class="tw-font-medium">{{ $rfq->buyer?->company_name ?? 'Not disclosed' }}</div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="tw-text-gray-500 tw-text-sm">Location</div>
                                            <div class="tw-font-medium">{{ $rfq->buyer?->city ?? 'India' }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endauth
                    </div>
                </div>

                <!-- Tips Card -->
                <div class="card border-0 shadow-sm tw-bg-gradient-to-r tw-from-yellow-50 tw-to-orange-50">
                    <div class="card-body tw-p-4">
                        <h6 class="fw-bold tw-text-gray-800 mb-3">
                            <i class="bi bi-lightbulb-fill tw-text-yellow-500 me-2"></i>
                            Tips for Sellers
                        </h6>
                        <ul class="tw-text-sm tw-text-gray-600 mb-0 ps-3">
                            <li class="mb-2">Respond quickly - buyers prefer fast responses</li>
                            <li class="mb-2">Include all costs in your quote (shipping, taxes, etc.)</li>
                            <li class="mb-2">Highlight your unique selling points</li>
                            <li>Provide samples if possible to build trust</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Right: Quote Action -->
            <div class="col-lg-4">
                <div style="position: sticky; top: 80px;">
                    <!-- Quote Card -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white tw-border-b tw-border-gray-100 tw-py-4">
                            <h5 class="fw-bold mb-0">
                                <i class="bi bi-lightning-fill tw-text-primary me-2"></i>
                                Submit Your Quote
                            </h5>
                        </div>
                        <div class="card-body tw-p-4">
                            @auth
                                @if(auth()->user()->hasRole('seller'))
                                    @if($hasQuoted)
                                        <div class="text-center tw-py-4">
                                            <div class="tw-w-16 tw-h-16 tw-mx-auto tw-bg-green-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-4">
                                                <i class="bi bi-check-lg tw-text-3xl tw-text-green-600"></i>
                                            </div>
                                            <h6 class="fw-bold tw-text-gray-800">Quote Submitted!</h6>
                                            <p class="tw-text-gray-500 tw-text-sm tw-mb-4">You have already quoted on this requirement.</p>
                                            <a href="{{ route('seller.quotes.index') }}" class="btn btn-outline-primary w-100">View My Quotes</a>
                                        </div>
                                    @else
                                        <p class="tw-text-gray-500 tw-text-sm mb-4">Send your best offer to the buyer. Make it competitive!</p>
                                        
                                        <div class="d-grid gap-3">
                                            <button class="btn btn-primary btn-lg fw-bold tw-py-3" data-bs-toggle="modal" data-bs-target="#quoteModal">
                                                <i class="bi bi-send-fill me-2"></i> Send Quote Now
                                            </button>
                                            <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#contactModal">
                                                <i class="bi bi-telephone-fill me-2"></i> View Contact Info
                                            </button>
                                        </div>
                                        
                                        <div class="tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-100">
                                            <div class="d-flex align-items-center tw-text-sm tw-text-gray-500">
                                                <i class="bi bi-shield-check tw-text-green-500 me-2"></i>
                                                Secure & verified transaction
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="text-center tw-py-4">
                                        <div class="tw-w-16 tw-h-16 tw-mx-auto tw-bg-yellow-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-4">
                                            <i class="bi bi-exclamation-triangle tw-text-2xl tw-text-yellow-600"></i>
                                        </div>
                                        <h6 class="fw-bold tw-text-gray-800">Buyer Account Detected</h6>
                                        <p class="tw-text-gray-500 tw-text-sm tw-mb-4">Only registered sellers can quote on requirements.</p>
                                        <a href="{{ route('register.seller') }}" class="btn btn-primary w-100">Register as Seller</a>
                                    </div>
                                @endif
                            @else
                                <div class="text-center tw-py-4">
                                    <div class="tw-w-16 tw-h-16 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-lock tw-text-2xl tw-text-gray-500"></i>
                                    </div>
                                    <h6 class="fw-bold tw-text-gray-800">Login Required</h6>
                                    <p class="tw-text-gray-500 tw-text-sm tw-mb-4">Please login as a seller to view contact details and submit quotes.</p>
                                    <div class="d-grid gap-2">
                                        <a href="{{ route('login') }}" class="btn btn-primary fw-bold">Login to Quote</a>
                                        <a href="{{ route('register.seller') }}" class="btn btn-outline-primary">Register as Seller</a>
                                    </div>
                                </div>
                            @endauth
                        </div>
                    </div>

                    <!-- Share Card -->
                    <div class="card border-0 shadow-sm mt-4">
                        <div class="card-body tw-p-4">
                            <h6 class="fw-bold tw-text-gray-800 mb-3">Share this Lead</h6>
                            <div class="d-flex gap-2">
                                <a href="https://wa.me/?text={{ urlencode($rfq->title . ' - ' . url()->current()) }}" target="_blank" class="btn btn-outline-success flex-fill">
                                    <i class="bi bi-whatsapp"></i>
                                </a>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($rfq->title) }}" target="_blank" class="btn btn-outline-primary flex-fill">
                                    <i class="bi bi-linkedin"></i>
                                </a>
                                <button class="btn btn-outline-secondary flex-fill" onclick="navigator.clipboard.writeText('{{ url()->current() }}'); alert('Link copied!');">
                                    <i class="bi bi-link-45deg"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quote Modal -->
<div class="modal fade" id="quoteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header tw-bg-gradient-to-r tw-from-blue-600 tw-to-blue-700 tw-text-white border-bottom-0">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-send-fill me-2"></i> Send Your Quote
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body tw-p-4">
                <form action="{{ route('public.rfqs.quote', $rfq->id) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label class="form-label fw-bold">Your Price (₹) <span class="text-danger">*</span></label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text">₹</span>
                            <input type="number" name="price" class="form-control" placeholder="Enter your best price" required min="1">
                        </div>
                        <div class="form-text">Include all costs (GST, shipping, etc.)</div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold">Delivery Timeline <span class="text-danger">*</span></label>
                        <select name="delivery_timeline" class="form-select" required>
                            <option value="Immediate (1-3 days)">Immediate (1-3 days)</option>
                            <option value="Within 1 week">Within 1 week</option>
                            <option value="Within 2 weeks">Within 2 weeks</option>
                            <option value="Within 1 month">Within 1 month</option>
                            <option value="More than 1 month">More than 1 month</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-bold">Message to Buyer</label>
                        <textarea name="message" class="form-control" rows="4" placeholder="Describe your offer, quality, terms, etc."></textarea>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg fw-bold">
                            <i class="bi bi-send-fill me-2"></i> Submit Quote
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-person-lines-fill me-2 tw-text-primary"></i> Contact Information
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body tw-p-4">
                <div class="d-flex align-items-center tw-mb-4">
                    <div class="tw-w-14 tw-h-14 tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white tw-text-xl tw-font-bold me-3">
                        {{ strtoupper(substr($rfq->buyer?->user?->name ?? 'B', 0, 1)) }}
                    </div>
                    <div>
                        <h6 class="fw-bold mb-0">{{ $rfq->buyer?->user?->name ?? 'Verified Buyer' }}</h6>
                        <small class="tw-text-gray-500">{{ $rfq->buyer?->company_name ?? 'Company' }}</small>
                    </div>
                </div>
                
                <div class="tw-bg-gray-50 tw-rounded-lg tw-p-4 tw-mb-4">
                    <div class="mb-3">
                        <div class="tw-text-gray-500 tw-text-sm">Phone</div>
                        <div class="fw-bold tw-text-lg">{{ $rfq->buyer?->phone ?? '+91 XXXXXXXXXX' }}</div>
                    </div>
                    <div>
                        <div class="tw-text-gray-500 tw-text-sm">Email</div>
                        <div class="fw-bold">{{ $rfq->buyer?->user?->email ?? 'buyer@example.com' }}</div>
                    </div>
                </div>
                
                <a href="tel:{{ $rfq->buyer?->phone ?? '' }}" class="btn btn-success w-100">
                    <i class="bi bi-telephone-fill me-2"></i> Call Now
                </a>
            </div>
        </div>
    </div>
</div>
@endsection