{{--
    Styled after AddProductModal.vue: intro line + rule, two columns of
    label-above-input fields, red asterisk on required, Cancel and Submit.

    Deliberately NOT .form-horizontal — that class gives .form-group a
    -15px side margin which cancels the column padding, leaving no gutter
    between the two fields.

    Each label carries an info icon; the guidance lives in the tooltip rather
    than as help text under every input.
--}}
<div class="modal fade" id="modal_add_codes" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Promo Codes</h4>
            </div>

            <div class="modal-body">
                <p>To add promo codes, complete the form below then click submit..</p>
                <hr>

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

                <form id="codes_form" method="post" class="discount-form"
                      action="{{ route('discounts.codes.store', ['offer' => 0]) }}"
                      data-url-template="{{ route('discounts.codes.store', ['offer' => '__ID__']) }}">
                    {{ csrf_field() }}

                    {{-- Names the form that bounced. Add Offer and Edit Offer
                         both post a `name`, so old('name') cannot tell them
                         apart and a failed edit would reopen Add Offer. --}}
                    <input type="hidden" name="form" value="add_codes">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    Offer<span style="color: red">*</span>
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'Which discount rule these codes apply. Many codes can point at one
                                         offer, which is how a partner campaign stays a single line in
                                         reporting.<br><br>
                                         Only active offers are listed.'])
                                </label>
                                <select id="codes_offer" class="form-control" required>
                                    <option value="">Choose an offer&hellip;</option>
                                    @foreach($activeOffers as $offer)
                                        {{-- The end date rides along so the Expires field can cap
                                             itself: Stripe refuses a code that outlives its coupon. --}}
                                        <option value="{{ $offer->id }}"
                                                data-auto-apply="{{ $offer->auto_apply ? 1 : 0 }}"
                                                data-ends-at="{{ $offer->ends_at ? $offer->ends_at->format('Y-m-d\TH:i') : '' }}">
                                            {{ $offer->name }} &mdash; {{ $offer->summary }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    How<span style="color: red">*</span>
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        '<strong>Generate them for me</strong> &mdash; unique codes are invented
                                         for you.<br><br>
                                         <strong>I&rsquo;ll type the codes</strong> &mdash; you supply the exact
                                         strings, for example codes a partner has already printed.'])
                                </label>
                                <select name="mode" id="codes_mode" class="form-control">
                                    <option value="generate">Generate them for me</option>
                                    <option value="manual">I'll type the codes</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row codes-generate">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    How many<span style="color: red">*</span>
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'How many codes to create in one go, up to 500. Each is created at Stripe
                                         individually, so a large batch takes a few seconds.'])
                                </label>
                                <input type="number" name="count" min="1" max="500" value="1" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    Prefix
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'Optional start for each code. <strong>SacrPool</strong> produces codes
                                         like <strong>SacrPool-X3H4K</strong>.<br><br>
                                         Generated codes leave out characters people misread when a code is spoken
                                         or printed &mdash; 0/O, 1/I/L, 5/S, 2/Z, 8/B.'])
                                </label>
                                <input type="text" maxlength="40" name="prefix" class="form-control"
                                       placeholder="e.g. SacrPool">
                            </div>
                        </div>
                    </div>

                    <div class="row codes-manual" style="display:none;">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">
                                    Codes<span style="color: red">*</span>
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'One code per line, or comma separated. Letters, numbers and dashes
                                         only.<br><br>
                                         Capitalisation does not matter when a customer types it. If one code is
                                         already taken the rest still get created, and you are told which
                                         failed.'])
                                </label>
                                <textarea name="codes_text" rows="5" class="form-control"
                                          placeholder="SacrPool-X3745&#10;SacrPool-X3746">{{ old('codes_text') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    Uses per code
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'How many times each code can be redeemed in total, across everyone.<br><br>
                                         <strong>1</strong> makes each code single-use &mdash; right for codes
                                         handed to individual customers. Leave blank for a shared campaign code
                                         anyone can use.'])
                                </label>
                                <input type="number" name="max_redemptions" min="1" value="1"
                                       id="codes_max_redemptions" class="form-control">
                                <p class="help-block" id="codes_single_use_note"
                                   style="display:none;color:#8a6d3b;background:#fcf8e3;border:1px solid #faebcc;border-radius:3px;padding:6px 9px;">
                                    This offer applies itself to everyone at checkout, but a code set to 1 use
                                    is spent by the first customer who reaches the payment page — even if they
                                    never pay, because Stripe counts the redemption as soon as it is applied.
                                    Give a campaign code a high limit instead.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    Uses per customer
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'How many times one customer can use the same code.<br><br>
                                         Stripe cannot enforce this &mdash; it only caps total redemptions. Poolpix
                                         checks it against its own redemption ledger, which is what stops someone
                                         cancelling and resubscribing to claim a shared code twice.'])
                                </label>
                                <input type="number" name="max_per_customer" min="1" value="1" class="form-control">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    Expires
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'Optional. After this moment the code stops working and cannot be
                                         reactivated.<br><br>
                                         Uses this browser&rsquo;s timezone. If the offer itself has an end date,
                                         the code cannot outlive it.'])
                                </label>
                                <input type="datetime-local" name="expires_at" id="codes_expires" class="form-control">
                                <p class="help-block" id="codes_expires_note" style="display:none;"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">
                                    Issued to
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'Optional note for your own records &mdash; who these codes went to, or
                                         which campaign they were printed for. Shown in the Promo Codes list.'])
                                </label>
                                <input type="text" maxlength="191" name="issued_to" class="form-control"
                                       placeholder="e.g. Sacramento Pool">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            @include('proedge.admin.discounts._customer_picker', [
                                'id'       => 'codes',
                                'name'     => 'restricted_user_id',
                                'label'    => 'Reserved for',
                                'required' => false,
                                'warnIfSubscribed' => 'This customer already subscribes. A reserved code only '
                                    . 'applies at checkout, so they will not receive it — use Give an Offer instead.',
                                'info'     => 'Optional. Locks the code to one customer &mdash; nobody else can
                                               redeem it even if they learn the string.<br><br>
                                               This is how you give a discount to a customer who has not
                                               subscribed yet: reserve a code for them and it applies when they
                                               do. Leave blank for a code anyone can use.',
                            ])
                        </div>
                        <div class="col-md-6"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="first_time_only" value="1">
                                    New customers only
                                    @include('proedge.admin.discounts._info', ['text' =>
                                        'Only customers with no previous transaction can redeem.<br><br>
                                         Stripe counts a past free trial as a transaction, so someone who trialled
                                         and cancelled will be refused even though they never paid.'])
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="row modal-actions">
                        <div class="col-md-12 text-right">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>