@extends('layouts.admin-master')
@section('title', 'Vendor Management')
@section('style') @include('admin.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">

            <div class="title-wrapper pt-30">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="title"><h2>Vendor Management</h2></div>
  
                    </div>
                    <div class="col-md-6"></div>
                </div>
            </div>

            <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-20">
                            <h6 class="text-medium mb-0">All Vendors</h6>
                            <div class="d-flex gap-2 flex-wrap align-items-center">
                                <form method="GET" action="{{ route('vendor') }}" class="admin-search-bar">
                                    <div class="input-group" style="width:260px;">
                                        <input type="text" class="form-control" name="search"
                                            placeholder="Search name, phone…" value="{{ request('search') }}">
                                        <button type="submit"><i class="lni lni-search-alt"></i></button>
                                    </div>
                                </form>
                                <form method="GET" action="{{ route('vendor') }}">
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                    <select name="kyc" class="form-select form-select-sm" onchange="this.form.submit()" style="min-width:140px;font-size:13px;">
                                        <option value="">All KYC</option>
                                        <option value="pending"  {{ request('kyc')=='pending'  ? 'selected':'' }}>Pending</option>
                                        <option value="verified" {{ request('kyc')=='verified' ? 'selected':'' }}>Verified</option>
                                    </select>
                                </form>
                                <a href="{{ route('vendor.export') }}" class="action-btn" style="background:#d1e7dd;color:#0a5132;width:auto;padding:0 14px;border-radius:8px;font-size:13px;gap:6px;height:34px;" title="Export CSV">
                                    <i class="lni lni-download"></i> Export CSV
                                </a>
                            </div>
                        </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">Vendor</h6></th>
                                        <th><h6 class="text-sm text-medium">Phone</h6></th>
                                        <th><h6 class="text-sm text-medium">Email</h6></th>
                                        <th><h6 class="text-sm text-medium">State</h6></th>
                                        <th><h6 class="text-sm text-medium">KYC</h6></th>
                                        <th><h6 class="text-sm text-medium">Status</h6></th>
                                        <th class="text-end"><h6 class="text-sm text-medium">Actions</h6></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($vendors as $index => $vendor)
                                    <tr>
                                        <td class="text-sm">{{ ($vendors->firstItem() ?? 1) + $index }}</td>

                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($vendor->brand_logo)
                                                    <img src="{{ $vendor->brand_logo_url }}" alt="{{ $vendor->vendor_name }}"
                                                        class="rounded-circle" style="width:36px;height:36px;object-fit:cover;border:1px solid #e5e7eb;">
                                                @else
                                                <div class="rounded-circle d-flex align-items-center justify-content-center"
                                                    style="width:36px;height:36px;background:#e8f0fe;color:#365CF5;font-weight:700;font-size:14px;">
                                                    {{ strtoupper(substr($vendor->vendor_name ?? 'V', 0, 1)) }}
                                                </div>
                                                @endif
                                                <div>
                                                    <p class="text-sm mb-0 fw-500">{{ $vendor->vendor_name }}</p>
                                                    <p class="text-xs text-gray mb-0">{{ $vendor->user->email ?? '—' }}</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td class="text-sm">{{ $vendor->user->phone ?? '—' }}</td>
                                        <td class="text-sm">{{ $vendor->user->email ?? '—' }}</td>
                                        <td class="text-sm">{{ $vendor->user->addresses->first()->stateRel->name ?? ($vendor->user->addresses->first()->state ?? '—') }}</td>

                                        <td>
                                            @if($vendor->user->is_kyc_completed ?? false)
                                                <span class="badge-status badge-verified">Verified</span>
                                            @elseif($vendor->user->is_phone_verified ?? false)
                                                <span class="badge-status badge-pending">Pending</span>
                                            @else
                                                <span class="badge-status badge-rejected">Unverified</span>
                                            @endif
                                        </td>

                                        <td>
                                            @if($vendor->status === 'suspended')
                                                <span class="badge-status badge-suspended">Suspended</span>
                                            @elseif($vendor->status === 'approved')
                                                <span class="badge-status badge-approved">Approved</span>
                                            @else
                                                <span class="badge-status badge-pending">{{ ucfirst($vendor->status ?? 'pending') }}</span>
                                            @endif
                                        </td>

                                        <td>
                                            <div class="d-flex gap-1 justify-content-end">
                                                <a href="{{ route('vendor.view', $vendor->id) }}" class="action-btn view" title="View">
                                                    <i class="lni lni-eye"></i>
                                                </a>
                                                <a href="{{ route('vendor.edit', $vendor->id) }}" class="action-btn edit" title="Edit">
                                                    <i class="lni lni-pencil"></i>
                                                </a>
                                                <form action="{{ route('vendor.suspend', $vendor->id) }}" method="POST"
                                                    data-confirm="{{ $vendor->status === 'suspended' ? 'Reactivate this vendor?' : 'Suspend this vendor?' }}"
                                                    data-confirm-title="{{ $vendor->status === 'suspended' ? 'Reactivate Vendor' : 'Suspend Vendor' }}"
                                                    data-confirm-ok="{{ $vendor->status === 'suspended' ? 'Reactivate' : 'Suspend' }}"
                                                    data-confirm-class="{{ $vendor->status === 'suspended' ? 'btn-success' : 'btn-warning' }}">
                                                    @csrf @method('PATCH')
                                                    <button type="submit" class="action-btn {{ $vendor->status === 'suspended' ? 'restore' : 'suspend' }}"
                                                        title="{{ $vendor->status === 'suspended' ? 'Reactivate' : 'Suspend' }}">
                                                        <i class="fas {{ $vendor->status === 'suspended' ? 'fa-user-check' : 'fa-user-slash' }}"></i>
                                                    </button>
                                                </form>
                                                <form action="{{ route('vendor.destroy', $vendor->id) }}" method="POST"
                                                    data-confirm="This will permanently delete the vendor and all associated data."
                                                    data-confirm-title="Delete Vendor">
                                                    @csrf @method('DELETE')
                                                    <button type="submit" class="action-btn delete" title="Delete">
                                                        <i class="lni lni-trash-can"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-5 text-muted">
                                            <i class="lni lni-users" style="font-size:32px;opacity:.3;"></i>
                                            <p class="mt-2 mb-0">No vendors found</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <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 {{ $vendors->firstItem() ?? 0 }} – {{ $vendors->lastItem() ?? 0 }}
                                of {{ $vendors->total() }} vendors
                            </p>
                            {{ $vendors->appends(request()->query())->links('pagination::bootstrap-4') }}
                        </div>

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

        </div>
    </section>

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