@extends('frontend.layout.dash')
@section('title', $title)
@section('content')

<a href="{{ route('user.marketplace.seller.products') }}" class="mkt-back"><i class="ti ti-arrow-left"></i> Back to Products</a>

<div class="mkt-header">
    <div><h2 class="mkt-title">{{ $product->title }}</h2><p class="mkt-sub">Manage account stock</p></div>
</div>

<div class="form-grid" style="align-items:start;">
    <div class="card">
        <h3 class="title">Add Accounts</h3>
        <form method="POST" action="{{ route('user.marketplace.seller.accounts.store', $product->id) }}">
            @csrf
            <div class="form-group" style="margin-bottom:16px;">
                <label class="form-label">Account Details <span class="required">*</span></label>
                <textarea name="accounts" class="form-control" rows="8" style="height:auto;padding:12px 16px;" placeholder="One account per line&#10;e.g. username:password&#10;email:password:recovery" required></textarea>
                <small style="color:var(--text-secondary);font-size:12px;margin-top:4px;display:block;">Each line = 1 account. Buyers will receive one line per purchase.</small>
            </div>
            <button type="submit" class="btn btn-primary"><i class="ti ti-plus"></i> Add Accounts</button>
        </form>
    </div>

    <div class="card">
        <h3 class="title">Stock ({{ $accounts->total() }} total)</h3>
        @if($accounts->isEmpty())
            <div class="mkt-empty" style="padding:30px 0;"><i class="ti ti-database-off"></i><p>No accounts added yet.</p></div>
        @else
        <div class="table-responsive">
            <table class="table">
                <thead><tr><th>#</th><th>Details</th><th>Status</th><th></th></tr></thead>
                <tbody>
                    @foreach($accounts as $i => $account)
                    <tr>
                        <td>{{ $accounts->firstItem() + $i }}</td>
                        <td><code style="font-size:12px;word-break:break-all;">{{ $account->is_sold ? '••••••••' : $account->details }}</code></td>
                        <td><span class="status {{ $account->is_sold ? 'failed' : 'success' }}">{{ $account->is_sold ? 'Sold' : 'Available' }}</span></td>
                        <td>
                            @if(!$account->is_sold)
                            <form method="POST" action="{{ route('user.marketplace.seller.accounts.destroy', $account->id) }}" onsubmit="return confirm('Delete?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn" style="height:30px;padding:0 10px;font-size:12px;background:#fef2f2;color:#dc2626;"><i class="ti ti-trash"></i></button>
                            </form>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="pagination-wrapper">
            <div class="pagination-links">{{ $accounts->links() }}</div>
        </div>
        @endif
    </div>
</div>

@endsection
@push('style')
<style>
.mkt-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--primary-color);font-weight:500;margin-bottom:20px;text-decoration:none;}
.mkt-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:20px;}
.mkt-title{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 4px;}
.mkt-sub{font-size:13px;color:var(--text-secondary);margin:0;}
.mkt-empty{text-align:center;padding:30px 20px;color:var(--text-secondary);}
.mkt-empty i{font-size:36px;display:block;margin-bottom:8px;opacity:.5;}
</style>
@endpush
