@extends('layouts.app')

@section('title', 'Software Products')
@section('page-title', 'Software Products')
@section('page-subtitle', 'Manage all software brands/sites merchants can sell or refer')

@section('content')
<div class="row g-3 mb-4">
    @foreach([
        ['Products', $stats['total'], 'bi-grid-1x2', 'text-primary'],
        ['Active', $stats['active'], 'bi-toggle-on', 'text-success'],
        ['Featured', $stats['featured'], 'bi-stars', 'text-warning'],
        ['Active merchants', $stats['merchant_count'], 'bi-person-badge', 'text-info'],
    ] as [$label, $value, $icon, $color])
        <div class="col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex justify-content-between gap-3">
                    <div>
                        <div class="text-muted small">{{ $label }}</div>
                        <div class="h4 mb-0">{{ $value }}</div>
                    </div>
                    <i class="bi {{ $icon }} fs-3 {{ $color }}"></i>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex flex-column flex-lg-row justify-content-between gap-2 mb-3">
                    <div>
                        <h2 class="h5 mb-1">Product marketplace</h2>
                        <div class="text-muted small">Add POS, hotel, HR, hospital, school, and other software sites here so merchants can sell from one portal.</div>
                    </div>
                    <span class="badge text-bg-light align-self-start">External sites supported</span>
                </div>

                <div class="row g-3">
                    @forelse($products as $product)
                        <div class="col-12">
                            <div class="card border shadow-sm">
                                <div class="card-body">
                                    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-3">
                                        <div class="d-flex gap-3">
                                            <div class="rounded d-grid place-items-center text-white flex-shrink-0" style="width:46px;height:46px;background:{{ $product->color }};">
                                                <i class="bi {{ $product->displayIcon() }} fs-4"></i>
                                            </div>
                                            <div>
                                                <div class="d-flex flex-wrap gap-2 align-items-center mb-1">
                                                    <h3 class="h6 mb-0">{{ $product->name }}</h3>
                                                    <span class="badge text-bg-light">{{ $product->categoryLabel() }}</span>
                                                    @if($product->is_active)
                                                        <span class="badge text-bg-success">Active</span>
                                                    @else
                                                        <span class="badge text-bg-secondary">Inactive</span>
                                                    @endif
                                                    @if($product->is_featured)
                                                        <span class="badge text-bg-warning">Featured</span>
                                                    @endif
                                                </div>
                                                <p class="text-muted small mb-0">{{ $product->short_description }}</p>
                                            </div>
                                        </div>
                                        <div class="text-lg-end small">
                                            <div><strong>{{ $product->onboarding_commission_rate }}%</strong> onboarding</div>
                                            <div class="text-muted"><strong>{{ $product->referral_commission_rate }}%</strong> referral</div>
                                        </div>
                                    </div>

                                    <form id="product-update-{{ $product->id }}" method="POST" action="{{ route('super.software-products.update', $product) }}" class="row g-3">
                                        @csrf
                                        @method('PATCH')
                                        <div class="col-md-6">
                                            <label class="form-label">Product name</label>
                                            <input name="name" value="{{ old('name', $product->name) }}" class="form-control" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Category</label>
                                            <select name="category" class="form-select" required>
                                                @foreach($categories as $key => $label)
                                                    <option value="{{ $key }}" @selected(old('category', $product->category) === $key)>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Short description</label>
                                            <input name="short_description" value="{{ old('short_description', $product->short_description) }}" class="form-control" required>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label">Description</label>
                                            <textarea name="description" class="form-control" rows="2">{{ old('description', $product->description) }}</textarea>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Website URL</label>
                                            <input name="website_url" value="{{ old('website_url', $product->website_url) }}" class="form-control" placeholder="https://example.com">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Signup URL</label>
                                            <input name="signup_url" value="{{ old('signup_url', $product->signup_url) }}" class="form-control" placeholder="https://example.com/register?ref={merchant}">
                                            <div class="form-text">You can include {merchant}, {merchant_code}, or {product} in the URL.</div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Monthly price</label>
                                            <input name="monthly_price" type="number" min="0" step="0.01" value="{{ old('monthly_price', $product->monthly_price) }}" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Yearly price</label>
                                            <input name="yearly_price" type="number" min="0" step="0.01" value="{{ old('yearly_price', $product->yearly_price) }}" class="form-control">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Support URL</label>
                                            <input name="support_url" value="{{ old('support_url', $product->support_url) }}" class="form-control">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Onboarding %</label>
                                            <input name="onboarding_commission_rate" type="number" min="0" max="{{ \App\Models\Agent::MAX_COMMISSION_RATE }}" step="0.01" value="{{ old('onboarding_commission_rate', $product->onboarding_commission_rate) }}" class="form-control" required>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Referral %</label>
                                            <input name="referral_commission_rate" type="number" min="0" max="{{ \App\Models\Agent::MAX_COMMISSION_RATE }}" step="0.01" value="{{ old('referral_commission_rate', $product->referral_commission_rate) }}" class="form-control" required>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Color</label>
                                            <input name="color" type="color" value="{{ old('color', $product->color) }}" class="form-control form-control-color w-100">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Icon</label>
                                            <input name="icon" value="{{ old('icon', $product->icon) }}" class="form-control" placeholder="bi-hospital">
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Sort</label>
                                            <input name="sort_order" type="number" min="0" value="{{ old('sort_order', $product->sort_order) }}" class="form-control">
                                        </div>
                                        <div class="col-12 d-flex flex-wrap gap-3">
                                            <div class="form-check form-switch">
                                                <input type="hidden" name="is_active" value="0">
                                                <input class="form-check-input" type="checkbox" name="is_active" value="1" @checked(old('is_active', $product->is_active))>
                                                <label class="form-check-label">Active for merchants</label>
                                            </div>
                                            <div class="form-check form-switch">
                                                <input type="hidden" name="is_featured" value="0">
                                                <input class="form-check-input" type="checkbox" name="is_featured" value="1" @checked(old('is_featured', $product->is_featured))>
                                                <label class="form-check-label">Feature on merchant pages</label>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="card-footer bg-white d-flex flex-wrap justify-content-between gap-2">
                                    <button class="btn btn-primary btn-sm" form="product-update-{{ $product->id }}"><i class="bi bi-save me-1"></i> Save product</button>
                                    <form method="POST" action="{{ route('super.software-products.destroy', $product) }}" onsubmit="return confirm('Delete this software product?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-outline-danger btn-sm"><i class="bi bi-trash me-1"></i> Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="text-center text-muted border rounded p-5">No software products yet. Add your first product from the form.</div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 shadow-sm sticky-top" style="top: 1rem;">
            <div class="card-body">
                <h2 class="h5">Add software</h2>
                <p class="text-muted small">Create a product once, then every active merchant will get trackable links for it.</p>
                <form method="POST" action="{{ route('super.software-products.store') }}" class="row g-3">
                    @csrf
                    <div class="col-12">
                        <label class="form-label">Product name</label>
                        <input name="name" value="{{ old('name') }}" class="form-control" placeholder="HotelPro" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Category</label>
                        <select name="category" class="form-select" required>
                            @foreach($categories as $key => $label)
                                <option value="{{ $key }}" @selected(old('category') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Short description</label>
                        <input name="short_description" value="{{ old('short_description') }}" class="form-control" placeholder="Manage rooms, bookings, guests and payments." required>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Website URL</label>
                        <input name="website_url" value="{{ old('website_url') }}" class="form-control" placeholder="https://hotel.example.com">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Signup URL</label>
                        <input name="signup_url" value="{{ old('signup_url') }}" class="form-control" placeholder="https://hotel.example.com/register?merchant={merchant}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Monthly price</label>
                        <input name="monthly_price" type="number" min="0" step="0.01" value="{{ old('monthly_price') }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Yearly price</label>
                        <input name="yearly_price" type="number" min="0" step="0.01" value="{{ old('yearly_price') }}" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Onboarding %</label>
                        <input name="onboarding_commission_rate" type="number" min="0" max="{{ \App\Models\Agent::MAX_COMMISSION_RATE }}" step="0.01" value="{{ old('onboarding_commission_rate', \App\Models\Agent::SELF_ONBOARDING_COMMISSION_RATE) }}" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Referral %</label>
                        <input name="referral_commission_rate" type="number" min="0" max="{{ \App\Models\Agent::MAX_COMMISSION_RATE }}" step="0.01" value="{{ old('referral_commission_rate', \App\Models\Agent::REFERRAL_COMMISSION_RATE) }}" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Color</label>
                        <input name="color" type="color" value="{{ old('color', '#155e75') }}" class="form-control form-control-color w-100">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Icon</label>
                        <input name="icon" value="{{ old('icon') }}" class="form-control" placeholder="bi-grid">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Sort</label>
                        <input name="sort_order" type="number" min="0" value="{{ old('sort_order', 0) }}" class="form-control">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3">{{ old('description') }}</textarea>
                    </div>
                    <div class="col-12 d-flex flex-column gap-2">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                            <label class="form-check-label">Active for merchants</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_featured" value="1">
                            <label class="form-check-label">Feature on merchant pages</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-primary w-100"><i class="bi bi-plus-circle me-1"></i> Add software product</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
