@extends('layouts.auth.layouts')

@section('title', 'Register')

@push('css')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <style>
        .select2-selection__arrow {
            display: none;
        }
    </style>
@endpush
@section('content')
    <div class="d-flex col-lg-4 align-items-center auth-bg px-2 p-lg-5">
        <div class="col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto">
            <h2 class="card-title fw-bold mb-1">Account Information</h2>
            <p class="card-text mb-2">Fill the below form to create a new account</p>
            <form class="auth-register-form mt-2" method="POST" action="#">
                @csrf
                <div class="mb-1">
                    <label class="form-label" for="name">Name</label>
                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror"
                        name="name" placeholder="Name" value="{{ old('name') }}" required autocomplete="name"
                        autofocus>
                    @error('name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="email">Email</label>
                    <input id="email" type="email" class="form-control  @error('email') is-invalid @enderror "
                        name="email" placeholder="Email" value="{{ old('email') }}" required autocomplete="email"
                        autofocus>
                    @error('email')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="phone">Phone</label>
                    <input id="phone" type="text" class="form-control  @error('phone') is-invalid @enderror "
                        name="phone" placeholder="Phone" value="{{ old('phone') }}" required autocomplete="phone"
                        autofocus>
                    @error('phone')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="address">Address</label>
                    <input id="address" type="text" class="form-control  @error('address') is-invalid @enderror "
                        name="address" placeholder="Address" value="{{ old('address') }}" required autocomplete="address"
                        autofocus>
                    @error('address')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="city">City</label>
                    <input id="city" type="text" class="form-control  @error('city') is-invalid @enderror "
                        name="city" placeholder="City" value="{{ old('city') }}" required autocomplete="city"
                        autofocus>
                    @error('city')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for="zip">Zip</label>
                    <input id="zip" type="text" class="form-control  @error('zip') is-invalid @enderror "
                        name="zip" placeholder="Zip" value="{{ old('zip') }}" required autocomplete="zip" autofocus>
                    @error('zip')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                @php
                    $countries = \App\Models\Country::all();
                @endphp
                <div class="mb-1">
                    <label class="form-label" for="country_id">Country</label>
                    <select name="country_id" id="country_id" class="form-control select2">
                        <option value="">Select Country</option>
                        @foreach ($countries as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-1">
                    <label class="form-label" for="skype">Skype</label>
                    <input id="skype" type="text" class="form-control  @error('skype') is-invalid @enderror "
                        name="skype" placeholder="Skype" value="{{ old('skype') }}" required autocomplete="skype"
                        autofocus>
                    @error('skype')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-1">
                    <label class="form-label" for=password">Password</label>
                    <div class="input-group input-group-merge form-password-toggle">
                        <input id="password" type="password" class="form-control" name="password" placeholder="Password"
                            required autocomplete="password" value="">
                        <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                    </div>
                    <p class="mt-2">
                        <a href="{{ route('login') }}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-chevron-left">
                                <polyline points="15 18 9 12 15 6"></polyline>
                            </svg> Back to Login
                        </a>
                    </p>
                </div>
                <button type="submit" class="btn btn-primary w-100" id="submit_btn" tabindex="4">Register</button>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let name = $('#name');
        let email = $('#email');
        let phone = $('#phone');
        let address = $('#address');
        let city = $('#city');
        let zip = $('#zip');
        let country_id = $('#country_id');
        let skype = $('#skype');
        let password = $('#password');
        let submit_btn = $('#submit_btn');
        let form = $('.auth-register-form');
        submit_btn.on('click', function(e) {
            e.preventDefault();
            let data = {
                name: name.val(),
                email: email.val(),
                phone: phone.val(),
                address: address.val(),
                city: city.val(),
                zip: zip.val(),
                country_id: country_id.val(),
                skype: skype.val(),
                password: password.val(),
                _token: "{{ csrf_token() }}"
            }
            $.ajax({
                url: "{{ route('register.custom') }}",
                type: "POST",
                data: data,
                beforeSend: function() {
                    submit_btn.attr('disabled', true);
                    submit_btn.html(
                        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...'
                    );
                },
                success: function(response) {
                    if (response.status) {
                        submit_btn.html('Login');
                        submit_btn.attr('disabled', false);
                        form.trigger('reset');
                        toastr.success(response.message, 'Success Alert', {
                            timeOut: 2000
                        });
                        setTimeout(function() {
                            window.location.href = response.route
                        }, 2000)
                    } else {
                        submit_btn.html('Login');
                        submit_btn.attr('disabled', false);
                        toastr.error(response.message);
                    }
                },
                error: function(err) {
                    console.log(err.status);
                    if (err.status === 401) {
                        toastr.error(err.responseJSON.message, 'Error Alert', {
                            timeOut: 2000
                        });
                    }
                    if(err.status === 500)
                    {
                        submit_btn.html('Login');
                        submit_btn.attr('disabled', false);
                        form.trigger('reset');
                        toastr.success('User register success', 'Success Alert', {
                            timeOut: 2000
                        });
                    }
                    submit_btn.html('Login');
                    submit_btn.attr('disabled', false);
                    let errors = err.responseJSON.errors;
                    if (errors) {
                        $.each(errors, function(key, value) {
                            toastr.error(value, 'Error Alert', {
                                timeOut: 2000
                            });
                        })
                    }
                }
            })
        })
    </script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script>
        let firstInvalid = $('form').find('.is-invalid').eq(0);

        if (firstInvalid.length) {
            $('body, html').stop(true, true).animate({
                'scrollTop': firstInvalid.offset().top - 200 + 'px'
            }, 200);
        }
        // Basic Select2 select
        $(".select2").each(function() {
            let $this = $(this);
            $this.wrap('<div class="position-relative"></div>');
            $this.select2({
                dropdownAutoWidth: true,
                width: '100%',
                dropdownParent: $this.parent()
            });
        });
    </script>
@endpush