@extends('layouts.app')

@section('title', 'Create Escrow')

@push('styles')
<style>
    .escrow-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    /* Progress Bar */
    .progress-bar-wrapper { margin-bottom: 2rem; }

    .progress-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 0 1rem;
    }

    .progress-bar::before {
        content: '';
        position: absolute;
        top: 18px;
        left: 2rem;
        right: 2rem;
        height: 3px;
        background: var(--border);
        z-index: 0;
    }

    .progress-bar-fill {
        position: absolute;
        top: 18px;
        left: 2rem;
        height: 3px;
        background: var(--accent);
        z-index: 1;
        transition: width 0.4s ease;
    }

    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        z-index: 2;
    }

    .progress-step-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg-card);
        border: 3px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-muted);
        transition: all 0.3s ease;
    }

    .progress-step.active .progress-step-circle {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-light);
    }

    .progress-step.completed .progress-step-circle {
        border-color: var(--success);
        background: var(--success);
        color: #fff;
    }

    .progress-step-label {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .progress-step.active .progress-step-label { color: var(--accent); }
    .progress-step.completed .progress-step-label { color: var(--success); }

    /* Step Container */
    .form-step { display: none; }
    .form-step.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Info Card */
    .info-card {
        background: var(--accent-light);
        border: 1px solid rgba(16, 191, 255, 0.25);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
        color: var(--accent);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .info-card i { font-size: 1.1rem; }

    .warning-card {
        background: var(--warning-light);
        border: 1px solid rgba(255, 165, 2, 0.3);
        color: var(--warning);
    }

    /* Form Groups */
    .form-group { margin-bottom: 1.25rem; }

    .form-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .form-label.required::after {
        content: ' *';
        color: var(--danger);
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        border-color: var(--accent);
    }

    .form-select option {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .form-textarea {
        resize: vertical;
        min-height: 80px;
    }

    .form-hint {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.375rem;
    }

    .form-error {
        display: block;
        font-size: 0.75rem;
        color: var(--danger);
        margin-top: 0.375rem;
    }

    /* Type Cards */
    .type-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .type-card {
        background: var(--bg-card);
        border: 2px solid var(--border);
        border-radius: var(--radius-md);
        padding: 1.25rem;
        cursor: pointer;
        transition: all var(--transition);
        text-align: center;
    }

    .type-card:hover {
        border-color: var(--accent);
    }

    .type-card.active {
        border-color: var(--accent);
        background: var(--accent-light);
    }

    .type-card-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.75rem;
        font-size: 1.3rem;
    }

    .type-card.active .type-card-icon {
        color: var(--accent);
    }

    .type-card[data-value="goods"] .type-card-icon { background: rgba(0, 212, 170, 0.12); color: var(--success); }
    .type-card[data-value="digital_assets"] .type-card-icon { background: rgba(16, 191, 255, 0.12); color: var(--accent); }
    .type-card[data-value="services"] .type-card-icon { background: rgba(255, 165, 2, 0.12); color: var(--warning); }
    .type-card[data-value="agreement"] .type-card-icon { background: rgba(150, 80, 255, 0.12); color: #9650ff; }

    .type-card-title {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .type-card-desc {
        font-size: 0.75rem;
        color: var(--text-muted);
        line-height: 1.4;
    }

    /* Dynamic Fields Section */
    .dynamic-fields {
        display: none;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 1.25rem;
        margin-top: 1.25rem;
    }

    .dynamic-fields.active { display: block; }

    .dynamic-fields-title {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .dynamic-fields-title i { color: var(--accent); }

    /* Milestones */
    .milestone-list { display: flex; flex-direction: column; gap: 0.75rem; }

    .milestone-item {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 0.75rem;
        align-items: end;
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
    }

    .milestone-item .form-group { margin-bottom: 0; }

    .remove-milestone {
        background: none;
        border: 1px solid var(--danger);
        color: var(--danger);
        border-radius: var(--radius-sm);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all var(--transition);
    }

    .remove-milestone:hover { background: var(--danger); color: #fff; }

    .add-milestone {
        background: none;
        border: 1px dashed var(--accent);
        color: var(--accent);
        border-radius: var(--radius-sm);
        padding: 0.75rem;
        width: 100%;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition);
        margin-top: 0.5rem;
    }

    .add-milestone:hover { background: var(--accent-light); }

    /* Radio Group */
    .radio-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .radio-group.three-col { grid-template-columns: repeat(3, 1fr); }

    .selectable-option {
        background: var(--bg-card);
        border: 2px solid var(--border);
        border-radius: var(--radius-md);
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all var(--transition);
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .selectable-option:hover { border-color: var(--accent); color: var(--text-primary); }

    .selectable-option.active {
        border-color: var(--accent);
        background: var(--accent-light);
        color: var(--accent);
    }

    .selectable-option i { font-size: 1.3rem; }

    /* Fee Calculator */
    .fee-calculator {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 1.25rem;
        margin-top: 1rem;
    }

    .fee-calculator h4 {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: var(--text-primary);
    }

    .fee-row {
        display: flex;
        justify-content: space-between;
        padding: 0.375rem 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .fee-row.total {
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--text-primary);
    }

    /* Row Layout */
    .row { display: flex; gap: 1rem; }
    .row .col { flex: 1; }

    /* Lookup */
    .lookup-container { display: flex; gap: 0.5rem; }
    .lookup-container .form-input { flex: 1; }
    .lookup-container .btn { white-space: nowrap; }

    /* User Found Card */
    .user-found-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: var(--bg-card);
        border: 1px solid var(--success);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-top: 0.75rem;
    }

    .user-found-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-weight: 700;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .user-found-info { flex: 1; }
    .user-found-name { font-weight: 600; font-size: 0.9rem; }
    .user-found-detail { font-size: 0.8rem; color: var(--text-muted); }

    .user-found-clear {
        background: none;
        border: none;
        color: var(--danger);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 0.25rem;
    }

    /* Checkbox Group */
    .checkbox-group-vertical { display: flex; flex-direction: column; gap: 0.5rem; }

    .checkbox-option {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: border-color var(--transition);
        font-size: 0.85rem;
        color: var(--text-primary);
    }

    .checkbox-option:hover { border-color: var(--accent); }
    .checkbox-option input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); }
    .opt-desc { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }

    /* Fee Split */
    .fee-split-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .split-top-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
    }

    .split-range { width: 100%; accent-color: var(--accent); }

    .split-bottom-percents {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--accent);
        margin-top: 0.5rem;
    }

    /* Summary */
    .summary-block {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .summary-header {
        padding: 0.875rem 1.25rem;
        background: var(--bg-secondary);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        border-bottom: 1px solid var(--border);
    }

    .summary-header i { color: var(--accent); }

    .summary-body { padding: 0.5rem 1.25rem; }

    .summary-item {
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.85rem;
    }

    .summary-item:last-child { border-bottom: none; }
    .summary-item label { color: var(--text-muted); font-weight: 400; }
    .summary-item span { color: var(--text-primary); font-weight: 500; text-align: right; }

    .total-box {
        background: var(--accent-light);
        border: 1px solid rgba(16, 191, 255, 0.3);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        text-align: center;
        font-size: 1.1rem;
        color: var(--accent);
        margin-bottom: 1.25rem;
    }

    .terms-check {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .terms-check input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); }

    /* Actions */
    .form-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
    }

    /* Validation */
    .alert-danger {
        background: var(--danger-light);
        border: 1px solid rgba(255, 71, 87, 0.3);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        color: var(--danger);
        font-size: 0.85rem;
    }

    .alert-danger ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }
    .alert-danger li { margin-bottom: 0.25rem; }

    /* Balance Warning */
    .balance-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 0.875rem 1.25rem;
        margin-bottom: 1.5rem;
        font-size: 0.85rem;
    }

    .balance-bar .balance-amount {
        font-weight: 700;
        color: var(--accent);
        font-size: 1rem;
    }

    @media (max-width: 640px) {
        .type-cards { grid-template-columns: 1fr; }
        .radio-group { grid-template-columns: 1fr; }
        .radio-group.three-col { grid-template-columns: 1fr; }
        .row { flex-direction: column; }
        .form-actions { flex-direction: column; gap: 0.75rem; }
        .form-actions .btn { width: 100%; justify-content: center; }
        .lookup-container { flex-direction: column; }
        .progress-step-label { font-size: 0.6rem; }
        .milestone-item { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="escrow-container">
        @if($errors->any())
            <div class="alert-danger">
                <strong><i class="fas fa-exclamation-circle"></i> Please fix the following errors:</strong>
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Wallet Balance Bar --}}
        <div class="balance-bar">
            <span><i class="fas fa-wallet" style="color:var(--accent); margin-right:0.5rem;"></i> Wallet Balance</span>
            <span class="balance-amount">{{ number_format($balance ?? 0, 2) }}</span>
        </div>

        {{-- Progress Bar --}}
        <div class="progress-bar-wrapper">
            <div class="progress-bar">
                <div class="progress-bar-fill" id="progressFill" style="width: 0%;"></div>
                <div class="progress-step active" data-step="1">
                    <div class="progress-step-circle">1</div>
                    <div class="progress-step-label">Details</div>
                </div>
                <div class="progress-step" data-step="2">
                    <div class="progress-step-circle">2</div>
                    <div class="progress-step-label">Parties</div>
                </div>
                <div class="progress-step" data-step="3">
                    <div class="progress-step-circle">3</div>
                    <div class="progress-step-label">Terms</div>
                </div>
                <div class="progress-step" data-step="4">
                    <div class="progress-step-circle">4</div>
                    <div class="progress-step-label">Review</div>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('escrow.transactions.store') }}" id="escrowForm" enctype="multipart/form-data">
            @csrf

            {{-- ===== STEP 1: Transaction Details ===== --}}
            <div class="form-step active" id="step1">
                <div class="info-card">
                    <i class="fas fa-info-circle"></i>
                    <div><strong>Step 1:</strong> Choose transaction type and enter details</div>
                </div>

                <div class="form-group">
                    <label class="form-label required">Transaction Type</label>
                    <div class="type-cards">
                        <div class="type-card active" data-value="goods" onclick="selectType(this)">
                            <div class="type-card-icon"><i class="fas fa-box"></i></div>
                            <div class="type-card-title">Physical Goods</div>
                            <div class="type-card-desc">Products, electronics, vehicles, items that need shipping</div>
                        </div>
                        <div class="type-card" data-value="digital_assets" onclick="selectType(this)">
                            <div class="type-card-icon"><i class="fas fa-code"></i></div>
                            <div class="type-card-title">Digital Assets</div>
                            <div class="type-card-desc">Domains, social media accounts, digital files, crypto</div>
                        </div>
                        <div class="type-card" data-value="services" onclick="selectType(this)">
                            <div class="type-card-icon"><i class="fas fa-tools"></i></div>
                            <div class="type-card-title">Services</div>
                            <div class="type-card-desc">Freelance work, development, design, consulting</div>
                        </div>
                        <div class="type-card" data-value="agreement" onclick="selectType(this)">
                            <div class="type-card-icon"><i class="fas fa-file-contract"></i></div>
                            <div class="type-card-title">Agreement</div>
                            <div class="type-card-desc">Contracts, rent, loan repayment, custom deals</div>
                        </div>
                    </div>
                    <input type="hidden" name="type" id="typeInput" value="{{ old('type', 'goods') }}">
                    @error('type') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label required" for="title">Transaction Title</label>
                    <input type="text" class="form-input" id="title" name="title" placeholder="e.g., iPhone 15 Pro Max, Website Development" value="{{ old('title') }}" maxlength="255" required>
                    @error('title') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label required" for="amount">Amount</label>
                    <input type="number" class="form-input" id="amount" name="amount" placeholder="0.00" value="{{ old('amount') }}" min="100" step="0.01" inputmode="decimal" required oninput="calculateFees()">
                    <span class="form-hint">Minimum amount: 100.00</span>
                    @error('amount') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                {{-- Fee Calculator --}}
                <div class="fee-calculator" id="feeCalculator">
                    <h4><i class="fas fa-calculator"></i> Fee Breakdown</h4>
                    <div class="fee-row">
                        <span>Amount</span>
                        <span id="feeAmount">0.00</span>
                    </div>
                    <div class="fee-row">
                        <span>Escrow Fee</span>
                        <span id="feeFee">0.00</span>
                    </div>
                    <div class="fee-row">
                        <span>VAT (7.5% of fee)</span>
                        <span id="feeVat">0.00</span>
                    </div>
                    <div class="fee-row total">
                        <span>Total</span>
                        <span id="feeTotal">0.00</span>
                    </div>
                </div>

                <div class="form-group" style="margin-top:1.25rem;">
                    <label class="form-label" for="description">Description</label>
                    <textarea class="form-textarea" id="description" name="description" rows="3" placeholder="Additional details about this transaction..." maxlength="5000">{{ old('description') }}</textarea>
                    @error('description') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                {{-- Dynamic Fields: Physical Goods --}}
                <div class="dynamic-fields active" id="fields-goods">
                    <div class="dynamic-fields-title"><i class="fas fa-truck"></i> Shipping & Delivery Details</div>
                    <div class="row">
                        <div class="col form-group">
                            <label class="form-label">Shipping Method</label>
                            <select name="metadata[shipping_method]" class="form-select">
                                <option value="">Select...</option>
                                <option value="seller_ships" {{ old('metadata.shipping_method') === 'seller_ships' ? 'selected' : '' }}>Seller Ships</option>
                                <option value="buyer_pickup" {{ old('metadata.shipping_method') === 'buyer_pickup' ? 'selected' : '' }}>Buyer Picks Up</option>
                                <option value="third_party" {{ old('metadata.shipping_method') === 'third_party' ? 'selected' : '' }}>Third-Party Logistics</option>
                            </select>
                        </div>
                        <div class="col form-group">
                            <label class="form-label">Item Condition</label>
                            <select name="metadata[item_condition]" class="form-select">
                                <option value="new" {{ old('metadata.item_condition', 'new') === 'new' ? 'selected' : '' }}>Brand New</option>
                                <option value="used_like_new" {{ old('metadata.item_condition') === 'used_like_new' ? 'selected' : '' }}>Used - Like New</option>
                                <option value="used_good" {{ old('metadata.item_condition') === 'used_good' ? 'selected' : '' }}>Used - Good</option>
                                <option value="used_fair" {{ old('metadata.item_condition') === 'used_fair' ? 'selected' : '' }}>Used - Fair</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Delivery Address</label>
                        <textarea name="metadata[delivery_address]" class="form-textarea" rows="2" placeholder="Where should the item be delivered?">{{ old('metadata.delivery_address') }}</textarea>
                    </div>
                </div>

                {{-- Dynamic Fields: Digital Assets --}}
                <div class="dynamic-fields" id="fields-digital_assets">
                    <div class="dynamic-fields-title"><i class="fas fa-globe"></i> Digital Asset Details</div>
                    <div class="form-group">
                        <label class="form-label">Asset Type</label>
                        <select name="metadata[asset_type]" class="form-select">
                            <option value="">Select...</option>
                            <option value="domain" {{ old('metadata.asset_type') === 'domain' ? 'selected' : '' }}>Domain Name</option>
                            <option value="social_account" {{ old('metadata.asset_type') === 'social_account' ? 'selected' : '' }}>Social Media Account</option>
                            <option value="website" {{ old('metadata.asset_type') === 'website' ? 'selected' : '' }}>Website / Web App</option>
                            <option value="digital_product" {{ old('metadata.asset_type') === 'digital_product' ? 'selected' : '' }}>Digital Product (file, license)</option>
                            <option value="crypto" {{ old('metadata.asset_type') === 'crypto' ? 'selected' : '' }}>Cryptocurrency</option>
                            <option value="game_account" {{ old('metadata.asset_type') === 'game_account' ? 'selected' : '' }}>Gaming Account</option>
                            <option value="other" {{ old('metadata.asset_type') === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Asset URL / Identifier</label>
                        <input type="text" name="metadata[asset_url]" class="form-input" placeholder="e.g., example.com, @username, wallet address" value="{{ old('metadata.asset_url') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Transfer Method</label>
                        <select name="metadata[transfer_method]" class="form-select">
                            <option value="">Select...</option>
                            <option value="registrar_transfer" {{ old('metadata.transfer_method') === 'registrar_transfer' ? 'selected' : '' }}>Registrar / Platform Transfer</option>
                            <option value="credential_handover" {{ old('metadata.transfer_method') === 'credential_handover' ? 'selected' : '' }}>Credential Handover</option>
                            <option value="file_delivery" {{ old('metadata.transfer_method') === 'file_delivery' ? 'selected' : '' }}>File Delivery</option>
                            <option value="api_transfer" {{ old('metadata.transfer_method') === 'api_transfer' ? 'selected' : '' }}>API / Blockchain Transfer</option>
                        </select>
                    </div>
                </div>

                {{-- Dynamic Fields: Services --}}
                <div class="dynamic-fields" id="fields-services">
                    <div class="dynamic-fields-title"><i class="fas fa-tasks"></i> Service & Milestone Details</div>
                    <div class="form-group">
                        <label class="form-label">Service Category</label>
                        <select name="metadata[service_category]" class="form-select">
                            <option value="">Select...</option>
                            <option value="web_development" {{ old('metadata.service_category') === 'web_development' ? 'selected' : '' }}>Web Development</option>
                            <option value="mobile_development" {{ old('metadata.service_category') === 'mobile_development' ? 'selected' : '' }}>Mobile App Development</option>
                            <option value="graphic_design" {{ old('metadata.service_category') === 'graphic_design' ? 'selected' : '' }}>Graphic Design</option>
                            <option value="content_writing" {{ old('metadata.service_category') === 'content_writing' ? 'selected' : '' }}>Content Writing</option>
                            <option value="marketing" {{ old('metadata.service_category') === 'marketing' ? 'selected' : '' }}>Marketing / SEO</option>
                            <option value="consulting" {{ old('metadata.service_category') === 'consulting' ? 'selected' : '' }}>Consulting</option>
                            <option value="tutoring" {{ old('metadata.service_category') === 'tutoring' ? 'selected' : '' }}>Tutoring / Training</option>
                            <option value="other" {{ old('metadata.service_category') === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Milestones / Deliverables</label>
                        <div class="milestone-list" id="milestoneList">
                            <div class="milestone-item">
                                <div class="form-group">
                                    <label class="form-label">Description</label>
                                    <input type="text" name="metadata[milestones][0][description]" class="form-input" placeholder="e.g., Design mockups delivered">
                                </div>
                                <div class="form-group" style="width:120px;">
                                    <label class="form-label">Amount</label>
                                    <input type="number" name="metadata[milestones][0][amount]" class="form-input" placeholder="0.00" step="0.01" min="0">
                                </div>
                                <button type="button" class="remove-milestone" onclick="removeMilestone(this)" style="visibility:hidden;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="add-milestone" onclick="addMilestone()">
                            <i class="fas fa-plus"></i> Add Milestone
                        </button>
                        <span class="form-hint">Split payment into milestones. Each milestone releases funds upon approval.</span>
                    </div>
                </div>

                {{-- Dynamic Fields: Agreement --}}
                <div class="dynamic-fields" id="fields-agreement">
                    <div class="dynamic-fields-title"><i class="fas fa-file-signature"></i> Agreement Details</div>
                    <div class="form-group">
                        <label class="form-label">Agreement Type</label>
                        <select name="metadata[agreement_type]" class="form-select">
                            <option value="">Select...</option>
                            <option value="rent" {{ old('metadata.agreement_type') === 'rent' ? 'selected' : '' }}>Rent / Lease Payment</option>
                            <option value="loan" {{ old('metadata.agreement_type') === 'loan' ? 'selected' : '' }}>Loan Repayment</option>
                            <option value="contract" {{ old('metadata.agreement_type') === 'contract' ? 'selected' : '' }}>Contract Payment</option>
                            <option value="deposit" {{ old('metadata.agreement_type') === 'deposit' ? 'selected' : '' }}>Security Deposit</option>
                            <option value="custom" {{ old('metadata.agreement_type') === 'custom' ? 'selected' : '' }}>Custom Agreement</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Agreement Terms</label>
                        <textarea name="metadata[agreement_terms]" class="form-textarea" rows="4" placeholder="Describe the terms of the agreement...">{{ old('metadata.agreement_terms') }}</textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Upload Document (optional)</label>
                        <input type="file" name="agreement_document" class="form-input" accept=".pdf,.doc,.docx,.jpg,.png" style="padding: 0.5rem;">
                        <span class="form-hint">PDF, DOC, JPG, PNG up to 10MB</span>
                    </div>
                </div>

                <div class="form-actions">
                    <a href="{{ route('escrow.dashboard') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                    <button type="button" class="btn btn-primary" onclick="goToStep(2)">
                        Continue <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            {{-- ===== STEP 2: Counterparty ===== --}}
            <div class="form-step" id="step2">
                <div class="info-card">
                    <i class="fas fa-users"></i>
                    <div><strong>Step 2:</strong> Who are you transacting with?</div>
                </div>

                <div class="form-group">
                    <label class="form-label required">Your Role</label>
                    <div class="radio-group">
                        <div class="selectable-option active" data-field="role" data-value="buyer" onclick="selectOption(this)">
                            <i class="fas fa-shopping-cart"></i> I'm the Buyer
                        </div>
                        <div class="selectable-option" data-field="role" data-value="seller" onclick="selectOption(this)">
                            <i class="fas fa-store"></i> I'm the Seller
                        </div>
                    </div>
                    <input type="hidden" name="role" id="roleInput" value="{{ old('role', 'buyer') }}">
                    @error('role') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label class="form-label required">Is the other party on Tenseal?</label>
                    <div class="radio-group">
                        <div class="selectable-option active" data-field="on_tenseal" data-value="yes" onclick="toggleCounterpartyMode(this)">
                            <i class="fas fa-search"></i> Yes, search user
                        </div>
                        <div class="selectable-option" data-field="on_tenseal" data-value="no" onclick="toggleCounterpartyMode(this)">
                            <i class="fas fa-envelope"></i> No, invite via email
                        </div>
                    </div>
                </div>

                {{-- Tenseal User Lookup --}}
                <div id="tensealLookup">
                    <div class="form-group">
                        <label class="form-label required">Find Counterparty</label>
                        <div class="lookup-container">
                            <input type="text" class="form-input" id="cpSearch" placeholder="Enter email address" autocomplete="off">
                            <button type="button" class="btn btn-primary" onclick="lookupUser()">
                                <i class="fas fa-search"></i> Search
                            </button>
                        </div>
                        <div id="lookupResult" style="margin-top: 0.75rem;"></div>
                        <input type="hidden" name="counterparty_id" id="counterpartyIdInput" value="{{ old('counterparty_id') }}">
                    </div>
                </div>

                {{-- Manual Entry --}}
                <div id="manualEntry" style="display: none;">
                    <div class="form-group">
                        <label class="form-label required" for="cp_name">Full Name</label>
                        <input type="text" class="form-input" id="cp_name" name="counterparty_name" placeholder="John Doe" value="{{ old('counterparty_name') }}">
                        @error('counterparty_name') <span class="form-error">{{ $message }}</span> @enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label required" for="cp_email">Email Address</label>
                        <input type="email" class="form-input" id="cp_email" name="counterparty_email" placeholder="john@example.com" value="{{ old('counterparty_email') }}">
                        <span class="form-hint">They'll receive an invitation email to join Tenseal and complete this escrow</span>
                        @error('counterparty_email') <span class="form-error">{{ $message }}</span> @enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="cp_phone">Phone Number (Optional)</label>
                        <input type="tel" class="form-input" id="cp_phone" name="counterparty_phone" placeholder="+234 800 000 0000" value="{{ old('counterparty_phone') }}">
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="goToStep(1)">
                        <i class="fas fa-arrow-left"></i> Previous
                    </button>
                    <button type="button" class="btn btn-primary" onclick="proceedCounterparty()">
                        Continue <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            {{-- ===== STEP 3: Terms ===== --}}
            <div class="form-step" id="step3">
                <div class="info-card">
                    <i class="fas fa-file-contract"></i>
                    <div><strong>Step 3:</strong> Set terms, timelines, and fee split</div>
                </div>

                <div class="form-group">
                    <label class="form-label required">Who Pays the Escrow Fee?</label>
                    <div class="radio-group three-col">
                        <div class="selectable-option active" data-field="fee_payer" data-value="me" onclick="selectFeePayer(this)">
                            <i class="fas fa-user"></i> Me (100%)
                        </div>
                        <div class="selectable-option" data-field="fee_payer" data-value="counterparty" onclick="selectFeePayer(this)">
                            <i class="fas fa-user-friends"></i> Counterparty
                        </div>
                        <div class="selectable-option" data-field="fee_payer" data-value="split" onclick="selectFeePayer(this)">
                            <i class="fas fa-users"></i> Split
                        </div>
                    </div>
                    <input type="hidden" name="fee_payer" id="feePayerInput" value="{{ old('fee_payer', 'me') }}">
                    @error('fee_payer') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                <div class="fee-split-box" id="feeSplitBox" style="display: none;">
                    <div class="split-top-labels"><span>Me</span><span>Counterparty</span></div>
                    <input type="range" class="split-range" id="splitRange" name="fee_split" min="0" max="100" step="10" value="{{ old('fee_split', 50) }}" oninput="updateSplitLabels()">
                    <div class="split-bottom-percents">
                        <span id="mySplitPercent">50%</span>
                        <span id="cpSplitPercent">50%</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col form-group">
                        <label class="form-label required" for="delivery_timeline">Delivery Timeline</label>
                        <select id="delivery_timeline" name="delivery_timeline" class="form-select">
                            <option value="24_hours" {{ old('delivery_timeline') === '24_hours' ? 'selected' : '' }}>24 Hours</option>
                            <option value="3_days" {{ old('delivery_timeline') === '3_days' ? 'selected' : '' }}>3 Days</option>
                            <option value="1_week" {{ old('delivery_timeline', '1_week') === '1_week' ? 'selected' : '' }}>1 Week</option>
                            <option value="2_weeks" {{ old('delivery_timeline') === '2_weeks' ? 'selected' : '' }}>2 Weeks</option>
                            <option value="1_month" {{ old('delivery_timeline') === '1_month' ? 'selected' : '' }}>1 Month</option>
                        </select>
                        @error('delivery_timeline') <span class="form-error">{{ $message }}</span> @enderror
                    </div>
                    <div class="col form-group">
                        <label class="form-label required" for="inspection_period">Inspection Period</label>
                        <select id="inspection_period" name="inspection_period" class="form-select">
                            <option value="12_hours" {{ old('inspection_period') === '12_hours' ? 'selected' : '' }}>12 Hours</option>
                            <option value="24_hours" {{ old('inspection_period', '24_hours') === '24_hours' ? 'selected' : '' }}>24 Hours</option>
                            <option value="3_days" {{ old('inspection_period') === '3_days' ? 'selected' : '' }}>3 Days</option>
                            <option value="7_days" {{ old('inspection_period') === '7_days' ? 'selected' : '' }}>7 Days</option>
                        </select>
                        @error('inspection_period') <span class="form-error">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Additional Options</label>
                    <div class="checkbox-group-vertical">
                        <label class="checkbox-option">
                            <input type="checkbox" name="options[]" value="shipping" {{ is_array(old('options')) && in_array('shipping', old('options')) ? 'checked' : '' }}>
                            <div>
                                Shipping/Delivery Included
                                <span class="opt-desc">Seller covers all shipping costs</span>
                            </div>
                        </label>
                        <label class="checkbox-option">
                            <input type="checkbox" name="options[]" value="insurance" {{ is_array(old('options')) && in_array('insurance', old('options')) ? 'checked' : '' }}>
                            <div>
                                Insurance Required
                                <span class="opt-desc">Transaction must be insured</span>
                            </div>
                        </label>
                        <label class="checkbox-option">
                            <input type="checkbox" name="options[]" value="milestones" {{ is_array(old('options')) && in_array('milestones', old('options')) ? 'checked' : '' }}>
                            <div>
                                Milestone-Based Payment
                                <span class="opt-desc">Release funds in stages as milestones are met</span>
                            </div>
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="instructions">Special Instructions</label>
                    <textarea class="form-textarea" id="instructions" name="instructions" rows="4" placeholder="Any specific requirements or conditions..." maxlength="2000">{{ old('instructions') }}</textarea>
                    @error('instructions') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="goToStep(2)">
                        <i class="fas fa-arrow-left"></i> Previous
                    </button>
                    <button type="button" class="btn btn-primary" onclick="goToStep(4)">
                        Review Order <i class="fas fa-check"></i>
                    </button>
                </div>
            </div>

            {{-- ===== STEP 4: Review ===== --}}
            <div class="form-step" id="step4">
                <div class="info-card">
                    <i class="fas fa-check-circle"></i>
                    <div><strong>Step 4:</strong> Review your escrow before creating</div>
                </div>

                <div class="summary-block">
                    <div class="summary-header"><i class="fas fa-file-invoice"></i> Transaction Details</div>
                    <div class="summary-body">
                        <div class="summary-item"><label>Type</label><span id="reviewType">-</span></div>
                        <div class="summary-item"><label>Title</label><span id="reviewTitle">-</span></div>
                        <div class="summary-item" id="reviewDescRow" style="display:none;"><label>Description</label><span id="reviewDesc">-</span></div>
                        <div class="summary-item"><label>Amount</label><span id="reviewAmount">-</span></div>
                    </div>
                </div>

                <div class="summary-block" id="reviewTypeDetails" style="display:none;">
                    <div class="summary-header"><i class="fas fa-cog"></i> <span id="reviewTypeDetailsTitle">Type Details</span></div>
                    <div class="summary-body" id="reviewTypeDetailsBody"></div>
                </div>

                <div class="summary-block">
                    <div class="summary-header"><i class="fas fa-users"></i> Parties</div>
                    <div class="summary-body">
                        <div class="summary-item"><label>Your Role</label><span id="reviewRole">-</span></div>
                        <div class="summary-item"><label>Counterparty</label><span id="reviewCounterparty">-</span></div>
                    </div>
                </div>

                <div class="summary-block">
                    <div class="summary-header"><i class="fas fa-shield-halved"></i> Terms & Fees</div>
                    <div class="summary-body">
                        <div class="summary-item"><label>Fee Payment</label><span id="reviewFeePayer">-</span></div>
                        <div class="summary-item"><label>Delivery Timeline</label><span id="reviewDelivery">-</span></div>
                        <div class="summary-item"><label>Inspection Period</label><span id="reviewInspection">-</span></div>
                        <div class="summary-item"><label>Escrow Fee</label><span id="reviewFee">-</span></div>
                        <div class="summary-item"><label>VAT (7.5%)</label><span id="reviewVat">-</span></div>
                    </div>
                </div>

                <div class="total-box" id="reviewTotal">
                    <strong>Total Amount to Lock: 0.00</strong>
                </div>

                <div class="terms-check">
                    <input type="checkbox" id="agreeTerms" name="agree_terms" value="1" required onchange="toggleSubmit()">
                    <label for="agreeTerms">
                        I agree to the <a href="{{ route('landing.terms') }}" target="_blank" style="color: var(--accent);">Tenseal Terms of Service</a> and Escrow Agreement
                    </label>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" onclick="goToStep(3)">
                        <i class="fas fa-arrow-left"></i> Back
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn" disabled style="opacity:0.5;cursor:not-allowed;">
                        <i class="fas fa-lock"></i> Create Escrow
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script>
    let currentStep = 1;
    let selectedCounterparty = null;
    let milestoneCount = 1;

    // ===== Type Selection =====
    function selectType(el) {
        document.querySelectorAll('.type-card').forEach(c => c.classList.remove('active'));
        el.classList.add('active');
        const type = el.dataset.value;
        document.getElementById('typeInput').value = type;

        // Show/hide dynamic fields
        document.querySelectorAll('.dynamic-fields').forEach(f => f.classList.remove('active'));
        const fields = document.getElementById('fields-' + type);
        if (fields) fields.classList.add('active');
    }

    // ===== Step Navigation =====
    function goToStep(step) {
        if (step > currentStep && !validateStep(currentStep)) return;

        document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
        document.getElementById('step' + step).classList.add('active');

        const progressFill = document.getElementById('progressFill');
        progressFill.style.width = ((step - 1) / 3 * 100) + '%';

        document.querySelectorAll('.progress-step').forEach(ps => {
            const psStep = parseInt(ps.dataset.step);
            ps.classList.remove('active', 'completed');
            if (psStep < step) ps.classList.add('completed');
            if (psStep <= step) ps.classList.add('active');
        });

        currentStep = step;
        if (step === 4) populateReview();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // ===== Validation =====
    function validationNotice(message) {
        TensealModal.notice({ type: 'warning', title: 'Please check your entry', message: message });
    }
    function validateStep(step) {
        if (step === 1) {
            const title = document.getElementById('title').value.trim();
            const amount = parseFloat(document.getElementById('amount').value);
            if (!title) { validationNotice('Enter a transaction title so both parties know what the deal is about.'); return false; }
            if (!amount || amount < 100) { validationNotice('Enter a valid amount. The minimum supported escrow is 100.'); return false; }
            return true;
        }
        if (step === 2) {
            const mode = document.querySelector('[data-field="on_tenseal"].active')?.dataset.value;
            if (mode === 'yes' && !document.getElementById('counterpartyIdInput').value) {
                validationNotice('Search for and pick the counterparty from the results.');
                return false;
            }
            if (mode === 'no') {
                if (!document.getElementById('cp_name').value.trim()) { validationNotice("Enter the counterparty's full name so we can include it in the invitation email."); return false; }
                if (!document.getElementById('cp_email').value.trim()) { validationNotice("Enter the counterparty's email — that's how they'll get invited to the deal."); return false; }
            }
            return true;
        }
        return true;
    }

    // ===== Select Option =====
    function selectOption(el) {
        const field = el.dataset.field;
        document.querySelectorAll(`[data-field="${field}"]`).forEach(opt => opt.classList.remove('active'));
        el.classList.add('active');
        const input = document.getElementById(field + 'Input');
        if (input) input.value = el.dataset.value;
    }

    // ===== Counterparty Mode =====
    function toggleCounterpartyMode(el) {
        selectOption(el);
        const mode = el.dataset.value;
        document.getElementById('tensealLookup').style.display = mode === 'yes' ? 'block' : 'none';
        document.getElementById('manualEntry').style.display = mode === 'no' ? 'block' : 'none';
    }

    // ===== User Lookup =====
    const CURRENT_USER_EMAIL = @json(strtolower(auth()->user()->email ?? ''));
    const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content || '';

    async function lookupUser() {
        const query = document.getElementById('cpSearch').value.trim();
        if (!query) return;

        const resultDiv = document.getElementById('lookupResult');
        resultDiv.innerHTML = '<div style="color: var(--text-muted); font-size: 0.85rem;"><i class="fas fa-spinner fa-spin"></i> Searching...</div>';

        try {
            const response = await fetch(`/api/escrow/users/search?q=${encodeURIComponent(query)}`, {
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' }
            });
            const data = await response.json();

            if (data.success && data.user) {
                selectedCounterparty = data.user;
                document.getElementById('counterpartyIdInput').value = data.user.id;
                const initials = data.user.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
                resultDiv.innerHTML = `
                    <div class="user-found-card">
                        <div class="user-found-avatar">${initials}</div>
                        <div class="user-found-info">
                            <div class="user-found-name">${data.user.name}</div>
                            <div class="user-found-detail">${data.user.email}</div>
                        </div>
                        <button type="button" class="user-found-clear" onclick="clearLookup()"><i class="fas fa-times"></i></button>
                    </div>
                `;
            } else if (data.self) {
                document.getElementById('counterpartyIdInput').value = '';
                resultDiv.innerHTML = '<div style="color: var(--danger); font-size: 0.85rem;"><i class="fas fa-exclamation-circle"></i> You cannot create an escrow with yourself. Enter the other party\'s email.</div>';
            } else {
                document.getElementById('counterpartyIdInput').value = '';
                resultDiv.innerHTML = '<div style="color: var(--danger); font-size: 0.85rem;"><i class="fas fa-exclamation-circle"></i> No Tenseal user with that email. Try a different email or invite via email instead.</div>';
            }
        } catch (err) {
            resultDiv.innerHTML = '<div style="color: var(--danger); font-size: 0.85rem;"><i class="fas fa-exclamation-circle"></i> Search failed. Please try again.</div>';
        }
    }

    function clearLookup() {
        selectedCounterparty = null;
        document.getElementById('counterpartyIdInput').value = '';
        document.getElementById('lookupResult').innerHTML = '';
        document.getElementById('cpSearch').value = '';
    }

    // Validate the counterparty step BEFORE moving on, so we never proceed to
    // send an invite to yourself, and we detect emails that already belong to a
    // Tenseal user (link them directly instead of emailing an invite).
    async function proceedCounterparty() {
        const mode = document.querySelector('[data-field="on_tenseal"].active')?.dataset.value;

        if (mode === 'yes') {
            if (!document.getElementById('counterpartyIdInput').value) {
                validationNotice('Search for the counterparty and select them from the results.');
                return;
            }
            goToStep(3);
            return;
        }

        // Invite-via-email mode
        const name = document.getElementById('cp_name').value.trim();
        const email = document.getElementById('cp_email').value.trim();
        if (!name) { validationNotice("Enter the counterparty's full name so we can include it in the invite."); return; }
        if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { validationNotice("Enter a valid email address for the counterparty."); return; }
        if (CURRENT_USER_EMAIL && email.toLowerCase() === CURRENT_USER_EMAIL) {
            validationNotice('You cannot create an escrow with yourself. Enter the other party\'s email.');
            return;
        }

        // Check whether this email already belongs to a Tenseal user.
        try {
            const res = await fetch(`/api/escrow/users/search?q=${encodeURIComponent(email)}`, {
                headers: { 'X-CSRF-TOKEN': CSRF_TOKEN, 'Accept': 'application/json' }
            });
            const data = await res.json();
            if (data.self) {
                validationNotice('You cannot create an escrow with yourself.');
                return;
            }
            if (data.success && data.user) {
                // Existing user — link them directly (no invite email needed).
                document.getElementById('counterpartyIdInput').value = data.user.id;
                TensealModal.notice({
                    type: 'info',
                    title: 'Already on Tenseal',
                    message: `${data.user.name} (${data.user.email}) already has a Tenseal account, so we'll connect them directly instead of emailing an invite.`,
                });
            } else {
                // Not a user → a genuine email invite will be sent.
                document.getElementById('counterpartyIdInput').value = '';
            }
        } catch (e) {
            // Network hiccup — fall back to inviting; the server still blocks self-invites.
        }

        goToStep(3);
    }

    // ===== Fee =====
    function selectFeePayer(el) {
        selectOption(el);
        document.getElementById('feePayerInput').value = el.dataset.value;
        document.getElementById('feeSplitBox').style.display = el.dataset.value === 'split' ? 'block' : 'none';
    }

    function updateSplitLabels() {
        const val = parseInt(document.getElementById('splitRange').value);
        document.getElementById('mySplitPercent').textContent = (100 - val) + '%';
        document.getElementById('cpSplitPercent').textContent = val + '%';
    }

    // Admin-configured fee bands (injected from the server) so this estimate
    // matches exactly what the server charges on submit.
    const TENSEAL_FEE_TIERS = @json($feeTiers ?? []);
    const TENSEAL_VAT_RATE = {{ $vatRate ?? 7.5 }};

    function computeEscrowFee(amt) {
        if (!amt || amt <= 0) return { fee: 0, vat: 0, total: 0 };
        let fee = 0, matched = false;
        for (const t of TENSEAL_FEE_TIERS) {
            const belowMax = (t.max === null || t.max === undefined) || amt <= t.max;
            if (amt >= t.min && belowMax) {
                fee = (t.type === 'percent') ? amt * (t.value / 100) : t.value;
                if (t.cap !== null && t.cap !== undefined && fee > t.cap) fee = t.cap;
                matched = true;
                break;
            }
        }
        if (!matched) {
            if (TENSEAL_FEE_TIERS.length) {
                const t = TENSEAL_FEE_TIERS[TENSEAL_FEE_TIERS.length - 1];
                fee = (t.type === 'percent') ? amt * (t.value / 100) : t.value;
                if (t.cap !== null && t.cap !== undefined && fee > t.cap) fee = t.cap;
            } else {
                fee = amt * 0.015; // fallback if no bands configured
            }
        }
        const vat = fee * (TENSEAL_VAT_RATE / 100);
        return { fee: fee, vat: vat, total: amt + fee + vat };
    }

    function calculateFees() {
        const amt = parseFloat(document.getElementById('amount').value) || 0;
        const f = computeEscrowFee(amt);
        document.getElementById('feeAmount').textContent = fmt(amt);
        document.getElementById('feeFee').textContent = fmt(f.fee);
        document.getElementById('feeVat').textContent = fmt(f.vat);
        document.getElementById('feeTotal').textContent = fmt(f.total);
    }

    function fmt(n) {
        return parseFloat(n).toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    // ===== Milestones =====
    function addMilestone() {
        const list = document.getElementById('milestoneList');
        const idx = milestoneCount++;
        const item = document.createElement('div');
        item.className = 'milestone-item';
        item.innerHTML = `
            <div class="form-group">
                <label class="form-label">Description</label>
                <input type="text" name="metadata[milestones][${idx}][description]" class="form-input" placeholder="e.g., Final delivery">
            </div>
            <div class="form-group" style="width:120px;">
                <label class="form-label">Amount</label>
                <input type="number" name="metadata[milestones][${idx}][amount]" class="form-input" placeholder="0.00" step="0.01" min="0">
            </div>
            <button type="button" class="remove-milestone" onclick="removeMilestone(this)">
                <i class="fas fa-times"></i>
            </button>
        `;
        list.appendChild(item);
    }

    function removeMilestone(btn) {
        btn.closest('.milestone-item').remove();
    }

    // ===== Populate Review =====
    function populateReview() {
        calculateFees();

        const typeMap = { goods: 'Physical Goods', digital_assets: 'Digital Assets', services: 'Services', agreement: 'Agreement' };
        const deliveryMap = { '24_hours': '24 Hours', '3_days': '3 Days', '1_week': '1 Week', '2_weeks': '2 Weeks', '1_month': '1 Month' };
        const inspectionMap = { '12_hours': '12 Hours', '24_hours': '24 Hours', '3_days': '3 Days', '7_days': '7 Days' };

        const type = document.getElementById('typeInput').value;
        const title = document.getElementById('title').value;
        const desc = document.getElementById('description').value;
        const amount = parseFloat(document.getElementById('amount').value) || 0;
        const role = document.getElementById('roleInput').value;
        const feePayer = document.getElementById('feePayerInput').value;
        const delivery = document.getElementById('delivery_timeline').value;
        const inspection = document.getElementById('inspection_period').value;

        document.getElementById('reviewType').textContent = typeMap[type] || type;
        document.getElementById('reviewTitle').textContent = title;
        document.getElementById('reviewAmount').textContent = fmt(amount);
        document.getElementById('reviewRole').textContent = role.charAt(0).toUpperCase() + role.slice(1);

        if (desc) {
            document.getElementById('reviewDescRow').style.display = 'flex';
            document.getElementById('reviewDesc').textContent = desc;
        } else {
            document.getElementById('reviewDescRow').style.display = 'none';
        }

        // Counterparty
        if (selectedCounterparty) {
            document.getElementById('reviewCounterparty').textContent = selectedCounterparty.name + ' (' + selectedCounterparty.email + ')';
        } else {
            const cpName = document.getElementById('cp_name')?.value || '';
            const cpEmail = document.getElementById('cp_email')?.value || '';
            document.getElementById('reviewCounterparty').textContent = cpName + (cpEmail ? ' (' + cpEmail + ') - Invite' : '');
        }

        // Fee payer
        const payerMap = { me: 'You (100%)', counterparty: 'Counterparty (100%)', split: 'Split' };
        let payerText = payerMap[feePayer] || feePayer;
        if (feePayer === 'split') {
            const split = document.getElementById('splitRange').value;
            payerText = `Split (You: ${100 - split}% / Counterparty: ${split}%)`;
        }
        document.getElementById('reviewFeePayer').textContent = payerText;
        document.getElementById('reviewDelivery').textContent = deliveryMap[delivery] || delivery;
        document.getElementById('reviewInspection').textContent = inspectionMap[inspection] || inspection;

        // Fees (driven by the admin-configured bands via computeEscrowFee)
        const f = computeEscrowFee(amount);
        document.getElementById('reviewFee').textContent = fmt(f.fee);
        document.getElementById('reviewVat').textContent = fmt(f.vat);
        document.getElementById('reviewTotal').innerHTML = '<strong>Total Amount to Lock: ' + fmt(f.total) + '</strong>';

        // Type-specific details
        populateTypeDetails(type);
    }

    function populateTypeDetails(type) {
        const block = document.getElementById('reviewTypeDetails');
        const titleEl = document.getElementById('reviewTypeDetailsTitle');
        const body = document.getElementById('reviewTypeDetailsBody');
        body.innerHTML = '';

        const fieldsEl = document.getElementById('fields-' + type);
        if (!fieldsEl) { block.style.display = 'none'; return; }

        const items = [];

        if (type === 'goods') {
            titleEl.textContent = 'Shipping Details';
            const method = fieldsEl.querySelector('[name="metadata[shipping_method]"]')?.value;
            const condition = fieldsEl.querySelector('[name="metadata[item_condition]"]')?.value;
            const address = fieldsEl.querySelector('[name="metadata[delivery_address]"]')?.value;
            if (method) items.push(['Shipping Method', method.replace(/_/g, ' ')]);
            if (condition) items.push(['Condition', condition.replace(/_/g, ' ')]);
            if (address) items.push(['Delivery Address', address]);
        } else if (type === 'digital_assets') {
            titleEl.textContent = 'Digital Asset Details';
            const assetType = fieldsEl.querySelector('[name="metadata[asset_type]"]')?.value;
            const assetUrl = fieldsEl.querySelector('[name="metadata[asset_url]"]')?.value;
            const transfer = fieldsEl.querySelector('[name="metadata[transfer_method]"]')?.value;
            if (assetType) items.push(['Asset Type', assetType.replace(/_/g, ' ')]);
            if (assetUrl) items.push(['URL / ID', assetUrl]);
            if (transfer) items.push(['Transfer Method', transfer.replace(/_/g, ' ')]);
        } else if (type === 'services') {
            titleEl.textContent = 'Service Details';
            const cat = fieldsEl.querySelector('[name="metadata[service_category]"]')?.value;
            if (cat) items.push(['Category', cat.replace(/_/g, ' ')]);
            const milestones = fieldsEl.querySelectorAll('.milestone-item');
            milestones.forEach((m, i) => {
                const desc = m.querySelector('input[type="text"]')?.value;
                const amt = m.querySelector('input[type="number"]')?.value;
                if (desc) items.push(['Milestone ' + (i + 1), desc + (amt ? ' — ' + fmt(parseFloat(amt)) : '')]);
            });
        } else if (type === 'agreement') {
            titleEl.textContent = 'Agreement Details';
            const agType = fieldsEl.querySelector('[name="metadata[agreement_type]"]')?.value;
            const terms = fieldsEl.querySelector('[name="metadata[agreement_terms]"]')?.value;
            if (agType) items.push(['Type', agType.replace(/_/g, ' ')]);
            if (terms) items.push(['Terms', terms.substring(0, 150) + (terms.length > 150 ? '...' : '')]);
        }

        if (items.length > 0) {
            block.style.display = 'block';
            items.forEach(([label, value]) => {
                body.innerHTML += `<div class="summary-item"><label>${label}</label><span style="text-transform:capitalize;">${value}</span></div>`;
            });
        } else {
            block.style.display = 'none';
        }
    }

    // ===== Terms gate: keep the submit button disabled until "I agree" is ticked =====
    function toggleSubmit() {
        const ok = document.getElementById('agreeTerms').checked;
        const btn = document.getElementById('submitBtn');
        btn.disabled = !ok;
        btn.style.opacity = ok ? '1' : '0.5';
        btn.style.cursor = ok ? 'pointer' : 'not-allowed';
    }
    toggleSubmit();

    // ===== Submit =====
    document.getElementById('escrowForm').addEventListener('submit', function(e) {
        if (!document.getElementById('agreeTerms').checked) {
            e.preventDefault();
            TensealModal.notice({
                type: 'warning',
                title: 'Terms required',
                message: 'Please agree to the Terms of Service before creating this escrow.',
            });
            return;
        }
        document.getElementById('submitBtn').disabled = true;
        document.getElementById('submitBtn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';
    });

    // Init
    calculateFees();

    // Restore type on page reload
    const savedType = document.getElementById('typeInput').value;
    if (savedType) {
        const card = document.querySelector(`.type-card[data-value="${savedType}"]`);
        if (card) selectType(card);
    }
</script>
@endpush