@extends('layouts.app')

@section('content')
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header text-center">
                        <h4>Pendaftaran Pengguna</h4>
                    </div>
                    <div class="card-body">
                        <form id="registrationForm" method="POST" action="{{ route('register') }}">
                            @csrf
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="id_no">No. KP (ID Log Masuk)<span class="text-danger">*</span> :</label>
                                    <div class="input-group">
                                        <select name="ic_type" id="ic_type" class="form-control" style="max-width: 100px" required>
                                            <option {{ old('ic_type') !== null ? '' : 'selected' }} disabled>Jenis IC</option>
                                            <option value="1">MyKad</option>
                                            <option value="2">Tentera</option>
                                            <option value="3">Polis</option>
                                            <option value="4">Lain-Lain</option>
                                        </select>
                                        <input type="text" name="id_no" id="id_no" class="form-control"
                                            data-parsley-trigger="keyup" data-parsley-maxlength="15"
                                            value="{{ old('id_no') }}" oninput="this.value = this.value.toUpperCase()" disabled required autofocus>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="name">Nama<span class="text-danger">*</span> :</label>
                                    <input name="name" type="text" class="form-control" value="{{ old('name') }}"
                                        data-parsley-trigger="change" maxlength="200"
                                        data-parsley-pattern="^[a-zA-Z\s\'\-\@]+" 
                                        oninput="this.value = this.value.toUpperCase()" required>
                                    <small class="form-text text-muted">Isikan Nama anda seperti dalam kad
                                        pengenalan</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="required">E-mel<span class="text-danger">*</span> :</label>
                                    <input name='email' type="email" class="form-control" value="{{ old('email') }}"
                                        maxlength="150" data-parsley-trigger="change" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-group">
                                    <label class="required">Alamat <small>(Baris 1: Nombor/unit
                                            rumah/bangunan)</small><span class="text-danger">*</span> :</label>
                                    <input name="address1" type="text" class="form-control" value="{{ old('address1') }}"
                                        data-parsley-trigger="change"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+" 
                                        oninput="this.value = this.value.toUpperCase()" required>
                                    <small class="form-text text-muted">Isikan alamat tempat tinggal terkini</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="required">Alamat <small>(Baris 2: Nama jalan/taman/kampung)</small><span class="text-danger">*</span> :</label>
                                <input name="address2" type="text" class="form-control" value="{{ old('address2') }}"
                                    data-parsley-trigger="change" data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
                                    oninput="this.value = this.value.toUpperCase()" required>
                                <small class="form-text text-muted">Isikan alamat tempat tinggal terkini</small>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="required">Bandar<span class="text-danger">*</span> :</label>
                                    <input name="city" type="text" class="form-control" value="{{ old('city') }}"
                                        data-parsley-trigger="change"
                                        data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+" 
                                        oninput="this.value = this.value.toUpperCase()" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="required">Poskod<span class="text-danger">*</span> :</label>
                                    <input name="postcode" type="text" class="form-control" value="{{ old('postcode') }}"
                                        data-parsley-trigger="change" data-parsley-type="digits"
                                        data-parsley-length="[5, 5]" data-parsley-error-message="Poskod perlu 5 angka"
                                        required>
                                </div>
                                <div class="col-md-4">
                                    <label class="required">Negeri<span class="text-danger">*</span> :</label>
                                    <select name="state" class="form-control" required>
                                        <option {{ old('state') ? '' : 'selected' }} disabled>Sila pilih</option>
                                        @foreach ($states as $state)
                                            <option {{ old('state') == $state->shortname ? 'selected' : '' }}
                                                value="{{ $state->id}}">{{ $state->shortname }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="required">No Tel Bimbit<span class="text-danger">*</span> :</label>
                                <input name="mobile_no" type="text" class="form-control" value="{{ old('mobile_no') }}"
                                    data-parsley-trigger="change"
                                    data-parsley-pattern="^(6?0)[0|1|2|3|4|6|7|8|9]{1,2}[0-9]{7,8}$"
                                    data-parsley-length="[10, 13]"
                                    data-parsley-error-message="Pastikan bilangan angka mencukupi dan cuma mengandungi angka"
                                    required>
                                <small class="text-secondary text-monospace">Sila masukkan No. Tel mengikut format yang
                                    betul</small>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="required">Katalaluan<span class="text-danger">*</span> :</label>
                                    <input name="password" id="password" type="password" class="form-control"
                                        data-parsley-trigger="change" data-parsley-minlength="8" required>
                                    <small class="text-secondary text-monospace">Katalaluan perlu sekurang-kurangnya 8
                                        huruf</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="required">Sahkan Katalaluan<span class="text-danger">*</span> :</label>
                                    <input name='password_confirmation' id="password-confirm" type="password"
                                        class="form-control" data-parsley-trigger="change"
                                        data-parsley-equalto="#password" required>
                                    <small class="text-secondary text-monospace">Isi semula katalaluan anda</small>
                                </div>
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-outline-primary">Daftar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="{{ asset('js/parsley.min.js') }}"></script>
    {{-- <script>
        $('#registrationForm').parsley();
    </script> --}}
    <script src="{{ asset('js/ms.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#registrationForm').parsley();
    
            // Disable the ID input by default
            var $idNo = $('#id_no');
            $idNo.prop('disabled', true);
    
            $('#ic_type').change(function() {
                var icType = $(this).val();
    
                // Enable the ID input when an IC type is selected
                $idNo.prop('disabled', false);
    
                // Reset existing Parsley validation
                $idNo.parsley().reset();
    
                // Update validation rules based on IC type
                if (icType === '1') {
                    $idNo.attr('data-parsley-pattern', '^[0-9]+$');
                    $idNo.attr('placeholder', 'Eg: 123456');
                } else {
                    $idNo.attr('data-parsley-pattern', '^[a-zA-Z0-9]+$');
                    $idNo.attr('placeholder', 'Eg: T123456 / RF123');
                }
    
                // Re-validate the ID input field
                $idNo.parsley().validate();
            });
    
            $('#id_no').on('keyup', function() {
                $(this).parsley().validate();
            });
        });
    </script>
    
    <script>
        $(document).ready(function() {
            $('#registrationForm').parsley({
                errorsContainer: function (ParsleyField) {
                    return ParsleyField.$element.closest('.input-group').parent();
                }
            });
        });
    </script>
@endsection