@extends("web.layouts.master")

@section("content")
    <section class="height-auto text-center background-light-grey">
        <div class="container pos-vertical-center">
            <form id="form-be-a-member" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-8 text-left">
                        <div class="row">
                            <div class="col-md-12" data-aos="fade-up" data-aos-duration="1000">
                                <span class="font-size-36 text-dark-grey Font-Manrope-ExtraBold text-uppercase pl-0 custom-second-section-title">Member Registration</span>
                            </div>
                            <div class="col-md-12" data-aos="fade-up" data-aos-duration="1500">
                                <div class="feature custom-feature mt-4">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold type--uppercase mb-1">Member Data - Parents</p>
                                    <hr class="red-border my-3 mb-5" />

                                    <div class="row mb-4">
                                        <div class="col-12 col-md-3">
                                            <div class="form-group">
                                                <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Title <span class="text-red">*</span></label>
                                                <div class="mb-4">
                                                    <select class="custom-select2" name="parent_information[title]">
                                                        <option value="mr">Mr</option>
                                                        <option value="mrs">Mrs</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <div class="form-group">
                                                <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Full Name <span class="text-red">*</span></label>
                                                <div class="custom-big-input-container mb-4">
                                                    <input type="text" name="parent_information[full_name]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Email <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-1">
                                            <input type="text" name="parent_information[email]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your email" />
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Phone Number <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="number" name="parent_information[phone_number]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your phone number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="12"/>
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Address <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="text" name="parent_information[address]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your address" />
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Password <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="password" name="parent_information[password]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your password" />
                                        </div>
                                    </div>
                                    <div class="form-group mb-5">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Confirm Password <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="password" name="parent_information[password_confirmation]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your confirm password" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12" data-aos="fade-up" data-aos-duration="1000">
                                <div class="feature custom-feature mt-4">
                                    <p class="font-size-24 text-dark-grey Font-Manrope-ExtraBold type--uppercase mb-1">Member Data</p>
                                    <hr class="red-border my-3 mb-5" />

                                    <div class="form-group">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Full Name <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4">
                                            <input type="text" name="member_information[full_name]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="Enter your full name" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-size-18 text-dark-grey Font-Manrope-Bold mb-2">Date of Birth <span class="text-red">*</span></label>
                                        <div class="custom-big-input-container mb-4 background-light-grey">
                                            <input type="text" name="member_information[date_of_birth]" class="font-size-14 text-dark-grey Font-Manrope-Light custom-big-input-field form-control" placeholder="d - M - yyyy" readonly/>
                                        </div>
                                        <div class="custom-datepicker custom-grey-border-box mb-2" style="padding: 0 8px 8px 8px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12" data-aos="fade-up" data-aos-duration="1000">
                                <div class="feature custom-feature mt-4">
                                    <div class="row">
                                        <div class="col-12 col-md-6 py-3">
    {{--                                        <a class="type--uppercase" href="#">--}}
    {{--                                            <span class="btn__text font-size-18 text-dark-grey Font-Manrope-ExtraBold">--}}
    {{--                                                <img src="{{ asset("web/assets/icons/chevron-left.png") }}" style="margin-top: -3px; margin-right: 10px;"   class="mb-1"/>--}}
    {{--                                                Back--}}
    {{--                                            </span>--}}
    {{--                                        </a>--}}
                                        </div>
                                        <div class="col-12 col-md-6 text-right">
                                            <a id="next-btn" class="btn custom-btn custom-btn-danger type--uppercase">
                                                <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                    Next
                                                    <img src="{{ asset("web/assets/icons/chevron-right.png") }}" style="margin-top: -3px; margin-right: 10px;"   class="mb-1"/>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
    @include("web.components.modal-with-loading-icon", [
        "modalIndex" => 0
    ])
    @include("web.components.cancelable-notification-modal", [
        "modalIndex" => 1
    ])
@endsection
@push("stackJs")
    <script>
        $(document).ready(function () {
            var today = new Date();

            $('.custom-datepicker .datepicker .dow:nth-child(1)').text("Sun");
            $('.custom-datepicker .datepicker .dow:nth-child(2)').text("Mon");
            $('.custom-datepicker .datepicker .dow:nth-child(3)').text("Tue");
            $('.custom-datepicker .datepicker .dow:nth-child(4)').text("Wed");
            $('.custom-datepicker .datepicker .dow:nth-child(5)').text("Thu");
            $('.custom-datepicker .datepicker .dow:nth-child(6)').text("Fri");
            $('.custom-datepicker .datepicker .dow:nth-child(7)').text("Sat");

            $(".custom-datepicker").datepicker({
                format: 'yyyy-mm-dd',
                templates: {
                    leftArrow: "<img src='{{ asset("web/assets/icons/calendar-dark-grey-chevron-left.png") }}' style='margin-bottom: 10px;'/>",
                    rightArrow: "<img src='{{ asset("web/assets/icons/calendar-dark-grey-chevron-right.png") }}' style='margin-bottom: 10px;'/>"
                },
            }).on("changeDate", function (e) {
                $("input[name='member_information[date_of_birth]']").val(e.format("d - M - yyyy"));
            });

            $(".custom-datepicker").datepicker('update', '2000-' + today.getMonth() + '-' + today.getDay());

            var $nextBtn = $("#next-btn");
            var $formBeAMember = $("#form-be-a-member");

            $nextBtn.on("click", function (e) {
                e.preventDefault();

                var serializeArray = $formBeAMember.serializeArray();

                var data = {};
                for (var key in serializeArray) {
                    var obj = serializeArray[key];
                    data[obj.name] = obj.value;
                }

                showModalWithLoadingIcon();
                $.ajax({
                    url: "{{ route("web.be-a-member.code-verification.send") }}",
                    method: "POST",
                    data: data,
                    success: function (res) {
                        hideModalWithLoadingIcon();

                        if (res.success) {
                            window.location = res.redirect_url;
                        } else {
                            showCancelableModalNotification({
                                "message": res.message
                            });
                        }
                    },
                    error: function (res) {
                        hideModalWithLoadingIcon();

                        showCancelableModalNotification({
                            "message": "Failed to save Be a Member information."
                        });
                    }
                });
            });
        });
    </script>
@endpush