@extends('layouts.admin')

@section('title', 'Vendors Management - ' . $market->name)

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Vendors Management</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.markets.index') }}">Markets</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.markets.show', $market) }}">{{ $market->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Vendors</li>
            </ol>
        </nav>
    </div>

    <!-- Market Info Card -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title mb-1">{{ $market->name }}</h5>
                    <p class="text-muted mb-0">{{ $market->address }}</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <span class="badge bg-info fs-6">{{ ucfirst($market->market_type) }} Market</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Vendors</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_vendors'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-people fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Active Vendors</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active_vendors'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-person-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Overdue Payments</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['overdue_payments'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Avg Rating</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['avg_rating'], 1) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-star-fill fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Actions -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Search & Filter Vendors</h6>
        </div>
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label">Search Vendors</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="type" class="form-label">Vendor Type</label>
                    <select class="form-select" id="type" name="type">
                        <option value="">All Types</option>
                        <option value="food_vendor" {{ request('type') === 'food_vendor' ? 'selected' : '' }}>Food Vendor</option>
                        <option value="produce_seller" {{ request('type') === 'produce_seller' ? 'selected' : '' }}>Produce Seller</option>
                        <option value="craftsperson" {{ request('type') === 'craftsperson' ? 'selected' : '' }}>Craftsperson</option>
                        <option value="retailer" {{ request('type') === 'retailer' ? 'selected' : '' }}>Retailer</option>
                        <option value="service_provider" {{ request('type') === 'service_provider' ? 'selected' : '' }}>Service Provider</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">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="overdue" {{ request('status') === 'overdue' ? 'selected' : '' }}>Payment Overdue</option>
                        <option value="non_compliant" {{ request('status') === 'non_compliant' ? 'selected' : '' }}>Non-Compliant</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"></i> Search
                    </button>
                    <a href="{{ route('admin.markets.vendors', $market) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </a>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addVendorModal">
                        <i class="bi bi-person-plus"></i> Add Vendor
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Vendors Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Vendors ({{ $vendors->total() }} total)</h6>
        </div>
        <div class="card-body">
            @if($vendors->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Vendor</th>
                                <th>Type</th>
                                <th>Stall</th>
                                <th>Products</th>
                                <th>Rating</th>
                                <th>Payment Status</th>
                                <th>Compliance</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($vendors as $vendor)
                                @php
                                    $statusBadge = $vendor->getStatusBadge();
                                @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center text-white me-3">
                                                {{ substr($vendor->vendor_name, 0, 1) }}
                                            </div>
                                            <div>
                                                <div class="fw-bold">{{ $vendor->vendor_name }}</div>
                                                <small class="text-muted">{{ $vendor->vendor_email }}</small><br>
                                                <small class="text-muted">{{ $vendor->vendor_phone }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ ucfirst(str_replace('_', ' ', $vendor->vendor_type)) }}</span>
                                    </td>
                                    <td>
                                        @if($vendor->stall)
                                            <div class="fw-bold">{{ $vendor->stall->display_name }}</div>
                                            <small class="text-muted">${{ number_format($vendor->stall->monthly_rent) }}/month</small>
                                        @else
                                            <span class="text-muted">No stall assigned</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 150px;" title="{{ $vendor->products_display }}">
                                            {{ $vendor->products_display }}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-2">
                                                @for($i = 1; $i <= 5; $i++)
                                                    @if($i <= floor($vendor->vendor_rating))
                                                        <i class="bi bi-star-fill text-warning"></i>
                                                    @elseif($i <= ceil($vendor->vendor_rating))
                                                        <i class="bi bi-star-half text-warning"></i>
                                                    @else
                                                        <i class="bi bi-star text-muted"></i>
                                                    @endif
                                                @endfor
                                            </div>
                                            <small class="text-muted">{{ number_format($vendor->vendor_rating, 1) }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @if($vendor->payment_status === 'current')
                                            <span class="badge bg-success">Current</span>
                                        @elseif($vendor->payment_status === 'overdue')
                                            <span class="badge bg-danger">Overdue</span>
                                        @else
                                            <span class="badge bg-warning">{{ ucfirst($vendor->payment_status) }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($vendor->compliance_status === 'compliant')
                                            <span class="badge bg-success">Compliant</span>
                                        @else
                                            <span class="badge bg-warning">Non-Compliant</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $statusBadge['class'] }}">{{ $statusBadge['text'] }}</span>
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" 
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                Actions
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item" href="#" onclick="viewVendorDetails({{ $vendor->id }})">
                                                        <i class="bi bi-eye"></i> View Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#" onclick="editVendor({{ $vendor->id }})">
                                                        <i class="bi bi-pencil"></i> Edit
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#" onclick="managePayments({{ $vendor->id }})">
                                                        <i class="bi bi-credit-card"></i> Manage Payments
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#" onclick="viewProducts({{ $vendor->id }})">
                                                        <i class="bi bi-box-seam"></i> View Products
                                                    </a>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                @if($vendor->is_active)
                                                    <li>
                                                        <a class="dropdown-item text-warning" href="#" 
                                                           onclick="suspendVendor({{ $vendor->id }})">
                                                            <i class="bi bi-pause-circle"></i> Suspend
                                                        </a>
                                                    </li>
                                                @else
                                                    <li>
                                                        <a class="dropdown-item text-success" href="#" 
                                                           onclick="activateVendor({{ $vendor->id }})">
                                                            <i class="bi bi-play-circle"></i> Activate
                                                        </a>
                                                    </li>
                                                @endif
                                                <li>
                                                    <a class="dropdown-item text-danger" href="#" 
                                                       onclick="removeVendor({{ $vendor->id }})">
                                                        <i class="bi bi-trash"></i> Remove
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                {{ $vendors->links() }}
            @else
                <div class="text-center py-4">
                    <i class="bi bi-people display-1 text-muted"></i>
                    <h5 class="mt-3">No Vendors Found</h5>
                    <p class="text-muted">No vendors match your current filters.</p>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addVendorModal">
                        <i class="bi bi-person-plus"></i> Add First Vendor
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Vendor Modal -->
<div class="modal fade" id="addVendorModal" tabindex="-1" aria-labelledby="addVendorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addVendorModalLabel">Add New Vendor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.markets.vendors.store', $market) }}">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="vendor_name" class="form-label">Vendor Name *</label>
                                <input type="text" class="form-control" id="vendor_name" name="vendor_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="vendor_email" class="form-label">Email *</label>
                                <input type="email" class="form-control" id="vendor_email" name="vendor_email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="vendor_phone" class="form-label">Phone *</label>
                                <input type="text" class="form-control" id="vendor_phone" name="vendor_phone" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="vendor_type" class="form-label">Vendor Type *</label>
                                <select class="form-select" id="vendor_type" name="vendor_type" required>
                                    <option value="food_vendor">Food Vendor</option>
                                    <option value="produce_seller">Produce Seller</option>
                                    <option value="craftsperson">Craftsperson</option>
                                    <option value="retailer">Retailer</option>
                                    <option value="service_provider">Service Provider</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="stall_id" class="form-label">Assign Stall</label>
                                <select class="form-select" id="stall_id" name="stall_id">
                                    <option value="">Select a stall...</option>
                                    @foreach($market->stalls->where('is_available', true) as $stall)
                                        <option value="{{ $stall->id }}">{{ $stall->display_name }} - ${{ number_format($stall->monthly_rent) }}/month</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="business_license_number" class="form-label">Business License</label>
                                <input type="text" class="form-control" id="business_license_number" name="business_license_number">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="years_in_business" class="form-label">Years in Business</label>
                                <input type="number" class="form-control" id="years_in_business" name="years_in_business" min="0">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="employee_count" class="form-label">Number of Employees</label>
                                <input type="number" class="form-control" id="employee_count" name="employee_count" min="0" value="1">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="vendor_address" class="form-label">Address</label>
                        <textarea class="form-control" id="vendor_address" name="vendor_address" rows="2"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="products_sold" class="form-label">Products/Services</label>
                        <textarea class="form-control" id="products_sold" name="products_sold" rows="2" 
                                  placeholder="Describe what this vendor sells or offers..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Add Vendor</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.avatar-sm {
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
}
</style>

<script>
// Vendor action functions
function viewVendorDetails(vendorId) {
    // Implement vendor details view
    alert('View vendor details: ' + vendorId);
}

function editVendor(vendorId) {
    // Implement vendor editing
    alert('Edit vendor: ' + vendorId);
}

function managePayments(vendorId) {
    // Implement payment management
    alert('Manage payments for vendor: ' + vendorId);
}

function viewProducts(vendorId) {
    // Implement product viewing
    alert('View products for vendor: ' + vendorId);
}

function suspendVendor(vendorId) {
    if (confirm('Are you sure you want to suspend this vendor?')) {
        // Implement vendor suspension
        alert('Suspend vendor: ' + vendorId);
    }
}

function activateVendor(vendorId) {
    if (confirm('Are you sure you want to activate this vendor?')) {
        // Implement vendor activation
        alert('Activate vendor: ' + vendorId);
    }
}

function removeVendor(vendorId) {
    if (confirm('Are you sure you want to remove this vendor? This action cannot be undone.')) {
        // Implement vendor removal
        alert('Remove vendor: ' + vendorId);
    }
}
</script>
@endsection