@extends('layouts.admin')

@section('title', 'Profit Margin & Markup Rules | Omni Trade')
@section('page_title', 'Dynamic Profit Margin & Markup Engine')

@section('content')
<div style="display:flex; flex-direction:column; gap:28px;">
    <!-- Explanatory Banner & Actions -->
    <div class="card" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
        <div>
            <h3 style="font-size:18px; font-weight:700; color:var(--admin-text-main); margin-bottom:4px;">Automated Profit Markup Engine</h3>
            <p style="font-size:13.5px; color:var(--admin-text-muted);">
                Set tiered profit margins based on supplier base cost, product category, or supplier channel. Prices automatically round to psychological <code style="color:var(--admin-primary); font-weight:700;">.99</code>.
            </p>
        </div>

        <div style="display:flex; gap:12px;">
            <form action="{{ route('admin.products.recalculate') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-outline" title="Re-calculate all retail prices based on current rules">
                    <i data-lucide="refresh-cw" style="width:15px;"></i> Recalculate Catalog Prices
                </button>
            </form>
            <button type="button" onclick="toggleNewRuleForm()" class="btn btn-primary">
                <i data-lucide="plus" style="width:15px;"></i> Add Markup Rule
            </button>
        </div>
    </div>

    <!-- Create Rule Collapsible Card (Clean Box without highlights) -->
    <div id="newRuleFormCard" class="card" style="display:none;">
        <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:18px;">Create New Profit Markup Rule</h3>
        <form action="{{ route('admin.markup.store') }}" method="POST">
            @csrf
            <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:16px;">
                <div>
                    <label>Rule Name *</label>
                    <input type="text" name="name" placeholder="e.g. Budget Items Under $15" required>
                </div>

                <div>
                    <label>Markup Type *</label>
                    <select name="markup_type" required>
                        <option value="multiplier" selected>Multiplier (e.g. 2.5x Cost)</option>
                        <option value="percentage">Percentage (e.g. +50% Margin)</option>
                        <option value="fixed">Fixed Dollar Addition (e.g. +$20)</option>
                    </select>
                </div>

                <div>
                    <label>Markup Value *</label>
                    <input type="number" step="0.01" name="markup_value" placeholder="2.5 or 50 or 20" required>
                </div>
            </div>

            <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:20px;">
                <div>
                    <label>Min Supplier Cost ($)</label>
                    <input type="number" step="0.01" name="min_cost" value="0.00" required>
                </div>

                <div>
                    <label>Max Supplier Cost ($ - leave empty for unlimited)</label>
                    <input type="number" step="0.01" name="max_cost" placeholder="No maximum">
                </div>

                <div>
                    <label>MSRP Compare Strike-Through Multiplier</label>
                    <input type="number" step="0.01" name="compare_at_multiplier" value="1.40" required>
                </div>

                <div>
                    <label>Evaluation Priority</label>
                    <input type="number" name="priority" value="5" required>
                </div>
            </div>

            <div style="display:flex; justify-content:space-between; align-items:center;">
                <label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                    <input type="checkbox" name="round_to_99" value="1" checked style="accent-color:var(--admin-primary);">
                    <span>Round retail price up to .99 psychological pricing ($34.21 &rarr; $34.99)</span>
                </label>

                <div style="display:flex; gap:12px;">
                    <button type="button" onclick="toggleNewRuleForm()" class="btn btn-outline">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Markup Rule</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Active Rules Table -->
    <div class="card">
        <h3 style="font-size:16px; font-weight:700; color:var(--admin-text-main); margin-bottom:16px;">Configured Markup Rules</h3>
        <div style="overflow-x:auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Rule Name</th>
                        <th>Supplier Match</th>
                        <th>Cost Bracket</th>
                        <th>Rule Calculation</th>
                        <th>Compare-At MSRP</th>
                        <th>Psychological .99</th>
                        <th>Priority</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($rules as $rule)
                        <tr>
                            <td>
                                <strong style="color:var(--admin-text-main);">{{ $rule->name }}</strong>
                            </td>
                            <td>
                                <span class="badge badge-info">{{ $rule->supplier?->name ?? 'All Suppliers' }}</span>
                            </td>
                            <td>
                                ${{ number_format($rule->min_cost, 2) }} - 
                                {{ $rule->max_cost ? '$' . number_format($rule->max_cost, 2) : '&infin;' }}
                            </td>
                            <td>
                                <strong style="color:#059669;">
                                    @if($rule->markup_type === 'multiplier')
                                        {{ $rule->markup_value }}x Multiplier
                                    @elseif($rule->markup_type === 'percentage')
                                        +{{ $rule->markup_value }}% Margin
                                    @else
                                        +${{ number_format($rule->markup_value, 2) }} Fixed
                                    @endif
                                </strong>
                            </td>
                            <td>{{ $rule->compare_at_multiplier }}x</td>
                            <td>
                                @if($rule->round_to_99)
                                    <span style="color:#059669; font-weight:700;">Yes (.99)</span>
                                @else
                                    <span style="color:var(--admin-text-muted);">Exact cents</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-cyan">Priority {{ $rule->priority }}</span>
                            </td>
                            <td>
                                <form action="{{ route('admin.markup.destroy', $rule->id) }}" method="POST" onsubmit="return confirm('Delete this markup rule?')" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" style="background:none; border:none; color:#ef4444; cursor:pointer; font-size:12px;">
                                        Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function toggleNewRuleForm() {
        const form = document.getElementById('newRuleFormCard');
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }
</script>
@endpush
@endsection