@extends('layouts.app')

@section('title', 'Pendaftaran')
@section('pendaftaran', 'm-menu__item--active')

@section('css')
@endsection

@section('content')
<div class="row">
    <div class="col-lg-10">
        <div class="m-portlet">  
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Akaun SSIPR
                        </h3>
                    </div>
                </div>
            </div>
            <form id="pendaftaran_form" class="m-form m-form--label-align-right" action="{{ url('admin/pendaftaran/edit/'.$user->id) }}" method="POST">
                @csrf

                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Status Pendaftaran Akaun:
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Status:
                            </label>
                            <div class="col-lg-4">
                                <select class="form-control m-input" id="status_pendaftaran" name="status_pendaftaran">
                                    <option value="" hidden selected>Sila pilih status pendaftaran</option>
                                    <option value="sah" @if($user->email_verified_at != NULL) selected @endif>SAH</option>
                                    <option value="tidak-sah" @if($user->email_verified_at == NULL) selected @endif>TIDAK SAH</option>
                                </select>
                            </div>
                            @if($user->email_verified_at != NULL)
                            <label class="col-lg-2 col-form-label email_verified_at">
                                Email Disahkan:
                            </label>
                            <div class="col-lg-4 email_verified_at">
                                <input type="text" class="form-control m-input" value="{{ $user->email_verified_at }}" readonly>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="m-form__seperator m-form__seperator--dashed"></div>
                    <div class="m-form__section m-form__section--last">
                        <div class="m-form__heading">
                            <h3 class="m-form__heading-title">
                                Maklumat Akaun:
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>Nama:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input nama" name="name" placeholder="Sila masukan nama" value="{{ $user->name }}" data-inputmask-regex="([a-zA-Z@/ ])+/g">
                            </div>
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>No. Kad Pengenalan:
                            </label>
                            <div class="input-group m-input-group col-lg-4">
                                <select class="m-input" id="ic_type" name="ic_type" style="font-size: 13px; color: #575962; border-color: #ebedf2; background-color: #f4f5f8" onchange="getIc($(this).val())">
                                    <option value="1" @if($user->ic_type == 1) selected @endif>No. K/P</option>
                                    <option value="2" @if($user->ic_type == 2) selected @endif>No. Tentera</option>
                                    <option value="3" @if($user->ic_type == 3) selected @endif>No. Polis</option>
                                </select>
                                <input type="text" class="form-control m-input" id="username" name="username" placeholder="Sila masukan no kad pengenalan" value="{{ $user->username }}" data-inputmask-regex="([a-zA-Z0-9 ])+/g" maxlength="12">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-lg-2 col-form-label">
                                <span style="color: red">* </span>E-mel:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="email" placeholder="Sila masukan emel" value="{{ $user->email }}" onblur="checkEmail($(this))">
                            </div>
                            <label class="col-lg-2 col-form-label">
                                Tarikh Pendaftaran:
                            </label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control m-input" name="created_at" placeholder="Sila pilih tarikh pendaftaran" value="{{ $user->created_at }}" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions">
                        <div class="row">
                            <div class="col-lg-5"></div>
                            <div class="col-lg-6">
                                <button type="button" class="btn btn-primary" onclick="submitForm()">
                                    Hantar
                                </button>
                                <button type="reset" class="btn btn-secondary">
                                    Kembali
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js') 
<script>
    $(document).ready(() => {
        $(".nama").inputmask("Regex");

        getIc($('#ic_type option:selected').val());
    });

    function getIc(x) {
        if(x == 1) {
            $("#username").inputmask({ mask: "999999999999", placeholder: "" });
        } else {
            $("#username").inputmask("Regex");
        }
    }

    function checkEmail(x) {
        var email_format = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        x.next().remove();
        
        if(x.val().match(email_format)) {
            x.next().remove();
        } else if(x.val() == '') {
            x.next().remove();
        } else {
            x.after("<small style='color: #f4516c'>Sila masukkan format emel yang betul.</small>");
            x.focus();
        }
    }

    function submitForm() {
        if($('input[name="name"]').val() == '' || $('input[name="username"]').val() == '' || $('select[name="ic_type"] option:selected').val() == '' | $('input[name="email"]').val() == '') {  
            error();
        } else {
            submit();
        }

        function submit() {
            $.confirm({
                title: 'Kemaskini Pendaftaran?',
                content: 'Anda pasti untuk teruskan?',
                icon: 'fa fa-spinner fa-spin',
                type: 'green',
                buttons: {
                    kemaskini: {
                        btnClass: 'btn-green',
                        action: function() {
                            $('#pendaftaran_form').submit();
                        }
                    },
                    kembali: {
                        btnClass: 'btn-red',
                        action: function() {

                        }
                    }
                }
            });
        }

        function error() {
            $.confirm({
                title: 'Maklumat tidak lengkap?',
                content: 'Sila semak dahulu sebelum kemaskini pendaftaran ini.',
                icon: 'fa fa-warning',
                type: 'red',
                buttons: {
                    ok: {
                        btnClass: 'btn-red',
                        action: function() {
                            
                        }
                    }
                }
            });
        }
    }
</script>
@endsection