{{!
    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 paygw_paymob/method

    Context variables required for this template:
    * fee - the amount to pay
    * currency - the currency of this payment
    * description - what the user paying for
    * hascard - true if the settings for card is set
    * haswallet - true if the settings for wallet is set
    * haskiosk - true if the settings for kiosk is set
    * validcurrency
    * saved
    * savedcardsnotify
    * savedcards
        * card_subtype
        * masked_pan
        * id
        * token

    Example context (json):
    {
        "fee": "50.5",
        "currency": "EGP",
        "description": "for enrolment in course electronics",
        "hascard": true,
        "haswallet": true,
        "haskiosk": true,
        "validcurrency": true,
        "saved": true,
        "savedcardsnotify": "you have saved cards",
        "savedcards": {
            "id": 3,
            "token": "ASDFGHJKL",
            "card_subtype": "mastercard",
            "masked_pan": "**** **** **** 1234"
        }
    }

}}
<form id="paymob-method-select" action="{{{url}}}/payment/gateway/paymob/process.php" class="paymob-form" method="post">
    <div class="cost-display">
        <div style="text-align: center;">
            <p>{{# str }} abouttopay, paygw_paymob {{/ str}} {{{description}}}</p>
            <h2><strong>{{{fee}}} {{{currency}}}</strong></h2>
            <p>{{# str }} choosemethod, paygw_paymob {{/ str}}</p>
        </div>
    </div>

    <div class="form-group">
        <label for="payment-type" class="h3">{{# str }} paymentmethods, paygw_paymob {{/ str}}</label>
        <div class="paymob-image-place-holder"></div>
        <select class="form-control" id="payment-type" name="method">
            {{#hascard}}
            <option value="card" selected>{{# str }} method_card, paygw_paymob {{/ str}}</option>
            {{/hascard}}
            {{#haskiosk}}
            <option value="aman">{{# str }} method_kiosk, paygw_paymob {{/ str}}</option>
            {{/haskiosk}}
            {{#haswallet}}
            <option value="wallet">{{# str }} method_wallet, paygw_paymob {{/ str}}</option>
            {{/haswallet}}
        </select>
    </div>
    <div class="hidden-inputs" style="display:none;">
        <input type="hidden" class="hidden-inputs" name="description" value="{{description}}">
        <input type="hidden" class="hidden-inputs" name="orderid" value="{{orderid}}">
        <input type="hidden" class="hidden-inputs" name="sesskey" value="{{sesskey}}">
    </div>
    {{#hascard}}
    <div class="form-group" id="saved-cards-group">
        {{#saved}}
            <p>{{{savedcardsnotify}}}</p>
            <div style="width: 100%;">
            {{#savedcards}}
                <input style="display: inline-block;" class="input-radio" id="card_{{id}}" type="radio" name="card_token" value="{{token}}">
                <label style="display: inline-block;" for="card_{{id}}"><b>{{card_subtype}}</b>: {{masked_pan}}</label>
                <button class="btn btn-secondary" value="{{id}}" name="delete">{{# str }} deletecard, paygw_paymob {{/ str}}</button>
            <br>
            {{/savedcards}}
                <input style="display: inline-block;" class="input-radio"  id="card_other" checked="checked" type="radio" name="card_token" value="">
                <label style="display: inline-block;" for="card_other"><b> {{#str}} usenewcard, paygw_paymob {{/str}} </b></label>
            </div>
        {{/saved}}
    </div>
    {{/hascard}}
    {{#haswallet}}
    <div class="form-group" id="phone-group" style="display: none;">
        <label for="phone-number">{{# str }} wallet_phone_number, paygw_paymob {{/ str}}</label>
        <input type="text" class="form-control" id="phone-number" name="phone-number">
    </div>
    {{/haswallet}}
    <button type="submit" class="btn btn-primary" id="paymob-modal-submit-btn">{{# str }} submit {{/ str }}</button>
</form>

{{#js}}
    require(['paygw_paymob/method-selector'], function(Selector) {
        Selector.init('{{url}}');
    });
{{/js}}
