<?php
use yii\helpers\Html;
use yii\bootstrap\Modal;
use yii\helpers\Url;
/* @var $this yii\web\View */

$this->title = 'Help';
?>
<div class="content-page help">
    <div class="content-page-header"><?= Html::encode($this->title) ?></div>
    <div class="content-page-content help-content container-fluid">
        <div class="row">
            <div class="help-content-left col-md-6 text-center">
                <?= Html::img('@web/images/knowledge.svg', ['class' => 'help-img', 'alt' => 'Knowledge Base']) ?>
                <div class="help-title">Knowledge Base</div>
                <div class="help-desc">The fastest way to get support is finding the answer through Knowledge Base system</div>
                <a href="https://interactive.co.id/kb/category/interactive-myconnection" class="btn btn-primary help-btn" target="_blank">KNOWLEDGE BASE</a>
            </div>
            <div class="help-content-right col-md-6 text-center">
                <?= Html::img('@web/images/support.svg', ['class' => 'help-img', 'alt' => 'Knowledge Base']) ?>
                <div class="help-title">Ticket Support</div>
                <div class="help-desc">You can also easily access the ticket support to answer about InterActive MyConnection</div>
                <button class="btn btn-primary help-btn help-modal">TICKET SUPPORT</button>
            </div>
        </div>
    </div>
</div>

<?php
Modal::begin([
    'header' => '<div>Ticket Support</div>',
    'footer' => '<button class="btn btn-close-modal">CANCEL</button> <button class="btn btn-primary btn-submit-modal">SUBMIT</button>',
    'id' => 'modal-help'
]);
?>
<form id="help-form">
    <div class="form-group">
        <label class="control-label" for="member_name">Name</label>
        <input type="text" class="form-control" name="member_name" placeholder="Input your name" required>
    </div>
    <div class="form-group">
        <label class="control-label" for="member_email">Email</label>
        <input type="email" class="form-control" name="member_email" placeholder="Input your email" required>
    </div>
    <div class="form-group">
        <label class="control-label" for="companyname">Company</label>
        <input type="text" class="form-control" name="companyname" placeholder="Input your company" required>
    </div>
    <div class="form-group">
        <label class="control-label" for="priority">Priority</label>
        <select class="form-control" name="priority" required>
            <option value="low">Low</option>
            <option value="normal">Normal</option>
            <option value="high">High</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label" for="subject">Subject</label>
        <input type="text" class="form-control" name="subject" placeholder="Input your subject" required>
    </div>
    <div class="form-group">
        <label class="control-label" for="description">Message</label>
        <textarea class="form-control" name="description" placeholder="Input your message" required></textarea>
    </div>
</form>
<?php
Modal::end();

Modal::begin([
    'header' => '<div>Message Sent</div>',
    'footer' => '<button class="btn btn-primary btn-close-modal">OK</button>',
    'id' => 'modal-help-notice'
]);
?>
<div class="update-data">
    <div class="update-data-header">Thank you, we received your message.</div>
    <div class="update-data-desc">We will respond to you shortly.</div>
</div>
<?php
Modal::end();
?>

<script type="text/javascript">
    $('#modal-help .btn-submit-modal').click(function() {
        if ($('#help-form')[0].checkValidity()) {
            console.log('valid');
            var member_name = $('#help-form input[name=member_name]').val();
            var member_email = $('#help-form input[name=member_email]').val();
            var companyname = $('#help-form input[name=companyname]').val();
            var priority = $('#help-form select[name=priority]').val();
            var subject = $('#help-form input[name=subject]').val();
            var description = $('#help-form textarea[name=description]').val();
            $.ajax({
                url: '<?= Url::to(['site/help-submit']); ?>',
                data: {
                    member_name: member_name,
                    member_email: member_email,
                    companyname: companyname,
                    priority: priority,
                    subject: subject,
                    description: description
                },
                method: 'POST',
                success: function(result) {
                    if (result != 'fail') {
                        $('.modal').modal('hide');
                        $('#modal-help-notice').modal('show');
                    }
                    console.log(result);
                }
            });
        } else
            console.log('invalid');
    });
</script>