@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
    <style>
    body {
        background-image: url({{asset("assets/images/auth/bg10.jpeg")}});
    }

    [data-theme="dark"] body {
        background-image: url({{asset("assets/images/auth/bg10-dark.jpeg")}});
    }
    </style>
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <div class="d-flex flex-lg-row-fluid">
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                <a href="{{url('/')}}">
                    <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                        src="{{ asset('assets/images/auth/agency-dark.png') }}" alt="images" />
                </a>
                <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                    src="{{asset("assets/images/auth/agency-dark.png")}}" alt="images" />
                <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">Welcome to the National Gymnastics Portal</h1>
                <div class="text-gray-600 fs-base tzzext-center fw-semibold">Where Dreams Take Flight!</div>
            </div>
        </div>
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <div class="d-flex flex-center rounded-4 w-md-600px p-10"
                style="background-color: var(--kt-body-bg)!important;">
                <div class="w-md-400px">
                    @php if(isset($_COOKIE['login_email']) && isset($_COOKIE['login_pass']))
                    {
                    $login_email = $_COOKIE['login_email'];
                    $login_pass = $_COOKIE['login_pass'];
                    $is_remember = "checked";
                    }
                    else{
                    $login_email = isset($_GET['email'])?$_GET['email']:old('email');
                    $login_pass = '';
                    $is_remember = "";
                    }
                    @endphp
                    @if (session('error_message'))
                    <div class="clearfix"></div>
                    <div class="alert alert-danger alert-dismissible"> {{ session('error_message') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span
                                aria-hidden="true"></span> </button>
                    </div>
                    @endif
                    @if (session('success_message'))
                    <div class="clearfix"></div>
                    <div class="alert alert-success alert-dismissible"> {{ session('success_message') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span
                                aria-hidden="true"></span> </button>
                    </div>
                    @endif
                    <form class="form w-100" method="Post" id="signupForm" action="{{url('admin/admin_register_store')}}">
                        @csrf
                        <div class="signin-form">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Club Name</label>
                                        <input type="text" placeholder="Enter Club Name" onkeyup="removeError('name')"
                                            id="name" name="name" value="{{ old('name') }}" data-error="#name_error"
                                            autocomplete="off" maxlength="60" minlength="5"
                                            class="form-control stop_space @error('name') is-invalid @enderror"
                                            autofocus />
                                        <span class="error" id="name_error"></span>
                                        @error('name')
                                        <br /> <span class="invalid-feedback red name" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Contact Person</label>
                                        <input type="text" placeholder="Enter name"
                                            onkeyup="removeError('contact_name')" id="contact_name" name="contact_name"
                                            value="{{ old('contact_name') }}" data-error="#contact_name_error"
                                            autocomplete="off" maxlength="60" minlength="2"
                                            class="form-control stop_first_space @error('contact_name') is-invalid @enderror"
                                            autofocus />
                                        <span class="error" id="contact_name_error"></span>
                                        @error('contact_name')
                                        <br /> <span class="invalid-feedback red contact_name" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Designation</label>
                                        <input type="text" placeholder="Enter Designation"
                                            onkeyup="removeError('designation')" id="designation" name="designation"
                                            value="{{ old('designation') }}" data-error="#designation_error"
                                            autocomplete="off" maxlength="60" minlength="2"
                                            class="form-control stop_first_space @error('designation') is-invalid @enderror"
                                            autofocus />
                                        <span class="error" id="designation_error"></span>
                                        @error('designation')
                                        <br /> <span class="invalid-feedback red designation" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Email Address</label>
                                        <input type="text" placeholder="abc.name@email.com"
                                            onkeyup="removeError('email_class')" id="email_class" name="email"
                                            value="{{ old('email') }}" autocomplete="off" data-error="#email_error" maxlength="60" minlength="5"
                                            class="form-control stop_first_space @if (session('email_error')) is-invalid @endif @error('email') is-invalid @enderror" />
                                        <span class="error" id="email_error"></span>
                                        @error('email')
                                        <br /> <span class="invalid-feedback red email_class" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Phone Number</label>
                                        <input type="text" placeholder="Enter Phone Number"
                                            onkeyup="removeError('mobile_class')" id="mobile_class" name="contact_number"
                                            data-error="#contact_number_error"
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
                                            value="{{ old('contact_number') }}" autocomplete="off"
                                            class="form-control stop_first_space @error('contact_number') is-invalid @enderror" maxlength="10" minlength="10" required/>
                                        <span class="error" id="contact_number_error"></span>
                                        @error('contact_number')
                                        <br /><span class="invalid-feedback red contact_number_class" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                                           
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>State</label>
                                        
                                    <select class="form-select mb-2" name="state_id" id="state_id" data-control="select2"
                                            data-hide-search="true" data-placeholder="Select State" data-error="#category_id_error">
                                            <option value="" required>Select State</option>
                                            @forelse($state as $cs)
                                                <option value="{{ $cs->id }}">{{ $cs->name }}</option>
                                            @empty
                                                <option value="">No state found</option>
                                            @endforelse
                                        </select>
                                        <span class="error" id="state_id_error"></span>
                                        @if ($errors->has('state_id'))
                                            <span class="text-danger">{{ $errors->first('state_id') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>District</label>
                                        <select class="form-select mb-2" name="district_id" id="district_id" data-control="select2"
                                        data-hide-search="true" data-placeholder="Select District"
                                        data-error="#district_id_error" required>
                                        <option value=""></option>
                                    </select>
                                    <span class="error" id="district_id_error"></span>
                                    @if ($errors->has('district_id'))
                                        <span class="text-danger">{{ $errors->first('district_id') }}</span>
                                    @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>City</label>
                                        <input type="text" placeholder="City" onkeyup="removeError('city_class')"
                                            id="city_class" name="city" value="{{ old('city') }}"
                                            data-error="#city_error" autocomplete="off"
                                            class="form-control stop_first_space @error('city') is-invalid @enderror" />
                                        <span class="error" id="city_error"></span>
                                        @error('city')
                                        <br /><span class="invalid-feedback red city_class" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Address</label>
                                        <input type="text" placeholder="Street Address"
                                            onkeyup="removeError('address_class')" id="address_class" name="address"
                                            value="{{ old('address') }}" data-error="#address_error" autocomplete="off"
                                            class="form-control stop_first_space @error('address') is-invalid @enderror" />
                                        <span class="error" id="address_error"></span>
                                        @error('address')
                                        <br /><span class="invalid-feedback red address_class" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>     
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Password</label>
                                        <div class="password-input">
                                            <input type="password" name="password" id="password"
                                                class="form-control password_feild1 @error('password') is-invalid @enderror"
                                                data-iconType="open" placeholder="Password"
                                                data-error="#password_error" />
                                        </div>
                                        <span class="error" id="password_error"></span>
                                        @error('password')
                                        <br /> <span class="invalid-feedback red mobile_class" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <span>Password must be at least 8 characters long and include at least one lowercase letter,
                                one uppercase letter, one number, and one special character.</span>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Confirm Password</label>
                                        <div class="password-input">
                                            <input type="password" name="password_confirmation" id="password_confirmation"
                                                class="form-control password_feild2 @error('password_confirmation') is-invalid @enderror"
                                                placeholder="Confirm Password" data-iconType="open"
                                                data-error="#password_confirmation_error" />
                                        </div>
                                        <span class="error" id="password_confirmation_error"></span>
                                        @error('password_confirmation')
                                        <br /><span class="invalid-feedback red mobile_class" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group forget-box">
                                        <div class="check-custom">&nbsp;
                                            <!-- <label for="checkbox1">Thank you for signing up! You will recieve an
                                                immediate email with next steps to complete the setup of your new account</label> -->
                                        </div>
                                    </div>
                                    <span class="error" id="term_condition_error"></span>
                                    @error('term_condition')
                                    <br /><span class="invalid-feedback red mobile_class" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                                <span class="indicator-label">Sign Up</span>
                            </button>
                            <div class="form-btm-text">Already have an Account? <a class="forget-text" href="login">Sign
                                    In</a></div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push("script")
<script>
$("#email").on("blur", function() {
    $("#password").removeClass("error");
    $("#email").removeClass("error");
});
$("#password").on("blur", function() {
    $("#email").removeClass("error");
    $("#password").removeClass("error");
});


function removeError(i) {
    $("." + i).hide();
    $("#" + i).removeClass('is-invalid');
}

$(document).on('click', '.change_icon', function() {
    if ($('#password').attr('data-iconType') == "open") {
        document.getElementById('password').type = "text";
        $('#password').attr('data-iconType', 'close');
        $('#icon_class').html('<i class="bi bi-eye-slash fs-4 change_icon" title="hide"></i>');
    } else {
        document.getElementById('password').type = "password";
        $('#password').attr('data-iconType', 'open');
        $('#icon_class').html('<i class="bi bi-eye fs-4 change_icon" title="show"></i>');
    }
});

$(document).ready(function() {
    setTimeout(() => {
        $(".alert-dismissible").hide();
    }, 4500);
    jQuery.validator.addMethod("alphanumeric", function(value, element) {
            return this.optional(element) ||
                /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$?%^&*])[a-zA-Z0-9!?@#<>."':;,-/_~`$^%&*]+$/i
                .test(value);
        },
        "Must contain at least one number and one uppercase and lowercase letter, and one symbol and  at least 8 or more characters"
    );
    jQuery.validator.addMethod("email_verify", function(value, element) {
        return this.optional(element) || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value);
    }, "Enter a valid email");

    $('form[id="loginForm"]').validate({
        errorPlacement: function(error, element) {

            var placement = $(element).data("error");
            if (placement) {
                $(placement).append(error);
            } else {
                error.insertAfter(element);
            }

        },
        rules: {
            email: {
                required: true,
                email_verify: true,
            },
            password: {
                required: true,
                minlength: 8,
                alphanumeric: true
            }
        },
        messages: {
            email: {
                email: 'Enter a valid email',
                required: 'Email field is required.'
            },
            password: {
                minlength: 'Password must be at least 8 characters long.',
                required: 'Password field is required.'
            }
        },
        submitHandler: function(form) {
            document.getElementById('kt_sign_in_submit').disabled = true;
            $("#loader-screen").show();
            setTimeout(() => {
                form.submit();
            }, 200);
        },
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('input').removeClass('error');
        },
    });
    $("#state_id").change(function() {
                        var selectedState = $(this).val();
                        var district_id = $("#district_id");
                        district_id.empty();

                        if (selectedState) {
                            district_id.prop("disabled", false);
                            // Fetch districts based on the selected state using AJAX with POST method
                            $.ajax({
                                url: "{{ route('getdistrictsbystate') }}",
                                type: 'POST',
                                data: {
                                    stateid: selectedState
                                },
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function(data) {
                                    $.each(data, function(index, data) {
                                        district_id.append("<option value='" + data.id + "'>" + data.name +
                                            "</option>");
                                    });
                                }
                            });
                        } else {
                            // Disable the district dropdown if no state is selected
                            district_id.prop("disabled", true);
                        }
                    });
});
</script>
@endpush