@extends('layouts.main')

@section('title', 'Loyalty Settings')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4><i class="bi bi-gift me-2"></i>Loyalty Points Settings</h4>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('loyalty.settings.update') }}">
            @csrf
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-4 p-4 border rounded bg-light">
                        <h5 class="mb-3">Points Earned</h5>
                        <div class="mb-3">
                            <label class="form-label">Points per Kes spent</label>
                            <div class="input-group">
                                <span class="input-group-text">1 Kes = </span>
                                <input type="number" name="ratio" class="form-control" value="{{ $ratio }}" min="0.01" step="0.01" required>
                                <span class="input-group-text">points</span>
                            </div>
                            <small class="text-muted">Example: 1 means 1 Kes = 1 point</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-4 p-4 border rounded bg-light">
                        <h5 class="mb-3">Points Redemption</h5>
                        <div class="mb-3">
                            <label class="form-label">Value per point</label>
                            <div class="input-group">
                                <span class="input-group-text">1 point = </span>
                                <input type="number" name="redemption" class="form-control" value="{{ $redemption }}" min="0.01" step="0.01" required>
                                <span class="input-group-text">Kes</span>
                            </div>
                            <small class="text-muted">Example: 1 means 1 point = 1 Kes discount</small>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-save me-1"></i> Save Settings
            </button>
        </form>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0">How it works</h5>
    </div>
    <div class="card-body">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <strong>Earning Points:</strong> When a customer makes a purchase, they earn points based on the "Points per Kes spent" setting.
                <br><em>Example: If ratio is 1, a Kes 100 purchase earns 100 points.</em>
            </li>
            <li class="list-group-item">
                <strong>Redeeming Points:</strong> Customers can use their points to get discounts on future purchases.
                <br><em>Example: If redemption is 1, 100 points can be redeemed for Kes 100 discount.</em>
            </li>
            <li class="list-group-item">
                <strong>Balance:</strong> Customers can view their available points in the sales form and redeem them during checkout.
            </li>
        </ul>
    </div>
</div>
@endsection