@extends('layouts.app')

@section('style')
<link rel="stylesheet" href="../../assets/css/element-ui/index.css" type="text/css">

@endsection

@section('page-title')
Bimbel DnD - Register
@endsection

@section('content')
<div class="main-content" id="panel">
    <!-- Header -->
    <div class="header bg-gradient-primary py-5 py-lg-6 pt-lg-9">
        <div class="container">
            <div class="header-body text-center mb-6">
                <div class="row justify-content-center">
                    <div class="col-xl-5 col-lg-6 col-md-8 px-5">
                        <h1 class="text-white">Selamat Datang!</h1>
                        <p class="text-lead text-white">
                            Silahkan lengkapi form berikut untuk mendaftar
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="separator separator-bottom separator-skew zindex-100">
            <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
            </svg>
        </div>
    </div>
    <!-- Page content -->
    <div class="container mt--8 pb-5">

        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-7">
                <div>
                    @foreach ($errors->all() as $error)
                    <div class="alert alert-danger alert-dismissible fade show mb-1" role="alert">
                        <span class="alert-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </span>
                        <span class="alert-text">
                            {{$error}}
                        </span>
                    </div>
                    @endforeach
                </div>
                <div class="card bg-secondary border-0 mb-0">

                    <div class="card-body px-lg-3 py-lg-3">

                        <form role="form" method="POST" action="{{ route('register') }}">
                            @csrf
                            <div class="form-group mb-3">
                                <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input class="form-control" value="{{old('name')}}" placeholder="Nama Lengkap"
                                        type="text" name="name" maxlength="50"
                                        onkeyup="this.value = this.value.toUpperCase();">
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                                    </div>
                                    <input class="form-control" value="{{old('email')}}" placeholder="Email"
                                        type="email" name="email" maxlength="100" required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group mb-3">
                                        <div class="input-group input-group-merge input-group-alternative">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i
                                                        class="ni ni-lock-circle-open"></i></span>
                                            </div>
                                            <input name="password" class="form-control" placeholder="Password"
                                                type="password" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group mb-3">
                                        <div class="input-group input-group-merge input-group-alternative">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i
                                                        class="ni ni-lock-circle-open"></i></span>
                                            </div>
                                            <input name="password_confirmation" class="form-control"
                                                placeholder="Konfirmasi password" type="password" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <div class="input-group input-group-merge input-group-alternative">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            +62
                                        </span>
                                    </div>
                                    <input name="no_wa" class="form-control" placeholder="Nomor Whatsapp yang aktif"
                                        type="number" minlength="8" maxlength="12" required value="{{old('no_wa')}}">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm12">
                                    <div class="form-group">
                                        <label class="small" for="tanggal_lahir">
                                            Tanggal Lahir
                                        </label>
                                        <div class="input-group input-group-merge input-group-alternative">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-calendar"></i>
                                                </span>
                                            </div>
                                            <input name="tanggal_lahir" id="tanggal_lahir" class="form-control"
                                                placeholder="Tanggal Lahir" type="date" value="{{old('tanggal_lahir')}}"
                                                required>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label class="small" for="gender">
                                            Jenis Kelamin
                                        </label> <br>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="laki" name="gender" value="laki-laki"
                                                class="custom-control-input" @if (old('gender')==='laki-laki' ) checked
                                                @endif required>
                                            <label for="laki" class="custom-control-label">
                                                Laki-laki
                                            </label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="perempuan" name="gender" value="perempuan"
                                                class="custom-control-input" @if (old('gender')==='perempuan' ) checked
                                                @endif>
                                            <label for="perempuan" class="custom-control-label">
                                                Perempuan
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <el-select name="provinsi" class="w-100" v-model="form.provinsi" filterable
                                                clearable placeholder="Pilih Provinsi" @@clear="clearKota()"
                                                @@change="getKota()">
                                                <el-option v-for="item in provinsi" :key="item.id" :label="item.name"
                                                    :value="item.id">
                                                </el-option>
                                            </el-select>
                                            <input type="hidden" name="id_provinsi" v-model="form.provinsi">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group mb-3">
                                        <div class="input-group">
                                            <el-select name="kota" class="w-100" v-model="form.kota" filterable
                                                clearable placeholder="Pilih Kota" @@clear="clearKota()"
                                                :disabled="kota.length == 0">
                                                <el-option v-for="item in kota" :key="item.id" :label="item.name"
                                                    :value="item.id">
                                                </el-option>
                                            </el-select>
                                            <input type="hidden" name="id_kota" v-model="form.kota">
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="form-group">
                                <label class="small" for="alamat">Alamat Lengkap</label>
                                <textarea name="alamat" id="alamat" rows="2" class="form-control" required>
                                {{old('alamat')}}
                                </textarea>
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary mt-4" :disabled="!form.kota">Daftar
                                    Sekarang</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-6">
                    </div>
                    <div class="col-6 text-right">
                        <a href="{{ route('login') }}" class="text-light">
                            <small>
                                Sudah punya akun? Login sekarang
                            </small>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/vue.js') }}"></script>
<script src="{{ asset('assets/js/axios.js') }}"></script>

<script src="{{ asset('assets/js/element-ui/index.js') }}"></script>
<script src="{{ asset('assets/js/element-ui/locales/en.js') }}"></script>

<script>
    ELEMENT.locale(ELEMENT.lang.en)
    var base_url = "{{url('/api/alamat')}}"
    var app = new Vue({
        el: '#panel',
        data: {
            form: {
                provinsi: null,
                kota: null
            },
            provinsi: [],
            kota: []
        },
        methods: {
            clearKota() {
                this.kota = []
            },
            async getProvinsi() {
                await axios
                    .get(base_url + '/provinsi')
                    .then((response) => {
                        Vue.set(this, "provinsi", response.data.data);

                    }, (error) => {

                    })
            },
            async getKota() {
                await axios
                    .get(base_url + '/kota/' + this.form.provinsi)
                    .then((response) => {
                        Vue.set(this, "kota", response.data.data.cities);

                    }, (error) => {

                    })
            },
            submit() {

            }

        },

        created() {
            this.getProvinsi();
        }

    })
</script>
@endsection