@extends("app")

@section('head_title', 'Log in to | '.getcong('site_name') )
@section('head_url', Request::url())

@section("content")
<div class="tp-page-head" >
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="page-header">
          <h1>Log in</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tp-breadcrumb">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li><a href="{{ URL::to('/') }}">Home</a></li>
          <li class="active">Log in</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<div class="main-container">
  <div class="container">
    <div class="row">
      <div class="col-md-12 tp-title-center">
        <h1>Log in to {{getcong('site_name')}}</h1>
      </div>
    </div>

    <div class="col-md-offset-3 col-md-6 well-box">
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active vendor-login" id="home">

          <div id="alert_box"></div>

          {{-- Password Login Form --}}
          <form id="password_login_form" method="POST" action="{{ url('login') }}">
              @csrf

              <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::has('flash_message'))
                    <div class="alert alert-success fade in">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        {{ Session::get('flash_message') }}
                    </div>
                @endif

                  @if(Session::has('flash_message_error'))
                      <div class="alert alert-danger fade in">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                          {{ Session::get('flash_message_error') }}
                      </div>
                  @endif
              </div>

              <div class="form-group">
                  <label class="control-label" for="email">Email<span class="required">*</span></label>
                  <input id="email" name="email" type="text" placeholder="E-Mail" class="form-control input-md" value="{{ old('email') }}">
              </div>

              <div class="form-group">
                  <label class="control-label" for="password">Password <span class="required">*</span></label>
                  <div style="position: relative;">
                      <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md">
                      <i class="fa fa-eye" id="toggleIcon" 
                         onclick="togglePassword()" 
                         style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #888;">
                      </i>
                  </div>
              </div>

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

              <div class="form-group">
                  <button id="submit" name="submit" class="btn tp-btn-primary tp-btn-lg">Log In</button>
                 
                </div>
<div class="d-flex justify-content-between w-100" style="display: flex;justify-content: space-between;">
    <div class="mb-0">
        <a href="javascript:void(0)" onclick="toggleOtpLogin()">Login with OTP</a>
</div>

    <div class="mb-0">
        <a href="{{ URL::to('register') }}">Register</a> | 
        <a href="javascript:void(0)" onclick="toggleOtpLogin()">Forgot Password?</a>
</div>
</div>

            </form>

          {{-- Get OTP Form --}}
          <form id="get_otp_form" style="display:none;">
              @csrf
              <div class="form-group">
                  <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 tp-btn-primary tp-btn-lg">Get OTP</button>

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

          {{-- Verify OTP Form --}}
          <form id="verify_otp_form" action="{{ url('/business/otp-login') }}" method="POST" style="display:none;">
              @csrf
              <div class="form-group">
                  <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">
                  <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 tp-btn-primary tp-btn-lg">Verify OTP & Login</button>

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

        </div>
      </div>
    </div>
  </div>
</div>

<script>
    function togglePassword() {
        const passwordInput = document.getElementById("password");
        const toggleIcon = document.getElementById("toggleIcon");
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            toggleIcon.classList.remove("fa-eye");
            toggleIcon.classList.add("fa-eye-slash");
        } else {
            passwordInput.type = "password";
            toggleIcon.classList.remove("fa-eye-slash");
            toggleIcon.classList.add("fa-eye");
        }
    }

    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";
    }

    function showAlert(message, type="success") {
        document.getElementById("alert_box").innerHTML = `<div class="alert alert-${type}">${message}</div>`;
        setTimeout(() => {
             document.getElementById("alert_box").innerHTML = `<div class="alert alert-${type} hide">${message}</div>`;
        }, 5000);
    }
    
    function resend_otp(){
        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 && data.status === "success"){
                showAlert(data.message, "success");
                document.getElementById("verify_email").value = data.email;
                toggleVerifyOtp();
            } else {
                showAlert(data.message || "Something went wrong", "danger");
            }
        }).catch(err => { showAlert("Something went wrong", "danger"); });
    }
    // Handle Get OTP
    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 && data.status === "success"){
                showAlert(data.message, "success");
                document.getElementById("verify_email").value = data.email;
                toggleVerifyOtp();
            } else {
                showAlert(data.message || "Something went wrong", "danger");
            }
        }).catch(err => { showAlert("Something went wrong", "danger"); });
    });
</script>
@endsection