@extends('layout.member_app')
@section('content')
<!-- Content-->
    <div class="main-content container-fluid">
    <div class="row">
    <section class="sign-in pt-100 container-fluid">
        <div class="row">
            <div class="container">
                {{Form::open(['url'=>'/finish','enctype' => 'multipart/form-data','class'=>'d-block w-100 form-inline','id' => 'regForm'])}}
                <div class="row">
                    <div class="col">
                        <h3 class="text-center">{{$title}}</h3>
                        <div class="row progress-holder justify-content-between align-items-center  mt-40">
                        <div class="d-flex flex-column align-items-center step step-1">
                            <span class="icon-cercle mb-20"></span>
                            <h5>Basic Information</h5>
                            <div class="col line1"></div>
                        </div>
                        <div class="d-flex flex-column align-items-center step step-2">
                            <span class="icon-cercle mb-20"></span>
                            <h5>Personal Information</h5>
                            <div class="col line2"></div>
                        </div>
                        <div class="d-flex flex-column align-items-center step step-3">
                            <span class="icon-cercle mb-20"></span>
                            <h5>Preferences</h5>
                            <div class="col line3"></div>
                        </div>
                        <div class="d-flex flex-column align-items-center step step-4">
                            <span class="icon-cercle mb-20"></span>
                            <h5>Finish</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab">
                    <div class="row p-50 pt-50 pb-0">
                        <div class="card p-40">
                        <div class="card-body">
                        <div class="row">
                            {{Form::hidden('profile_for', $memberInfo->profile_for)}}
                                @include('member.register_basic_form')

                            <div class="row col-md-12">
                               <div class="col-md-6 mb-25">
                                    <label class="d-block"><i class="fa fa-key icon"></i> &nbsp; Create password</label>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                        {{Form::password('password',['id' => 'password','class'=>$errors->has('password') ? 'form-control is-invalid required' : 'form-control required','required' => 'required'])}}
                                        <span><i class="fa fa-eye icon mt-10 preview-pswd"></i></span>
                                        </div>
                                    </div>
                                    @if ($errors->has('password'))
                                        <div class="invalid-feedback">
                                           {{ $errors->first('password') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-6 mb-25">
                                    <label class="d-block"><i class="fa fa-key icon"></i> &nbsp; Confirm password</label>

                                    
                                        {{Form::password('password_confirmation',['id' => 'password_confirmation','class'=>$errors->has('password_confirmation') ? 'form-control is-invalid required' : 'form-control required','required' => 'required'])}}
                                    
                                    
                                    @if ($errors->has('password_confirmation'))
                                    <div class="invalid-feedback">
                                       {{ $errors->first('password_confirmation') }}
                                    </div>
                                    @endif
                                    
                                </div>
                               
                            </div>
                            <div class="col-md-12 mb-25 row">
                                <label class="d-block">
                                <input type="checkbox" class="check-adjust" required="required">
                                I agree to the <a class="yellow-color" href="{{url('/terms-and-conditions')}}">Terms</a> and <a class="yellow-color" href="{{url('/terms-and-conditions')}}">Conditions</a>  of Pellichupulu.net  </label>
                            </div>
                        </div>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="tab">
                    <div class="row p-50 pt-50 pb-0">
                    <div class="card p-40">
                    <div class="card-body">
                    <div class="row form-inline">
                        @include('member.register_personal_form')
                    </div>
                    </div>
                    </div>
                    </div>
                </div>

                <div class="tab">
                    <div class="row p-50 pt-50 pb-0">
                    <div class="card p-40">
                    <div class="card-body">
                    <div class="row form-inline">
                        @include('member.register_preferences_form')
                    </div>
                    </div>
                    </div>
                    </div>
                </div>
                {{Form::close()}}

                <div class="row p-50 pt-10 pb-50">
                    <div class="card p-40 pt-5 pb-5">
                        <div class="card-body">
                        <div class="row">
                            <div class="col-12 d-flex justify-content-end">
                                <button type="submit" class="btn btn-danger prev-btn text-uppercase pl-30 pr-30 mr-15" id="prevBtn" onclick="nextPrev(-1)">Prev</button>
                                <button type="submit" class="btn btn-danger next-btn text-uppercase pl-30 pr-30" id="nextBtn" onclick="nextPrev(1)">Next</button>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    </div>
    </div>
    <!-- Content End -->
    @endsection
    @section('js_assets')

    <script>
        $('#dateAndTimeOfBirth').datetimepicker({
            //language:  'fr',
            weekStart: 1,
            //todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1,
            minuteStep: 1,
            endDate: '-18y'
        });

        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab

        function showTab(n) {

        // This function will display the specified tab of the form...
        var x = document.getElementsByClassName("tab");

        x[n].style.display = "block";
        $('html,body').animate({ scrollTop: 0 }, 'fast');
        //... and fix the Previous/Next buttons:
        if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
        } else {
        document.getElementById("prevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Save & Register";
        } else {
        document.getElementById("nextBtn").innerHTML = "Next";
        }
        //... and run a function that will display the correct step indicator:
        fixStepIndicator(n)
        }

        function nextPrev(n) {
        // This function will figure out which tab to display
        var x = document.getElementsByClassName("tab");
        // Exit the function if any field in the current tab is invalid:
        if (n == 1 && !validateForm()) return false;
        // Hide the current tab:
        x[currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
        currentTab = currentTab + n;
        // if you have reached the end of the form...
        if (currentTab >= x.length) {
        // ... the form gets submitted:
        document.getElementById("regForm").submit();
        return false;
        }
        // Otherwise, display the correct tab:
        showTab(currentTab);
        }

        function validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByClassName("required");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
        // If a field is empty...
        if (y[i].value == "") {
        // add an "invalid" class to the field:
        y[i].className += " invalid";
        // and set the current valid status to false
        valid = false;
        }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
        document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid; // return the valid status
        }

        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }

        $("body").on('click', '.preview-pswd', function() {
            $(this).toggleClass("fa-eye fa-eye-slash");
            var input = $("#password");
            if (input.attr("type") === "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });

    </script>
       {{-- Profile Picture --}}
       <script>

        // $('.btn-profile').bind("click" , function () {
        //        $('#profile-pic').click();
        // });

         function readURL(input) {
                   if (input.files && input.files[0]) {
                       var reader = new FileReader();

                       reader.onload = function (e) {
                           $('#img-profile')
                               .attr('src', e.target.result);
                       };
                       reader.readAsDataURL(input.files[0]);
                   }
               }

    </script>

{{-- Additional Photos --}}
        <script>

            // $('.btn-additional-'+n).bind("click" , function () {
            //         $('#additional-pic-'+n).click();
            //         console.log(n);
            //     });


                function readURL_more(input,n) {
                    
                        if (input.files && input.files[0]) {
                            var reader = new FileReader();

                            reader.onload = function (e) {
                                $('#img-additional-'+n)
                                    .attr('src', e.target.result);
                            };
                            document.getElementById('remove'+n).style.display = "block";
                            reader.readAsDataURL(input.files[0]);
                        }

                    }
                    
                function removeImage(n){
                    document.getElementById('img-additional-'+n).src='';
                    document.getElementById('remove'+n).style.display = "none";
                }
       </script>
        


    @endsection