@extends('layouts.admin')

@section('title', 'Independent Vendors')

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">Independent Vendors</h1>
        <p class="text-muted mb-0">Manage standalone vendors and businesses outside of malls, markets, and supermarkets.</p>
    </div>
    <div class="d-flex gap-2">
        <div class="btn-group">
            <a href="{{ route('admin.vendors.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg me-1"></i>
                Quick Add (Dubai)
            </a>
            <button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" 
                    data-bs-toggle="dropdown" aria-expanded="false">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{{ route('admin.vendors.create') }}">
                    <i class="bi bi-lightning me-2"></i>Quick Add (Dubai-focused)
                </a></li>
                <li><a class="dropdown-item" href="{{ route('admin.vendors.create-detailed') }}">
                    <i class="bi bi-list-task me-2"></i>Detailed Form (All fields)
                </a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">TOTAL VENDORS</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($stats['total']) }}</div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="bi bi-person-workspace text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">ACTIVE VENDORS</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($stats['active']) }}</div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                            <i class="bi bi-check-circle text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">VERIFIED VENDORS</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($stats['verified']) }}</div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
                            <i class="bi bi-shield-check text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <div class="small text-muted fw-medium mb-1">PENDING VERIFICATION</div>
                        <div class="h4 mb-0 fw-bold text-dark">{{ number_format($stats['pending_verification']) }}</div>
                    </div>
                    <div class="ms-3">
                        <div class="d-flex align-items-center justify-content-center rounded-3" 
                             style="width: 48px; height: 48px; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                            <i class="bi bi-clock text-white" style="font-size: 20px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.vendors.index') }}" class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label text-muted fw-medium">Search</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Name, email, phone...">
            </div>
            <div class="col-md-2">
                <label for="status" class="form-label text-muted fw-medium">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    <option value="verified" {{ request('status') === 'verified' ? 'selected' : '' }}>Verified</option>
                    <option value="unverified" {{ request('status') === 'unverified' ? 'selected' : '' }}>Unverified</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="vendor_type" class="form-label text-muted fw-medium">Type</label>
                <select class="form-select" id="vendor_type" name="vendor_type">
                    <option value="">All Types</option>
                    @foreach($vendorTypes as $type)
                        <option value="{{ $type }}" {{ request('vendor_type') === $type ? 'selected' : '' }}>
                            {{ ucwords(str_replace('_', ' ', $type)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="sort_by" class="form-label text-muted fw-medium">Sort By</label>
                <select class="form-select" id="sort_by" name="sort_by">
                    <option value="created_at" {{ request('sort_by') === 'created_at' ? 'selected' : '' }}>Date Created</option>
                    <option value="vendor_name" {{ request('sort_by') === 'vendor_name' ? 'selected' : '' }}>Name</option>
                    <option value="vendor_rating" {{ request('sort_by') === 'vendor_rating' ? 'selected' : '' }}>Rating</option>
                    <option value="total_orders" {{ request('sort_by') === 'total_orders' ? 'selected' : '' }}>Orders</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="bi bi-search me-1"></i>
                    Filter
                </button>
                <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-clockwise me-1"></i>
                    Reset
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Vendors Table -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-0 pt-4 pb-3">
        <div class="d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0 fw-bold">Vendors List</h5>
            <div class="text-muted small">
                Showing {{ $vendors->firstItem() }}-{{ $vendors->lastItem() }} of {{ $vendors->total() }} vendors
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        @if($vendors->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="border-0 fw-medium text-muted small">VENDOR</th>
                            <th class="border-0 fw-medium text-muted small">TYPE</th>
                            <th class="border-0 fw-medium text-muted small">CONTACT</th>
                            <th class="border-0 fw-medium text-muted small">RATING</th>
                            <th class="border-0 fw-medium text-muted small">STATUS</th>
                            <th class="border-0 fw-medium text-muted small">CREATED</th>
                            <th class="border-0 fw-medium text-muted small">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vendors as $vendor)
                        <tr>
                            <td class="border-0 py-3">
                                <div class="d-flex align-items-center">
                                    <div class="rounded me-3" style="width: 40px; height: 40px; background: #f1f5f9; display: flex; align-items: center; justify-content: center;">
                                        @if($vendor->logo)
                                            <img src="{{ Storage::url($vendor->logo) }}" alt="{{ $vendor->vendor_name }}" 
                                                 class="rounded" style="width: 40px; height: 40px; object-fit: cover;">
                                        @else
                                            <i class="bi bi-person-workspace text-muted"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="fw-medium text-dark">{{ $vendor->vendor_name }}</div>
                                        <div class="small text-muted">{{ Str::limit($vendor->vendor_description, 40) }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="border-0 py-3">
                                <span class="badge bg-light text-dark">{{ ucwords(str_replace('_', ' ', $vendor->vendor_type)) }}</span>
                            </td>
                            <td class="border-0 py-3">
                                <div class="small">
                                    <div>{{ $vendor->vendor_email }}</div>
                                    <div class="text-muted">{{ $vendor->vendor_phone }}</div>
                                </div>
                            </td>
                            <td class="border-0 py-3">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        @for($i = 1; $i <= 5; $i++)
                                            @if($i <= floor($vendor->vendor_rating))
                                                <i class="bi bi-star-fill"></i>
                                            @elseif($i - 0.5 <= $vendor->vendor_rating)
                                                <i class="bi bi-star-half"></i>
                                            @else
                                                <i class="bi bi-star"></i>
                                            @endif
                                        @endfor
                                    </div>
                                    <span class="small text-muted">({{ $vendor->total_reviews }})</span>
                                </div>
                            </td>
                            <td class="border-0 py-3">
                                <div class="d-flex flex-column gap-1">
                                    <span class="badge" style="background: {{ $vendor->status_badge['color'] === 'green' ? '#dcfce7' : ($vendor->status_badge['color'] === 'yellow' ? '#fef3c7' : '#fee2e2') }}; color: {{ $vendor->status_badge['color'] === 'green' ? '#15803d' : ($vendor->status_badge['color'] === 'yellow' ? '#d97706' : '#dc2626') }};">
                                        {{ $vendor->status_badge['text'] }}
                                    </span>
                                    @if($vendor->is_open_now)
                                        <span class="badge badge-success small">Open Now</span>
                                    @endif
                                </div>
                            </td>
                            <td class="border-0 py-3">
                                <div class="small text-muted">{{ $vendor->created_at->format('M d, Y') }}</div>
                            </td>
                            <td class="border-0 py-3">
                                <div class="d-flex gap-1">
                                    <a href="{{ route('admin.vendors.show', $vendor) }}" class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.vendors.edit', $vendor) }}" class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <form method="POST" action="{{ route('admin.vendors.toggle-verification', $vendor) }}" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="dropdown-item">
                                                        <i class="bi bi-shield-{{ $vendor->is_verified ? 'x' : 'check' }} me-2"></i>
                                                        {{ $vendor->is_verified ? 'Unverify' : 'Verify' }}
                                                    </button>
                                                </form>
                                            </li>
                                            <li>
                                                <form method="POST" action="{{ route('admin.vendors.toggle-active', $vendor) }}" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="dropdown-item">
                                                        <i class="bi bi-{{ $vendor->is_active ? 'pause' : 'play' }}-circle me-2"></i>
                                                        {{ $vendor->is_active ? 'Deactivate' : 'Activate' }}
                                                    </button>
                                                </form>
                                            </li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li>
                                                <form method="POST" action="{{ route('admin.vendors.destroy', $vendor) }}" class="d-inline" 
                                                      onsubmit="return confirm('Are you sure you want to delete this vendor?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="dropdown-item text-danger">
                                                        <i class="bi bi-trash me-2"></i>
                                                        Delete
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <div class="mb-3">
                    <i class="bi bi-person-workspace" style="font-size: 48px; color: #e2e8f0;"></i>
                </div>
                <h5 class="text-muted mb-2">No vendors found</h5>
                <p class="text-muted mb-3">No vendors match your current filters.</p>
                <a href="{{ route('admin.vendors.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-lg me-1"></i>
                    Add First Vendor
                </a>
            </div>
        @endif
    </div>
    
    @if($vendors->hasPages())
    <div class="card-footer bg-white border-0">
        {{ $vendors->links() }}
    </div>
    @endif
</div>

@endsection