@extends('layouts.seller')

@section('title', 'Buy Leads (RFQs)')

@section('content')
<div class="page-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
    <div>
        <h4 class="page-title fw-bold text-dark fs-5 mb-0">Buy Leads (RFQs)</h4>
        <p class="text-muted small mb-0">Respond to buyer requirements and send quotes.</p>
    </div>
    <form class="d-flex gap-2" action="{{ route('seller.rfqs') }}" method="GET">
        <div class="input-group input-group-sm">
            <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search"></i></span>
            <input class="form-control border-start-0 ps-0" type="search" name="search" placeholder="Search RFQs..." value="{{ request('search') }}">
        </div>
        <button class="btn btn-outline-secondary btn-sm" type="submit">Search</button>
    </form>
</div>

<!-- Compact Stats -->
<div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
            <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                     <div class="text-uppercase fw-bold text-muted extra-small">Total RFQs</div>
                     <div class="h5 fw-bold mb-0 text-primary mt-1">{{ $rfqs->total() }}</div>
                </div>
                <div class="bg-primary bg-opacity-10 text-primary p-2 rounded">
                    <i class="bi bi-layers-fill"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
             <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                     <div class="text-uppercase fw-bold text-muted extra-small">New Today</div>
                     <div class="h5 fw-bold mb-0 text-success mt-1">
                        {{ \App\Models\Rfq::whereDate('created_at', today())->count() }}
                     </div>
                </div>
                <div class="bg-success bg-opacity-10 text-success p-2 rounded">
                    <i class="bi bi-calendar-plus-fill"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
             <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                     <div class="text-uppercase fw-bold text-muted extra-small">Pending</div>
                     <div class="h5 fw-bold mb-0 text-warning mt-1">{{ $rfqs->where('status', 'pending')->count() }}</div>
                </div>
                 <div class="bg-warning bg-opacity-10 text-warning p-2 rounded">
                    <i class="bi bi-hourglass-split"></i>
                </div>
            </div>
        </div>
    </div>
     <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-3 h-100">
             <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                     <div class="text-uppercase fw-bold text-muted extra-small">Plan Limit</div>
                     <div class="h5 fw-bold mb-0 text-muted mt-1">Unlimited</div>
                </div>
                <div class="bg-secondary bg-opacity-10 text-secondary p-2 rounded">
                    <i class="bi bi-infinity"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- List View -->
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
    <div class="card-body p-0">
        <!-- Desktop Table -->
        <div class="table-responsive d-none d-lg-block">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted small text-uppercase">
                    <tr>
                        <th class="ps-3 py-2">RFQ Details</th>
                        <th class="py-2">Quantity</th>
                        <th class="py-2">Location</th>
                        <th class="py-2">Date</th>
                        <th class="py-2 text-end pe-3">Action</th>
                    </tr>
                </thead>
                <tbody class="border-top-0">
                    @forelse($rfqs as $rfq)
                    <tr>
                         <td class="ps-3 py-2">
                            <span class="d-block fw-bold text-dark text-truncate" style="max-width: 300px;">{{ $rfq->product_name }}</span>
                            <small class="text-muted d-block text-truncate" style="max-width: 300px;">{{ $rfq->description }}</small>
                        </td>
                        <td class="py-2 small">{{ $rfq->quantity }} {{ $rfq->unit }}</td>
                        <td class="py-2 small">{{ $rfq->location ?? 'India' }}</td>
                         <td class="py-2 small text-muted">{{ $rfq->created_at->format('M d, Y') }}</td>
                        <td class="py-2 text-end pe-3">
                             <button class="btn btn-primary btn-sm rounded-pill px-3 py-1 fw-bold fs-xs" data-bs-toggle="modal" data-bs-target="#sendQuoteModal{{ $rfq->id }}">
                                Send Quote
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="text-center py-4 small text-muted">No RFQs found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile List -->
        <div class="d-lg-none">
            @forelse($rfqs as $rfq)
                <div class="p-3 border-bottom">
                    <div class="d-flex justify-content-between align-items-start mb-1">
                        <h6 class="fw-bold text-dark mb-0 main-text">{{ $rfq->product_name }}</h6>
                        <small class="text-muted">{{ $rfq->created_at->format('d M') }}</small>
                    </div>
                    <p class="small text-muted mb-2 line-clamp-2">{{ $rfq->description }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="badge bg-light text-dark border small fw-normal">{{ $rfq->quantity }} {{ $rfq->unit }}</span>
                        <button class="btn btn-primary btn-sm rounded-pill px-3 py-0 fw-bold fs-xs" data-bs-toggle="modal" data-bs-target="#sendQuoteModal{{ $rfq->id }}">
                            Quote
                        </button>
                    </div>
                </div>
            @empty
                <div class="text-center py-5"><span class="text-muted small">No RFQs found.</span></div>
            @endforelse
        </div>
    </div>
    @if($rfqs->hasPages())
    <div class="card-footer bg-white py-2">
        {{ $rfqs->links() }}
    </div>
    @endif
</div>

<!-- Modals outside the table to prevent flickering -->
@foreach($rfqs as $rfq)
<div class="modal fade" id="sendQuoteModal{{ $rfq->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0">
            <form action="{{ route('seller.rfqs.quote', $rfq->id) }}" method="POST">
                @csrf
                <div class="modal-header border-bottom-0 pb-0">
                    <h6 class="modal-title fw-bold">Quote for {{ $rfq->product_name }}</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body pt-2">
                    <div class="alert alert-light border small mb-3 p-2">
                        <strong>Buyer needs:</strong> {{ $rfq->quantity }} {{ $rfq->unit }}<br>
                        <small class="text-muted">{{ $rfq->description }}</small>
                    </div>
                    <div class="row g-2 mb-2">
                        <div class="col-6">
                            <label class="form-label small fw-bold">Price/Unit</label>
                            <input type="number" name="price" class="form-control form-control-sm" required placeholder="₹ 0.00">
                        </div>
                            <div class="col-6">
                            <label class="form-label small fw-bold">Delivery Days</label>
                            <input type="number" name="delivery_days" class="form-control form-control-sm" placeholder="e.g. 5">
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-bold">Message</label>
                        <textarea name="message" class="form-control form-control-sm" rows="2" placeholder="Describe your offer..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm fw-bold px-4">Send Quote</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

<style>
    .extra-small { font-size: 0.65rem; }
    .fs-xs { font-size: 0.75rem; }
    .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
</style>
@endsection