@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::model($member, ['url'=>'/my-account/update','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>Update</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">
                                @include('member.register_basic_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">
                        @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">
                                @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 = "Update";
        } 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";
        }

        $('#chooseFile').bind('change', function () {
          var filename = $("#chooseFile").val();
          if (/^\s*$/.test(filename)) {
            $(".file-upload").removeClass('active');
            $("#noFile").text("No file chosen");
          }
          else {
            $(".file-upload").addClass('active');
            $("#noFile").text(filename.replace("C:\\fakepath\\", ""));
          }
        });
    </script>
     <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>
    @endsection