@extends('dashlayouts.guestapp')
@section('content')
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script> --}}
    <div class="container">
        <div class="row justify-content-center align-items-center min-vh-100">
            <!-- Logo Column -->
            <div class="col-md-5 text-center mb-4 mb-md-0">
                <img src="{{ asset('img/orijinschool.png') }}" alt="Logo" class="img-fluid" style="max-width: 60%;">
            </div>

            <!-- Form Column -->
            <div class="col-md-7">
                <h2 class="text-white-50 text-center pb-3">Sila isi untuk mendaftar.</h2>
                <div class="card shadow-lg border-0 rounded">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs">
                            {{-- <li class="nav-item col-6">
                                <a class="nav-link active text-secondary" data-toggle="tab" href="#student-tab">Register as Student</a>
                            </li> --}}
                            <li class="nav-item col-6">
                                <a class="nav-link active text-secondary" href="#parent-tab">Daftar sebagai IbuBapa</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="tab-content">
                            @include('errors')
                            <!-- Student Tab -->
                            {{-- <div class="tab-pane fade show active" id="student-tab">
                                <form method="POST" action="{{ route('userregister') }}" data-parsley-validate="">
                                    @csrf
                                    <div class="container">
                                    @if (session('error'))
                                        <div class="alert alert-danger">
                                            {{ session('error') }}
                                        </div>
                                    @endif

                                    @if (session('success'))
                                        <div class="alert alert-success">
                                            {{ session('success') }}
                                        </div>
                                    @endif
                                        <input type="hidden" name="is_parent" value="0">
                                        <div class="form-group row mb-3">
                                            <label for="idno" class="col-md-4 col-form-label text-md-right">{{ __('Student ID') }}</label>
                                            <div class="col-md-8">
                                                <input id="idno" type="text" class="form-control @error('idno') is-invalid @enderror" name="idno" value="{{ old('idno') }}" 
                                                required data-parsley-type="digits" data-parsley-trigger="change" autofocus>
                                                <small class="form-text text-muted">Student Id No. assigned 
                                                    Eg: 24300212234</small>
                                                @error('idno')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name as in MyKad / Passport') }}</label>
                                            <div class="col-md-8">
                                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" 
                                                required autofocus
                                                data-parsley-trigger="change"
                                                data-parsley-pattern="^[a-zA-Z\s\'\-\@]+"
                                                style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()"
                                                autofocus>
                                                <small class="form-text text-muted">Fullname as in Mykad / Passport
                                                    </small>
                                                @error('name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Email') }}</label>
                                            <div class="col-md-8">
                                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" 
                                                required data-parsley-type="email" data-parsley-trigger="change" data-parsley-length="[6, 50]" autofocus>
                                                @error('email')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
                                            <div class="col-md-8">
                                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" 
                                                required data-parsley-minlength="8" data-parsley-trigger="change" autofocus>
                                                @error('password')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
                                            <div class="col-md-8">
                                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" 
                                                required data-parsley-equalto="#password" data-parsley-trigger="change" autofocus>
                                            </div>
                                        </div>

                                        <div class="form-group row mb-0 mt-4">
                                            <div class="col-md-8 offset-md-4">
                                                <a href="{{ route('login')}}" class="btn btn-outline-primary">
                                                    {{ __('Back to Login') }}
                                                </a>
                                                <button type="submit" class="btn btn-primary">
                                                    {{ __('Register') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div> --}}

                            <!-- Parent Tab -->
                            <div class="tab-pane fade show active" id="parent-tab">
                                <form method="POST" action="{{ route('userregister') }}" data-parsley-validate="" id="userregform">
                                    @csrf
                                    <div class="container">
                                        <input type="hidden" name="is_parent" value="1">
                                        <div class="form-group row mb-3">
                                            {{-- <label for="idno" class="col-md-4 col-form-label text-md-right">{{ __('MyKad / Passport') }}</label>
                                            <div class="col-md-8">
                                                <input id="idno" type="text" class="form-control @error('idno') is-invalid @enderror" name="idno" value="{{ old('idno') }}" 
                                                required  autofocus
                                                data-parsley-type="alphanum"
                                                data-parsley-trigger="change">
                                                <small class="form-text text-muted">MyKad / Passport. without (-).
                                                    Eg: 1234121234</small>
                                                @error('idno')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div> --}}
                                            <label for="id_no"
                                            class="col-md-4 col-form-label text-md-right">MyKad/Passport <strong>IbuBapa/Penjaga</strong></label>
                                        <div class="col-md-8">
                                            <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="MK">MyKad</option>
                                                    <option value="P">Passport</option>
                                                </select>
                                                <input type="text" name="idno" id="idno" class="form-control"
                                                    data-parsley-trigger="keyup" data-parsley-length="[6, 15]"
                                                    value="{{ old('idno') }}" 
                                                    style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()"
                                                    required autofocus>
                                            </div>
                                        </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="name" class="col-md-4 col-form-label text-md-right">Nama Penuh <strong>IbuBapa/Penjaga</strong> di MyKad/Passport</label>
                                            <div class="col-md-8">
                                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" 
                                                required autofocus
                                                 data-parsley-trigger="change"
                                                 data-parsley-maxlength="200"
                                                data-parsley-pattern="^[a-zA-Z\s\'\-/@]+$" 
                                                style="text-transform: uppercase" oninput="this.value = this.value.toUpperCase()">
                                                <small class="form-text text-muted">Nama Penuh IbuBapa/Penjaga seperti Mykad / Passport
                                                    </small>
                                                @error('name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Emel') }}</label>
                                            <div class="col-md-8">
                                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" 
                                                required data-parsley-type="email" data-parsley-trigger="change" data-parsley-length="[6, 50]" autofocus>
                                                @error('email')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Kata Laluan') }}</label>
                                            <div class="col-md-8">
                                                <input id="password2" type="password" class="form-control @error('password') is-invalid @enderror" name="password" 
                                                required data-parsley-minlength="8" data-parsley-trigger="change">
                                                
                                                @error('password')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Sahkan KataLaluan') }}</label>
                                            <div class="col-md-8">
                                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" 
                                                required data-parsley-equalto="#password2" data-parsley-trigger="change" >
                                            </div>
                                        </div>

                                        {{-- <div class="form-group row mb-3">
                                            <label for="mobile_no" class="col-md-4 col-form-label text-md-right">{{ __('Mobile Number') }}</label>
                                            <div class="col-md-8">
                                                <input id="mobile_no" type="text" class="form-control" name="mobile_no" value="{{ old('mobile_no') }}"
                                                data-parsley-trigger="change" data-parsley-length="[8, 13]"
                                                data-parsley-pattern="^(6?0)[0|1|2|3|4|6|7|8|9]{1,2}[0-9]{7,8}$"
                                                data-parsley-error-message="Please follow the format" required autofocus>
                                                <small class="form-text text-muted">Phone no without
                                                    (+-/). Eg: 01012345678</small>
                                            </div>
                                        </div><br> --}}
<br>
                                        <div class="text-center">
                                            <img src="{{ asset('img/sectigo_trust_seal_lg_140x54.png') }}" alt="">
                                        </div>

                                        <div class="form-group row mb-0 mt-4">
                                            <div class="col-md-8 offset-md-4">
                                                <a href="{{ route('login')}}" class="btn btn-outline-primary">
                                                    {{ __('Kembali ke Log Masuk') }}
                                                </a>
                                                <button type="submit" class="btn btn-primary">
                                                    {{ __('Daftar') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Template Main JS File -->
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <script src="{{ asset('js/ms.js') }}"></script>
    <script>
        $('#regform').parsley();
    </script>
    <script>
        $(document).ready(function() {
            $('.nav-tabs a').click(function() {
                $(this).tab('show');
            });
        });
    </script>
     <script>
        $(document).ready(function() {
            $('#userregform').parsley();
    
            $('#ic_type').change(function() {
                var icType = $(this).val();
                var $idNo = $('#idno');
    
                $idNo.parsley().reset();
    
                if (icType === 'MK') {
                    // $idNo.attr('data-parsley-pattern', '^[0-9]+$');
                    $idNo.attr('data-parsley-pattern', '^(([0-9]{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01]))([0-9]{2})([0-9]{4})$');
                    $idNo.attr('placeholder', 'Eg: 123456');
                } else {
                    $idNo.attr('data-parsley-pattern', '^[a-zA-Z0-9]+$');
                    $idNo.attr('placeholder', 'Eg: A123456');
                }
            });
    
            $('#idno').on('keyup', function() {
                $(this).parsley().validate();
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#userregform').parsley({
                errorsContainer: function (ParsleyField) {
                    return ParsleyField.$element.closest('.input-group').parent();
                }
            });
        });
    </script>
@endsection