@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" class="form-label">No. KP (ID Log Masuk)<a class="text-danger">*</a>:</label>
                                    <input type="text" class="form-control" name="id_no" id="id_no" pattern="\d*" required>
                                    <div id="id_no_error" class="invalid-feedback">
                                        Nilai yang diisi mengandungi aksara atau nilai yang tidak sah.
                                    </div>
                                    @error('id_no')
                                        <small class="text-danger">{{ $message }}</small>
                                    @else
                                        <small class="text-secondary text-monospace">Daftar menggunakan No Kad Pengenalan Penama Akaun atau Penama Kedua Akaun.Isikan nombor kad pengenalan anda tanpa simbol '-'.</small>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Nama:</label>
                                    <input type="text" class="form-control" name="name" value="{{ old('name') }}" required>
                                    @error('name')
                                        <small class="text-danger">{{ $message }}</small>
                                    @else
                                        <small class="text-secondary text-monospace">Isikan Nama anda seperti dalam kad pengenalan</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">Emel:</label>
                                <input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" required>
                                <div id="email_error" class="invalid-feedback">
                                    Sila masukkan emel mengikut format yang betul
                                </div>
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @else
                                    <small class="text-secondary text-monospace">Isikan Emel yang sah</small>
                                @enderror
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="password" class="form-label">Katalaluan:</label>
                                    <input type="password" class="form-control" name="password" id="password" required>
                                    <div id="password_error" class="invalid-feedback">
                                        Katalaluan terlalu pendek. Katalaluan perlu sekurang-kurangnya 8 huruf.
                                    </div>
                                    @error('password')
                                        <small class="text-danger">{{ $message }}</small>
                                    @else
                                        <small class="text-secondary text-monospace">Katalaluan perlu sekurang-kurangnya 8 huruf</small>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label for="password_confirmation" class="form-label">Sahkan Katalaluan:</label>
                                    <input type="password" class="form-control" name="password_confirmation" required>
                                    <small class="text-secondary text-monospace">Isi semula katalaluan anda</small>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-group">
                                    <label for="address1" class="form-label">Alamat (Baris 1: Nombor/unit rumah/bangunan)</label>
                                    <input type="text" class="form-control" name="address1" required>
                                    @error('address1')
                                        <small class="text-danger">{{ $message }}</small>
                                    @else
                                        <small class="text-secondary text-monospace">Isikan alamat tempat tinggal terkini</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="address2" class="form-label">Alamat (Baris 2: Nama jalan/taman/kampung)</label>
                                <input type="text" class="form-control" name="address2">
                                @error('address2')
                                    <small class="text-danger">{{ $message }}</small>
                                @else
                                    <small class="text-secondary text-monospace">Isikan alamat tempat tinggal terkini</small>
                                @enderror
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="city" class="form-label">Bandar:</label>
                                    <input type="text" class="form-control" name="city" required>
                                    @error('city')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label for="postcode" class="form-label">Poskod:</label>
                                    <input type="text" class="form-control" name="postcode" id="postcode" pattern="\d{5}" required>
                                    <div id="postcode_error" class="invalid-feedback">
                                        Sila masukkan Poskod mengikut format yang betul
                                    </div>
                                    @error('postcode')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="col-md-4">
                                    <label for="state" class="form-label">Negeri:</label>
                                    <select class="form-control" name="state" required>
                                        <option value="" disabled selected>Pilih Negeri</option>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}">{{ $state->shortname }}</option>
                                        @endforeach
                                    </select>
                                    @error('state')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="mobile_no" class="form-label">No. Tel Bimbit:</label>
                                <input type="text" class="form-control" name="mobile_no" id="mobile_no" pattern="\d*" required>
                                <div id="mobile_no_error" class="invalid-feedback">
                                    Sila masukkan No. Tel mengikut format yang betul
                                </div>
                                @error('mobile_no')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

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

    <script>
        document.getElementById('id_no').addEventListener('input', function (e) {
            const idNoInput = this;
            const idNoError = document.getElementById('id_no_error');
            if (/[^0-9]/.test(idNoInput.value)) {
                idNoError.style.display = 'inline';
                idNoInput.value = idNoInput.value.replace(/[^0-9]/g, '');
            } else {
                idNoError.style.display = 'none';
            }
        });

        document.getElementById('email').addEventListener('input', function (e) {
            const emailInput = this;
            const emailError = document.getElementById('email_error');
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

            if (!emailPattern.test(emailInput.value)) {
                emailInput.classList.add('is-invalid');
                emailError.style.display = 'block';
            } else {
                emailInput.classList.remove('is-invalid');
                emailError.style.display = 'none';
            }
        });

        document.getElementById('password').addEventListener('input', function (e) {
            const passwordInput = this;
            const passwordError = document.getElementById('password_error');
            if (passwordInput.value.length < 8) {
                passwordInput.classList.add('is-invalid');
                passwordError.style.display = 'block';
            } else {
                passwordInput.classList.remove('is-invalid');
                passwordError.style.display = 'none';
            }
        });

        document.getElementById('postcode').addEventListener('input', function (e) {
            const postcodeInput = this;
            const postcodeError = document.getElementById('postcode_error');
            if (!/^\d{5}$/.test(postcodeInput.value)) {
                postcodeInput.classList.add('is-invalid');
                postcodeError.style.display = 'block';
            } else {
                postcodeInput.classList.remove('is-invalid');
                postcodeError.style.display = 'none';
            }
        });

        document.getElementById('mobile_no').addEventListener('input', function (e) {
            const mobileNoInput = this;
            const mobileNoError = document.getElementById('mobile_no_error');
            if (/[^0-9]/.test(mobileNoInput.value)) {
                mobileNoError.style.display = 'inline';
                mobileNoInput.value = mobileNoInput.value.replace(/[^0-9]/g, '');
            } else {
                mobileNoError.style.display = 'none';
            }
        });

        document.getElementById('registrationForm').addEventListener('submit', function (e) {
            const idNoInput = document.getElementById('id_no');
            const idNoError = document.getElementById('id_no_error');
            const emailInput = document.getElementById('email');
            const emailError = document.getElementById('email_error');
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            const passwordInput = document.getElementById('password');
            const passwordError = document.getElementById('password_error');
            const postcodeInput = document.getElementById('postcode');
            const postcodeError = document.getElementById('postcode_error');
            const mobileNoInput = document.getElementById('mobile_no');
            const mobileNoError = document.getElementById('mobile_no_error');
            
            // Validate ID No.
            if (/[^0-9]/.test(idNoInput.value)) {
                e.preventDefault();
                idNoInput.classList.add('is-invalid');
                idNoError.style.display = 'block';
            } else {
                idNoInput.classList.remove('is-invalid');
                idNoError.style.display = 'none';
            }

            // Validate Email
            if (!emailPattern.test(emailInput.value)) {
                e.preventDefault();
                emailInput.classList.add('is-invalid');
                emailError.style.display = 'block';
            } else {
                emailInput.classList.remove('is-invalid');
                emailError.style.display = 'none';
            }

            // Validate Password
            if (passwordInput.value.length < 8) {
                e.preventDefault();
                passwordInput.classList.add('is-invalid');
                passwordError.style.display = 'block';
            } else {
                passwordInput.classList.remove('is-invalid');
                passwordError.style.display = 'none';
            }

            // Validate Postcode
            if (!/^\d{5}$/.test(postcodeInput.value)) {
                e.preventDefault();
                postcodeInput.classList.add('is-invalid');
                postcodeError.style.display = 'block';
            } else {
                postcodeInput.classList.remove('is-invalid');
                postcodeError.style.display = 'none';
            }

            // Validate Mobile No.
            if (/[^0-9]/.test(mobileNoInput.value)) {
                e.preventDefault();
                mobileNoInput.classList.add('is-invalid');
                mobileNoError.style.display = 'block';
            } else {
                mobileNoInput.classList.remove('is-invalid');
                mobileNoError.style.display = 'none';
            }
        });
    </script>
@endsection