@extends('front.layouts.master')
@section('title', __('unlimited'))
@section('content')

    <div class="p-3 p-sm-5">
        <div class="row g-4 g-xl-5 justify-content-between">
            <div class="col-xl-5 d-flex justify-content-center">
                <div class="authentication-wrap overflow-hidden position-relative text-center text-sm-start my-5">
                    <!-- Start Header Text -->
                    <div class="mb-5">
                        <h2 class="display-7 fw-semibold mb-3 text-dark">Welcome back! <br> Please <span
                                class="font-caveat text-primary">Sign up</span> to continue.</h2>
                        <p class="mb-0 text-dark">Unlock a world of exclusive content, enjoy special offers, and be the first
                            to dive into exciting news and updates by joining our community!</p>
                    </div>
                    <!-- /.End Header Text -->
                    <!-- Start Text -->
                    <!-- <p class="mb-0">We won't post anything without your permission and your personal details are kept private</p> -->
                    <!-- /.End Text -->
                    <form action="{{ route('user.registration') }}" enctype="multipart/form-data" class="register-form"
                        method="POST">
                        @csrf
                        <!-- Your form fields here -->
                        <!-- Profile Photo -->
                        <div class="form-group mb-4 profile-pic">
                            <label class="required fw-medium mb-2">Profile Photo</label>
                            <div class="ff_fileupload_wrap">
                                <div class="ff_fileupload_dropzone_wrap" onclick="document.getElementById('image').click()">
                                    <button type="button" class="ff_fileupload_dropzone"
                                        style="border: 2px #ae41f2 dashed;"
                                        aria-label="Browse, drag-and-drop, or paste files to upload">
                                        <input type="file" id="image" accept=".jpg, .png, image/jpeg, image/png"
                                            value="{{ old('user_image') }}" name="user_image" style="display: none;"
                                            required onchange="updateFileName(this)">

                                    </button>
                                    <div class="ff_fileupload_dropzone_tools"></div>
                                </div>
                                <table class="ff_fileupload_uploads"></table>
                            </div>
                            <div class="form-text" id="file-name"></div>
                            <div class="form-text">Recommended to 350 x 350 px.</div>
                            @error('user_image')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Full Name -->
                        <div class="form-group mb-4">
                            <label class="required">Full Name</label>
                            <input type="text" class="form-control text-dark" required value="{{ old('name') }}" name="name">
                            @error('name')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="form-group mb-4">
                            <label class="required">Enter Email</label>
                            <input type="email" value="{{ old('email') }}" required name="email" class="form-control text-dark">
                            @error('email')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Mobile Number -->
                        <div class="form-group mb-4">
                            <label class="required">Mobile Number</label>
                            <input type="text" value="{{ old('phone') }}" required name="phone" class="form-control text-dark"
                                required>
                            @error('phone')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>


                        <!-- Password -->
                        <div class="form-group mb-4">
                            <label class="required">Password</label>
                            <input id="password" name="password" type="password" required class="form-control text-dark password"
                                autocomplete="off">
                            <i data-bs-toggle="#password" class="fa-regular fa-eye-slash toggle-password"></i>
                            @error('password')
                                <p class="text-danger">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Confirm Password -->
                        <div class="form-group mb-4">
                            <label class="required">Confirm Password</label>
                            <input id="confirmPassword" name="password_confirmation" type="password"
                                class="form-control text-dark c-password" required autocomplete="off">
                            <i data-bs-toggle="#confirmPassword" class="fa-regular fa-eye-slash toggle-password"></i>
                        </div>
                        <div class="form-group mb-4">
                            <label for="coupon">Referral Code</label>
                            <input type="text" value="{{ old('coupon') }}" name="coupon" id="coupon"
                                class="form-control text-dark">
                        </div>
                        <!-- Terms and Conditions -->
                        <div class="form-check mb-4 text-start">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            <label class="form-check-label" for="flexCheckDefault">
                                By signing up, you agree to the <a href="{{route('admin.terms_conditions.index')}}"
                                    class="text-decoration-underline">terms of service</a>
                            </label>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="btn btn-primary btn-lg w-100">Sign Up</button>
                    </form>


                    <!-- Start Divider -->
                    <div class="align-items-center d-flex my-5">
                        <hr class="flex-grow-1 m-0"> <span class="fs-16 fw-bold px-3 text-dark">Or</span>
                        <hr class="flex-grow-1 m-0">
                    </div>
                    <!-- /.End Divider -->
                    <!-- Start Social Button Wrapper -->
                    <div class="d-grid gap-3 mb-3">

                        <!-- Start Social login Button -->
                        <a class="align-items-center btn btn-lg btn-light d-flex google-btn position-relative text-start"
                            href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                class="bi bi-google" viewBox="0 0 16 16">
                                <path
                                    d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
                            </svg>
                            <span class="ms-3">Sign up with Google</span>
                        </a>
                        <!-- Start Social login Button -->
                    </div>
                    <!-- /.End Social Button Wrapper -->
                    <!-- Start Bottom Text -->
                    <div class="bottom-text mt-4"> Already have an account? <a href="{{ '/sign-in' }}"
                            class="fw-medium text-decoration-underline">Sign In</a> </div>
                    <!-- /.End Bottom Text -->
                </div>
            </div>
            <div class="col-xl-7 d-none d-xl-block">
                <div class="background-image bg-light d-flex flex-column h-100 justify-content-center p-5 rounded-4"
                    data-image-src="assets/images/lines.svg">
                    <div class="py-5 text-center">
                        <div class="mb-5">
                            <h2 class="fw-semibold text-dark">Effortlessly organize your<br> workspace with ease.</h2>
                            <p class="text-dark">It is a long established fact that a reader will be distracted by the
                                readable<br> content of a page when looking at its layout. </p>
                        </div>
                        <img src="{{ asset('front/assets/images/png-img/real-time-analytics.png') }}" alt=""
                            class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('styles')
    <link href="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css') }}"
        rel="stylesheet">
    <style>
        .form-control {
            background: transparent;
        }
    </style>
@endpush
@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('.register-form');

            form.addEventListener('submit', function(event) {
                event.preventDefault();
                let isValid = true;

                // Reset previous errors
                const errorMessages = form.querySelectorAll('.text-danger');
                errorMessages.forEach(function(message) {
                    message.remove();
                });

                // Validate Full Name
                const name = form.querySelector('input[name="name"]');
                if (name.value.trim() === '') {
                    displayError(name, 'Full Name is required');
                    isValid = false;
                }

                // Validate Email
                const email = form.querySelector('input[name="email"]');
                if (!validateEmail(email.value)) {
                    displayError(email, 'Valid Email is required');
                    isValid = false;
                }

                // Validate Phone
                const phone = form.querySelector('input[name="phone"]');
                if (phone.value.trim() === '') {
                    displayError(phone, 'Mobile Number is required');
                    isValid = false;
                }

                // Validate Profile Photo
                // const userImage = form.querySelector('input[name="user_image"]');
                // if (userImage.files.length === 0) {
                //     displayError(userImage, 'Profile Photo is required');
                //     isValid = false;
                // } else if (!validateImage(userImage.files[0])) {
                //     displayError(userImage, 'File must be an image and less than 500x500 pixels');
                //     isValid = false;
                // }

                // Validate Password
                const password = form.querySelector('input[name="password"]');
                const confirmPassword = form.querySelector('input[name="password_confirmation"]');
                if (password.value.trim() === '') {
                    displayError(password, 'Password is required');
                    isValid = false;
                } else if (password.value !== confirmPassword.value) {
                    displayError(confirmPassword, 'Password confirmation failed');
                    isValid = false;
                }

                if (isValid) {
                    form.submit();
                }
            });

            function displayError(element, message) {
                const errorElement = document.createElement('p');
                errorElement.classList.add('text-danger');
                errorElement.textContent = message;
                element.parentElement.appendChild(errorElement);
            }

            function validateEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email.toLowerCase());
            }

            function validateImage(file) {
                const validExtensions = ['image/jpeg', 'image/png'];
                if (!validExtensions.includes(file.type)) {
                    return false;
                }
                const img = new Image();
                img.src = URL.createObjectURL(file);
                img.onload = function() {
                    return img.width <= 500 && img.height <= 500;
                }
                return true;
            }
        });
    </script>

    <script>
        function updateFileName(input) {
            var fileName = input.files.length > 0 ? input.files[0].name : '';
            document.getElementById('file-name').textContent = 'This "' + fileName + '" file is selected.';
        }
    </script>
@endpush