@extends('layouts.seller')

@section('title', 'My Quotes')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="page-title fw-bold text-dark">My Quotes</h4>
        <p class="text-muted mb-0">Track and manage quotes sent to buyers</p>
    </div>
    <a href="{{ route('seller.rfqs') }}" class="btn btn-primary-gradient rounded-pill px-4 shadow-sm">
        <i class="bi bi-search me-1"></i> Browse Buy Leads
    </a>
</div>

<!-- Stats Cards -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-primary h-100 shadow-sm border-0">
            <div class="stat-icon bg-white bg-opacity-25 rounded-3">
                <i class="bi bi-send-fill"></i>
            </div>
            <div class="ps-3">
                <span class="stat-label text-white-50 small text-uppercase fw-bold">Total Sent</span>
                <span class="stat-value display-6 fw-bold">{{ $stats['total'] ?? 0 }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-warning h-100 shadow-sm border-0">
            <div class="stat-icon bg-white bg-opacity-25 rounded-3">
                <i class="bi bi-clock-history"></i>
            </div>
            <div class="ps-3">
                <span class="stat-label text-white-50 small text-uppercase fw-bold">Pending</span>
                <span class="stat-value display-6 fw-bold">{{ $stats['pending'] ?? 0 }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card stat-card-success h-100 shadow-sm border-0">
            <div class="stat-icon bg-white bg-opacity-25 rounded-3">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="ps-3">
                <span class="stat-label text-white-50 small text-uppercase fw-bold">Accepted</span>
                <span class="stat-value display-6 fw-bold">{{ $stats['accepted'] ?? 0 }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card h-100 shadow-sm border-0" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #fff;">
            <div class="stat-icon bg-white bg-opacity-25 rounded-3">
                <i class="bi bi-x-circle-fill"></i>
            </div>
            <div class="ps-3">
                <span class="stat-label text-white-50 small text-uppercase fw-bold">Rejected</span>
                <span class="stat-value display-6 fw-bold">{{ $stats['rejected'] ?? 0 }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Quotes Table -->
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-header bg-white py-3 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
        <h6 class="fw-bold mb-0 text-dark"><i class="bi bi-chat-quote-fill me-2 text-primary"></i>All Quotes</h6>
        <div class="position-relative" style="max-width: 100%; width: 300px;">
            <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
            <input type="text" class="form-control form-control-lg bg-light border-0 ps-5 rounded-pill fs-6" placeholder="Search quotes...">
        </div>
    </div>
    
    <!-- Mobile View (Cards) -->
    <div class="d-md-none">
        @forelse($quotes as $quote)
            <div class="p-3 border-bottom hover-bg-light transition-all">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div class="d-flex align-items-center">
                        <div class="avatar-circle me-3 flex-shrink-0" style="width: 40px; height: 40px; font-size: 1rem;">
                           {{ $quote->rfq && $quote->rfq->buyer ? strtoupper(substr($quote->rfq->buyer->user->name, 0, 1)) : '?' }}
                        </div>
                        <div>
                            <h6 class="mb-0 fw-bold text-dark">{{ $quote->rfq && $quote->rfq->buyer ? $quote->rfq->buyer->user->name : 'N/A' }}</h6>
                            <small class="text-muted" style="font-size: 0.75rem;">{{ $quote->created_at->format('M d, Y') }}</small>
                        </div>
                    </div>
                     {!! $quote->status_badge !!}
                </div>
                
                <div class="mb-2 bg-light rounded p-3">
                    <div class="d-flex justify-content-between mb-1">
                        <small class="text-muted">RFQ</small>
                        <span class="fw-medium text-dark text-truncate" style="max-width: 150px;">{{ $quote->rfq ? Str::limit($quote->rfq->title, 20) : 'N/A' }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-1">
                        <small class="text-muted">Amount</small>
                        <span class="fw-bold text-primary">₹{{ number_format($quote->price) }}</span>
                    </div>
                     <div class="d-flex justify-content-between">
                        <small class="text-muted">Delivery</small>
                        <span class="fw-medium text-dark">{{ $quote->delivery_timeline ?? 'N/A' }}</span>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-2">
                     <a href="{{ route('seller.quotes.show', $quote) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-bold">
                        <i class="bi bi-eye me-1"></i> View Details
                    </a>
                </div>
            </div>
        @empty
            <div class="text-center py-5">
                <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                    <i class="bi bi-chat-square-quote text-muted display-6"></i>
                </div>
                <h6 class="text-muted fw-bold">No quotes sent yet</h6>
                <a href="{{ route('seller.rfqs') }}" class="btn btn-sm btn-primary-gradient mt-2 rounded-pill px-4">Browse Buy Leads</a>
            </div>
        @endforelse
    </div>

    <!-- Desktop View (Table) -->
    <div class="table-responsive d-none d-md-block">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light">
                <tr>
                    <th class="ps-4 py-3 text-secondary small text-uppercase">RFQ Details</th>
                    <th class="py-3 text-secondary small text-uppercase">Buyer</th>
                    <th class="py-3 text-secondary small text-uppercase">Amount</th>
                    <th class="py-3 text-secondary small text-uppercase">Delivery</th>
                    <th class="py-3 text-secondary small text-uppercase">Status</th>
                    <th class="py-3 text-secondary small text-uppercase">Date</th>
                    <th class="text-end pe-4 py-3 text-secondary small text-uppercase">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($quotes as $quote)
                    <tr>
                        <td class="ps-4 py-3">
                            <div class="d-flex align-items-center">
                                <div class="rounded bg-primary-subtle p-2 me-3 text-primary">
                                    <i class="bi bi-file-text-fill"></i>
                                </div>
                                <div>
                                    <span class="fw-bold text-dark d-block text-truncate" style="max-width: 200px;">{{ $quote->rfq ? Str::limit($quote->rfq->title, 30) : 'N/A' }}</span>
                                    <small class="text-muted">ID: #{{ $quote->id }}</small>
                                </div>
                            </div>
                        </td>
                        <td class="py-3">
                            <div class="d-flex align-items-center">
                                <div class="avatar-circle me-2 flex-shrink-0" style="width: 32px; height: 32px; font-size: 0.8rem;">
                                    {{ $quote->rfq && $quote->rfq->buyer ? strtoupper(substr($quote->rfq->buyer->user->name, 0, 1)) : '?' }}
                                </div>
                                <span class="fw-medium">{{ $quote->rfq && $quote->rfq->buyer ? $quote->rfq->buyer->user->name : 'N/A' }}</span>
                            </div>
                        </td>
                        <td class="fw-bold text-dark py-3">₹{{ number_format($quote->price) }}</td>
                        <td class="py-3"><span class="badge bg-light text-dark border">{{ $quote->delivery_timeline ?? 'N/A' }}</span></td>
                        <td class="py-3 text-center">{!! $quote->status_badge !!}</td>
                        <td class="text-muted small fw-medium py-3">{{ $quote->created_at->format('M d, Y') }}</td>
                        <td class="text-end pe-4 py-3">
                            <a href="{{ route('seller.quotes.show', $quote) }}" class="btn btn-sm btn-white border shadow-sm hover-shadow rounded-pill px-3 fw-medium text-primary">
                                <i class="bi bi-eye me-1"></i> View
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <div class="text-muted opacity-50 mb-3">
                                <i class="bi bi-chat-square-quote display-4"></i>
                            </div>
                            <h6 class="text-muted fw-bold">No quotes sent yet</h6>
                            <a href="{{ route('seller.rfqs') }}" class="btn btn-sm btn-primary-gradient mt-2 rounded-pill px-4">Browse Buy Leads</a>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($quotes->hasPages())
        <div class="card-footer bg-white py-3 border-top-0 d-flex justify-content-center">{{ $quotes->links() }}</div>
    @endif
</div>

<style>
    .hover-bg-light:hover { background-color: #f8f9fa; }
</style>
@endsection
