@extends('front.layouts.master')

@section('content')

<main class="mb-5">
    <div class="mb-4 pb-4"></div>
    <section class="login-register container">
        <h2 class="d-none">{{ __('front.login_register') }}</h2>
        <ul class="nav nav-tabs mb-5" id="login_register" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link nav-link_underscore" id="login-tab" href="{{ route('front.login_form') }}" aria-controls="tab-item-login" aria-selected="true">{{ __('front.login') }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link nav-link_underscore active" id="register-tab" href="{{ route('front.register_form') }}" aria-controls="tab-item-register" aria-selected="false">{{ __('front.register') }}</a>
            </li>
        </ul>
        <div class="tab-content pt-2" id="login_register_tab_content">
            <div class="tab-pane fade show active" id="tab-item-register" role="tabpanel" aria-labelledby="register-tab">
                <div class="register-form">
                    <form name="register-form" class="needs-validation" action="{{ route('front.register') }}" method="POST" novalidate>
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input name="first_name" type="text" class="form-control form-control_gray" id="customerFirstNameRegisterInput" placeholder="{{ __('front.first_name') }} *" required />
                                    <label for="customerFirstNameRegisterInput">{{ __('front.first_name') }} *</label>
                                </div>
                                @if ($errors->has('first_name'))
                                    <small class="text-red">{{ $errors->first('first_name') }}</small>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input name="last_name" type="text" class="form-control form-control_gray" id="customerLastNameRegisterInput" placeholder="{{ __('front.last_name') }} *" required />
                                    <label for="customerLastNameRegisterInput">{{ __('front.last_name') }} *</label>
                                </div>
                                @if ($errors->has('last_name'))
                                    <small class="text-red">{{ $errors->first('last_name') }}</small>
                                @endif
                            </div>
                        </div>

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <input name="email" type="email" class="form-control form-control_gray" id="customerEmailRegisterInput" placeholder="{{ __('front.email_address') }} *" required />
                            <label for="customerEmailRegisterInput">{{ __('front.email_address') }} *</label>
                        </div>
                        @if ($errors->has('email'))
                            <small class="text-red">{{ $errors->first('email') }}</small>
                        @endif

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <input name="phone" type="text" class="form-control form-control_gray" id="customerPhoneRegisterInput" placeholder="{{ __('front.phone') }} *" required />
                            <label for="customerPhoneRegisterInput">{{ __('front.phone') }} *</label>
                        </div>
                        @if ($errors->has('phone'))
                            <small class="text-red">{{ $errors->first('phone') }}</small>
                        @endif

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <input name="company_name" type="text" class="form-control form-control_gray" id="customerCompanyRegisterInput" placeholder="{{ __('front.company_name') }} *" required />
                            <label for="customerCompanyRegisterInput">{{ __('front.company_name') }} *</label>
                        </div>
                        @if ($errors->has('company_name'))
                            <small class="text-red">{{ $errors->first('company_name') }}</small>
                        @endif

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <input name="company_address" type="text" class="form-control form-control_gray" id="customerCompanyAddressRegisterInput" placeholder="{{ __('front.company_address') }} *" required />
                            <label for="customerCompanyAddressRegisterInput">{{ __('front.company_address') }} *</label>
                        </div>
                        @if ($errors->has('company_address'))
                            <small class="text-red">{{ $errors->first('company_address') }}</small>
                        @endif

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <select class="form-select form-select_gray form-select-lg mb-3" id="customerCountry" name="country_id" style="color:#838383;">
                                <option value="">{{ __('front.choose_country') }}</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                @endforeach
                            </select>
                            <label for="customerCountry" style="color:#838383;">{{ __('front.countries') }} *</label>
                        </div>
                        @if ($errors->has('country_id'))
                            <small class="text-red">{{ $errors->first('country_id') }}</small>
                        @endif

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <input name="password" type="password" class="form-control form-control_gray" id="customerPasswodRegisterInput" placeholder="{{ __('front.password') }} *" required />
                            <label for="customerPasswodRegisterInput">{{ __('front.password') }} *</label>
                        </div>
                        @if ($errors->has('password'))
                            <small class="text-red">{{ $errors->first('password') }}</small>
                        @endif

                        <div class="pb-3"></div>

                        <div class="form-floating mb-3">
                            <input name="password_confirmation" type="password" class="form-control form-control_gray" id="customerPasswordConfirmationRegisterInput" placeholder="{{ __('front.password_confirmation') }} *" required />
                            <label for="customerPasswordConfirmationRegisterInput">{{ __('front.password_confirmation') }} *</label>
                        </div>
                        @if ($errors->has('password_confirmation'))
                            <small class="text-red">{{ $errors->first('password_confirmation') }}</small>
                        @endif

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="kvkkAgreement" required />
                            <label class="form-check-label" for="kvkkAgreement">
                                {!! trans('front.i_agree_to', [
                                    'membership_contract' => '<a href="' . route('front.page_details', 'uyelik-sozlesmesi') . '" target="_blank" style="color: #ed1c24; text-decoration: underline;">' . __('front.membership_contract') . '</a>',
                                    'pdpl' => '<a href="' . route('front.page_details', 'kvkk') . '" target="_blank" style="color: #ed1c24; text-decoration: underline;">' . __('front.pdpl') . '</a>'
                                ]) !!}
                            </label>
                        </div>

                        <div class="d-flex align-items-center mb-3 pb-2">
                            <p class="m-0">{{ __('front.personal_data_usage') }}</p>
                        </div>

                        <small class="text-red" id="agreementError" style="display: none;">{{ __('front.you_must_agree') }}</small>

                        <button class="btn btn-primary w-100 text-uppercase" type="submit" id="registerSubmitButton">{{ __('front.register') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
</main>

@endsection
@push('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var forms = document.querySelectorAll('.needs-validation');

            Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.querySelectorAll("select").forEach(function (el) {
                    el.addEventListener('change', function () {
                        if (!el.value) {
                            el.classList.add("is-invalid");
                            el.classList.remove("is-valid");
                            el.setCustomValidity("Invalid field.");
                        } else {
                            el.classList.remove("is-invalid");
                            el.classList.add("is-valid");
                            el.setCustomValidity("");
                        }
                    });
                });

                form.addEventListener('submit', function (event) {
                    form.querySelectorAll("select").forEach(function (el) {
                        if (!el.value) {
                            event.preventDefault();
                            event.stopPropagation();
                            el.classList.add("is-invalid");
                            el.classList.remove("is-valid");
                            el.setCustomValidity("Invalid field.");
                        } else {
                            el.classList.remove("is-invalid");
                            el.classList.add("is-valid");
                            el.setCustomValidity("");
                        }
                    });
                });
            });
        });
    </script>
@endpush