@extends('layouts.app')
@section('title')
    {{ __('message.Daftar') }}
@endsection

@section('content')
    <div class="min-h-screen flex flex-col items-center justify-center md:p-10 "
        style="background-image: url('https://ifrcofficial.com/wp-content/uploads/2023/09/Screen-Shot-2023-09-06-at-10.52.09.png');opacity:95%">
        <div class="flex flex-col bg-white rounded-xl shadow-md px-10 py-8 container">
            <div class="container">
                <div class="lg:mt-10">
                    <div class="flex items-stretch">
                        <div class="w-full lg:w-1/2 lg:px-10">
                            <a href="{{ route('landing.index') }}" class="flex justify-center self-auto mb-9">
                                <img src="{{ asset('uploads/setting/general/images/' . Helper::generalSetting('logo_light')) }}"
                                    width="350" alt="">
                            </a>
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li style="color: #BA3C3C">{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <form action="{{ route('register') }}" method="POST">
                                @csrf
                                <input type="text" hidden name="uuid">
                                <div class="flex flex-col mb-6">
                                    <label for="email"
                                        class="mb-3 text-md tracking-wide text-black font-bold">{{ __('message.E-Mail') }}
                                        :</label>
                                    <div class="relative">

                                        <input id="email" type="email" name="email"
                                            class="text-sm sm:text-base placeholder-gray-500 pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                            placeholder="{{ __('message.E-Mail Address') }}" value="{{ old('email') }}"
                                            required />
                                    </div>
                                </div>
                                <div class="flex flex-col mb-6">
                                    <label for="email"
                                        class="mb-3 text-md tracking-wide text-black font-bold">{{ __('message.Nomor HP') }}
                                        :</label>
                                    <div class="relative">

                                        <input id="phone_number" type="phone_number" name="phone_number"
                                            class="text-sm sm:text-base placeholder-gray-500 pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                            placeholder="{{ __('message.Nomor HP') }}" value="{{ old('phone_number') }}" />
                                    </div>
                                </div>
                                <div class="flex flex-col mb-6">
                                    <label for="email" class="mb-3 text-md tracking-wide text-black font-bold">
                                        {{ __('message.Nama Lengkap') }} :
                                    </label>
                                    <div class="relative">
                                        <input id="email" type="text" name="name"
                                            class="text-sm sm:text-base placeholder-gray-500 pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                            placeholder="{{ __('message.Nama Lengkap') }}" value="{{ old('name') }}"
                                            required />
                                    </div>
                                </div>

                                <div class="flex flex-col mb-6">
                                    <label for="password"
                                        class="mb-1 text-md tracking-wide text-black font-bold">{{ __('message.Password') }}
                                        :</label>
                                    <div class="relative">
                                        <div class="flex">
                                            <button type="button"
                                                class="mr-2 px-3 py-2 text-gray-700 bg-gray-200 rounded focus:outline-none focus:shadow-outline"
                                                id="togglePassword" onclick="togglePasswordVisibility()">
                                                <i class="fas fa-eye-slash"></i>
                                            </button>
                                            <input id="password" type="password" name="password"
                                                class="text-sm sm:text-base placeholder-gray-500 pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                                placeholder="{{ __('message.Password') }}" required />
                                        </div>
                                    </div>
                                    <span id="passwordWarning" class="text-danger" style="color: #BA3C3C"></span>
                                </div>

                                <div class="flex flex-col mb-6">
                                    <label for="password" class="mb-1 text-md tracking-wide text-black font-bold">
                                        {{ __('message.Konfirmasi Password') }} :
                                    </label>
                                    <div class="relative">
                                        <div class="flex">
                                            <button type="button"
                                                class="mr-2 px-3 py-2 text-gray-700 bg-gray-200 rounded focus:outline-none focus:shadow-outline"
                                                id="togglePasswordConfirmation"
                                                onclick="togglePasswordConfirmationVisibility()">
                                                <i class="fas fa-eye-slash"></i>
                                            </button>
                                            <input id="password_confirmation" type="password" name="password_confirmation"
                                                class="text-sm sm:text-base placeholder-gray-500 pl-2 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400"
                                                placeholder="{{ __('message.Konfirmasi Password') }}" required />
                                        </div>
                                    </div>
                                    <span id="passwordConfirmationWarning" class="text-danger"
                                        style="color: #BA3C3C"></span>
                                </div>

                                <div onclick="modaltermandservice()" class="custom-control custom-radio lg:flex"
                                    style="align-items: center;">
                                    <input id="checkbox_term_and_service" type="checkbox"
                                        style="height: 25px; width: 25px; margin-right: 10px;" required>
                                    <span>{{ __('message.Anda menyetujui untuk menjadi bagian dari Pertapindo yang disediakan disini') }}</span>
                                </div>

                                <br>

                                <div class="flex flex-col mb-6">
                                    <div class="form-floating">
                                        <div class="g-recaptcha" data-sitekey="{{ Helper::getGoogleKey() }}"></div>
                                    </div>
                                </div>

                                <div class="flex w-full item-center justify-center">
                                    <button type="submit"
                                        class="flex items-center justify-center focus:outline-none text-white text-sm sm:text-base rounded-xl py-2 px-16 transition duration-150 ease-in"
                                        style="background: #BA3C3C">
                                        <span class="mr-2 uppercase">{{ __('message.Daftar') }}</span>
                                    </button>
                                </div>
                                <div class="flex justify-center items-center mt-6">
                                    <span>{{ __('message.Sudah punya akun?') }} <span class="mt-1"
                                            style="color: #BA3C3C"> <a href="{{ route('login') }}" target="_blank"
                                                class="inline-flex items-center font-bold text-center"
                                                style="color: #BA3C3C">

                                                {{ __('message.Masuk') }}</a></span></span>

                                </div>
                            </form>
                        </div>
                        <div class="w-1/2 px-10 hidden lg:block">
                            <p class="font-bold text-2xl">
                                {{ __('message.Keuntungan jika menjadi bagian dari Pertapindo') }}</p>
                            <div class="bg-white shadow-2xl py-10 px-5 rounded-xl">
                                <p class="font-bold text-2xl" style="color: #BA3C3C">{{ __('message.Benefit') }}</p>
                                @forelse ($regulationBenefit as $key => $value)
                                    <div class="flex px-5 pt-5">
                                        <div class="pt-2 px-2">
                                            <img src="{{ asset('landing/img/arrow.png') }}" alt="">
                                        </div>
                                        <div style="text-align: justify">
                                            <p class="font-bold text-lg text-jacarta-700">{{ $value->title }}</p>
                                            <p class="py-3 text-jacarta-700">{{ $value->date }}
                                            </p>
                                            <p>{{ $value->description }}</p>
                                        </div>
                                    </div>
                                @empty
                                    <p>{{ __('message.Tidak ada data') }}</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" role="dialog" id="create-newsCategory" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                <div class="modal-header">
                    <h5><strong>SYARAT DAN KETENTUAN PENGGUNAAN</strong></h5>
                </div>
                <div class="modal-body">
                    <div class="markdown prose w-full break-words dark:prose-invert light">
                        <p>{!! $termsAndConditions->value ?? '' !!}</p>
                    </div>
                </div>
                <div class="modal-footer">

                    <button onclick="terimaModal()" type="button"
                        class="flex items-center justify-center focus:outline-none text-white text-sm sm:text-base rounded-xl py-2 lg:px-10 transition duration-150 ease-in"
                        style="background: #51ba3c">
                        <span class="mx-2 uppercase">Terima</span>

                    </button>
                    <button onclick="tolakModal()" type="button"
                        class="flex items-center justify-center focus:outline-none text-white text-sm sm:text-base rounded-xl py-2 lg:px-10 transition duration-150 ease-in"
                        style="background: #ba3c3c">
                        <span class="mx-2 uppercase">Tolak</span>

                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function modaltermandservice() {
            $('#create-newsCategory').modal('toggle');
        }

        function terimaModal() {
            $('#create-newsCategory').modal('hide');
            $('#checkbox_term_and_service').prop('checked', true);
        }

        function tolakModal() {
            $('#create-newsCategory').modal('hide');
            $('#checkbox_term_and_service').prop('checked', false);
        }

        function togglePasswordVisibility() {
            var passwordInput = document.getElementById('password');
            var toggleButton = document.getElementById('togglePassword');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.innerHTML = '<i class="fas fa-eye"></i>';
            } else {
                passwordInput.type = 'password';
                toggleButton.innerHTML = '<i class="fas fa-eye-slash"></i>';
            }
        }

        function togglePasswordConfirmationVisibility() {
            var passwordInput = document.getElementById('password_confirmation');
            var toggleButton = document.getElementById('togglePasswordConfirmation');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleButton.innerHTML = '<i class="fas fa-eye"></i>';
            } else {
                passwordInput.type = 'password';
                toggleButton.innerHTML = '<i class="fas fa-eye-slash"></i>';
            }
        }
        $(document).ready(function() {

            $('[name=password]').on('input', function() {
                var password = $(this).val();
                var passwordWarning = $('#passwordWarning');

                if (password.length < 8) {
                    passwordWarning.text('Password harus memiliki lebih dari 8 karakter.');
                } else {
                    passwordWarning.text('');
                }
            });
            $('[name=password_confirmation]').on('input', function() {
                var password = $(this).val();
                var passwordWarning = $('#passwordConfirmationWarning');

                if (password.length < 8) {
                    passwordWarning.text('Password harus memiliki lebih dari 8 karakter.');
                } else {
                    passwordWarning.text('');
                }

                if ($(this).val() != $('[name=password]').val()) {
                    passwordWarning.text('Konfimasi password harus sama');
                } else {
                    passwordWarning.text('');
                }
            });
        });
    </script>
@endsection