@extends('layouts.admin')

@section('title', 'Manage Bonus')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-1 mb-2">
        <div>
            <span class="loot-status success">Rewards</span>
            <h1 class="loot-section-title mt-1 mb-25">Bonus codes</h1>
            <p class="loot-muted mb-0">Create, generate and manage promo/coupon codes users can redeem for coins.</p>
        </div>
        <div class="d-flex gap-1 flex-wrap">
            <button class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#bonusGenerate"><i data-feather="zap" class="me-50"></i>Bulk generate</button>
            <button class="btn btn-loot" data-bs-toggle="modal" data-bs-target="#bonusCreate"><i data-feather="plus" class="me-50"></i>New code</button>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success"><div class="alert-body">{{ session('success') }}</div></div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger"><div class="alert-body">{{ session('error') }}</div></div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger"><div class="alert-body">@foreach($errors->all() as $error)<p class="mb-0">{{ $error }}</p>@endforeach</div></div>
    @endif

    <section class="user-page-card">
        <form method="GET" class="admin-leads-filters">
            <div class="admin-filter-search"><i data-feather="search"></i><input class="form-control" name="search" value="{{ $search }}" placeholder="Search code"></div>
            <button class="btn btn-loot">Search</button>
            <a class="btn btn-outline-light" href="{{ route('admin.bonus') }}">Reset</a>
        </form>

        <form id="bonusBulk" data-bulk-form="bonuses" method="POST" action="{{ route('admin.bonus.bulk') }}" class="admin-bulk-bar mb-1">
            @csrf
            <select class="form-select" name="action" required>
                <option value="">Bulk actions</option>
                <option value="activate">Activate</option>
                <option value="deactivate">Deactivate</option>
                <option value="delete">Delete</option>
            </select>
            <button class="btn btn-outline-light" data-bulk-submit="bonuses" disabled>Apply</button>
            <span class="loot-muted" data-bulk-count="bonuses">0 selected</span>
            <button type="button" class="btn btn-outline-light ms-auto" data-bulk-export="bonuses"
                    data-export-url="{{ route('admin.bonus.export', ['search' => $search]) }}">
                <i data-feather="download" class="me-50"></i>Export CSV
            </button>
        </form>

        <div class="table-responsive admin-leads-table-wrap">
            <table class="table admin-leads-table mb-0">
                <thead>
                    <tr>
                        <th class="admin-check-cell"><input class="form-check-input" type="checkbox" data-bulk-select-all="bonuses" aria-label="Select all"></th>
                        <th>Code</th><th>Value</th><th>Used / Limit</th><th>Status</th><th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($bonuses as $bonus)
                        <tr>
                            <td class="admin-check-cell"><input class="form-check-input" type="checkbox" name="ids[]" value="{{ $bonus->id }}" form="bonusBulk" data-bulk-item="bonuses" aria-label="Select {{ $bonus->code }}"></td>
                            <td>
                                <button type="button" class="btn btn-sm btn-outline-light loot-copy-code" data-code="{{ $bonus->code }}" title="Copy code">
                                    <strong>{{ $bonus->code }}</strong> <i data-feather="copy" style="width:13px;height:13px;"></i>
                                </button>
                            </td>
                            <td><strong>{{ format_coins_as_usd($bonus->points) }}</strong><small class="d-block loot-muted">{{ number_format($bonus->points) }} coins</small></td>
                            <td>{{ $bonus->history_count }} / {{ $bonus->max_uses ?: '∞' }}</td>
                            <td>
                                @if($bonus->is_active)
                                    <span class="badge badge-light-success">Active</span>
                                @else
                                    <span class="badge badge-light-danger">Inactive</span>
                                @endif
                            </td>
                            <td>
                                <form method="POST" action="{{ route('admin.bonus.update') }}" class="d-inline">
                                    @csrf @method('PUT')
                                    <button class="btn btn-sm {{ $bonus->is_active ? 'btn-outline-danger' : 'btn-outline-success' }}" name="change" value="{{ $bonus->id }}">
                                        {{ $bonus->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="text-center loot-muted py-3">No bonus codes yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-1">{{ $bonuses->links() }}</div>
    </section>

    {{-- Create single code --}}
    <div class="modal fade" id="bonusCreate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.bonus.add') }}">
                    @csrf
                    <div class="modal-header"><h4 class="modal-title loot-section-title">New bonus code</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                    <div class="modal-body">
                        <label class="form-label">Code</label>
                        <input type="text" name="code" class="form-control text-uppercase" placeholder="WELCOME50" required>
                        <label class="form-label mt-1">Points</label>
                        <input type="number" name="points" class="form-control" min="1" placeholder="50" required>
                        <label class="form-label mt-1">Max uses <span class="loot-muted">(0 = unlimited)</span></label>
                        <input type="number" name="max" class="form-control" min="0" value="0">
                    </div>
                    <div class="modal-footer"><button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button><button class="btn btn-loot">Add code</button></div>
                </form>
            </div>
        </div>
    </div>

    {{-- Bulk generate --}}
    <div class="modal fade" id="bonusGenerate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.bonus.generate') }}">
                    @csrf
                    <div class="modal-header"><h4 class="modal-title loot-section-title">Bulk generate codes</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                    <div class="modal-body">
                        <label class="form-label">How many codes</label>
                        <input type="number" name="quantity" class="form-control" min="1" max="500" value="10" required>
                        <label class="form-label mt-1">Points each</label>
                        <input type="number" name="points" class="form-control" min="1" placeholder="50" required>
                        <label class="form-label mt-1">Max uses each <span class="loot-muted">(0 = unlimited)</span></label>
                        <input type="number" name="max" class="form-control" min="0" value="1">
                        <label class="form-label mt-1">Prefix <span class="loot-muted">(optional)</span></label>
                        <input type="text" name="prefix" class="form-control text-uppercase" placeholder="SUMMER" maxlength="16">
                        <p class="loot-muted mt-1 mb-0">Random codes will be generated. Export the CSV afterwards to hand them out.</p>
                    </div>
                    <div class="modal-footer"><button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button><button class="btn btn-loot">Generate</button></div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.querySelectorAll('.loot-copy-code').forEach(function (button) {
            button.addEventListener('click', function () {
                var code = button.getAttribute('data-code');
                if (navigator.clipboard) {
                    navigator.clipboard.writeText(code).then(function () {
                        button.classList.add('btn-success');
                        setTimeout(function () { button.classList.remove('btn-success'); }, 900);
                    });
                }
            });
        });
    </script>
@endpush
