@extends('layouts.app')

@section('title', 'Add Vendor - Admin')

@section('content')
<div class="row g-4">
    <!-- Left Sidebar: Menu / Navigation -->
    <div class="col-lg-2">
        <h5 class="fw-bold mb-3 text-secondary ps-2">Partnership</h5>
        <div class="list-group list-group-flush border rounded shadow-sm mb-4">
            <a href="{{ route('admin.vendors.index') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-people me-2"></i> All Vendors
            </a>
            <a href="{{ route('admin.vendors.create') }}" class="list-group-item list-group-item-action active fw-bold">
                <i class="bi bi-person-plus me-2"></i> Onboard New
            </a>
            <a href="{{ route('admin.payouts.index') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-wallet2 me-2 text-success"></i> Settlements
            </a>
            <a href="{{ route('admin.reports.vendors') }}" class="list-group-item list-group-item-action">
                <i class="bi bi-shield-check me-2 text-primary"></i> Compliance
            </a>
        </div>
        
        <div class="d-grid shadow-sm">
            <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline-dark btn-sm fw-bold border-2">
                <i class="bi bi-arrow-left me-2"></i> Back to Vendors
            </a>
        </div>
    </div>
    
    <!-- Center: Main Content (Create Vendor Form) -->
    <div class="col-lg-7">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold mb-0">Onboard New Vendor</h2>
        </div>

        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body p-4">
                <form action="{{ route('admin.vendors.store') }}" method="POST">
                    @csrf
                    
                    <h5 class="fw-bold text-primary mb-4"><i class="bi bi-person-badge me-2"></i>User Account Details</h5>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="vendor_name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required placeholder="e.g. John Doe">
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Email Address <span class="text-danger">*</span></label>
                            <input type="email" name="email" id="vendor_email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required placeholder="e.g. owner@shop.com">
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-12">
                            <label class="form-label fw-bold small">Password <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" name="password" id="vendor_password" class="form-control @error('password') is-invalid @enderror" required placeholder="Generate or enter a strong password">
                                <button class="btn btn-outline-secondary" type="button" onclick="this.previousElementSibling.type = this.previousElementSibling.type == 'password' ? 'text' : 'password'"><i class="bi bi-eye"></i></button>
                            </div>
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <h5 class="fw-bold text-primary my-4"><i class="bi bi-shop-window me-2"></i>Shop Profile</h5>
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label fw-bold small">Official Shop Name <span class="text-danger">*</span></label>
                            <input type="text" name="shop_name" id="shop_name" class="form-control @error('shop_name') is-invalid @enderror" value="{{ old('shop_name') }}" required placeholder="e.g. Acme Electronics Inc.">
                            @error('shop_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">Commission Rate (%) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" step="0.01" name="commission_rate" id="commission_rate" class="form-control @error('commission_rate') is-invalid @enderror" value="{{ old('commission_rate', 10) }}" required>
                                <span class="input-group-text">%</span>
                            </div>
                            @error('commission_rate')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="mt-5 border-top pt-4">
                        <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow-sm">
                            <i class="bi bi-check-circle me-1"></i> Register & Approve Vendor
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-info bg-opacity-10">
             <div class="card-body">
                <h6 class="fw-bold mb-1"><i class="bi bi-info-circle-fill me-2"></i>Auto-Approval Notice</h6>
                <p class="small mb-0 opacity-75">Vendors created through the admin panel are marked as **Active** and **Approved** by default. A digital wallet will also be initialized for them automatically.</p>
             </div>
        </div>
    </div>
    
    <!-- Right Sidebar: Stats & Activity -->
    <div class="col-lg-3">
        <h5 class="fw-bold mb-3 ps-1">Vendor Analytics</h5>
        
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="row text-center g-0">
                    <div class="col-6 border-end pb-2">
                        <h4 class="fw-bold mb-0 text-primary">{{ $stats['total'] ?? 0 }}</h4>
                        <small class="text-muted text-uppercase" style="font-size: 0.65rem;">Total</small>
                    </div>
                    <div class="col-6 pb-2">
                        <h4 class="fw-bold mb-0 text-success">{{ $stats['active'] ?? 0 }}</h4>
                        <small class="text-muted text-uppercase" style="font-size: 0.65rem;">Active</small>
                    </div>
                </div>
            </div>
        </div>

        <h5 class="fw-bold mb-3 ps-1">Recent Onboarding</h5>
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @forelse($recentActivities as $activity)
                    <div class="list-group-item border-bottom-0 py-3">
                        <div class="d-flex align-items-center">
                             <div class="flex-shrink-0">
                                <span class="bg-light text-primary p-2 rounded small">
                                    <i class="bi bi-shop"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0 fw-semibold" style="font-size: 0.85rem;">{{ $activity['vendor'] }}</h6>
                                <small class="text-muted d-block" style="font-size: 0.75rem;">{{ $activity['title'] }} • {{ $activity['time'] }}</small>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="p-3 text-center text-muted">No recent vendors</div>
                    @endforelse
                </div>
            </div>
            <div class="card-footer bg-white text-center py-2 border-0">
                <a href="{{ route('admin.vendors.index') }}" class="text-decoration-none small fw-bold text-primary">View All Vendors</a>
            </div>
        </div>

        <div class="card border-0 shadow-sm bg-dark text-white">
            <div class="card-body p-4 text-center">
                <i class="bi bi-shield-check fs-1 opacity-50 mb-3 d-block"></i>
                <h6 class="fw-bold mb-2">KYC Verification</h6>
                <p class="small opacity-75 mb-0">Ensure all documents are verified before enabling higher payout limits.</p>
            </div>
        </div>
    </div>
</div>
@endsection