@extends('layouts.app')

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

@php $hasFilters = request()->hasAny(['keyword', 'discount_type', 'status', 'partner']); @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'      => 'Offers',
                'addTarget'  => 'modal_add_offer',
                'addTooltip' => 'Click here to add a new offer',
                'hasFilters' => $hasFilters,
                'extra'      => [
                    [
                        'target'  => 'modal_apply_offer',
                        'tooltip' => 'Give an offer to one customer',
                        'icon'    => 'user',
                    ],
                    [
                        'target'  => 'modal_remove_discount',
                        'tooltip' => 'Remove a discount from a customer',
                        'icon'    => 'erase',
                    ],
                ],
            ])

            <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.offers') }}">
                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>Keyword Search:</label>
                                <input type="text" name="keyword" class="form-control"
                                       value="{{ request('keyword') }}" placeholder="Name, summary or partner">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Type:</label>
                                <select name="discount_type" class="form-control">
                                    <option value="">-</option>
                                    <option value="percent" {{ request('discount_type')==='percent' ? 'selected' : '' }}>Percentage off</option>
                                    <option value="fixed" {{ request('discount_type')==='fixed' ? 'selected' : '' }}>Fixed amount off</option>
                                    {{-- Hidden alongside the same two in the Add Offer form. Offers
                                         already created with these types still list and still work;
                                         they just cannot be filtered to by type any more, so find
                                         them by name in the keyword box.
                                    <option value="free_period" {{ request('discount_type')==='free_period' ? 'selected' : '' }}>Free period</option>
                                    <option value="intro_price" {{ request('discount_type')==='intro_price' ? 'selected' : '' }}>Intro price</option>
                                    --}}
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Status:</label>
                                <select name="status" class="form-control">
                                    <option value="">-</option>
                                    <option value="active" {{ request('status')==='active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ request('status')==='inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Partner:</label>
                                <select name="partner" class="form-control">
                                    <option value="">-</option>
                                    @foreach($partners as $p)
                                        <option value="{{ $p }}" {{ request('partner')===$p ? 'selected' : '' }}>{{ $p }}</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.offers') }}" 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="offers_table">
                            <thead>
                                <tr>
                                    @include('proedge.admin.discounts._th', ['field' => 'name', 'label' => 'Name'])
                                    <th>Discount</th>
                                    @include('proedge.admin.discounts._th', ['field' => 'duration', 'label' => 'Duration'])
                                    <th>Plans</th>
                                    @include('proedge.admin.discounts._th', ['field' => 'partner', 'label' => 'Partner'])
                                    @include('proedge.admin.discounts._th', ['field' => 'codes_count', 'label' => 'Codes'])
                                    @include('proedge.admin.discounts._th', ['field' => 'redemptions_count', 'label' => 'Used'])
                                    <th>Budget</th>
                                    @include('proedge.admin.discounts._th', ['field' => 'is_active', 'label' => 'Status'])
                                    <th>In Stripe</th>
                                    <th>Options</th>
                                </tr>
                            </thead>
                            <tbody>
                            @forelse($offers as $offer)
                                <tr>
                                    <td>
                                        @if($offer->description)
                                            {{-- Hovering the name shows the note, the same as the Offer
                                                 column on Promo Codes. Escaped: it is free text an admin
                                                 typed. --}}
                                            <span class="offer-hint" tabindex="0">
                                                {{ $offer->name }}
                                                <span class="field-info-content">{{ $offer->description }}</span>
                                            </span>
                                        @else
                                            {{ $offer->name }}
                                        @endif
                                    </td>
                                    <td>{{ $offer->summary ?: $offer->discount_type }}</td>
                                    <td>
                                        {{-- The same words the Add Offer form uses. "Once" and "Forever"
                                             on their own read as a number of payments, which they are not:
                                             a customer who renews early has more payments than months. --}}
                                        @if($offer->duration === 'months')
                                            {{ $offer->duration_in_months }} calendar month{{ $offer->duration_in_months == 1 ? '' : 's' }}
                                        @elseif($offer->duration === 'forever')
                                            Every renewal
                                        @else
                                            Signup payment only
                                        @endif
                                    </td>
                                    <td>
                                        {{-- No rows means every plan, which is what an offer
                                             created before plans were tiered will show. --}}
                                        @forelse($offer->plans as $offerPlan)
                                            <span class="label label-default">{{ $offerPlan->name }}</span>
                                        @empty
                                            <span class="text-muted">All plans</span>
                                        @endforelse
                                    </td>
                                    <td>{{ $offer->partner ?: '—' }}</td>
                                    <td>{{ $offer->codes_count }}</td>
                                    <td>{{ $offer->redemptions_count }}</td>
                                    <td>
                                        @if($offer->budget_cap)
                                            {{ number_format((float) $offer->budget_used, 2) }}
                                            / {{ number_format((float) $offer->budget_cap, 2) }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>
                                        @if($offer->is_active)
                                            <span class="label label-success">Active</span>
                                        @else
                                            <span class="label label-default">Inactive</span>
                                        @endif
                                        @if($offer->auto_apply)
                                            @if($offer->usable_public_codes_count > 0)
                                                {{-- Worth its own badge: this one applies to customers
                                                     who never asked for it. --}}
                                                <span class="label label-info"
                                                      title="Applied at checkout with no code typed">Automatic</span>
                                            @else
                                                {{-- Checkout applies an automatic offer by handing out one
                                                     of its codes. With none live and unreserved there is
                                                     nothing to hand out, and it silently does nothing. --}}
                                                <span class="label label-warning"
                                                      title="Add a promo code to this offer on the Promo Codes page. A code reserved for one customer does not count.">Automatic — no code yet, won't apply</span>
                                            @endif
                                        @endif
                                    </td>
                                    <td>
                                        @if($offer->externalId())
                                            <code>{{ $offer->externalId() }}</code>
                                        @else
                                            <span class="text-muted"
                                                  title="Trial-based offers become a subscription trial, not a Stripe coupon">
                                                trial &mdash; no coupon
                                            </span>
                                        @endif
                                    </td>
                                    <td class="offer-actions">
                                        {{-- Only the fields Stripe will still accept a change to. The
                                             percentage, amount and duration are fixed when the coupon is
                                             created, so they are shown on the row but never editable. --}}
                                        <button type="button" class="btn btn-xs btn-default js-edit-offer"
                                                data-toggle="modal" data-target="#modal_edit_offer"
                                                data-id="{{ $offer->id }}"
                                                data-name="{{ $offer->name }}"
                                                data-description="{{ $offer->description }}"
                                                data-summary="{{ $offer->summary ?: $offer->discount_type }}"
                                                data-partner="{{ $offer->partner }}"
                                                data-budget-cap="{{ $offer->budget_cap }}"
                                                data-budget-used="{{ $offer->budget_used }}"
                                                data-ends-at="{{ $offer->ends_at ? $offer->ends_at->format('Y-m-d\TH:i') : '' }}"
                                                data-had-ends-at="{{ $offer->ends_at ? 1 : 0 }}"
                                                data-auto-apply="{{ $offer->auto_apply ? 1 : 0 }}"
                                                data-plan-ids="{{ $offer->plans->pluck('id')->implode(',') }}">
                                            Edit
                                        </button>

                                        <form method="POST" style="display:inline;"
                                              action="{{ route('discounts.offers.toggle', ['offer' => $offer->id]) }}">
                                            @csrf
                                            <input type="hidden" name="is_active" value="{{ $offer->is_active ? 0 : 1 }}">
                                            <button type="submit" class="btn btn-xs btn-default">
                                                {{ $offer->is_active ? 'Switch off' : 'Switch on' }}
                                            </button>
                                        </form>

                                        @if($offer->redemptions_count > 0)
                                            {{-- The ledger points at this offer and rule_snapshot is the
                                                 only record of what was given, so it stays. --}}
                                            <span class="text-muted small"
                                                  title="Used {{ $offer->redemptions_count }} time(s) — delete would strand the redemption history">
                                                in use
                                            </span>
                                        @else
                                            @php
                                                // Built here and JSON-encoded below, so the name is escaped
                                                // for JavaScript: an apostrophe in an offer name would
                                                // otherwise end the string and stop the handler compiling,
                                                // which submits the form with no confirmation at all.
                                                $deleteWarning = 'Delete ' . $offer->name
                                                    . ($offer->codes_count ? ' and its ' . $offer->codes_count . ' code(s)' : '')
                                                    . " from Poolpix and from Stripe?\n\nThis cannot be undone.";
                                            @endphp
                                            <form method="POST" style="display:inline;"
                                                  action="{{ route('discounts.offers.delete', ['offer' => $offer->id]) }}"
                                                  {{-- Single-quoted: @json emits a double-quoted JSON
                                                       string, which would close a double-quoted
                                                       attribute. Apostrophes inside it become unicode
                                                       escapes, so they cannot close this one. --}}
                                                  onsubmit='return confirm(@json($deleteWarning));'>
                                                @csrf
                                                <button type="submit" class="btn btn-xs btn-danger">Delete</button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-muted">
                                        @if($hasFilters)
                                            No offers match those filters.
                                        @else
                                            No offers yet. Use the <strong>+</strong> button to create one, or run
                                            <code>php artisan discounts:sync</code> in poolpix-website-api to import
                                            anything that already exists in Stripe.
                                        @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. --}}
                        {{ $offers->links('pagination::default') }}
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('proedge.modal.discount.add_offer')
@include('proedge.modal.discount.apply_offer')
@include('proedge.modal.discount.edit_offer')
@include('proedge.modal.discount.remove_discount')

@endsection

@section('scripts')
<script>
(function () {
    var type      = document.getElementById('offer_discount_type'),
        label     = document.getElementById('offer_value_label'),
        introWrap = document.getElementById('offer_intro_days_wrap'),
        duration  = document.getElementById('offer_duration'),
        months    = document.getElementById('offer_months_wrap');

    // The value field means something different per type, so its label and
    // its bounds both follow the type. The same limits are enforced again
    // server-side; these only save a round trip.
    var KINDS = {
        percent:     { label: 'Percent off',  min: '0.01', max: '100',    step: '0.01' },
        fixed:       { label: 'Amount off',   min: '0.01', max: '100000', step: '0.01' },
        free_period: { label: 'Free days',    min: '1',    max: '730',    step: '1'    },
        intro_price: { label: 'Intro price',  min: '0.01', max: '100000', step: '0.01' }
    };

    function syncType() {
        var kind  = KINDS[type.value] || { label: 'Value', min: '0', step: 'any' },
            value = document.getElementsByName('value')[0];

        // textContent, not innerHTML on the whole label — the label also holds
        // the required asterisk and the info icon, which must survive.
        label.textContent = kind.label;

        if (value) {
            value.min  = kind.min;
            value.step = kind.step;

            if (kind.max) { value.max = kind.max; } else { value.removeAttribute('max'); }
        }

        introWrap.style.display = type.value === 'intro_price' ? '' : 'none';
    }

    function syncDuration() {
        months.style.display = duration.value === 'months' ? '' : 'none';
    }

    if (type)     { type.addEventListener('change', syncType); syncType(); }
    if (duration) { duration.addEventListener('change', syncDuration); syncDuration(); }

    // Reopen the modal after a validation bounce so nothing has to be retyped.
    @if($errors->any() && old('form') === 'add_offer')
        $('#modal_add_offer').modal('show');
    @endif
})();

// --- Give an offer to one customer -------------------------------------
(function () {
    var form   = document.getElementById('apply_offer_form'),
        offer  = document.getElementById('apply_offer_id'),
        userId = document.getElementById('apply_user_id'),
        submit = document.getElementById('apply_offer_submit');

    if (!form) { return; }

    function ready() {
        submit.disabled = !(offer.value && userId.value);
    }

    initCustomerPicker('apply', ready);
    offer.addEventListener('change', ready);

    form.addEventListener('submit', function (e) {
        if (!offer.value || !userId.value) {
            e.preventDefault();
            return;
        }

        // The route carries the offer id, which is only known once one is
        // picked, so the action is filled in at submit time.
        form.action = form.getAttribute('data-url-template').replace('__ID__', offer.value);
        submit.disabled = true;
    });

    // After the guard above, and after the action is retargeted on submit.
    submitModalForm('apply_offer_form');
})();

// --- Modal housekeeping, before anything opens one -----------------------
hardenModals('#modal_add_offer, #modal_apply_offer, #modal_edit_offer, #modal_remove_discount');

// --- Submit without leaving the page ------------------------------------
submitModalForm('add_offer_form');
submitModalForm('edit_offer_form');

// --- Edit an offer ------------------------------------------------------
(function () {
    var form = document.getElementById('edit_offer_form');

    if (!form) { return; }

    var name    = document.getElementById('edit_offer_name'),
        partner = document.getElementById('edit_offer_partner'),
        cap     = document.getElementById('edit_offer_budget_cap'),
        used    = document.getElementById('edit_offer_budget_used'),
        ends    = document.getElementById('edit_offer_ends_at'),
        note    = document.getElementById('edit_offer_ends_note'),
        summary = document.getElementById('edit_offer_summary'),
        offerId = document.getElementById('edit_offer_id'),
        summaryValue = document.getElementById('edit_offer_summary_value'),
        autoApply = document.getElementById('edit_offer_auto_apply'),
        description = document.getElementById('edit_offer_description');

    // Fills the modal from values rather than from a button, so the same code
    // serves a click and a bounce back from a refused submit.
    function fill(d) {
        form.action = form.getAttribute('data-url-template').replace('__ID__', d.id);
        offerId.value = d.id;
        summaryValue.value = d.summary || '';

        // textContent, not innerHTML: these come from the database.
        summary.textContent = d.summary || '';
        name.value    = d.name || '';
        if (description) { description.value = d.description || ''; }
        if (autoApply) { autoApply.checked = d.autoApply === '1'; }
        partner.value = d.partner || '';
        cap.value     = d.budgetCap || '';
        ends.value    = d.endsAt || '';

        // The floor is $500, or what has already been given away if that is
        // more. An offer created before the $500 rule may keep its lower cap
        // untouched — otherwise it could not be saved at all, since Edit sends
        // every field — so its own cap becomes the floor instead.
        var spent   = parseFloat(d.budgetUsed || 0),
            current = parseFloat(d.budgetCap || 0),
            floor   = Math.max(500, spent);
        if (current > 0 && current < 500) { floor = Math.max(current, spent); }
        cap.min = floor.toFixed(2);
        used.textContent = spent > 0 ? 'Already given away: $' + spent.toFixed(2) + '.' : '';

        // Which plans this offer is limited to. Every box is cleared first,
        // or an offer restricted to one plan would inherit the ticks left by
        // the last offer opened — the modal is shared across every row.
        var chosen = (d.planIds || '').split(',').filter(Boolean);

        Array.prototype.forEach.call(
            document.querySelectorAll('input[id^="edit_offer_plan_"]'),
            function (box) { box.checked = chosen.indexOf(box.value) !== -1; }
        );

        // An end date lodged with Stripe cannot be pushed back, only
        // brought forward, so the picker will not offer a later one.
        if (d.hadEndsAt === '1') {
            ends.max = d.endsAt;
            ends.required = true;
            note.style.display = '';
        } else {
            ends.removeAttribute('max');
            ends.required = false;
            note.style.display = 'none';
        }
    }

    // Bootstrap's data-toggle on the button does the opening, so this modal
    // behaves exactly like every other one here. Filling it is a listener
    // bound straight to the button, which runs before Bootstrap's, delegated
    // from document, gets the same click — and unlike show.bs.modal's
    // relatedTarget it does not depend on which Bootstrap 3.x this app ships.
    Array.prototype.forEach.call(document.querySelectorAll('.js-edit-offer'), function (button) {
        button.addEventListener('click', function () { fill(button.dataset); });
    });

    // A refused submit comes back as a fresh page load, so the modal has to be
    // put back the way it was — with what was typed, not with what was stored.
    @if($errors->any() && old('form') === 'edit_offer')
        fill({
            id:        {{ Illuminate\Support\Js::from(old('offer_id')) }},
            summary:   {{ Illuminate\Support\Js::from(old('offer_summary')) }},
            name:      {{ Illuminate\Support\Js::from(old('name')) }},
            description: {{ Illuminate\Support\Js::from(old('description')) }},
            partner:   {{ Illuminate\Support\Js::from(old('partner')) }},
            budgetCap: {{ Illuminate\Support\Js::from(old('budget_cap')) }},
            endsAt:    {{ Illuminate\Support\Js::from(old('ends_at')) }},
            planIds:   {{ Illuminate\Support\Js::from(implode(',', (array) old('plan_ids', []))) }},
            // Unknown after a bounce; leaving it off keeps the field editable
            // rather than locking it to a date that may not be the real one.
            hadEndsAt: '0'
        });
        $('#modal_edit_offer').modal('show');
    @endif
})();

// --- Remove a discount from a customer ----------------------------------
(function () {
    var list = document.getElementById('remove_discount_list');

    if (!list) { return; }

    var template = '{{ route('discounts.customers.discounts', ['user' => '__ID__']) }}',
        action   = '{{ route('discounts.customers.remove', ['user' => '__ID__']) }}',
        token    = '{{ csrf_token() }}';

    function message(text, muted) {
        list.innerHTML = '';
        var p = document.createElement('p');
        p.className = muted ? 'text-muted' : 'text-danger';
        p.textContent = text;
        list.appendChild(p);
    }

    function render(discounts, userId) {
        if (!discounts.length) {
            message('No discounts on this customer right now.', true);
            return;
        }

        list.innerHTML = '';

        discounts.forEach(function (discount) {
            var row = document.createElement('form');
            row.className = 'customer-discount';
            row.method = 'post';
            row.action = action.replace('__ID__', userId);

            var csrf = document.createElement('input');
            csrf.type  = 'hidden';
            csrf.name  = '_token';
            csrf.value = token;

            var id = document.createElement('input');
            id.type  = 'hidden';
            id.name  = 'discount_id';
            id.value = discount.id;

            var label = document.createElement('span');
            label.textContent = discount.label;

            var button = document.createElement('button');
            button.type = 'submit';
            button.className = 'btn btn-xs btn-danger pull-right';
            button.textContent = 'Remove';

            row.onsubmit = function () {
                return confirm('Remove "' + discount.label + '" from this customer?\n\n'
                    + 'It stops applying from their next invoice. Anything already '
                    + 'charged is unaffected, and their redemption history is kept.');
            };

            row.appendChild(csrf);
            row.appendChild(id);
            row.appendChild(button);
            row.appendChild(label);
            list.appendChild(row);
        });
    }

    initCustomerPicker('remove', function (customer) {
        if (!customer) {
            message('Pick a customer to see what they are carrying.', true);
            return;
        }

        if (!customer.has_billing) {
            message('This customer has no billing record, so they carry no discounts.', true);
            return;
        }

        message('Loading…', true);

        $.getJSON(template.replace('__ID__', customer.id))
         .done(function (res) { render(res.data || [], customer.id); })
         .fail(function (xhr) {
             message((xhr.responseJSON && xhr.responseJSON.error)
                 || 'Could not read that customer.', false);
         });
    });
})();
</script>
@endsection