@extends('layouts.app')

@section('content')
@include('proedge.admin.discounts._styles')

@php $hasFilters = request()->hasAny(['keyword', 'offer_id', 'status']); @endphp

<div class="row">
    <div class="col-md-12">

        @include('proedge.admin.discounts._flash')

        <div class="panel panel-success panel-border">
            @include('proedge.admin.discounts._panel_head', [
                'title'      => 'Promo Codes',
                'addTarget'  => $activeOffers->isEmpty() ? null : 'modal_add_codes',
                'addTooltip' => 'Click here to add new codes',
                'hasFilters' => $hasFilters,
            ])

            <div class="panel-body row">

                {{-- Filters --}}
                <div class="col-md-12 discount-filters" id="discount_filters"
                     style="{{ $hasFilters ? '' : 'display:none;' }}">
                    <form method="GET" action="{{ route('discounts.codes') }}">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label>Keyword Search:</label>
                                <input type="text" name="keyword" class="form-control"
                                       value="{{ request('keyword') }}" placeholder="Code or issued to">
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Offer:</label>
                                <select name="offer_id" class="form-control">
                                    <option value="">-</option>
                                    @foreach($allOffers as $o)
                                        <option value="{{ $o->id }}" {{ (string) request('offer_id') === (string) $o->id ? 'selected' : '' }}>
                                            {{ $o->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Status:</label>
                                <select name="status" class="form-control">
                                    <option value="">-</option>
                                    @foreach(['active', 'pending', 'used', 'expired', 'disabled'] as $s)
                                        <option value="{{ $s }}" {{ request('status')===$s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-success">Search</button>
                                <a href="{{ route('discounts.codes') }}" class="btn btn-default">Reset</a>
                            </div>
                        </div>
                    </form>
                    <hr>
                </div>

                <div class="col-md-12">
                    @include('proedge.admin.discounts._summary')

                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover" id="codes_table">
                            <thead>
                                <tr>
                                    @include('proedge.admin.discounts._th', ['field' => 'code', 'label' => 'Code'])
                                    <th>Offer</th>
                                    @include('proedge.admin.discounts._th', ['field' => 'status', 'label' => 'Status'])
                                    @include('proedge.admin.discounts._th', ['field' => 'times_redeemed', 'label' => 'Redeemed'])
                                    @include('proedge.admin.discounts._th', ['field' => 'max_per_customer', 'label' => 'Per customer'])
                                    @include('proedge.admin.discounts._th', ['field' => 'expires_at', 'label' => 'Expires'])
                                    <th>Reserved for</th>
                                    @include('proedge.admin.discounts._th', ['field' => 'issued_to', 'label' => 'Issued to'])
                                    <th>In Stripe</th>
                                    <th>Options</th>
                                </tr>
                            </thead>
                            <tbody>
                            @forelse($codes as $code)
                                <tr>
                                    <td>
                                        <strong><code>{{ $code->code }}</code></strong>
                                        {{-- Conditions on the code itself. They used to sit under
                                             Restrictions, which now names one thing only. --}}
                                        @if($code->first_time_only)
                                            <span class="label label-default"
                                                  title="Only a customer who has never paid before can use it">New customers only</span>
                                        @endif
                                        @if($code->minimum_amount)
                                            <span class="label label-default"
                                                  title="The invoice must reach this before the code applies">Min {{ number_format((float) $code->minimum_amount, 2) }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if(optional($code->offer)->description)
                                            {{-- Same bubble as the ⓘ tooltips on the forms, opened by
                                                 hovering the name itself. Escaped: the note is free
                                                 text typed by an admin. --}}
                                            <span class="offer-hint" tabindex="0">
                                                {{ $code->offer->name }}
                                                <span class="field-info-content">{{ $code->offer->description }}</span>
                                            </span>
                                        @else
                                            {{ optional($code->offer)->name ?: '—' }}
                                        @endif
                                    </td>
                                    <td>
                                        @php
                                            $labels = [
                                                'active'   => 'label-success',
                                                'pending'  => 'label-warning',
                                                'used'     => 'label-info',
                                                'expired'  => 'label-default',
                                                'disabled' => 'label-danger',
                                            ];
                                            // Dead codes are not all dead for the same reason, and
                                            // which one it is decides what to do about it.
                                            $why = [
                                                'active'   => 'Usable now.',
                                                'pending'  => 'Created, but not yet confirmed at Stripe.',
                                                'used'     => 'Spent — every redemption it allowed has been taken. '
                                                    . 'Stripe counts a redemption as soon as the code is applied, so an '
                                                    . 'abandoned checkout spends it too. Add another code to keep the offer running.',
                                                'expired'  => 'Past its expiry date.',
                                                'disabled' => 'Switched off by hand, or its offer was deleted.',
                                            ];
                                        @endphp
                                        <span class="label {{ $labels[$code->status] ?? 'label-default' }}"
                                              title="{{ $why[$code->status] ?? '' }}">
                                            {{ ucfirst($code->status) }}
                                        </span>
                                    </td>
                                    <td>
                                        {{ $code->times_redeemed }}
                                        @if($code->max_redemptions)/ {{ $code->max_redemptions }}@endif
                                    </td>
                                    <td>{{ $code->max_per_customer ?: 'unlimited' }}</td>
                                    <td>{{ $code->expires_at ? $code->expires_at->format('d M Y H:i') : '—' }}</td>
                                    <td>
                                        @if($code->restricted_user_id)
                                            <span class="label label-primary"
                                                  title="Only this customer can redeem it">
                                                {{ optional($code->restrictedUser)->name ?: 'User' }}
                                                #{{ $code->restricted_user_id }} only
                                            </span>
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $code->issued_to ?: '—' }}</td>
                                    <td>
                                        @if($code->externalId())
                                            <code>{{ $code->externalId() }}</code>
                                        @else
                                            <span class="label label-warning"
                                                  title="Written locally but not yet created at the gateway">
                                                not synced
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($code->status === 'active')
                                            <form method="POST" style="margin:0;"
                                                  action="{{ route('discounts.codes.deactivate', ['code' => $code->id]) }}"
                                                  onsubmit="return confirm('Switch off {{ $code->code }}? This cannot be undone.');">
                                                @csrf
                                                <button type="submit" class="btn btn-xs btn-danger">Switch off</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-muted">
                                        @if($hasFilters)
                                            No codes match those filters.
                                        @elseif($activeOffers->isEmpty())
                                            No promo codes yet. Create an offer first, then add codes to it.
                                        @else
                                            No promo codes yet. Use the <strong>+</strong> button to add some.
                                        @endif
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="div-paginator">
                        {{-- Bootstrap 3 numbered pagination, matching Leads. The app's default
                             template is Tailwind, which this panel does not load, so it fell
                             back to bare Previous / Next links. --}}
                        {{ $codes->links('pagination::default') }}
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@if($activeOffers->isNotEmpty())
    @include('proedge.modal.discount.add_codes')
@endif

@endsection

@section('scripts')
<script>
(function () {
    // Before anything can open it: same housekeeping as the offers page.
    hardenModals('#modal_add_codes');

    var form  = document.getElementById('codes_form'),
        offer = document.getElementById('codes_offer'),
        mode  = document.getElementById('codes_mode');

    // The offer id is part of the URL, so retarget the form as it changes
    // rather than posting an id in the body.
    var expires = document.getElementById('codes_expires'),
        expiresNote = document.getElementById('codes_expires_note');

    // A code cannot outlive its offer, so the picker will not offer a later
    // date. The API refuses it too — this only saves the round trip.
    function capExpiry() {
        if (!expires) { return; }

        var picked = offer.options[offer.selectedIndex],
            ends   = picked ? picked.getAttribute('data-ends-at') : '';

        if (ends) {
            expires.max = ends;
            expiresNote.textContent = 'This offer is valid till ' + ends.replace('T', ' ')
                + ', so its codes cannot expire after that.';
            expiresNote.style.display = '';

            if (expires.value && expires.value > ends) { expires.value = ends; }
        } else {
            expires.removeAttribute('max');
            expiresNote.style.display = 'none';
        }
    }

    var maxRedemptions = document.getElementById('codes_max_redemptions'),
        singleUseNote  = document.getElementById('codes_single_use_note');

    // An automatic offer hands its code to whoever arrives, so a single-use
    // code serves one person and then the offer quietly stops working.
    function warnAboutSingleUse() {
        if (!maxRedemptions || !singleUseNote) { return; }

        var picked = offer.options[offer.selectedIndex],
            auto   = picked && picked.getAttribute('data-auto-apply') === '1';

        singleUseNote.style.display = (auto && parseInt(maxRedemptions.value, 10) === 1) ? '' : 'none';
    }

    if (maxRedemptions) { maxRedemptions.addEventListener('input', warnAboutSingleUse); }

    if (form && offer) {
        offer.addEventListener('change', function () {
            form.action = form.dataset.urlTemplate.replace('__ID__', this.value);
            capExpiry();
            warnAboutSingleUse();
        });
        form.addEventListener('submit', function (e) {
            if (!offer.value) {
                e.preventDefault();
                alert('Choose an offer first.');
            }
        });
    }

    if (mode) {
        var toggle = function () {
            var generating = mode.value === 'generate';
            document.querySelectorAll('.codes-generate').forEach(function (el) {
                el.style.display = generating ? '' : 'none';
            });
            document.querySelectorAll('.codes-manual').forEach(function (el) {
                el.style.display = generating ? 'none' : '';
            });
        };
        mode.addEventListener('change', toggle);
        toggle();
    }

    initCustomerPicker('codes');

    // After the guard above, so a submit it blocks is not sent anyway.
    submitModalForm('codes_form');

    @if($errors->any() && old('form') === 'add_codes')
        $('#modal_add_codes').modal('show');
    @endif
})();
</script>
@endsection