@extends('auth_api.layouts.auth')

@section('meta')
    @php
        $data = metaData('register');
    @endphp
@endsection


@section('content')
<main class="main">
    <div class="card-container">
     {{-- Toast notification --}}
     <ul class="notifications">
        <!-- li toast -->
    </ul>
    {{-- <ul class="notifications">
    </ul> --}}
    <div class="header">
        <img src="{{ asset('frontend') }}/assets-desktop/images/jecrc/Gradding_logo_2.png" alt="">
        <span>+</span>
        <img src="{{ asset('frontend') }}/assets-desktop/images/jecrc/jecrc_logo.png" alt="">
    </div>

    <div class="head-para">
        <p class="hp-1">Welcome to</p>
        <p class="hp-2">LANGUAGE LOFT CLUB</p>
    </div>

    <div class="foreign-language">
        <p class="fl-head">Why to learn a Foreign Language</p>
        <div class="why-learn">
            <div class="first-para">
                {{-- <img src="{{ asset('frontend') }}/assets-desktop/images/jecrc/checkmark_2.png" alt=""> --}}
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_3931_4210)">
                        <path
                            d="M8.09174 9.40841C7.93482 9.25149 7.72199 9.16333 7.50007 9.16333C7.27816 9.16333 7.06533 9.25149 6.90841 9.40841C6.75149 9.56533 6.66333 9.77816 6.66333 10.0001C6.66333 10.222 6.75149 10.4348 6.90841 10.5917L9.40841 13.0917C9.48627 13.169 9.57862 13.2301 9.68015 13.2716C9.78168 13.313 9.8904 13.334 10.0001 13.3334C10.1142 13.3298 10.2263 13.3028 10.3295 13.254C10.4327 13.2053 10.5248 13.1359 10.6001 13.0501L16.4334 6.38341C16.5681 6.21618 16.633 6.00342 16.6147 5.78948C16.5963 5.57554 16.4961 5.37694 16.3349 5.23508C16.1737 5.09323 15.964 5.01907 15.7495 5.02808C15.5349 5.03708 15.3322 5.12855 15.1834 5.28341L10.0001 11.2834L8.09174 9.40841Z"
                            fill="#51B53C" />
                        <path
                            d="M17.5 9.16699C17.279 9.16699 17.067 9.25479 16.9108 9.41107C16.7545 9.56735 16.6667 9.77931 16.6667 10.0003C16.6667 11.7684 15.9643 13.4641 14.7141 14.7144C13.4638 15.9646 11.7681 16.667 10 16.667C8.68341 16.6664 7.39648 16.276 6.30148 15.5449C5.20648 14.8139 4.35244 13.775 3.84707 12.5593C3.34171 11.3436 3.20763 10.0054 3.46175 8.71357C3.71587 7.42173 4.34681 6.23406 5.27501 5.30033C5.89226 4.67481 6.62807 4.17869 7.43939 3.841C8.2507 3.50331 9.12122 3.33083 10 3.33366C10.5329 3.337 11.0638 3.39847 11.5833 3.51699C11.6921 3.55062 11.8065 3.56162 11.9197 3.54932C12.0328 3.53702 12.1422 3.50168 12.2412 3.44547C12.3401 3.38927 12.4265 3.31339 12.495 3.22251C12.5635 3.13164 12.6127 3.02769 12.6395 2.91709C12.6663 2.80648 12.6701 2.69156 12.6508 2.57941C12.6315 2.46726 12.5894 2.36025 12.5272 2.26499C12.4649 2.16972 12.3838 2.08822 12.2888 2.0255C12.1939 1.96279 12.0871 1.92018 11.975 1.90033C11.3276 1.74803 10.6651 1.66975 10 1.66699C8.35362 1.67555 6.74666 2.17159 5.38192 3.09254C4.01718 4.01348 2.95582 5.31804 2.33177 6.8416C1.70773 8.36516 1.54897 10.0394 1.87554 11.6531C2.2021 13.2668 2.99935 14.7476 4.16667 15.9087C5.71392 17.4566 7.81138 18.3286 10 18.3337C12.2101 18.3337 14.3298 17.4557 15.8926 15.8929C17.4554 14.3301 18.3333 12.2105 18.3333 10.0003C18.3333 9.77931 18.2455 9.56735 18.0893 9.41107C17.933 9.25479 17.721 9.16699 17.5 9.16699Z"
                            fill="#51B53C" />
                    </g>
                    <defs>
                        <clipPath id="clip0_3931_4210">
                            <rect width="20" height="20" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
                <p>Enhance Career Opportunities by working with MNCs</p>
            </div>
            <div class="second-para">
                {{-- <img src="{{ asset('frontend') }}/assets-desktop/images/jecrc/checkmark_2.png" alt=""> --}}
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_3931_4210)">
                        <path
                            d="M8.09174 9.40841C7.93482 9.25149 7.72199 9.16333 7.50007 9.16333C7.27816 9.16333 7.06533 9.25149 6.90841 9.40841C6.75149 9.56533 6.66333 9.77816 6.66333 10.0001C6.66333 10.222 6.75149 10.4348 6.90841 10.5917L9.40841 13.0917C9.48627 13.169 9.57862 13.2301 9.68015 13.2716C9.78168 13.313 9.8904 13.334 10.0001 13.3334C10.1142 13.3298 10.2263 13.3028 10.3295 13.254C10.4327 13.2053 10.5248 13.1359 10.6001 13.0501L16.4334 6.38341C16.5681 6.21618 16.633 6.00342 16.6147 5.78948C16.5963 5.57554 16.4961 5.37694 16.3349 5.23508C16.1737 5.09323 15.964 5.01907 15.7495 5.02808C15.5349 5.03708 15.3322 5.12855 15.1834 5.28341L10.0001 11.2834L8.09174 9.40841Z"
                            fill="#51B53C" />
                        <path
                            d="M17.5 9.16699C17.279 9.16699 17.067 9.25479 16.9108 9.41107C16.7545 9.56735 16.6667 9.77931 16.6667 10.0003C16.6667 11.7684 15.9643 13.4641 14.7141 14.7144C13.4638 15.9646 11.7681 16.667 10 16.667C8.68341 16.6664 7.39648 16.276 6.30148 15.5449C5.20648 14.8139 4.35244 13.775 3.84707 12.5593C3.34171 11.3436 3.20763 10.0054 3.46175 8.71357C3.71587 7.42173 4.34681 6.23406 5.27501 5.30033C5.89226 4.67481 6.62807 4.17869 7.43939 3.841C8.2507 3.50331 9.12122 3.33083 10 3.33366C10.5329 3.337 11.0638 3.39847 11.5833 3.51699C11.6921 3.55062 11.8065 3.56162 11.9197 3.54932C12.0328 3.53702 12.1422 3.50168 12.2412 3.44547C12.3401 3.38927 12.4265 3.31339 12.495 3.22251C12.5635 3.13164 12.6127 3.02769 12.6395 2.91709C12.6663 2.80648 12.6701 2.69156 12.6508 2.57941C12.6315 2.46726 12.5894 2.36025 12.5272 2.26499C12.4649 2.16972 12.3838 2.08822 12.2888 2.0255C12.1939 1.96279 12.0871 1.92018 11.975 1.90033C11.3276 1.74803 10.6651 1.66975 10 1.66699C8.35362 1.67555 6.74666 2.17159 5.38192 3.09254C4.01718 4.01348 2.95582 5.31804 2.33177 6.8416C1.70773 8.36516 1.54897 10.0394 1.87554 11.6531C2.2021 13.2668 2.99935 14.7476 4.16667 15.9087C5.71392 17.4566 7.81138 18.3286 10 18.3337C12.2101 18.3337 14.3298 17.4557 15.8926 15.8929C17.4554 14.3301 18.3333 12.2105 18.3333 10.0003C18.3333 9.77931 18.2455 9.56735 18.0893 9.41107C17.933 9.25479 17.721 9.16699 17.5 9.16699Z"
                            fill="#51B53C" />
                    </g>
                    <defs>
                        <clipPath id="clip0_3931_4210">
                            <rect width="20" height="20" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
                <p>Explore Upto 100% Scholarships for Study Abroad</p>
            </div>
            <div class="third-para">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_3931_4210)">
                        <path
                            d="M8.09174 9.40841C7.93482 9.25149 7.72199 9.16333 7.50007 9.16333C7.27816 9.16333 7.06533 9.25149 6.90841 9.40841C6.75149 9.56533 6.66333 9.77816 6.66333 10.0001C6.66333 10.222 6.75149 10.4348 6.90841 10.5917L9.40841 13.0917C9.48627 13.169 9.57862 13.2301 9.68015 13.2716C9.78168 13.313 9.8904 13.334 10.0001 13.3334C10.1142 13.3298 10.2263 13.3028 10.3295 13.254C10.4327 13.2053 10.5248 13.1359 10.6001 13.0501L16.4334 6.38341C16.5681 6.21618 16.633 6.00342 16.6147 5.78948C16.5963 5.57554 16.4961 5.37694 16.3349 5.23508C16.1737 5.09323 15.964 5.01907 15.7495 5.02808C15.5349 5.03708 15.3322 5.12855 15.1834 5.28341L10.0001 11.2834L8.09174 9.40841Z"
                            fill="#51B53C" />
                        <path
                            d="M17.5 9.16699C17.279 9.16699 17.067 9.25479 16.9108 9.41107C16.7545 9.56735 16.6667 9.77931 16.6667 10.0003C16.6667 11.7684 15.9643 13.4641 14.7141 14.7144C13.4638 15.9646 11.7681 16.667 10 16.667C8.68341 16.6664 7.39648 16.276 6.30148 15.5449C5.20648 14.8139 4.35244 13.775 3.84707 12.5593C3.34171 11.3436 3.20763 10.0054 3.46175 8.71357C3.71587 7.42173 4.34681 6.23406 5.27501 5.30033C5.89226 4.67481 6.62807 4.17869 7.43939 3.841C8.2507 3.50331 9.12122 3.33083 10 3.33366C10.5329 3.337 11.0638 3.39847 11.5833 3.51699C11.6921 3.55062 11.8065 3.56162 11.9197 3.54932C12.0328 3.53702 12.1422 3.50168 12.2412 3.44547C12.3401 3.38927 12.4265 3.31339 12.495 3.22251C12.5635 3.13164 12.6127 3.02769 12.6395 2.91709C12.6663 2.80648 12.6701 2.69156 12.6508 2.57941C12.6315 2.46726 12.5894 2.36025 12.5272 2.26499C12.4649 2.16972 12.3838 2.08822 12.2888 2.0255C12.1939 1.96279 12.0871 1.92018 11.975 1.90033C11.3276 1.74803 10.6651 1.66975 10 1.66699C8.35362 1.67555 6.74666 2.17159 5.38192 3.09254C4.01718 4.01348 2.95582 5.31804 2.33177 6.8416C1.70773 8.36516 1.54897 10.0394 1.87554 11.6531C2.2021 13.2668 2.99935 14.7476 4.16667 15.9087C5.71392 17.4566 7.81138 18.3286 10 18.3337C12.2101 18.3337 14.3298 17.4557 15.8926 15.8929C17.4554 14.3301 18.3333 12.2105 18.3333 10.0003C18.3333 9.77931 18.2455 9.56735 18.0893 9.41107C17.933 9.25479 17.721 9.16699 17.5 9.16699Z"
                            fill="#51B53C" />
                    </g>
                    <defs>
                        <clipPath id="clip0_3931_4210">
                            <rect width="20" height="20" fill="white" />
                        </clipPath>
                    </defs>
                </svg>

                {{-- <img src="{{ asset('frontend') }}/assets-desktop/images/jecrc/checkmark_2.png" alt=""> --}}
                <p>Get opportunity to Work Abroad</p>
            </div>
        </div>
    </div>

    <form class="jecrc-form" id="createUser">
        <section class="jecrc-entry-form" style="display: block">
            <div class="jecrc-input">
                <select name="country_code" id="" class="j-country country-select">
                    <option data-code="Country" data-sort_code="" data-country="" value="" id="arry_opt">Country</option>
                    <option data-code="44" data-sort_code="UK" data-country="United Kingdom" value="United Kingdom@#$?44">United Kingdom +44</option>
                    <option data-code="1" data-sort_code="US" data-country="United States" value="United States@#$?1">United States +1</option>
                </select>
    
                <input class="input-mobile" type="tel" id="mobile_number" placeholder="Enter Your Mobile Number"
                    value="" id="" aria-label="mobile number" name="phone" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 15);">
                <span class="spin-loader" style="display: none"></span>
            </div>
    
            <div class="single-input-div input-name name-input">
                <div class="name-input-div">
                    <input class="input-fname" type="text" placeholder="First Name" value="" id="first_name"
                        aria-label="Name" name="name">
                </div> {{-- Toast notification --}}
                <ul class="notifications">
                    <!-- li toast -->
                </ul>   
                <div class="name-input-div">
                    <input class="input-lname" type="text" placeholder="Last Name" value="" id="last_name"
                        aria-label="Name" name="last_name">
                </div>
            </div>
    
            <div class="agree-check">
                <input type="checkbox" id="jecrc-form" name="" value="" checked>
                <label class="bottom-text" for="jecrc-form">I agree to receive whatsapp messages from gradding</label>
            </div>
            
            <button class="toast-button jecrc-form-btn" id="loginButton">Continue</button>
        </section>

    </form>    
    <form class="user-form" id="userForm" style="display: none">
        <section class="jecrc-user-form">
            <div class="single-input-div">
                <div class="course-input-div">
                    <input class="input-course" type="text" placeholder="Enter Course (Eg., B.Tech)" value="" id="course" aria-label="course" name="course">
                </div>

                <div class="branch-input-div">
                    <input class="input-branch" type="text" placeholder="Enter Branch (Eg., Mechanical)" value="" id="branch" aria-label="branch" name="branch">
                </div>

                <div class="year-input-div">
                    <input class="input-year" type="text" placeholder="Enter Year (Eg., 2nd)" value="" id="year" aria-label="year" name="year">
                </div>
            </div>

            <div class="select-language">
                <select name="language" class="language-select">
                    <option value="">Select Language</option>
                    <option value="german">German</option>
                    <option value="french">French</option>
                    <option value="german and french">Both (German & French)</option>
                </select>
            </div>

            <button class="jecrc-user-btn" id="infoButton">Continue</button>

        </section>
    </form>
</div>
</main>
@endsection 

@section('css')

<link rel="stylesheet" href="{{ asset('frontend') }}/assets-desktop/css/jecrc.css?v={{ env('ASSETS_VERSION') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection

@section('script')
<!--=======Toast Notification========-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

<script>
    
    let docs = document;

    const notifications = docs.querySelector(".notifications"), 
    buttons = docs.querySelectorAll(".toast-button");

    const toastDetails = {
        timer: 5000,
        success: {
            icon: "fa-circle-check",
            text: "Success:."
        },
        error: {
            icon: "fa-circle-xmark",
            text: "Error: Enter YOur Details first."
        },
        warning: {
            icon: "fa-circle-exclamation",
            text: "Enter Your details."
        },
        info: {
            icon: "fa-circle-info",
            text: "Info: This is an information toast."
        }
    }

    let isToastVisible = false; // Flag to track if a toast is currently visible

    const removeToast = (toast) => {
        toast.classList.add("hide");
        if (toast.timeoutId) clearTimeout(toast.timeoutId);
        setTimeout(() => {
            toast.remove();
            isToastVisible = false; // Reset the flag when the toast is removed
        }, 500);
    };

    const createToast = (id, msg) => {
    // Check if a toast is currently visible
        if (isToastVisible) {
            return; // If visible, exit without creating a new toast
        }

    // Getting the icon and text for the toast based on the id passed
        const {
            icon,
            text
        } = toastDetails[id];
        const toast = docs.createElement("li");
        toast.className = `toast ${id}`;
        toast.innerHTML = `<div class="column">
                                <i class="fa-solid ${icon}"></i>
                                <span>${msg}</span>
                            </div>
                            <i class="fa-solid fa-xmark" onclick="removeToast(this.parentElement)"></i>`;

        notifications.appendChild(toast);

        isToastVisible = true; // Set the flag to indicate that a toast is now visible

        // Setting a timeout to remove the toast after the specified duration
        toast.timeoutId = setTimeout(() => removeToast(toast), toastDetails.timer);
    };
</script>



<script>

    $(".jecrc-entry-form").show();
    $(".user-form").hide();

    function closeModel(id)
    {
        $("#"+id).hide();
    }

    $('#createUser').on('submit', function (e) {
        e.preventDefault();
        $('#loginButton').prop('disabled', true);
        $('#loginButton').text('Please Wait...');
        let formData = new FormData($(this)[0]);
        let _token = $('meta[name="csrf-token"]').attr('content');        

        let number = $('#mobile_number').val().toString();

        formData.append('_token',_token);

        if(formData.get('phone') == ''){
            $('#loginButton').text('Continue');
            $('#loginButton').prop('disabled', false);
            return createToast('error', 'Please Enter Phone');
        }else if(number.length != 10){
            $('#loginButton').text('Continue');
            $('#loginButton').prop('disabled', false);
            return createToast('error', 'Please Enter a Valid Number');
        }else if(formData.get('name') == '' && $('#first_name').is(":visible")){
            $('#loginButton').text('Continue');
            $('#loginButton').prop('disabled', false);
            return createToast('error', 'Please Enter Name');
        }else if(formData.get('last_name') == '' && $('#last_name').is(":visible")){
            $('#loginButton').text('Continue');    
            $('#loginButton').prop('disabled', false);
            return createToast('error', 'Please Enter Last Name');            
        }

        
        $.ajax({
            type: 'POST',
            url: '{{ route("resgiter.jecrcLogin") }}',
            data: formData,
            processData: false,
            contentType: false,
            success: (res) => {
                if(res.status == 1){
                    $(".jecrc-entry-form").hide();
                    $(".user-form").show();
                    $('#loginButton').text('Continue');
                    $('#loginButton').prop('disabled', false);
                    $('#mobile_number').val('');
                    $('#last_name').val('');
                    $('#first_name').val('');
                }
            },error: function(xhr, status, error) {
                $('#loginButton').text('Continue');
                $('#loginButton').prop('disabled', false);
                createToast('error', 'Something went wrong try again later');
            }
        });
    });
</script>
    
{{-- <script>
    $('#createUser').on('submit', function (e) {
        if(formData.get('phone') != '' && formData.get('name') != '' && formData.get('last_name') != ''){
            $(".jecrc-entry-form").style.display = "none";
            $(".user-form").style.display = "block";
        }
    });
</script> --}}

<script>
    $('#userForm').on('submit', function (e) {
        e.preventDefault();
        $('#infoButton').text('Please Wait...');
        $('#infoButton').prop('disabled', true);
        let formData = new FormData($(this)[0]);
        let _token = $('meta[name="csrf-token"]').attr('content');
        formData.append('_token',_token);

        if(formData.get('course') == ''){
            $('#infoButton').text('Continue');
            $('#infoButton').prop('disabled', false);
            return createToast('error', 'Please Enter Course');            
        }else if(formData.get('branch') == ''){
            $('#infoButton').text('Continue');
            $('#infoButton').prop('disabled', false);
            return createToast('error', 'Please Enter Branch'); 
        }else if(formData.get('year') == ''){
            $('#infoButton').text('Continue');
            $('#infoButton').prop('disabled', false);
            return createToast('error', 'Please Enter Year');
        }else if(formData.get('language') == ''){
            $('#infoButton').text('Continue');
            $('#infoButton').prop('disabled', false);        
            return createToast('error', 'Please Enter Language');
        }

        $.ajax({
            type: 'POST',
            url: '{{ route("resgiter.jecrcUserNotes") }}',
            data: formData,
            processData: false,
            contentType: false,
            success: (res) => {
                if(res.status == 1){                    
                    $('#infoButton').text('Continue');
                    $('#infoButton').prop('disabled', false);
                    $('#thankpopup').show();
                    $('#year').val('');
                    $('#course').val('');
                    $('#branch').val('');
                    $('.language-select').val('');

                }
            },error: function(xhr, status, error) {
                $('#infoButton').text('Continue');
                $('#infoButton').prop('disabled', false);
                createToast('error', 'Something went wrong try again later');
            }
        });
    });

    $(document).one("mousemove",function(){
        $.ajax({
            url: "/countryArray.php",
            success: function(res){
                $(".country-select").html(res);
                $(".country-select").val('India@#$?91');
                $(".country-select").trigger('change');
            }
        });
    });


    $(".country-select").change(function(){
        $("option",this).each((i,e) => {
            if($(e).attr("data-code") != 'Country' || $(e).attr("value") != ''){
                $(e).text(`${$(e).attr("data-country")} +${$(e).attr("data-code")}`);
            }else{
                $(e).text(`${$(e).attr("data-country")} ${$(e).attr("data-code")}`);
            }
        })
        selectedOption = $("option:selected", this);
        if($(selectedOption).attr("data-code") == 'Country'){
            $("option:selected", this).text(`${$(selectedOption).attr("data-sort_code")} ${$(selectedOption).attr("data-code")}`)
        }else{
            $("option:selected", this).text(`${$(selectedOption).attr("data-sort_code")} +${$(selectedOption).attr("data-code")}`)
        }
    });
</script>

@endsection