@extends('layouts.app')

@section('title', 'Settings · Discounts')

@section('content')
<div class="container-fluid">
    @include('settings._tabs')

    <div class="row g-4">
        <div class="col-xl-8">
            <form method="POST" action="{{ route('settings.discounts.update') }}" class="settings-card">
                @csrf
                <div class="settings-card-head">
                    <h6><i class="bi bi-tag me-2 text-primary"></i>Discounts at the till</h6>
                    <p class="text-muted small mb-0">When on, the payment window has a <strong>Discount</strong> button. Every discount needs a reason,
                        shows on the receipt, and is listed in Loss Prevention and the reports.</p>
                </div>
                <div class="settings-card-body">
                    @unless(plan_allows('discounts'))
                        <div class="alert alert-light border d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <span><span class="badge me-1" style="background:#ede9fe;color:#6d28d9;">Pro</span> Discounts at the till is part of the Pro plan. You can set it up now; it works once you upgrade.</span>
                            <a href="{{ route('billing.index', ['tab' => 'plans']) }}" class="btn btn-sm btn-primary">See plans</a>
                        </div>
                    @endunless
                    <input type="hidden" name="discounts_enabled" value="0">
                    <div class="disc-switch {{ $enabled ? 'is-on' : '' }}">
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input" type="checkbox" role="switch" id="discountsEnabled" name="discounts_enabled" value="1" @checked($enabled)>
                            <label class="form-check-label fw-semibold" for="discountsEnabled">Discounts are {{ $enabled ? 'ON' : 'OFF' }}</label>
                        </div>
                    </div>

                    @php $type = old('discount_limit_type', $limitType); @endphp
                    <div class="mt-4">
                        <div class="settings-label mb-2">Most discount allowed per sale (for everyone, the owner included)</div>
                        <div class="limit-toggle mb-3" role="radiogroup" aria-label="Set the limit in">
                            <input type="radio" class="btn-check" name="discount_limit_type" id="limitPercent" value="percent" @checked($type === 'percent')>
                            <label class="btn btn-outline-primary" for="limitPercent"><i class="bi bi-percent me-1"></i> Percentage</label>
                            <input type="radio" class="btn-check" name="discount_limit_type" id="limitAmount" value="amount" @checked($type === 'amount')>
                            <label class="btn btn-outline-primary" for="limitAmount"><i class="bi bi-cash me-1"></i> Kwacha</label>
                        </div>
                        <div class="row g-3 align-items-start">
                            <div class="col-sm-6">
                                <div class="input-group limit-field {{ $type === 'percent' ? '' : 'd-none' }}" data-limit="percent">
                                    <input type="number" min="0" max="100" step="0.5" name="discount_max_percent" class="form-control"
                                           value="{{ old('discount_max_percent', $maxPercent) }}" aria-label="Limit in percent" placeholder="e.g. 10">
                                    <span class="input-group-text">% of the sale</span>
                                </div>
                                <div class="input-group limit-field {{ $type === 'amount' ? '' : 'd-none' }}" data-limit="amount">
                                    <span class="input-group-text">MWK</span>
                                    <input type="number" min="0" step="100" name="discount_max_amount" class="form-control"
                                           value="{{ old('discount_max_amount', $maxAmount) }}" aria-label="Limit in Kwacha" placeholder="e.g. 1000">
                                    <span class="input-group-text">per sale</span>
                                </div>
                                @error('discount_max_percent')<div class="text-danger small">{{ $message }}</div>@enderror
                                @error('discount_max_amount')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6 small text-muted">
                                Nobody can go above this at the till. To allow a bigger discount, raise the limit here.
                                Cashiers can type a discount in % or in Kwacha either way.
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-primary mt-4">Save</button>
                </div>
            </form>
        </div>

        <div class="col-xl-4">
            <div class="settings-card mb-4">
                <div class="settings-card-head"><h6><i class="bi bi-graph-down me-2 text-primary"></i>This month</h6></div>
                <div class="settings-card-body">
                    <div class="h4 fw-bold mb-0">{{ formatCurrency($month['amount']) }}</div>
                    <div class="small text-muted">given in {{ $month['count'] }} {{ $month['count'] == 1 ? 'sale' : 'sales' }}.
                        See them in <a href="{{ route('integrity.index', ['type' => 'discount_given']) }}">Loss Prevention</a>.</div>
                </div>
            </div>
            <div class="settings-card">
                <div class="settings-card-head"><h6><i class="bi bi-people me-2 text-primary"></i>Who can give them</h6></div>
                <div class="settings-card-body small">
                    <div class="mb-2"><strong>Up to {{ $limitLabel }}:</strong>
                        {{ $givers->map(fn ($r) => $r->display_name ?: $r->name)->implode(', ') ?: 'nobody' }}</div>
                    <div class="text-muted">Change this under <a href="{{ route('admin.roles.index') }}">Roles</a> (POS: "Give discounts").</div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .disc-switch { padding: 1rem 1.1rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #f8fafc; }
    .disc-switch.is-on { border-color: var(--theme-primary); background: #f0fdf4; }
    .disc-switch .form-check-input { width: 3rem; height: 1.5rem; cursor: pointer; }
    .disc-switch .form-check-label { margin-left: .5rem; cursor: pointer; }
    .limit-toggle { display: inline-flex; gap: .35rem; }
</style>
<script>
    // Show the field for the chosen way of setting the limit
    document.querySelectorAll('input[name="discount_limit_type"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            document.querySelectorAll('.limit-field').forEach(function (field) {
                field.classList.toggle('d-none', field.dataset.limit !== radio.value);
            });
        });
    });
</script>
@endsection