@extends('operations.layout.mainlayout')

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark loyalty-title">Loyalty Programme</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/operations">Home</a></li>
                            <li class="breadcrumb-item active">Loyalty Programme</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content loyalty-page">
            <div class="container-fluid">
                @if (isset($errors) && count($errors) > 0)
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="card loyalty-shell">
                    <div class="card-header p-0 border-bottom-0">
                        <ul class="nav nav-tabs loyalty-tabs" id="loyalty-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#general-configuration" role="tab">General Configuration</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#points-configuration" role="tab">Points Configuration</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tier-configuration" role="tab">Tier Configuration</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#welcome-points" role="tab">Welcome Points</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#special-event-points" role="tab">Special Event Points</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#user-loyalty-report" role="tab">User Loyalty Report</a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <form method="post" action="/operations/loyalty-program" enctype="multipart/form-data">
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="general-configuration" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Programme Status</span>
                                                <div class="custom-control custom-switch custom-switch-on-info mt-3">
                                                    <input name="ENABLE_LOYALTY" type="checkbox" class="custom-control-input" id="loyalty-program" @if($profile->ENABLE_LOYALTY) checked @endif>
                                                    <label class="custom-control-label" for="loyalty-program">Active</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Channel Scope</span>
                                                <select name="LOYALTY_CHANNEL_SCOPE" class="form-control mt-3">
                                                    <option value="1" @if(($profile->LOYALTY_CHANNEL_SCOPE ?? 1) == 1) selected @endif>Mobile only</option>
                                                    <option value="2" @if(($profile->LOYALTY_CHANNEL_SCOPE ?? 1) == 2) selected @endif>Operations + Mobile + Website</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Minimum Points For Cashback</span>
                                                <input type="number" step="any" min="0" class="form-control mt-3" name="MINIMUM_CASHBACK_POINT" value="{{$profile->MINIMUM_CASHBACK_POINT ?? 0}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-4">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Branch Scope</span>
                                                <select name="LOYALTY_BRANCH_SCOPE" id="loyalty-branch-scope" class="form-control mt-3">
                                                    <option value="1" @if(($profile->LOYALTY_BRANCH_SCOPE ?? 1) == 1) selected @endif>All branches</option>
                                                    <option value="2" @if(($profile->LOYALTY_BRANCH_SCOPE ?? 1) == 2) selected @endif>Selected branches</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Existing User Paid Orders Lookback In Days</span>
                                                <input type="number" min="0" class="form-control mt-3" name="EXISTING_USER_PAID_ORDER_LOOKBACK_DAYS" value="{{$profile->EXISTING_USER_PAID_ORDER_LOOKBACK_DAYS ?? 0}}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Exclude Existing Users Without Loyalty Enrollment</span>
                                                <div class="custom-control custom-switch custom-switch-on-info mt-3">
                                                    <input name="EXCLUDE_UNENROLLED_EXISTING_USERS_FROM_LOYALTY" type="checkbox" class="custom-control-input" id="exclude-unenrolled-existing-users" @if($profile->EXCLUDE_UNENROLLED_EXISTING_USERS_FROM_LOYALTY ?? 0) checked @endif>
                                                    <label class="custom-control-label" for="exclude-unenrolled-existing-users">Active</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4" id="loyalty-branch-selection">
                                        <div class="col-md-12">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Selected Branches</span>
                                                <select name="LOYALTY_BRANCH_IDS[]" class="form-control mt-3 loyalty-branch-select" multiple>
                                                    @foreach($branches as $branch)
                                                        <option value="{{$branch->ID}}" @if(in_array($branch->ID, $selectedBranches)) selected @endif>{{$branch->NAME_EN}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12 text-right">
                                            <button type="button" class="btn loyalty-outline mr-2" id="existing-users-backfill-summary">Preview Existing User Loyalty Summary</button>
                                            <button type="button" class="btn loyalty-outline mr-2" id="backfill-tier-notifications-preview">Preview Tier Notifications</button>
                                            <button type="submit" class="btn loyalty-btn">Save Configuration</button>
                                        </div>
                                    </div>
                                    <div class="row mt-4" id="existing-users-backfill-summary-panel" style="display: none;">
                                        <div class="col-md-12">
                                            <div class="loyalty-panel">
                                                <div class="loyalty-form-title mb-3">Existing User Loyalty Summary</div>
                                                <div id="existing-users-backfill-summary-message"></div>
                                                <div class="table-responsive">
                                                    <table class="table table-bordered loyalty-table mb-0">
                                                        <thead>
                                                            <tr>
                                                                <th>Tier</th>
                                                                <th>Users</th>
                                                                <th>Average Points Per User</th>
                                                                <th>Point Value In SAR</th>
                                                                <th>Average Equivalent In SAR</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="existing-users-backfill-summary-body"></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="points-configuration" role="tabpanel">
                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <table id="test-point-datatable" class="table table-bordered table-striped"></table>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="welcome-points" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">New User Points</span>
                                                <input type="number" step="any" min="0" class="form-control mt-3" name="WELCOME_POINT" value="{{$profile->WELCOME_POINT ?? 0}}">
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="loyalty-panel">
                                                <span class="panel-label">Welcome Points Expiry In Days</span>
                                                <input type="number" min="0" class="form-control mt-3" name="WELCOME_POINT_EXPIRY_DAYS" value="{{$profile->WELCOME_POINT_EXPIRY_DAYS ?? 0}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12 text-right">
                                            <button type="submit" class="btn loyalty-btn">Save Welcome Points</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="tab-content">
                            <div class="tab-pane fade" id="tier-configuration" role="tabpanel">
                                <div class="loyalty-toolbar">
                                    <div>
                                        <div class="loyalty-form-title mb-1">Tier Configuration</div>
                                        <div class="loyalty-help-text m-0">Manage tier ranges, membership validity, and each tier point calculation.</div>
                                    </div>
                                    <button type="button" class="btn loyalty-btn add-tier">Add Tier</button>
                                </div>
                                <div class="table-responsive mt-4">
                                    <table class="table table-bordered table-striped loyalty-table">
                                        <thead>
                                        <tr>
                                            <th>Tier</th>
                                            <th>Arabic</th>
                                            <th>Range</th>
                                            <th>Expiry Days</th>
                                            <th>Earn / 1 {!! $global_symbol['currency'] !!}</th>
                                            <th>Point Value</th>
                                            <th>Point Expiry</th>
                                            <th>Status</th>
                                            <th>Order</th>
                                            <th>Color</th>
                                            <th>Assets</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody id="loyalty-tier-table-body">
                                        @php
                                            $loyaltyService = new \App\Services\LoyaltyService();
                                        @endphp
                                        @foreach($tiers as $tier)
                                            @php
                                                $tierLogoImageUrl = $loyaltyService->tierAssetUrl($tier->LOGO_IMAGE);
                                                $tierIconImageUrl = $loyaltyService->tierAssetUrl($tier->ICON_IMAGE);
                                                $tierBackgroundImageUrl = $loyaltyService->tierAssetUrl($tier->BACKGROUND_IMAGE);
                                            @endphp
                                            <tr id="tier-row-{{$tier->ID}}">
                                                <td>{{$tier->NAME_EN}}</td>
                                                <td>{{$tier->NAME_AR}}</td>
                                                <td>{{$tier->POINT_FROM}} - {{$tier->POINT_TO === null ? 'Open' : $tier->POINT_TO}}</td>
                                                <td>{{$tier->MEMBERSHIP_EXPIRY_DAYS}}</td>
                                                <td>{{$tier->POINT_EARN_PER_AMOUNT === null ? $profile->POINT_EARN_PER_AMOUNT : $tier->POINT_EARN_PER_AMOUNT}}</td>
                                                <td>{{$tier->VALUE_OF_POINT === null ? $profile->VALUE_OF_POINT : $tier->VALUE_OF_POINT}}</td>
                                                <td>{{$tier->POINT_EXPIRY_DAYS === null ? $profile->POINT_EXPIRY_DAYS : $tier->POINT_EXPIRY_DAYS}}</td>
                                                <td>{{$tier->ACTIVE_STATUS ? 'Active' : 'Inactive'}}</td>
                                                <td>{{$tier->DISPLAY_ORDER}}</td>
                                                <td><span class="tier-color" style="background: {{$tier->COLOR ?: 'var(--blazma-primary)' }}"></span></td>
                                                <td>
                                                    @if($tier->LOGO_IMAGE)<span class="badge badge-light">Logo</span>@endif
                                                    @if($tier->ICON_IMAGE)<span class="badge badge-light">Icon</span>@endif
                                                    @if($tier->BACKGROUND_IMAGE)<span class="badge badge-light">Background</span>@endif
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-sm loyalty-outline edit-tier"
                                                            data-id="{{$tier->ID}}"
                                                            data-name-en="{{$tier->NAME_EN}}"
                                                            data-name-ar="{{$tier->NAME_AR}}"
                                                            data-point-from="{{$tier->POINT_FROM}}"
                                                            data-point-to="{{$tier->POINT_TO}}"
                                                            data-expiry="{{$tier->MEMBERSHIP_EXPIRY_DAYS}}"
                                                            data-point-earn="{{$tier->POINT_EARN_PER_AMOUNT === null ? $profile->POINT_EARN_PER_AMOUNT : $tier->POINT_EARN_PER_AMOUNT}}"
                                                            data-point-value="{{$tier->VALUE_OF_POINT === null ? $profile->VALUE_OF_POINT : $tier->VALUE_OF_POINT}}"
                                                            data-point-expiry="{{$tier->POINT_EXPIRY_DAYS === null ? $profile->POINT_EXPIRY_DAYS : $tier->POINT_EXPIRY_DAYS}}"
                                                            data-active="{{$tier->ACTIVE_STATUS}}"
                                                            data-order="{{$tier->DISPLAY_ORDER}}"
                                                            data-color="{{$tier->COLOR ?: 'var(--blazma-primary)' }}"
                                                            data-logo-image="{{$tierLogoImageUrl}}"
                                                            data-icon-image="{{$tierIconImageUrl}}"
                                                            data-background-image="{{$tierBackgroundImageUrl}}">Edit</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="special-event-points" role="tabpanel">
                                <form method="post" action="/operations/loyalty-program/event-point" class="loyalty-form">
                                    <div class="row">
                                        <div class="col-md-2"><input name="NAME_EN" class="form-control" placeholder="Event name EN" required></div>
                                        <div class="col-md-2"><input name="NAME_AR" class="form-control" placeholder="Event name AR"></div>
                                        <div class="col-md-2">
                                            <select name="PROFILE_LOYALTY_TIER_ID" class="form-control" required>
                                                <option value="">Tier</option>
                                                @foreach($tiers as $tier)
                                                    <option value="{{$tier->ID}}">{{$tier->NAME_EN}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-1"><input name="POINT_AMOUNT" type="number" step="any" min="0.01" class="form-control" placeholder="Points" required></div>
                                        <div class="col-md-2"><input name="DATE_FROM" type="date" class="form-control" required></div>
                                        <div class="col-md-2"><input name="DATE_TO" type="date" class="form-control" required></div>
                                        <div class="col-md-1"><button class="btn loyalty-btn btn-block" type="submit">Add</button></div>
                                    </div>
                                    <input type="hidden" name="ACTIVE_STATUS" value="1">
                                </form>
                                <div class="table-responsive mt-4">
                                    <table class="table table-bordered table-striped loyalty-table">
                                        <thead>
                                        <tr>
                                            <th>Event</th>
                                            <th>Arabic</th>
                                            <th>Tier</th>
                                            <th>Points</th>
                                            <th>Dates</th>
                                            <th>Status</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($events as $event)
                                            <tr>
                                                <td>{{$event->NAME_EN}}</td>
                                                <td>{{$event->NAME_AR}}</td>
                                                <td>{{$event->tier->NAME_EN ?? ''}}</td>
                                                <td>{{$event->POINT_AMOUNT}}</td>
                                                <td>{{$event->DATE_FROM}} - {{$event->DATE_TO}}</td>
                                                <td>{{$event->ACTIVE_STATUS ? 'Active' : 'Inactive'}}</td>
                                                <td>
                                                    <button type="button" class="btn btn-sm loyalty-outline edit-event"
                                                            data-id="{{$event->ID}}"
                                                            data-name-en="{{$event->NAME_EN}}"
                                                            data-name-ar="{{$event->NAME_AR}}"
                                                            data-tier="{{$event->PROFILE_LOYALTY_TIER_ID}}"
                                                            data-points="{{$event->POINT_AMOUNT}}"
                                                            data-date-from="{{$event->DATE_FROM}}"
                                                            data-date-to="{{$event->DATE_TO}}"
                                                            data-active="{{$event->ACTIVE_STATUS}}">Edit</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="user-loyalty-report" role="tabpanel">
                                <div class="text-right mb-3">
                                    <a href="/operations/loyalty-program/users-report/export" class="btn loyalty-btn" role="button">Export Excel</a>
                                </div>
                                <table id="loyalty-users-datatable" class="table table-bordered table-striped"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="tier-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="post" action="/operations/loyalty-program/tier" id="tier-form" enctype="multipart/form-data">
                    <div class="modal-header"><h4 class="modal-title" id="tier-modal-title">Edit Tier</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                    <div class="modal-body">
                        <div class="alert alert-danger" id="tier-form-errors" style="display: none;"></div>
                        <input type="hidden" name="ID" id="tier-id">
                        <div class="row">
                            <div class="col-md-6"><label>Name EN</label><input name="NAME_EN" id="tier-name-en" class="form-control" placeholder="Silver" required></div>
                            <div class="col-md-6"><label>Name AR</label><input name="NAME_AR" id="tier-name-ar" class="form-control" placeholder="فضي"></div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-3"><label>Point From</label><input name="POINT_FROM" id="tier-point-from" type="number" step="any" min="0" class="form-control" placeholder="500" required></div>
                            <div class="col-md-3"><label>Point To</label><input name="POINT_TO" id="tier-point-to" type="number" step="any" min="0" class="form-control" placeholder="999"></div>
                            <div class="col-md-3"><label>Expiry Days</label><input name="MEMBERSHIP_EXPIRY_DAYS" id="tier-expiry" type="number" min="1" class="form-control" required></div>
                            <div class="col-md-3"><label>Order</label><input name="DISPLAY_ORDER" id="tier-order" type="number" min="0" class="form-control"></div>
                        </div>
                        <div class="loyalty-help-text">Leave Point To empty for the highest open-ended tier.</div>
                        <div class="row mt-3">
                            <div class="col-md-4"><label>Points Earned Per 1 {!! $global_symbol['currency'] !!}</label><input name="POINT_EARN_PER_AMOUNT" id="tier-point-earn" type="number" step="any" min="0" class="form-control" required></div>
                            <div class="col-md-4"><label>Value Of 1 Point In {!! $global_symbol['currency'] !!}</label><input name="VALUE_OF_POINT" id="tier-point-value" type="number" step="any" min="0" class="form-control" required></div>
                            <div class="col-md-4"><label>Points Expiry In Days</label><input name="POINT_EXPIRY_DAYS" id="tier-point-expiry" type="number" min="0" class="form-control"></div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4"><label>Color</label><input name="COLOR" id="tier-color" type="color" class="form-control loyalty-color"></div>
                            <div class="col-md-4">
                                <label>Status</label>
                                <div class="custom-control custom-switch custom-switch-on-info mt-2">
                                    <input name="ACTIVE_STATUS" value="1" type="checkbox" class="custom-control-input" id="tier-active">
                                    <label class="custom-control-label" for="tier-active">Active</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label>Tier Logo Image</label>
                                <input name="LOGO_IMAGE" id="tier-logo-image" type="file" accept="image/*" class="form-control">
                                <div class="loyalty-help-text" id="tier-logo-current"></div>
                            </div>
                            <div class="col-md-4">
                                <label>Progress Icon Image</label>
                                <input name="ICON_IMAGE" id="tier-icon-image" type="file" accept="image/*" class="form-control">
                                <div class="loyalty-help-text" id="tier-icon-current"></div>
                            </div>
                            <div class="col-md-4">
                                <label>Card Background Image</label>
                                <input name="BACKGROUND_IMAGE" id="tier-background-image" type="file" accept="image/*" class="form-control">
                                <div class="loyalty-help-text" id="tier-background-current"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer"><button class="btn loyalty-btn" type="submit">Save</button></div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="event-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="post" action="/operations/loyalty-program/event-point">
                    <div class="modal-header"><h4 class="modal-title">Edit Special Event Points</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                    <div class="modal-body">
                        <input type="hidden" name="ID" id="event-id">
                        <div class="row">
                            <div class="col-md-6"><label>Name EN</label><input name="NAME_EN" id="event-name-en" class="form-control" required></div>
                            <div class="col-md-6"><label>Name AR</label><input name="NAME_AR" id="event-name-ar" class="form-control"></div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label>Tier</label>
                                <select name="PROFILE_LOYALTY_TIER_ID" id="event-tier" class="form-control" required>
                                    @foreach($tiers as $tier)
                                        <option value="{{$tier->ID}}">{{$tier->NAME_EN}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2"><label>Points</label><input name="POINT_AMOUNT" id="event-points" type="number" step="any" min="0.01" class="form-control" required></div>
                            <div class="col-md-3"><label>Date From</label><input name="DATE_FROM" id="event-date-from" type="date" class="form-control" required></div>
                            <div class="col-md-3"><label>Date To</label><input name="DATE_TO" id="event-date-to" type="date" class="form-control" required></div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label>Status</label>
                                <div class="custom-control custom-switch custom-switch-on-info mt-2">
                                    <input name="ACTIVE_STATUS" value="1" type="checkbox" class="custom-control-input" id="event-active">
                                    <label class="custom-control-label" for="event-active">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer"><button class="btn loyalty-btn" type="submit">Save</button></div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="backfill-tier-notifications-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"><h4 class="modal-title">Send Backfill Tier Notifications</h4><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                <div class="modal-body">
                    <div id="backfill-tier-notifications-message"></div>
                    <div class="table-responsive mt-3">
                        <table class="table table-bordered loyalty-table mb-0">
                            <thead><tr><th>Tier</th><th>Users</th></tr></thead>
                            <tbody id="backfill-tier-notifications-body"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer"><button type="button" class="btn loyalty-btn" id="backfill-tier-notifications-send">Queue Notifications</button></div>
            </div>
        </div>
    </div>
@endsection

@section('warehouse_scripts')
    <style>
        .loyalty-title { color: var(--blazma-primary) !important; font-weight: 500; }
        .loyalty-page .card { border-radius: 8px; }
        .loyalty-shell { border: 1px solid #e8ebf0; box-shadow: 0 12px 28px rgba(15, 23, 42, .07); overflow: hidden; }
        .loyalty-shell .card-body { padding: 20px; background: #fff; }
        .loyalty-tabs { background: #fff; border-bottom: 1px solid #e7eaf0; padding: 10px 12px 0; gap: 4px; }
        .loyalty-tabs .nav-link { color: #343a40; font-weight: 700; border-radius: 7px 7px 0 0; border: 1px solid transparent; border-bottom: 0; padding: 13px 18px; }
        .loyalty-tabs .nav-link.active { background: var(--blazma-primary); color: #fff; border-color: var(--blazma-primary); box-shadow: 0 8px 16px rgba(var(--blazma-primary-rgb), .18); }
        .loyalty-tabs .nav-link:not(.active):hover { color: var(--blazma-primary); background: var(--blazma-pale); border-color: #C9EDF0; }
        .loyalty-panel { border: 1px solid #e8ebf0; border-top: 3px solid var(--blazma-primary); border-radius: 8px; padding: 18px; min-height: 116px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .04); }
        .loyalty-panel .form-control, .loyalty-form .form-control, .modal .form-control { border-color: #ccd3dd; border-radius: 6px; height: 38px; }
        .loyalty-panel .form-control:focus, .loyalty-form .form-control:focus, .modal .form-control:focus { border-color: var(--blazma-primary); box-shadow: 0 0 0 2px rgba(var(--blazma-primary-rgb), .08); }
        .panel-label { display: block; color: #4d5665; font-size: 12px; font-weight: 800; text-transform: uppercase; }
        .loyalty-btn { background: var(--blazma-primary); border: 1px solid var(--blazma-primary); color: #fff; min-width: 104px; border-radius: 7px; font-weight: 800; padding: 9px 18px; box-shadow: 0 8px 16px rgba(var(--blazma-primary-rgb), .18); transition: all .16s ease; }
        .loyalty-btn:hover, .loyalty-btn:focus { background: #fff; color: var(--blazma-primary); border-color: var(--blazma-primary); box-shadow: 0 6px 14px rgba(var(--blazma-primary-rgb), .12); transform: translateY(-1px); }
        .loyalty-btn:active { transform: translateY(0); box-shadow: none; }
        .loyalty-outline { border: 1px solid var(--blazma-primary); color: var(--blazma-primary); background: #fff; border-radius: 6px; font-weight: 700; }
        .loyalty-outline:hover { background: var(--blazma-primary); color: #fff; }
        .loyalty-form-title { color: #242a33; font-size: 16px; font-weight: 800; margin-bottom: 14px; }
        .loyalty-field-label { color: #4a5261; font-size: 12px; font-weight: 700; margin-bottom: 6px; white-space: nowrap; }
        .loyalty-switch-row { min-height: 38px; display: flex; align-items: center; }
        .loyalty-help-text { color: #697384; font-size: 12px; margin-top: 10px; }
        .loyalty-toolbar { background: #fbfcfd; border: 1px solid #e8ebf0; border-left: 4px solid var(--blazma-primary); border-radius: 8px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
        .loyalty-table { border: 1px solid #e8ebf0; }
        .loyalty-table thead th, .loyalty-page table.dataTable thead th { background: var(--blazma-primary) !important; color: #fff !important; border-color: var(--blazma-primary) !important; padding: 13px 12px; }
        .loyalty-table tbody td, .loyalty-page table.dataTable tbody td { vertical-align: middle; padding: 12px; }
        .loyalty-table tbody tr:hover, .loyalty-page table.dataTable tbody tr:hover { background: var(--blazma-pale); }
        .tier-color { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d5d8de; vertical-align: middle; }
        .loyalty-color { padding: 4px; height: 38px; }
        .loyalty-form { background: #fbfcfd; border: 1px solid #e8ebf0; border-radius: 8px; padding: 16px; }
        .loyalty-page .select2-container--default .select2-selection--multiple { border-color: #ccd3dd; border-radius: 6px; min-height: 38px; }
        .loyalty-page .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--blazma-primary); box-shadow: 0 0 0 2px rgba(var(--blazma-primary-rgb), .08); }
        #tier-modal .modal-content, #event-modal .modal-content, #backfill-tier-notifications-modal .modal-content { border: 0; border-radius: 8px; box-shadow: 0 18px 36px rgba(15, 23, 42, .18); overflow: hidden; }
        #tier-modal .modal-header, #event-modal .modal-header, #backfill-tier-notifications-modal .modal-header { background: var(--blazma-primary); color: #fff; border-bottom: 0; }
        #tier-modal .modal-title, #event-modal .modal-title, #backfill-tier-notifications-modal .modal-title { font-weight: 800; }
        #tier-modal .close, #event-modal .close, #backfill-tier-notifications-modal .close { color: #fff; opacity: 1; text-shadow: none; }
        #tier-modal label, #event-modal label { color: #4d5665; font-size: 12px; font-weight: 800; text-transform: uppercase; }
        #tier-modal .modal-footer, #event-modal .modal-footer, #backfill-tier-notifications-modal .modal-footer { background: #fbfcfd; border-top: 1px solid #e8ebf0; }
    </style>
    @include('operations.loyalty.script.index')
@endsection