@extends('includes.layout') <!-- Extend the layout -->

@section('content')
@if (session('error'))
<div class="alert alert-danger text-center">{{ session('error') }}</div>
@endif
@if (session('success'))
<div class="alert alert-success text-center">{{ session('success') }}</div>
@endif

<!-- Define the content section -->
<div class="container-fluid">
    <div class="row align-items-center">
        <div class="col-md-6">
            <div class="p-5 login-form">
                <nav class="justify-content-center">
                    <ul class="nav nav-pills" id="nav-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Log In</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Sign Up</button>
                        </li>
                    </ul>
                </nav>

                <div class="tab-content py-5" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <x-validation-errors class="mb-4" />
                        @if (session('status'))
                        <div class="mb-4 font-medium text-sm text-green-600">
                            {{ session('status') }}
                        </div>
                        @endif
                        <form method="POST" action="{{ route('login') }}">
                            @csrf

                            <div class="mb-4">
                                <input type="email" placeholder="Email *" class="py-2 form-control rounded-0 border-0 tx-14 border-bottom" name="email" autocomplete="off" required />
                            </div>

                            <div class="mb-2">
                                <input type="password" placeholder="Password *" class="py-2 form-control border-0 tx-14 rounded-0 border-bottom" name="password" autocomplete="off" />
                            </div>

                            <div class="mb-2 text-end">
                                <a class="text-decoration-none  tx-13" href="{{ route('forget-password') }}">Forget
                                    password ?</a>

                            </div>


                            <button type="submit" class="btn btn-dark w-100 fw-bold mt-3 rounded-pill py-3">Log
                                In</button>
                        </form>

                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        <x-validation-errors class="mb-4" />

                        <form method="POST" action="{{ route('register') }}">
                            @csrf



                            <div class="mb-4">
                                <input type="text" placeholder="Name *" class="py-2 form-control border-0 tx-14 rounded-0 border-bottom" name="name" autocomplete="off" />
                            </div>

                            <div class="mb-4 position-relative">
                                <input type="text" placeholder="Phone *" class="py-2 form-control border-0 tx-14 rounded-0 border-bottom" id="phone" name="phone" autocomplete="off" />
                                <div class="position-absolute top-0 end-0">
                                    <a href="#" id="get-otp" class="text-theme text-decoration-none mt-3 me-3 tx-12">Get OTP</a>
                                </div>
                            </div>
                            <div class="mb-4" id="otp-field" style="display: none;">
                                <input onkeyup="validateOtp(this.value)" type="text" placeholder="OTP *" class="py-2 form-control border-0 tx-14 rounded-0 border-bottom" name="otp" id="otp" autocomplete="off" />
                                <span class="text-danger tx-12 d-none" id="otp_val">Invaild OTP</span>
                            </div>


                            <div class="mb-4">
                                <input type="email" placeholder="Email *" class="py-2 form-control rounded-0 tx-14 border-0 border-bottom" name="email" autocomplete="off" />
                            </div>

                            <div class="mb-4">
                                <input type="password" placeholder="Password *" class="py-2 form-control border-0 tx-14 rounded-0 border-bottom" name="password" autocomplete="off" />
                            </div>

                            <div class="mb-4">
                                <input type="password" placeholder="Confirm Password *" class="py-2 form-control tx-14 border-0 rounded-0 border-bottom" name="password_confirmation" autocomplete="off" />
                            </div>

                            <div class="mb-3">
                                <div class="form-check">
                                    <input type="radio" class="form-check-input" title="choose checkbox if you are a saloon" name="user_type" id="user_type" value="1" />
                                    <label class="form-check-label tx-14" for="checks">
                                        Do you want to register as <span class="text-info fb-bold"> Saloon
                                            ?</span></span>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" class="form-check-input" title="choose checkbox if you are a saloon" name="user_type" id="user_type" value="2" />
                                    <label class="form-check-label tx-14" for="checks">
                                        Do you want to register as <span class="text-info fb-bold"> Artist
                                            ?</span></span>
                                    </label>
                                </div>
                            </div>

                            <button id="signup-button" type="submit" class="btn btn-dark w-100 fw-bold mt-3 rounded-pill py-3">Sign Up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 p-0 d-none d-sm-block">
            <img src="{{ asset('assets/images/login.png') }}" class="img-fluid" alt="Login Image" />
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        const signupButton = $('#signup-button');
        const otpField = $('#otp-field');
        const otpInput = $('#otp');
        const phoneInput = $('#phone');

        signupButton.prop('disabled', true);

        $('#get-otp').click(function(e) {
            e.preventDefault();

            const phone = phoneInput.val();

            if (!phone || !/^\d{10}$/.test(phone)) {
                alert('Please enter a valid 10-digit phone number.');
                return;
            }

            $('#otp-phone').val(phone);

            $.ajax({
                type: "POST",
                url: "{{ route('generate-otp') }}",
                data: {
                    phone: phone,
                    _token: "{{ csrf_token() }}",
                },
                success: function(response) {
                    console.log(response);
                    if (response.success) {
                        otpField.show();
                        otpInput.on('input', function() {

                            signupButton.prop('disabled', !$(this).val().trim());
                        });
                    } else {
                        otpField.hide();
                        alert('OTP not generated. Something went wrong.');
                    }
                },
                error: function(xhr, status, error) {
                    alert('Error: ' + error);
                }
            });
        });
    });
    $(document).ready(function() {
        setTimeout(function() {
            $('.alert-danger').fadeOut('fast');
        }, 3000);
    });


    // function validateOtp(otp){   
    //     let otp_val = $("#otp").val();
    //     const signupButton = $('#signup-button');
    //     signupButton.prop('disabled', true);
    //     if(otp_val === "123456"){
    //         console.log("ffg",otp , otp_val);
    //         signupButton.prop('disabled', false);
    //         $("#otp_val").addClass('d-none');
    //     }else{
    //         $("#otp_val").removeClass('d-none');
    //         signupButton.prop('disabled', !$(this).val().trim());
    //     }
    // }
    function validateOtp(otp) {
        const otpVal = $("#otp").val();
        const signupButton = $('#signup-button');
        const isValidOtp = otpVal === "123456";
        signupButton.prop('disabled', !isValidOtp || !otpVal.trim());
        $("#otp_val").toggleClass('d-none', isValidOtp);
        console.log("ffg", otp, otpVal);
    }
</script>



@endsection