@php
    $configData = Helper::applClasses();
@endphp
@extends('layouts/fullLayoutMaster')


@section('title', 'Register Page')

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/page-auth.css')) }}">
    <style>
        .auth-wrapper.auth-v2 .c-brand-logo {
            left: 3.5rem;
        }

        @media only screen and (max-width: 600px) {
            .auth-wrapper.auth-v2 .c-brand-logo {
                left: 1rem !important;
                top: 0 !important;
            }
        }
    </style>
@endsection

@section('content')
    <div class="auth-wrapper auth-v2">
        <div class="auth-inner row m-0">
            <!-- Brand logo-->

            <!-- /Brand logo-->
            <!-- Left Text-->
            <div class="d-none d-lg-flex col-lg-8 align-items-center p-5 bg-white">
                <div class="w-100 d-lg-flex align-items-center justify-content-center px-5">
                    @if ($configData['theme'] === 'dark')
                        <img class="img-fluid" src="{{ asset('images/doc_logo.png') }}" alt="Register V2" />
                    @else
                        <img class="img-fluid" src="{{ asset('images/doc_logo.png') }}" alt="Register V2" />
                    @endif
                </div>
            </div>
            <!-- /Left Text-->
            <!-- Register-->
            <div class="d-flex col-lg-4 align-items-center  px-2 p-lg-5 bg-dark-black">

                <div class="col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto">

                    <h2 class="card-title font-weight-bold mb-1">The Doctors Diet </h2>
                    <p class="card-text mb-2">Make your app management easy and fun!</p>
                    <form class="auth-register-form mt-2" action="{{ url('registers_create') }}" method="POST">
                        @csrf
                        <div class="form-group">

                            <label class="form-label" for="register-username">Name</label>
                            <input class="form-control @error('full_name') is-invalid @enderror " id="register-username"
                                type="text" name="full_name" value="{{ old('full_name') }}" placeholder="Mr Smith"
                                aria-describedby="" autofocus="" tabindex="1" />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="phone_number">Phone Number</label>
                            <div class="d-flex">
                                <select name="country_code" id="country-code" class="form-select form-control me-2"
                                    style="width: 30%;">
                                    <!-- Country codes will be added here dynamically -->
                                </select>
                                <input class="form-control @error('phone_number') is-invalid @enderror" id="phone_number"
                                    type="text" name="phone_number" value="{{ old('phone_number') }}" placeholder=""
                                    aria-describedby="register-phone" tabindex="2" style="width: 70%;" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="register-email">Email</label>
                            <input class="form-control @error('email') is-invalid @enderror" id="register-email"
                                type="text" name="email" value="{{ old('email') }}" placeholder="john@example.com"
                                aria-describedby="register-email" tabindex="2" />
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="gender">Gender</label>
                            <select class="form-control w-100 @error('gender') is-invalid @enderror" name="gender"
                                id="gender">
                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="basicSelect2">Martial Status</label>
                            <select class="form-control @error('martial_status') is-invalid @enderror" id="basicSelect2"
                                name="martial_status">
                                <option value="single" {{ old('martial_status') == 'single' ? 'selected' : '' }}>Single
                                </option>
                                <option value="married" {{ old('martial_status') == 'married' ? 'selected' : '' }}>Married
                                </option>
                                <option value="divorced" {{ old('martial_status') == 'divorced' ? 'selected' : '' }}>
                                    Divorced</option>
                            </select>
                        </div>

                        <div class=" form-group">
                            <label for="fp-default">Date Of Birth</label>
                            <input type="date" id="fp-default"
                                class="form-control flatpickr-basic  @error('date_of_birth') is-invalid @enderror"
                                name="date_of_birth" value="{{ old('date_of_birth') }}" placeholder="YYYY-MM-DD" />
                        </div>

                        <div class=" form-group">
                            <label for="fp-default">Major</label>
                            <input type="text" id="Major" class="form-control " name="major" placeholder="" />
                        </div>

                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input class="custom-control-input @error('terms') is-invalid @enderror"
                                    id="register-privacy-policy" type="checkbox" tabindex="4" name="terms" required />
                                <label class="custom-control-label" for="register-privacy-policy">I agree to</label>
                                <a style="color: #7367f0 !important" type="button" data-toggle="modal"
                                    data-target="#large">&nbsp;Terms-and-Conditions</a>
                                @error('terms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <button class="btn btn-primary btn-block" tabindex="5">Sign up</button>
                    </form>

                    <div class="divider my-2">
                        <div class="divider-text">or</div>
                    </div>
                    <div class="auth-footer-btn d-flex justify-content-center">
                        <a class="btn btn-facebook" href="javascript:void(0)">
                            <i data-feather="facebook"></i>
                        </a>
                        <a href="https://www.instagram.com/doctors_diet_official/" target="_blank"
                            class="btn btn-instagram white">
                            <i data-feather="instagram"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- /Register-->
        </div>
    </div>
    <div class="modal fade text-left" id="large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel17">Terms-and-Conditions</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    The Doctors Diet builds health technologies and services that enable people to live a better healthy
                    experience, build healthy communities and decrease medical risks. These Terms govern your
                    subscription of The Doctors Diet programs, The Doctors Diet App and the other products, features,
                    services, communication tools and other channels that we (The Doctors Diet) offer except where we
                    expressly state that separate terms (and not these) apply. These Products are provided to you by The
                    Doctors Diet LLC. Dubai authenticity, UAE.

                    Your medical information and all medical records will be of high privacy in safe data warehouse The
                    Doctors Diet and any other products and services covered by these Terms. Should be subscribed and
                    submitted in using our Products through agreeing to our terms and conditions.

                    Subscription fee refund

                    The second party realizes that most of the effort and follow-up we do in our clinics and centers is
                    a work that focuses and revolves around improving community life, improving public health, and
                    helping many people to get rid of obesity and get a better life experience and help them enjoy
                    better health conditions and get rid of many diseases that may Sometimes be chronic diseases. Our
                    efforts and commitment to achieve results in losing a healthy weight under the supervision of
                    nutritional teams and the supervision of licensed practicing doctors falls under our responsibility
                    to anyone regardless of their age or their health and psychological condition. We consider weight
                    loss Is a common goal between the first and second teams , during which the first team meets and
                    achieves the goals of the second team, in choosing to participate in its special package that is
                    proportional to the common goal of the two teams to achieve


                    Any participant should mention his \her medical situation especially for those who have chronic
                    diseases (We are unable to accept any of the following cases (pregnancy, breast-feeding, cases of
                    kidney failure and liver disease in general),. If any of these cases were found to have participated
                    with us in any of various systems and programs, and not been mentionend by the client or references
                    to them in the first session, we immediately return the subscription fee, ( deducting the amount for
                    the analyzes that we conducted), and the subscription amounts will be returned directly to the
                    second party, in any other cases we are unable to make any refund.


                    If we (The Doctors Diet ) face a delay in weight loss less than our average 2.5-5 KGs/week we will
                    refer the patient to the medical department to review the medical situation. Second party
                    understands that this activity needed extra time and more efforts with extra expenses , but we will
                    not charge any thing for our medical supervision but there is extra time needed to achieve a weight
                    loss according to the medical situation that faces the patient, second party understands clearly
                    that we are both stuck to achieve the weight loss and time is not a major factor now , solving his
                    medical problems is the most important thing, , then we will review to reach the target body weight.

                    Test results

                    The second team realizes that most of the effort and follow-up we do in our clinics and centers is a
                    work that focuses and revolves around improving community life, improving public health, and helping
                    many people to get rid of obesity and get a better life experience and help them enjoy better health
                    conditions and get rid of many diseases that may be Chronic diseases sometimes, and because of the
                    awareness of the size of the successes and the positive additions that we offer to the community,
                    the second party is fully aware that we strive to provide the best nutritional programs in the world
                    scientifically and medically, and holds the highest medical evaluations through carefully studied
                    medical protocols and holds the highest and most prestigious medical awards ( The Nobel Prize in
                    medicine ) and that in order to achieve rapid weight loss, medically safe and controlled in all
                    medical and nutritional aspects, the second party performs a set of laboratory tests through
                    licensed practicing doctors, including special DNA tests and / or blood tests, all aiming to meet
                    the common goals quickly and efficiently, for the first team and the second team in Rapid access to
                    the common goal of rapid, safe and controlled weight loss. All these tests are usedtor Determine the
                    most appropriate foods for each participant separately, so the second party realizes that we are
                    using all available means to meet all the requirements necessary to achieve joint results , and is
                    fully aware that we are a nutrition center using the results of the examinations to achieve the
                    highest possible results and that we also provide the outputs of the results through weekly
                    nutritional schedules and as a nutrition center we are not authorized to give laboratory results or
                    test results to the second party. Therefore, the second party must confirm that she \he will not
                    request the analyzes results in any way.

                    Commercials

                    The second party realizes that most of the effort and follow-up we do in our clinics and centers is
                    a work that focuses and revolves around improving community life, improving public health, and
                    helping many people to get rid of obesity and get a better life experience and help them enjoy
                    better health conditions and get rid of many diseases that may Sometimes they are chronic diseases,
                    and in order to realize the extent of the successes and positive additions that we offer to the
                    community, the second party is fully aware that our promotional campaigns through social media
                    channels were the basis for information and informing the target groups about the advantages of
                    obtaining optimal health through nutritional services covered by full medical supervision. And as
                    the second party was part of this success ,and want to share it with public service, we (The Doctors
                    Diet) will shoot a video in which he tells the public his success story that embodies our joint
                    success in achieving weight loss. The second party pledges that it waives all rights to any video
                    material or any video clip filmed in one of the branches of the first team.

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('vendor-script')
    <script src="{{ asset('vendors/js/forms/validation/jquery.validate.min.js') }}"></script>

@endsection

@section('page-script')
    <script src="{{ asset('js/scripts/pages/page-auth-register.js') }}"></script>
    <script>
        const countryCodes = [{
                "name": "Algeria",
                "code": "+213",
                "iso": "DZ"
            },
            {
                "name": "Argentina",
                "code": "+54",
                "iso": "AR"
            },
            {
                "name": "Bahrain",
                "code": "+973",
                "iso": "BH"
            },
            {
                "name": "Brazil",
                "code": "+55",
                "iso": "BR"
            },
            {
                "name": "Canada",
                "code": "+1",
                "iso": "CA"
            },
            {
                "name": "Egypt",
                "code": "+20",
                "iso": "EG"
            },
            {
                "name": "Jordan",
                "code": "+962",
                "iso": "JO"
            },
            {
                "name": "Kuwait",
                "code": "+965",
                "iso": "KW"
            },
            {
                "name": "Mexico",
                "code": "+52",
                "iso": "MX"
            },
            {
                "name": "Morocco",
                "code": "+212",
                "iso": "MA"
            },
            {
                "name": "Qatar",
                "code": "+974",
                "iso": "QA"
            },
            {
                "name": "Russia",
                "code": "+7",
                "iso": "RU"
            },
            {
                "name": "Saudi Arabia",
                "code": "+966",
                "iso": "SA"
            },
            {
                "name": "Spain",
                "code": "+34",
                "iso": "ES"
            },
            {
                "name": "Sweden",
                "code": "+46",
                "iso": "SE"
            },
            {
                "name": "Turkey",
                "code": "+90",
                "iso": "TR"
            },
            {
                "name": "United Arab Emirates",
                "code": "+971",
                "iso": "AE"
            },
            {
                "name": "United Kingdom",
                "code": "+44",
                "iso": "GB"
            },
            {
                "name": "United States",
                "code": "+1",
                "iso": "US"
            },
        ];



        document.getElementById("phone_number").addEventListener("input", function(e) {
            this.value = this.value.replace(/[^0-9+]/g, ''); // Allow numbers and "+"
        });

        $(document).ready(function() {
            let countrySelect = $("#country-code");

            // Populate the dropdown
            countryCodes.forEach(country => {
                countrySelect.append(
                    `<option value="${country.iso}">${country.code} (${country.name})</option>`);
            });

            // Set default country code
            countrySelect.val("JO");

            // On change, update phone input placeholder
            // countrySelect.change(function () {
            //     let selectedCode = $(this).val();
            //     $("#phone_number").val(selectedCode);
            //     $("#phone_number").attr("placeholder", `e.g., ${selectedCode} 123456789`);
            // });
        });
    </script>
@endsection