@extends('layouts.app')

@section('content')

<style>
    .plan-unlimited { color:#8a6d3b; background:#fcf8e3; padding:1px 6px; border-radius:3px; font-size:11px; }
    .plan-counted   { color:#3c763d; background:#dff0d8; padding:1px 6px; border-radius:3px; font-size:11px; }
    .plan-inactive  { color:#a94442; background:#f2dede; padding:1px 6px; border-radius:3px; font-size:11px; }
    .plan-actions   { white-space:nowrap; }
</style>

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

        @if(session('plan_success'))
            <div class="alert alert-success">{{ session('plan_success') }}</div>
        @endif
        @if(session('plan_error'))
            <div class="alert alert-danger">{{ session('plan_error') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul style="margin:0 0 0 18px;">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="panel panel-success panel-border">
            <div class="panel-heading">
                <h3 class="panel-title">Subscription Plans</h3>
                <span class="pull-right text-right" style="margin-right:-12px !important;margin-top:-24px !important;">
                    <span class="tooltip-wrapper">
                        <button type="button" class="btn btn-success tooltip-btn"
                                data-toggle="modal" data-target="#modal_add_plan">
                            <i class="glyphicon glyphicon-plus"></i>
                        </button>
                        <div class="tooltip-content">Add a plan</div>
                    </span>
                </span>
            </div>

            <div class="panel-body">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Plan</th>
                            <th>Price</th>
                            <th>Projects / month</th>
                            <th>Per project</th>
                            <th>Counted</th>
                            <th>Status</th>
                            <th>Subscribers</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($plans as $plan)
                            <tr>
                                <td>
                                    <strong>{{ $plan->name }}</strong>
                                    @if($plan->is_featured)<span class="plan-counted">highlighted</span>@endif
                                    @if($plan->tagline)<br><small class="text-muted">{{ $plan->tagline }}</small>@endif
                                </td>
                                <td>
                                    ${{ number_format($plan->price, 2) }}
                                    @if($plan->compare_at_price)
                                        <br><small class="text-muted"><s>${{ number_format($plan->compare_at_price, 2) }}</s></small>
                                    @endif
                                </td>
                                <td>{{ $plan->is_unlimited ? '—' : $plan->project_limit }}</td>
                                <td>
                                    @if($plan->is_unlimited || ! $plan->project_limit)
                                        —
                                    @else
                                        ${{ number_format($plan->price / $plan->project_limit, 2) }}
                                    @endif
                                </td>
                                <td>
                                    @if($plan->is_unlimited)
                                        <span class="plan-unlimited">unlimited</span>
                                    @else
                                        <span class="plan-counted">counted</span>
                                    @endif
                                </td>
                                <td>
                                    @if($plan->is_active)
                                        <span class="plan-counted">active</span>
                                    @else
                                        <span class="plan-inactive">inactive</span>
                                    @endif
                                    @if(! $plan->stripe_price_id)
                                        <span class="plan-inactive" title="Cannot be bought without a Stripe price">no price</span>
                                    @endif
                                </td>
                                <td>{{ $plan->subscriber_count }}</td>
                                <td class="plan-actions">
                                    <button type="button" class="btn btn-xs btn-default js-edit-plan"
                                            data-toggle="modal" data-target="#modal_edit_plan"
                                            data-id="{{ $plan->id }}"
                                            data-name="{{ $plan->name }}"
                                            data-price="{{ $plan->price }}"
                                            data-project-limit="{{ $plan->project_limit }}"
                                            data-tagline="{{ $plan->tagline }}"
                                            data-badge="{{ $plan->badge }}"
                                            data-compare-at-price="{{ $plan->compare_at_price }}"
                                            data-cta-label="{{ $plan->cta_label }}"
                                            data-sort-order="{{ $plan->sort_order }}"
                                            data-is-active="{{ $plan->is_active ? 1 : 0 }}"
                                            data-is-featured="{{ $plan->is_featured ? 1 : 0 }}"
                                            data-is-unlimited="{{ $plan->is_unlimited ? 1 : 0 }}"
                                            data-subscribers="{{ $plan->subscriber_count }}"
                                            data-features="{{ $plan->features_text }}">
                                        Edit
                                    </button>

                                    <form method="POST" style="display:inline;"
                                          action="{{ route('plans.toggle', ['plan' => $plan->id]) }}">
                                        @csrf
                                        <input type="hidden" name="is_active" value="{{ $plan->is_active ? 0 : 1 }}">
                                        <button type="submit" class="btn btn-xs btn-default">
                                            {{ $plan->is_active ? 'Take off sale' : 'Put on sale' }}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8">No plans configured.</td></tr>
                        @endforelse
                    </tbody>
                </table>

                <p class="help-block" style="margin:0;">
                    A plan marked <span class="plan-unlimited">unlimited</span> is never counted &mdash;
                    its subscribers keep whatever they had before tiered pricing. Taking a plan off sale
                    stops new signups and leaves existing subscribers alone.
                </p>
            </div>
        </div>

    </div>
</div>

@include('proedge.modal.plan.add_plan')
@include('proedge.modal.plan.edit_plan')

<script>
$(function () {
    // Fill the shared Edit modal from the row's data attributes, the same way
    // the discounts admin does it.
    $('.js-edit-plan').on('click', function () {
        var b    = $(this);
        var form = $('#edit_plan_form');

        form.attr('action', form.data('url-template').replace('__ID__', b.data('id')));

        $('#edit_plan_name').val(b.data('name'));
        $('#edit_plan_price').val(b.data('price'));
        $('#edit_plan_project_limit').val(b.data('project-limit'));
        $('#edit_plan_tagline').val(b.data('tagline'));
        $('#edit_plan_badge').val(b.data('badge'));
        $('#edit_plan_compare_at_price').val(b.data('compare-at-price'));
        $('#edit_plan_cta_label').val(b.data('cta-label'));
        $('#edit_plan_sort_order').val(b.data('sort-order'));
        $('#edit_plan_features').val(b.data('features'));

        $('#edit_plan_is_active').prop('checked', b.data('is-active') == 1);
        $('#edit_plan_is_featured').prop('checked', b.data('is-featured') == 1);
        $('#edit_plan_is_unlimited').prop('checked', b.data('is-unlimited') == 1);

        // Changing the allocation changes what people already paying receive,
        // so say how many that is before they submit.
        var subs = parseInt(b.data('subscribers'), 10) || 0;
        var warn = $('#edit_plan_warning');

        if (subs > 0) {
            warn.text(subs + ' subscriber(s) are on this plan. Changing the projects per month changes '
                    + 'what they receive at their next renewal.').show();
        } else {
            warn.hide();
        }
    });

    // Reopen the right modal after a validation bounce so nothing is retyped.
    @if($errors->any() && old('form') === 'add_plan')
        $('#modal_add_plan').modal('show');
    @endif
});
</script>

@endsection