{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template enrol_instapay/paycard

    The InstaPay payment card: amount, three steps, the receipt form.

    Example context (json):
    {"uniqid": "instapay-1", "instancename": "InstaPay", "coursename": "Programming", "amount": "299 EGP", "fullamount": "500 EGP",
     "haslink": true, "link": "#", "hashandle": true, "handle": "name@instapay", "formhtml": "<form></form>",
     "rejected": false, "reason": "", "rejectedon": ""}
}}
<div class="enrol-instapay card shadow-sm mb-4" id="{{uniqid}}">
    <div class="card-body">
        <div class="enrol-instapay-head d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
                <h3 class="h5 mb-1">{{instancename}}</h3>
                <div class="text-muted small">{{coursename}}</div>
            </div>
            <div class="enrol-instapay-amount" title="{{#str}}amount, enrol_instapay{{/str}}">{{amount}}{{#fullamount}}<s class="enrol-instapay-was" title="{{#str}}fullprice, enrol_instapay{{/str}}">{{fullamount}}</s>{{/fullamount}}</div>
        </div>

        {{#rejected}}
        <div class="alert alert-danger mt-3 mb-0" role="alert">
            <strong>{{#str}}rejectedtitle, enrol_instapay{{/str}}</strong>
            <div class="small text-muted mb-1">{{rejectedon}}</div>
            <div class="enrol-instapay-reason">{{{reason}}}</div>
            <div class="mt-2">{{#str}}rejectedagain, enrol_instapay{{/str}}</div>
        </div>
        {{/rejected}}

        <ol class="enrol-instapay-steps list-unstyled mt-4 mb-0">
            <li class="enrol-instapay-step">
                <span class="enrol-instapay-num" aria-hidden="true">1</span>
                <div class="enrol-instapay-stepbody">
                    <h4 class="h6 mb-2">{{#str}}step1, enrol_instapay{{/str}}</h4>
                    <p class="small text-muted mb-2">{{#str}}step1lead, enrol_instapay, {{amount}}{{/str}}</p>
                    {{#haslink}}
                    <a class="btn btn-primary enrol-instapay-paybtn" href="{{link}}" target="_blank" rel="noopener noreferrer">
                        {{#str}}paynow, enrol_instapay{{/str}} {{#pix}}i/externallink, core{{/pix}}
                    </a>
                    {{/haslink}}
                    {{#hashandle}}
                    <div class="enrol-instapay-handle mt-2">
                        <span class="small text-muted">{{#str}}handlelabel, enrol_instapay{{/str}}</span>
                        <code id="{{uniqid}}-handle" dir="ltr">{{handle}}</code>
                        <button type="button" class="btn btn-sm btn-outline-secondary"
                            data-action="copytoclipboard" data-clipboard-target="#{{uniqid}}-handle"
                            data-clipboard-success-message="{{#str}}copied, enrol_instapay{{/str}}">
                            {{#str}}copy, enrol_instapay{{/str}}
                        </button>
                    </div>
                    <div class="small text-muted mt-1">{{#str}}poweredby, enrol_instapay{{/str}}</div>
                    {{/hashandle}}
                </div>
            </li>
            <li class="enrol-instapay-step">
                <span class="enrol-instapay-num" aria-hidden="true">2</span>
                <div class="enrol-instapay-stepbody">
                    <h4 class="h6 mb-2">{{#str}}step2, enrol_instapay{{/str}}</h4>
                    <p class="small text-muted mb-2">{{#str}}step2lead, enrol_instapay{{/str}}</p>
                    {{! The academy's own form language (tkf-), the same the wallet's screens speak: a camera
                        rather than «Choose File», the three optional fields folded away, and a mistake said in a
                        sentence under the field it belongs to. }}
                    <form class="tkf-form" method="post" action="{{action}}" enctype="multipart/form-data" novalidate>
                        <input type="hidden" name="sesskey" value="{{sesskey}}">
                        <input type="hidden" name="instapayinstance" value="{{instanceid}}">

                        <div class="tkf-field{{#err_receipt}} is-wrong{{/err_receipt}}">
                            <span class="tkf-label">{{#str}}receipt, enrol_instapay{{/str}}</span>
                            <label class="tkf-shot" for="{{uniqid}}-receipt">
                                <span class="tkf-shot-icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" width="22" height="22"><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="13.5" r="3.5" fill="none" stroke="currentColor" stroke-width="2"/></svg>
                                </span>
                                <span class="tkf-shot-text">{{#str}}takeshot, enrol_instapay{{/str}}</span>
                                <input id="{{uniqid}}-receipt" name="receipt" type="file"
                                       accept="image/jpeg,image/png,image/webp,application/pdf"
                                       {{#err_receipt}}aria-invalid="true" aria-describedby="{{uniqid}}-receipt-err"{{/err_receipt}}>
                            </label>
                            <p class="tkf-chosen" id="{{uniqid}}-chosen" aria-live="polite"></p>
                            <p class="tkf-hint">{{#str}}receipthint, enrol_instapay, {{maxmb}}{{/str}}</p>
                            {{#err_receipt}}<p class="tkf-err" id="{{uniqid}}-receipt-err">{{err_receipt}}</p>{{/err_receipt}}
                        </div>

                        <details class="tkf-more"{{#hasextra}} open{{/hasextra}}>
                            <summary>{{#str}}moredetails, enrol_instapay{{/str}}</summary>
                            <div class="tkf-field">
                                <label class="tkf-label" for="{{uniqid}}-reference">{{#str}}reference, enrol_instapay{{/str}}</label>
                                <input id="{{uniqid}}-reference" name="reference" type="text" dir="ltr"
                                       autocomplete="off" maxlength="100" value="{{reference}}">
                            </div>
                            <div class="tkf-field{{#err_payerphone}} is-wrong{{/err_payerphone}}">
                                <label class="tkf-label" for="{{uniqid}}-phone">{{#str}}payerphone, enrol_instapay{{/str}}</label>
                                <input id="{{uniqid}}-phone" name="payerphone" type="tel" dir="ltr" inputmode="tel"
                                       autocomplete="tel" maxlength="30" value="{{payerphone}}"
                                       {{#err_payerphone}}aria-invalid="true" aria-describedby="{{uniqid}}-phone-err"{{/err_payerphone}}>
                                {{#err_payerphone}}<p class="tkf-err" id="{{uniqid}}-phone-err">{{err_payerphone}}</p>{{/err_payerphone}}
                            </div>
                            <div class="tkf-field">
                                <label class="tkf-label" for="{{uniqid}}-note">{{#str}}note, enrol_instapay{{/str}}</label>
                                <textarea id="{{uniqid}}-note" name="note" rows="2">{{note}}</textarea>
                            </div>
                        </details>

                        <button type="submit" class="tk-btn tk-btn-primary tkf-send">{{#str}}submitrequest, enrol_instapay{{/str}}</button>
                    </form>
                </div>
            </li>
            <li class="enrol-instapay-step">
                <span class="enrol-instapay-num" aria-hidden="true">3</span>
                <div class="enrol-instapay-stepbody">
                    <h4 class="h6 mb-1">{{#str}}step3, enrol_instapay{{/str}}</h4>
                    <p class="small text-muted mb-0">{{#str}}step3lead, enrol_instapay{{/str}}</p>
                </div>
            </li>
        </ol>
    </div>
</div>
{{#js}}
require(['core/copy_to_clipboard']);
// The receipt is chosen through a label, so the only thing left for a script is to say which file was picked —
// the browser's own control would have said it in the browser's language and widened the card off a phone.
(function() {
    var input = document.getElementById('{{uniqid}}-receipt');
    var chosen = document.getElementById('{{uniqid}}-chosen');
    if (!input || !chosen) {
        return;
    }
    input.addEventListener('change', function() {
        chosen.textContent = input.files && input.files.length ? input.files[0].name : '';
    });
})();
{{/js}}