// delivery options modal
// -----------------------------------------------------------------------------

// html
var some_modal__inner_html = `
    <div class="wrapper">

        <div class="sectionTitle">
            <div class="sectionTitle__main">
                <h2>Πώς επιθυμείτε να πραγματοποιήσετε τις online αγορές σας;</h2>
                <p>Επιλέξτε μια υπηρεσία για να δείτε την διαθέσιμη ποικιλία προϊόντων!</p>
            </div>
        </div>

        <div class="radio-cards">
            <div class="radio-cards--container outputsRow">

                <label class="radio-card output output--init">
                    <input class="state" type="radio" value="1" name="output" />
                    
                    <div class="output__inner">                        
                        <p class="output__banner output--delivery"></p>
                        <p class="output__title">Lorem Ipsum</p>
                        <ul class="hide--under-M">
                            <li>Vivamus nunc justo, scelerisque ut erat et, sagittis fermentum sem.</b>.</li>
                        </ul>
                    </div>
                </label>

                <label class="radio-card output output--init">
                    <input class="state" type="radio" value="2" name="output" />
                    
                    <div class="output__inner">
                        <p class="output__banner output--pickup"></p>
                        <p class="output__title">Nunc eleifend</p>
                        <ul class="hide--under-M">
                            <li>Fusce arcu urna, pharetra nec nisi id, congue iaculis mauris.</b></li>
                        </ul>
                    </div>
                </label>

            </div>
        </div>
        <hr />
        <p>
        	Donec arcu magna, pretium a arcu et, tristique malesuada dolor.
        	In fermentum ante ut dignissim laoreet.
        	Morbi sodales ex sem, non commodo ex hendrerit eu.
        </p>
        <div class="btnWrap btnWrap--hCenter">
            <button data-qa="form_back" class="button button--border">επιστροφή</button>
            <button id="registration_submit" data-qa="form_submit" class="button widthAuto" type="submit">Επόμενο</button>
        </div>
    </div>`;



// the modal object ------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////

var delivery_options_modal = {

    classes : [ 'modal--l' ],

    html : () => { return delivery_options__inner_html; },

    init : function() {
        // if cokie exist, mark slection
        console.log('set values from cookie');
    },

    events : {

        'input[name="output"]' : {
            change : function () { 
                v = document.querySelector('input[name="output"]:checked').value;
                // setup cookie; keep the selected value;
                // + set reset timeslot )in case selection is aproved
                console.log(v);
            }
        },
        
        '.go-back' : {
            click: function () {
                console.log('close modal');
            }
        },

        '#registration_submit': {
            click: function() { window._Modals_.use('some_other_modal'); }
        }

    }

}


// attach to _Modals_
// -----------------------------------------------------------------------------
window._Modals_.attach('delivery-options', delivery_options_modal);