@extends('layouts.register-layout')

@section('content')
    @include('layouts.partials.register-partial-1')
    <div class="col-4">
        <div class="card custom-card" id="card-register" style="margin-bottom: 2rem;height: 100%;">
            <div class="card-body overflow-x-hidden overflow-y-auto">
                <form method="POST" action="{{ url('/register?reg=UMUM') }}">
                    @csrf
                    <input type="hidden" name="jenis_register" value="UMUM">
                    <input type="hidden" name="user_id" value="{{ session('register_nik') ?? old('user_id') }}">
                    <div class="position-relative" style="height: 5.5rem;">
                        <label for="email" class="form-label"><span style="color: #dc2626;">*</span> Email</label>
                        <input type="email" name="email" id="email"
                            class="form-control @error('email') is-error @enderror" placeholder="Email..."
                            autocomplete="off" value="{{ session('register_email') ?? old('email') }}">
                        @if ($errors->has('email'))
                            <p class="error-text">{{ $errors->first('email') }}</p>
                        @endif
                    </div>
                    <div class="position-relative" style="height: 5.5rem;">
                        <label for="password" class="form-label"><span style="color: #dc2626;">*</span> Password</label>
                        <input type="password" name="password" id="password"
                            class="form-control @error('password') is-error @enderror" placeholder="Password..."
                            autocomplete="current-password">
                        @if ($errors->has('password'))
                            <p class="error-text">{{ $errors->first('password') }}</p>
                        @endif
                    </div>
                    <div class="position-relative" style="height: 5.5rem;">
                        <label for="password_confirmation" class="form-label"><span style="color: #dc2626;">*</span>
                            Konfirmasi Password</label>
                        <input type="password" name="password_confirmation" id="password_confirmation"
                            class="form-control @error('password_confirmation') is-error @enderror"
                            placeholder="Konfirmasi Password..." autocomplete="current-password">
                        @if ($errors->has('password_confirmation'))
                            <p class="error-text">{{ $errors->first('password_confirmation') }}</p>
                        @endif
                    </div>
                    <div class="position-relative mb-2" style="height: 5.5rem;">
                        <label for="nomor_ponsel" class="form-label"><span style="color: #dc2626;">*</span> Nomor
                            Ponsel</label>
                        <input type="hidden" name="nomor_ponsel"
                            value="{{ session('register_nomor_ponsel') ?? old('nomor_ponsel') }}">
                        <input type="text" id="nomor_ponsel"
                            class="form-control @error('nomor_ponsel') is-error @enderror" placeholder="Nomor Ponsel..."
                            autocomplete="off" maxlength="12" minlength="0"
                            value="{{ session('register_nomor_ponsel') ?? old('nomor_ponsel') }}">
                        @if ($errors->has('nomor_ponsel'))
                            <p class="error-text">{{ $errors->first('nomor_ponsel') }}</p>
                        @endif
                        <div class="form-check float-end">
                            <input class="form-check-input" type="checkbox" id="status_wa">
                            <label class="form-check-label" for="status_wa">
                                WhatsApp aktif
                            </label>
                            <input type="hidden" name="status_wa" value="{{ old('status_wa') }}">
                        </div>
                    </div>
                    <div class="position-relative" style="height: 5.5rem;">
                        <label for="nama_usaha" class="form-label"><span style="color: #dc2626;">*</span> Nama Usaha</label>
                        <input type="text" name="nama_usaha" id="nama_usaha"
                            class="form-control @error('nama_usaha') is-error @enderror" placeholder="Nama Usaha..."
                            autocomplete="off" value="{{ session('register_nama_usaha') ?? old('nama_usaha') }}">
                        @if ($errors->has('nama_usaha'))
                            <p class="error-text">{{ $errors->first('nama_usaha') }}</p>
                        @endif
                    </div>
                    <div class="position-relative" style="height: 5.5rem;">
                        <label for="jenis_usaha" class="form-label"><span style="color: #dc2626;">*</span> Jenis
                            Usaha</label>
                        <select id="jenis_usaha" name="jenis_usaha"
                            class="form-control @error('jenis_usaha') is-error @enderror">
                            @foreach ($data_usaha as $item)
                                <option value="{{ $item['kode_usaha'] }}">{{ $item['nama_usaha'] }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('jenis_usaha'))
                            <p class="error-text">{{ $errors->first('jenis_usaha') }}</p>
                        @endif
                    </div>
                    <div class="d-flex align-items-center position-relative" style="height: 3rem;">
                        <div class="separator w-100"></div>
                        <p class="fw-semibold mb-0" style="font-size: 0.8rem;color: #5F6368;padding: 0 0.8rem;">Atau</p>
                        <div class="separator w-100"></div>
                    </div>
                    <div class="d-grip mb-3">
                        <a href="{{ url('/login/google/redirect') }}" class="btn btn-outline-secondary">
                            <img alt="logo-google" src="{{ asset('asset_web/img/pages/logo-google.png') }}">
                            <span style="padding-left: 0.2rem;">Daftar Dengan Akun Google</span>
                        </a>
                    </div>
                    <div class="position-absolute" style="bottom: 0.5rem;left: 0;right: 0.5rem;">
                        <button type="submit" class="btn float-end btn-next">
                            <span class="fw-bold" style="color: #375cb4;font-size: 0.8rem;">Selanjutnya</span>
                            <img alt="small-arrow-right" src="{{ asset('asset_web/img/pages/arrow-small-right.svg') }}">
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const selectizeJenisUsaha = $("#jenis_usaha").selectize({
                placeholder: "Klik disini untuk memilih...",
                onDropdownClose: function($dropdown) {
                    $($dropdown).find(".selected").not(".active").removeClass("selected");
                },
            });

            const selectJenisUsaha = selectizeJenisUsaha[0].selectize;
            selectJenisUsaha.clear();

            const formatPhoneNumber = function(value) {
                let result = "";
                // menghapus semua karakter yang bukan angka
                let cleaned = ('' + value).replace(/\D/g, '');

                // membuat format phone number
                let match = cleaned.match(/^(\d{4})(\d{4})(\d{4})$/);

                if (match) {
                    result = match[1] + ' ' + match[2] + ' ' + match[3];
                } else {
                    result = cleaned;
                }

                $("#nomor_ponsel").val(result);
            }

            $("#nomor_ponsel").keyup(function(e) {
                let value = $(this).val();

                formatPhoneNumber(value);
                $('input[name="nomor_ponsel"]').val(value);
            });

            $("#status_wa").change(function(e) {
                e.preventDefault();

                $(this).is(":checked")
                if ($(this).is(":checked")) {
                    $('input[name="status_wa"]').val("1");
                } else {
                    $('input[name="status_wa"]').val("0");
                }
            });

            let status_wa = "{{ old('status_wa') }}";

            if (status_wa === "") {
                $('input[name="status_wa"]').val("0");
                $("#status_wa").prop("checked", false);
            } else {
                $('input[name="status_wa"]').val(status_wa);

                if (status_wa === "1") {
                    $("#status_wa").prop("checked", true);
                } else {
                    $("#status_wa").prop("checked", false);
                }
            }

            let jenis_usaha = "{{ session('register_kode_usaha') }}" || "{{ old('jenis_usaha') }}";
            if (jenis_usaha !== "") {
                selectJenisUsaha.setValue(jenis_usaha);
            }
        });
    </script>
@endsection