<?php
/*
 * *************************************************
 * Copyright (C) 2020 Earworks.                    *
 * Codeigniter Project Template Modification       *
 * Please contact our email for more information : *
 * contact@earworks.co.id                          *
 * *************************************************
 */
defined('BASEPATH') OR exit('No direct script access allowed');
$url = 'dashboard/new/' . $location;
if ($id) {
    $url .= '/' . $id;
}
if ($redir) {
    $url .= '?redir=' . urlencode($redir);
}
Ci::set_title('Pendaftaran');
?>
<?= form_open($url, ['class' => 'mini-form form-horizontal', 'style' => 'margin:0px auto !important;padding:0px 15px;']) ?>
<style type="text/css">
    .input-sm {
        height: auto !important;
    }
    .control-label {
        font-weight:normal !important;
        font-size: 13px;
        text-align:left !important;
    }
    textarea{
        background-color:transparent !important;
    }
    .form-control[readonly="readonly"]{
        background-color: rgba(0,0,0,0.2) !important;
    }
</style>
<div class="modal-body">
    <p style="text-align:justify;">
        Selamat datang di halaman pendaftaran acara Transitions: The Pulse (Indonesia).
        Merupakan sebuah kehormatan bagi kami untuk bertemu dengan Anda di acara ini.
    </p>
    <p style="text-align:justify;">
        Mohon mengkonfirmasi data Anda di bawah ini.
    </p>
    <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
    <div class="form-group">
        <?= lang('name', [], 'name', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <?=
            form_input('name', $data['name'], [
                'class' => 'form-control input-sm',
                'autocomplete' => 'off',
//                'readonly' => 'readonly',
//            'placeholder' => lang('name')
            ]);
            ?>
            <?= form_hidden('location', $data['location']) ?>
        </div>
    </div>
    <div class="form-group">
        <?= lang('phone', [], 'phone', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <div class="input-group">
                <span class="input-group-addon" style="background-color: rgba(255,255,255,0.3) !important;">+62</span>
                <?=
                form_input('phone', $data['phone'], [
                    'class' => 'form-control input-sm',
                    'autocomplete' => 'off',
//                    'readonly' => 'readonly',
//                'placeholder' => lang('phone')
                ]);
                ?>
            </div>
        </div>
    </div>
    <div class="form-group">
        <?= lang('email', [], 'email', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <?=
            form_input('email', $data['email'], [
                'class' => 'form-control input-sm',
                'autocomplete' => 'off',
//                'readonly' => 'readonly',
//            'placeholder' => lang('email')
            ]);
            ?>
        </div>
    </div>
    <div class="form-group">
        <?= lang('optic', [], 'optic', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <?=
            form_input('optic', $data['optic'], [
                'class' => 'form-control input-sm',
                'autocomplete' => 'off',
//            'placeholder' => lang('optic')
            ]);
            ?>
        </div>
    </div>
    <div class="form-group">
        <?= lang('poscode', [], 'poscode', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <?=
            form_dropdown('poscode_select', [], $poscode_select, [
                'class' => 'form-control input-sm',
                'autocomplete' => 'off',
//            'placeholder' => lang('optic')
            ]);
            ?>
            <?= form_hidden('poscode', $data['poscode']) ?>
        </div>
    </div>
    <div class="form-group">
        <?= lang('province', [], 'province', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <?=
            form_input('province', $data['province'], [
                'class' => 'form-control input-sm',
                'autocomplete' => 'off',
                'readonly' => 'readonly'
//                        'placeholder' => lang('province')
            ]);
            ?>
        </div>
    </div>
    <div class="form-group">
        <?= lang('city', [], 'city', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <?=
            form_input('city', $data['city'], [
                'class' => 'form-control input-sm',
                'autocomplete' => 'off',
                'readonly' => 'readonly'
//                        'placeholder' => lang('city')
            ]);
            ?>
        </div>
    </div>
    <div class="form-group">
        <?= lang('info_tambahan', [], 'info_tambahan', ['class' => 'col-sm-4 control-label']) ?>
        <div class="col-sm-8">
            <textarea name="info_tambahan" rows="3" class="form-control input-sm" autocomplete="off"><?= $data['info_tambahan'] ?></textarea>
        </div>
    </div>
    <p style="text-align:justify;">
        *Kode QR untuk acara ini akan dikirim ke alamat email dan nomor ponsel Anda yang telah terdaftar. 
        Konfirmasi ini berlaku untuk 1 (satu) orang. 
    </p>
    <p style="text-align:justify;">
        Kami sangat menatikan kehadiran Anda.
    </p>
    <div class="form-group">
        <label style="font-weight:normal;text-align: justify;">
            <input type="checkbox" name="privacy" value="1" onclick="page_script.set_form(this);" />
            Dengan menekan tombol "Submit", saya menyetujui pengumpulan, penggunaan, 
            dan pengungkapan data pribadi saya yang tersedia di dalam formulir ini, 
            oleh Kodak, untuk tujuan yang telah ditetapkan 
            dalam Pernyataan Privasi yang dapat diakses di
            <a href="https://www.kodak.com/en/company/page/privacy" target="_BLANK">
                https://www.transitions.com/id/kebijakan-privasi
            </a>
        </label>
    </div>
    <div class="form-group">
        <label style="font-weight:normal;text-align: justify;">
            <input type="checkbox" name="inform" value="1" />
            Saya ingin menerima informasi dari Kodak, afiliasi dan 
            agennya mengenai acara, produk, layanan.
        </label>
    </div>
    <!--    <div class="form-group">
    <?= lang('password', [], 'password', ['class' => 'col-sm-4 control-label']) ?>
            <div class="col-sm-8">
    <?=
    form_password('password', null, [
        'class' => 'form-control input-sm',
        'autocomplete' => 'off',
//            'placeholder' => lang('password')
    ]);
    ?>
            </div>
        </div>
         <div class="form-group">
    <?= lang('confirm_password', [], 'confirm_password', ['class' => 'col-sm-4 control-label']) ?>
            <div class="col-sm-8">
    <?=
    form_password('confirm_password', null, [
        'class' => 'form-control input-sm',
        'autocomplete' => 'off',
//            'placeholder' => lang('confirm_password')
    ]);
    ?>
            </div>
        </div>-->
    <div class="form-group text-right">
        <button type="submit" class="btn btn-submit btn-block"> Submit </button>
        <!--<a href="<?= base_url('login/index') ?>"  class="btn btn-link btn-block"><?= lang('return_to_login') ?></a>-->
    </div>
</div>
<?= form_close(); ?>
<script type="text/javascript">


</script>
<?php
Ci::set_style('plugins/select2/css/select2.min.css', 'plugin');
Ci::set_script('plugins/select2/js/select2.min.js', 'plugin');
$default_pax = $data['pax'];
$poscode_url = base_url('login/ajax-poscode-list');
$poscode_detail_url = base_url('login/ajax-poscode-detail');
Ci::set_script(<<<EOD
    var page_script = function () {
        var the;
        var default_pax = '{$default_pax}';
        var poscodeurl = '{$poscode_url}';
        var poscode_detail_url = '{$poscode_detail_url}';
        var default_poscode = '{$poscode_select}';
        return {
            init: function () {
                the = this;
                the.shield_form();
                the.adjust_pax(default_pax);
                $('[name="poscode_select"]').select2({
                    minimumInputLength: 3,
                    ajax: {
                        url: poscodeurl,
                        dataType: 'json',
                        data: function (params) {
                            var query = {
                                search: params.term,
                                type: 'public'
                            };
                            /* Query parameters will be ?search=[term]&type=public*/
                            return query;
                        }
                    }
                });
                $('[name="poscode_select"]').on('select2:select', function () {
                    the.adjust_poscode($(this).val());
                });
                if(default_poscode){
                     the.adjust_poscode(default_poscode, true);
        
                }
            },
            change_pax: function (obj) {
                the.adjust_pax($(obj).val());
            },
            adjust_pax: function (val) {
                if (val === '2') {
                    $('[name="pax_name"]').removeAttr('readonly');
                    $('[name="pax_email"]').removeAttr('readonly');
                    $('[name="pax_phone"]').removeAttr('readonly');
                } else {
                    $('[name="pax_name"]').attr('readonly', 'readonly').val('');
                    $('[name="pax_email"]').attr('readonly', 'readonly').val('');
                    $('[name="pax_phone"]').attr('readonly', 'readonly').val('');
                }
            },
            adjust_poscode: function (val, append = false) {
                $.ajax({
                    url: poscode_detail_url, type: 'POST', dataType: 'JSON',
                    data: {id: val}, success: function (res) {
                        if (res.success === 1) {
                            $('[name="poscode"]').val(res.data.code);
                            $('[name="province"]').val(res.data.province);
                            $('[name="city"]').val(res.data.city);
                            $('[name="district"]').val(res.data.district);
                            $('[name="sub_district"]').val(res.data.sub_district);
                            if(append === true){
                                var def_opt = $('<option>', {value:res.data.id,selected:'selected'}).html(res.data.code+' ('+res.data.sub_district+')');
                                $('[name="poscode_select"]').append(def_opt);
                            }
                        }
                    }
                });
            },
            set_form: function (obj) {
                if ($(obj).is(':checked') === true) {
                    the.unshield_form();
                } else {
                    the.shield_form();
                }
            },
            shield_form: function () {
                $('.btn-submit').attr('disabled', 'disabled');
            },
            unshield_form: function () {
                $('.btn-submit').removeAttr('disabled');
            }
        };
    }();
    $(document).ready(function () {
        page_script.init();
    });
EOD
    , 'embed');
