@extends("app")
@section('head_title', 'Business User Login | ' . getcong('site_name'))
@section('meta_title', 'Business User Login | ' . getcong('site_name'))
@section('meta_description', 'Login to your business account')
@section('head_url', Request::url())

@section('content')
<div class="container" style="max-width: 500px; margin: 50px auto;">
    <h2 class="text-center">Business User Login</h2>

    {{-- Flash Messages --}}
    <div id="alert_box"></div>
        {{-- Error / Success Messages --}}
                    <div class="message">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <ul style="list-style: none;">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if (session('flash_message'))
                            <div class="alert alert-success fade in">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                {{ session('flash_message') }}
                            </div>
                        @endif
                    </div>
    {{-- Normal Login Form --}}
    <form id="password_login_form" method="POST" action="{{ url('/business/login') }}">
        @csrf

        <div class="form-group mb-3">
            <label for="email">Email Address</label>
            <input 
                type="email" 
                class="form-control" 
                id="email" 
                name="email" 
                value="{{ old('email') }}" 
                required 
                autofocus
                placeholder="Enter your registered email">
        </div>

        <div class="form-group mb-3">
            <label for="password">Password</label>
            <input 
                type="password" 
                class="form-control" 
                id="password" 
                name="password" 
                required 
                placeholder="Enter your password">
        </div>

        <!-- <div class="form-group mb-3">
            <label for="types_of_business">Type of Business</label>
            <select name="types_of_business" class="form-control" required>
                <option value="">-- Select --</option>
                <option value="Hotelor" {{ old('types_of_business')=='Hotelor' ? 'selected' : '' }}>Hotelor</option>
                <option value="Corporate" {{ old('types_of_business')=='Corporate' ? 'selected' : '' }}>Corporate</option>
                <option value="Broker" {{ old('types_of_business')=='Broker' ? 'selected' : '' }}>Broker</option>
            </select>
        </div> -->

        <div class="form-group mb-3">
            <label class="css-input switch switch-sm switch-primary">
                <input type="checkbox" name="remember"> <span></span> Remember Me
            </label>
        </div>

        <button type="submit" class="btn btn-primary btn-block">Login</button>

        <p class="mt-3 text-center">
            <a href="javascript:void(0)" onclick="toggleOtpLogin()">Login with OTP</a>
        </p>
    </form>

    {{-- Get OTP Form --}}
    <form id="get_otp_form" style="display:none;">
        @csrf
        <div class="form-group mb-3">
            <label for="otp_email">Email Address</label>
            <input 
                type="email" 
                class="form-control" 
                id="otp_email" 
                name="email" 
                required 
                placeholder="Enter your registered email">
        </div>

        <button type="submit" class="btn btn-primary btn-block">Get OTP</button>

        <p class="mt-3 text-center">
            <a href="javascript:void(0)" onclick="togglePasswordLogin()">Back to Password Login</a>
        </p>
    </form>

    {{-- Verify OTP Form --}}
{{-- Verify OTP Form --}}
<form id="verify_otp_form" action="{{ url('/business/otp-login') }}" method="POST" style="display:none;">
    @csrf

    <div class="form-group mb-3">
        <label for="verify_email">Email Address</label>
        <input 
            type="email" 
            class="form-control" 
            id="verify_email" 
            name="email" 
            required 
            placeholder="Enter your registered email">
    </div>

    <div class="form-group mb-3">
        <label for="otp">OTP</label>
        <input 
            type="text" 
            class="form-control" 
            id="otp" 
            name="otp" 
            maxlength="6" 
            required 
            placeholder="Enter the OTP">
    </div>

    <button type="submit" class="btn btn-primary btn-block">
        Verify OTP & Login
    </button>

    <p class="mt-3 text-center">
        <a href="javascript:void(0)" onclick="toggleGetOtp()">Resend OTP</a>
    </p>
</form>


 

</div>

<script>
    // UI toggle functions
    function toggleOtpLogin() {
        document.getElementById("password_login_form").style.display = "none";
        document.getElementById("get_otp_form").style.display = "block";
    }
    function togglePasswordLogin() {
        document.getElementById("get_otp_form").style.display = "none";
        document.getElementById("verify_otp_form").style.display = "none";
        document.getElementById("password_login_form").style.display = "block";
    }
    function toggleVerifyOtp() {
        document.getElementById("get_otp_form").style.display = "none";
        document.getElementById("verify_otp_form").style.display = "block";
    }
    function toggleGetOtp() {
        document.getElementById("verify_otp_form").style.display = "none";
        document.getElementById("get_otp_form").style.display = "block";
    }

    // Flash message helper
    function showAlert(message, type = "success") {
        document.getElementById("alert_box").innerHTML =
            `<div class="alert alert-${type}">${message}</div>`;
    }

    // Handle Get OTP AJAX
    // document.getElementById("get_otp_form").addEventListener("submit", function(e) {
    //     e.preventDefault();
    //     let email = document.getElementById("otp_email").value;

    //     fetch("{{ url('/business/sendOtp') }}", {
    //         method: "POST",
    //         headers: {
    //             "Content-Type": "application/json",
    //             "X-CSRF-TOKEN": "{{ csrf_token() }}"
    //         },
    //         body: JSON.stringify({ email })
    //     })
    //     .then(res => res.json())
    //     .then(data => {
    //         if (data.status === "success") {
    //             showAlert(data.message, "success");
    //             document.getElementById("verify_email").value = data.email;
    //             toggleVerifyOtp();
    //         } else {
    //             showAlert(data.message, "danger");
    //         }
    //     })
    //     .catch(err => {
    //         console.error(err);
    //         showAlert("Something went wrong. Try again.", "danger");
    //     });
    // });
// ---------------------------------
document.getElementById("get_otp_form").addEventListener("submit", function(e) {
    e.preventDefault();

    let email = document.getElementById("otp_email").value;

    fetch("{{ url('/business/sendOtp') }}", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({ email })
    })
    .then(async res => {
        let data = await res.json();

        if (res.ok) {
            // Success response from server
            if (data.status === "success") {
                showAlert(data.message, "success");
                document.getElementById("verify_email").value = data.email;
                toggleVerifyOtp();
            } else {
                // This can handle any server-side error with status 200
                showAlert(data.message || "Something went wrong.", "danger");
            }
        } else {
            // HTTP error (like 404 for user not found)
            showAlert(data.message || "User not found.", "danger");
        }
    })
    .catch(err => {
        console.error(err);
        showAlert("Something went wrong. Try again.", "danger");
    });
});

// ---------------------------------
    // Handle Verify OTP AJAX
    // document.getElementById("verify_otp_form").addEventListener("submit", function(e) {
    //     e.preventDefault();
    //     let email = document.getElementById("verify_email").value;
    //     let otp = document.getElementById("otp").value;

    //     fetch("{{ url('/business/otp-login') }}", {
    //         method: "POST",
    //         headers: {
    //             "Content-Type": "application/json",
    //             "X-CSRF-TOKEN": "{{ csrf_token() }}"
    //         },
    //         body: JSON.stringify({ email, otp })
    //     })
    //     .then(res => res.json())
    //     .then(data => {
    //         if (data.status === "success") {
    //             showAlert(data.message, "success");
    //             window.location.href = "{{ route('business.dashboard') }}";
    //         } else {
    //             showAlert(data.message, "danger");
    //         }
    //     })
    //     .catch(err => {
    //         console.error(err);
    //         showAlert("Something went wrong. Try again.", "danger");
    //     });
    // });
</script>
@endsection