@extends('layout.guest')

@section('content')
    <x-container-overlay>
        <div class="content-header">
            <h1 class="content-title">User Registration</h1>
            <p class="content-description">This is the User Registration Page. Kindly proceed to register your account here in order for you to make the product or service application later.</p>
        </div>
        <form action="{{ route('company.register.submit') }}" method="POST">
            @csrf
            <div class="row d-flex justify-content-center mx-2">
                <div class="col-md-10 card shadow-sm px-4">
                    <div class="card-body px-0">
                        <div class="card-sub-content">
                            <h4>Company Basic Information</h4>
                            <hr>
                            <div class="form-group">
                                <label for="company_name" class="form-label required">Company Name</label>
                                <input type="text" class="form-control form-control-sm {{ $errors->has('company_name') ? 'border border-danger' : '' }}" name="company_name" id="company_name" value="{{ old('company_name') }}">
                                @error('company_name')
                                    <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="old_registration_no" class="form-label">Company Registration No (Old SSM)</label>
                                        <input type="text" class="form-control form-control-sm {{ $errors->has('old_registration_no') ? 'border border-danger' : '' }}" name="old_registration_no" id="old_registration_no" value="{{ old('old_registration_no') }}" placeholder="700674-U">
                                        @error('old_registration_no')
                                            <span class="text-danger text-sm">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="registration_no" class="form-label required">Company Registration No (New SSM)</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-sm {{ $errors->has('registration_no') ? 'border border-danger' : '' }}" name="registration_no" id="registration_no" value="{{ old('registration_no') }}" placeholder="200501018559">
                                            <span class="input-group-text" id="registration_no-addon"><i class="fas fa-check" id="registration_no_icon"></i></span>
                                        </div>
                                        @error('registration_no')
                                            <span class="text-danger text-sm">{{ $message }}</span>
                                        @enderror
                                        <span class="text-danger text-sm" id="registration_no_exist" style="display: none;">Company registered previously. Please click Check Records to proceed.</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="incorporation_date" class="form-label required">Company Incorporation Date</label>
                                <input type="text" class="form-control form-control-sm {{ $errors->has('incorporation_date') ? 'border border-danger' : '' }}" name="incorporation_date" id="incorporation_date" value="{{ old('incorporation_date') }}">
                                @error('incorporation_date')
                                    <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                            <h4 class="pt-5">Company User Information</h4>
                            <hr>
                            <div class="form-group">
                                <label for="name" class="form-label required">Name</label>
                                <input type="text" class="form-control form-control-sm {{ $errors->has('name') ? 'border border-danger' : '' }}" name="name" id="name" value="{{ old('name') }}">
                                @error('name')
                                    <span class="text-danger text-sm">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="title" class="form-label">Title</label>
                                        <select name="title" id="title" class="form-select select2 {{ $errors->has('title') ? 'is-invalid' : '' }}" data-theme="bootstrap-5">
                                            <option value="" hidden>Select one...</option>
                                            @foreach (\App\Models\User::TITLE as $key => $title)
                                                <option value="{{ $key }}" @selected(old('title') == $key)>{{ $title }}</option>
                                            @endforeach
                                        </select>
                                        @error('title')
                                            <span class="text-danger text-sm">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email" class="form-label required">Email</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control form-control-sm border-end-0 {{ $errors->has('email') ? 'border border-danger' : '' }}" name="email" id="email" value="{{ old('email') }}">
                                            <span class="input-group-text bg-body border-start-0" id="email-addon"><i class="fas fa-check" id="email_icon"></i></span>
                                        </div>
                                        @error('email')
                                            <span class="text-danger text-sm">{{ $message }}</span>
                                        @enderror
                                        <span class="text-danger text-sm" id="email_exist" style="display: none;">Company registered previously. Please click Check Records to proceed.</span>
                                    </div>
                                </div>
                            </div>
                            <div class="alert alert-light bg-secondary-light-green text-primary-green border-0 mt-5 mb-10">
                                <p class="mb-2"><strong>Notice</strong>: To meet security rules, your password must have at least:</p>
                                <ul class="mb-0">
                                    <li>8 characters <i class="fas fa-check ms-1" id="password_length" style="display: none;"></i></li>
                                    <li>Single uppercase character <i class="fas fa-check ms-1" id="password_uppercase" style="display: none;"></i></li>
                                    <li>Single lowercase character <i class="fas fa-check ms-1" id="password_lowercase" style="display: none;"></i></li>
                                    <li>Single numeric character <i class="fas fa-check ms-1" id="password_numeric" style="display: none;"></i></li>
                                </ul>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="password" class="form-label required">Password</label>
                                        <div class="input-group">
                                            <input type="password" class="form-control form-control-sm border-end-0 {{ $errors->has('password') ? 'border border-danger' : '' }}" name="password" id="password">
                                            <span class="input-group-text bg-body border-start-0" id="password-addon"><i class="fas fa-check" id="password_icon"></i></span>
                                        </div>
                                        @error('password')
                                            <span class="text-danger text-sm">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="password_confirmation" class="form-label required">Confirm Password</label>
                                        <div class="input-group">
                                            <input type="password" class="form-control form-control-sm border-end-0 {{ $errors->has('password') ? 'border border-danger' : '' }}" name="password_confirmation" id="password_confirmation">
                                            <span class="input-group-text bg-body border-start-0" id="confirm_password-addon"><i class="fas fa-check" id="confirm_password_icon"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-check form-check-custom form-check-success form-check-xs my-10">
                                <input class="form-check-input {{ $errors->has('tnc') ? 'border border-danger' : '' }}" type="checkbox" value="1" name="tnc" id="tnc" />
                                <label class="form-check-label" for="tnc">
                                    I've read <a href="{{ asset('assets/pdf/REC-MYH-001-GUIDELINES-REGISTRATION-OF-MyHIJAU-MARK-PRODUCT.pdf') }}" target="_blank" rel="noopener noreferrer">MyHIJAU Mark Guideline</a> or <a href="{{ asset('assets/pdf/REC-MYH-002-GUIDELINES-REGISTRATION-OF-MyHIJAU-MARK-SERVICES.pdf') }}" target="_blank"
                                        rel="noopener noreferrer">MyHIJAU Mark Service Guideline</a> and fully understand on the Terms and Conditions.
                                    @error('tnc')
                                        <div>
                                            <span class="text-danger text-sm">{{ $message }}</span>
                                        </div>
                                    @enderror
                                </label>
                            </div>
                            <button type="submit" class="btn btn-register">Register</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </x-container-overlay>
@endsection

@section('scripts')
    <script>
        $('.select2').select2();
        $("#incorporation_date").flatpickr({
            dateFormat: "d-m-Y",
        });

        $("#company_name").on('input', function() {
            $(this).val($(this).val().toUpperCase());
        });

        var timer;
        var timer2;
        $('#registration_no').on('input change', function() {
            var input = $(this);
            clearTimeout(timer);
            timer = setTimeout(function() {
                if (input.val() == '') {
                    $('#registration_no_icon').removeClass('text-success fa-times text-danger').addClass('fa-check');
                    $('#registration_no_exist').hide();
                    return;
                }

                $.ajax({
                    type: "get",
                    url: "{{ route('global.check-company-registration-no') }}",
                    data: {
                        registration_no: $('#registration_no').val()
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.status === 'exists') {
                            $('#registration_no_icon').removeClass('fa-check text-success').addClass('fa-times text-danger');
                            $('#registration_no_exist').html(response.message);
                            $('#registration_no_exist').show();
                        } else if (response.status === 'not_exists') {
                            $('#registration_no_icon').removeClass('fa-times text-danger').addClass('fa-check text-success');
                            $('#registration_no_exist').hide();
                        } else {
                            $('#registration_no_icon').removeClass('fa-check text-success').addClass('fa-times text-danger');
                            $('#registration_no_exist').html(response.message);
                            $('#registration_no_exist').show();
                        }
                    }
                });
            }, 1000);
        });

        $('#email').on('input change', function() {
            var input = $(this);
            clearTimeout(timer2);
            timer2 = setTimeout(function() {
                if (input.val() == '') {
                    $('#email_icon').removeClass('text-success fa-times text-danger').addClass('fa-check');
                    $('#email_exist').hide();
                    return;
                }

                $.ajax({
                    type: "get",
                    url: "{{ route('global.check-user-email') }}",
                    data: {
                        email: $('#email').val()
                    },
                    dataType: "json",
                    success: function (response) {
                        console.log('111');
                        if (response.status === 'exists') {
                            $('#email_icon').removeClass('fa-check text-success').addClass('fa-times text-danger');
                            $('#email_exist').html(response.message);
                            $('#email_exist').show();
                        } else if (response.status === 'not_exists') {
                            $('#email_icon').removeClass('fa-times text-danger').addClass('fa-check text-success');
                            $('#email_exist').hide();
                        } else {
                            $('#email_icon').removeClass('fa-check text-success').addClass('fa-times text-danger');
                            $('#email_exist').html(response.message);
                            $('#email_exist').show();
                        }
                    }
                });
            }, 1000);
        });

        $('#password').on('input change', function() {
            var password = $(this).val();
            var length = password.length >= 8;
            var uppercase = /[A-Z]/.test(password);
            var lowercase = /[a-z]/.test(password);
            var numeric = /[0-9]/.test(password);

            if (length) {
                $('#password_length').removeClass('text-danger').addClass('text-success');
                $('#password_length').show();
            } else {
                $('#password_length').removeClass('text-success').addClass('text-danger');
                $('#password_length').hide();
            }

            if (uppercase) {
                $('#password_uppercase').removeClass('text-danger').addClass('text-success');
                $('#password_uppercase').show();
            } else {
                $('#password_uppercase').removeClass('text-success').addClass('text-danger');
                $('#password_uppercase').hide();
            }

            if (lowercase) {
                $('#password_lowercase').removeClass('text-danger').addClass('text-success');
                $('#password_lowercase').show();
            } else {
                $('#password_lowercase').removeClass('text-success').addClass('text-danger');
                $('#password_lowercase').hide();
            }

            if (numeric) {
                $('#password_numeric').removeClass('text-danger').addClass('text-success');
                $('#password_numeric').show();
            } else {
                $('#password_numeric').removeClass('text-success').addClass('text-danger');
                $('#password_numeric').hide();
            }

            if (length && uppercase && lowercase && numeric) {
                $('#password_icon').removeClass('text-danger fa-times').addClass('text-success fa-check');
            } else {
                $('#password_icon').removeClass('text-success fa-check').addClass('text-danger fa-times');
            }

            checkPassword();
        });

        $('#password_confirmation').on('paste', function(e) {
            e.preventDefault();
            return false;
        })

        $('#password_confirmation').on('input change', function() {
            checkPassword();
        });

        function checkPassword() {
            var password = $('#password').val();
            var confirmation = $('#password_confirmation').val();

            if (password == confirmation) {
                $('#confirm_password_icon').removeClass('text-danger fa-times').addClass('text-success fa-check');
            } else {
                $('#confirm_password_icon').removeClass('text-success fa-check').addClass('text-danger fa-times');
            }
        }
    </script>
@endsection