@extends('layouts.admin-master')
@section('title', 'Accepted Deals')
@section('style')
    @include('admin.style')
    <style>
        /* ── Crop chip ── */
        .crop-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #e8f0fe;
            color: #365CF5;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        /* ── Summary stat cards ── */
        .stat-card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .stat-icon {
            width: 50px; height: 50px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .stat-card h3 { font-size: 1.6rem; font-weight: 800; margin: 0; color: #1a1a2e; }
        .stat-card p  { font-size: 0.78rem; font-weight: 600; color: #6b7280; margin: 2px 0 0; text-transform: uppercase; letter-spacing: .04em; }

        /* ── Search bar ── */
        .deals-search-bar {
            display: flex;
            gap: 0;
            max-width: 320px;
        }
        .deals-search-bar input {
            border: 1.5px solid #e5e7eb;
            border-right: none;
            border-radius: 10px 0 0 10px;
            padding: 8px 14px;
            font-size: 13px;
            outline: none;
            flex: 1;
            color: #1a1a2e;
        }
        .deals-search-bar input:focus { border-color: #0a5132; }
        .deals-search-bar button {
            background: linear-gradient(135deg,#0a5132,#1a7a4a);
            border: none;
            border-radius: 0 10px 10px 0;
            padding: 8px 16px;
            color: #fff;
            font-size: 13px;
            cursor: pointer;
        }

        /* ── Contact buttons ── */
        .btn-call-farmer {
            display: inline-flex; align-items: center; gap: 5px;
            background: #e8f0fe; color: #365CF5;
            border: none; border-radius: 8px;
            padding: 5px 12px; font-size: 12px; font-weight: 600;
            text-decoration: none;
            transition: background .15s, transform .15s;
        }
        .btn-call-farmer:hover { background: #c7d7fc; color: #365CF5; transform: scale(1.04); }

        .btn-call-vendor {
            display: inline-flex; align-items: center; gap: 5px;
            background: #e8f5e9; color: #2e7d32;
            border: none; border-radius: 8px;
            padding: 5px 12px; font-size: 12px; font-weight: 600;
            text-decoration: none;
            transition: background .15s, transform .15s;
        }
        .btn-call-vendor:hover { background: #c8e6c9; color: #2e7d32; transform: scale(1.04); }

        /* ── Price badge ── */
        .price-badge {
            font-size: 13px;
            font-weight: 700;
            color: #0a5132;
        }
        .price-unit {
            font-size: 11px;
            color: #9ca3af;
            font-weight: 500;
        }

        /* ── Accepted badge ── */
        .badge-accepted {
            display: inline-flex; align-items: center; gap: 4px;
            background: #d1fae5; color: #065f46;
            border-radius: 20px;
            padding: 3px 10px;
            font-size: 11px; font-weight: 700;
        }

        /* ── Empty state ── */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
        }
        .empty-state i { font-size: 40px; margin-bottom: 12px; display: block; }
        .empty-state p { font-size: 14px; margin: 0; }
    </style>
@endsection

@section('content')
<aside class="sidebar-nav-wrapper">@include('admin.sidenav')</aside>
<div class="overlay"></div>

<main class="main-wrapper">
    @include('admin.header')

    <section class="section">
        <div class="container-fluid">

            {{-- Page Title --}}
            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="title"><h2>Accepted Deals</h2></div>
                   
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            {{-- Stat Cards --}}
            <div class="row mb-30 mt-2">
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="stat-card">
                        <div class="stat-icon" style="background:#d1fae5;">
                            <i class="fas fa-handshake" style="color:#065f46;"></i>
                        </div>
                        <div>
                            <h3>{{ $totalAccepted }}</h3>
                            <p>Total Accepted</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="stat-card">
                        <div class="stat-icon" style="background:#fef3c7;">
                            <i class="fas fa-bell" style="color:#d97706;"></i>
                        </div>
                        <div>
                            <h3 style="color:#d97706;">{{ $unreadCount }}</h3>
                            <p>New / Unread</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Table Card --}}
            <div class="row">
                <div class="col-lg-12">
                    <div class="card-style mb-30">

                        {{-- Toolbar --}}
                        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
                            <h6 class="text-medium mb-0" style="font-size:15px;">
                                <i class="fas fa-circle-check me-2" style="color:#065f46;"></i>
                                Farmer &amp; Vendor Contact Details
                            </h6>
                            <form method="GET" action="{{ route('interests.index') }}" class="deals-search-bar">
                                <input type="text" name="search"
                                    placeholder="Search crop name…"
                                    value="{{ request('search') }}">
                                <button type="submit"><i class="lni lni-search-alt"></i></button>
                            </form>
                        </div>

                        <div class="table-responsive">
                            <table class="table top-selling-table">
                                <thead>
                                    <tr>
                                        <th><h6 class="text-sm text-medium">#</h6></th>
                                        <th><h6 class="text-sm text-medium">Crop</h6></th>
                                        <th><h6 class="text-sm text-medium">Farmer</h6></th>
                                        <th><h6 class="text-sm text-medium">Vendor</h6></th>
                                        <th><h6 class="text-sm text-medium">Offered Price</h6></th>
                                        <th><h6 class="text-sm text-medium">Qty</h6></th>
                                        <th><h6 class="text-sm text-medium">Status</h6></th>
                                        <th><h6 class="text-sm text-medium">Accepted On</h6></th>
                                        <th class="text-end"><h6 class="text-sm text-medium">Contact</h6></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($interests as $index => $interest)
                                    <tr>
                                        <td class="text-sm">{{ ($interests->firstItem() ?? 1) + $index }}</td>

                                        <td>
                                            <span class="crop-chip">
                                                <i class="lni lni-leaf"></i>
                                                {{ optional($interest->farmerCrop->crop)->crop_name ?? 'N/A' }}
                                            </span>
                                            @if($interest->farmerCrop->variety || $interest->farmerCrop->grade)
                                                <div class="text-xs text-gray mt-1">
                                                    {{ $interest->farmerCrop->variety ?? '' }}
                                                    {{ $interest->farmerCrop->grade ? '· ' . $interest->farmerCrop->grade : '' }}
                                                </div>
                                            @endif
                                        </td>

                                        <td>
                                            <p class="text-sm fw-500 mb-0">{{ $interest->farmer->name ?? 'N/A' }}</p>
                                            <p class="text-xs text-gray mb-0">
                                                <i class="lni lni-phone me-1"></i>{{ $interest->farmer->phone ?? '—' }}
                                            </p>
                                        </td>

                                        <td>
                                            <p class="text-sm fw-500 mb-0">
                                                {{ optional($interest->vendor)->vendor_name ?? 'N/A' }}
                                            </p>
                                            <p class="text-xs text-gray mb-0">
                                                <i class="lni lni-phone me-1"></i>{{ optional($interest->vendor->user)->phone ?? '—' }}
                                            </p>
                                        </td>

                                        <td>
                                            <span class="price-badge">
                                                ₹{{ number_format($interest->offered_price, 2) }}
                                            </span>
                                            <span class="price-unit d-block">
                                                per {{ $interest->farmerCrop->quantity_unit ?? 'unit' }}
                                            </span>
                                        </td>

                                        <td>
                                            <p class="text-sm fw-500 mb-0">{{ $interest->quantity ?? '—' }}</p>
                                            <p class="text-xs text-gray mb-0">{{ $interest->farmerCrop->quantity_unit ?? '' }}</p>
                                        </td>

                                        <td>
                                            <span class="badge-accepted">
                                                <i class="fas fa-circle-check" style="font-size:9px;"></i> Accepted
                                            </span>
                                        </td>

                                        <td class="text-sm text-gray">
                                            {{ $interest->updated_at->format('d M Y') }}
                                        </td>

                                        <td>
                                            <div class="d-flex gap-2 justify-content-end">
                                                <a href="tel:{{ $interest->farmer->phone ?? '' }}"
                                                   class="btn-call-farmer"
                                                   title="Call Farmer: {{ $interest->farmer->name ?? '' }}">
                                                    <i class="lni lni-phone"></i> Farmer
                                                </a>
                                                <a href="tel:{{ optional($interest->vendor->user)->phone ?? '' }}"
                                                   class="btn-call-vendor"
                                                   title="Call Vendor: {{ optional($interest->vendor)->vendor_name ?? '' }}">
                                                    <i class="lni lni-phone"></i> Vendor
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9">
                                            <div class="empty-state">
                                                <i class="lni lni-handshake"></i>
                                                <p>No accepted deals found.</p>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        {{-- Pagination --}}
                        <div class="pt-10 d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <p class="text-sm text-gray mb-0">
                                Showing {{ $interests->firstItem() ?? 0 }}–{{ $interests->lastItem() ?? 0 }}
                                of {{ $interests->total() }} entries
                            </p>
                            {{ $interests->appends(request()->query())->links('pagination::bootstrap-4') }}
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </section>

    @include('admin.footer')
</main>
@endsection