<!DOCTYPE html>

<html
  lang="en"
  class="light-style layout-wide customizer-hide"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="<?php  echo base_url();?>assets/admin/main/"
  data-template="vertical-menu-template">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>Dashboard</title>

    <meta name="description" content="" />

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="<?php  echo base_url();?>assets/admin/admin_logo.png" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap"
      rel="stylesheet" />

    <!-- Icons -->
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/fonts/fontawesome.css" />
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/fonts/tabler-icons.css" />
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/fonts/flag-icons.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/css/rtl/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/libs/node-waves/node-waves.css" />
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/libs/typeahead-js/typeahead.css" />
    <!-- Vendor -->
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/libs/@form-validation/umd/styles/index.min.css" />

    <!-- Page CSS -->
    <!-- Page -->
    <link rel="stylesheet" href="<?php  echo base_url();?>assets/admin/main/vendor/css/pages/page-auth.css" />

    <!-- Helpers -->
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/js/helpers.js"></script>
    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/js/template-customizer.js"></script>
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="<?php  echo base_url();?>assets/admin/main/js/config.js"></script>
  </head>

  <body>
    <!-- Content -->

    <div class="authentication-wrapper authentication-cover authentication-bg" style='background:#065DAD' >
      <div class="authentication-inner row">
        <!-- /Left Text -->
        <div class="d-none IMG d-lg-flex col-lg-6 ">
          <img src="<?=base_url('assets/admin/img1.png')?>"   alt="">
        </div>
        <!-- /Left Text -->

        <!-- Login -->
        <div class="d-flex  col-lg-6 align-items-center p-sm-5 ">
          <div class="w-px-400 mx-auto glass-card">
            <!-- Logo -->
           
            <!-- /Logo -->
            <h3 class="mb-1 text-white text-center">Welcome to Admin!</h3>
            <p class="mb-4 text-white  text-center">Sign in to access your dashboard and manage </p>

            <form action="#" class="form-content" id="inputform" enctype="multipart/form-data">
                <!-- Add this inside the form before the mobile input -->
                <div class="mb-3">
                  <label class="form-label text-white">Login As *</label>
                  <select class="form-control" name="login_type" id="loginType" required >
                    <option value="">Select Role</option>
                    <option value="admin">Admin</option>
                    <!--<option value="sub_admin">Sub Admin</option>-->
                    <option value="tele_caller">Tele Caller</option>
                  </select>
                </div>
                
                <div class="mb-3">
                    <input  type="hidden"
                      class="form-control"
                      id="loginType"
                      name="login_type"
                      placeholder="Login Type"
                      value="admin" >
                </div>
                <div class="mb-3 form-password-toggle mt-3">
                <div class="d-flex justify-content-between">
                  <label class="form-label text-white" for="password">Enter Mobile</label>
                  
                </div>
                    <div class="input-group">
                  <input  type="tel"
                      class="form-control"
                      id="user"
                      name="mobile"
                      placeholder="Mobile"
                      autofocus  maxlength="10" pattern="[0-9]{10}" required placeholder="Mobile Number" oninput="this.value = this.value.replace(/[^0-9]/g, '')" >
                  <button type="button" class="btn btn-outline-danger submit border-white text-white " id="sendOtpBtn" >Send</button>
                </div>
                </div>
              <!--<div class="mb-3">-->
              <!--  <label for="email" class="form-label  text-white"> Mobile</label>-->
              <!--  <input-->
              <!--    type="tel"-->
              <!--    class="form-control"-->
              <!--    id="user"-->
              <!--    name="mobile"-->
              <!--    placeholder="Mobile"-->
              <!--    autofocus  maxlength="10" pattern="[0-9]{10}" required placeholder="Mobile Number" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />-->
              <!--</div>-->
              <!--<a href="#" class="form-forgot text-white submit" id="sendOtpBtn">Send OTP</a>-->
              <div class="mb-3 form-password-toggle mt-3">
                <div class="d-flex justify-content-between">
                  <label class="form-label text-white" for="password">Enter OTP</label>
                  
                </div>
                <div class="input-group input-group-merge">
                  <input
                    type="password"
                    id="password"
                    class="form-control"
                    name="otp"
                    placeholder="Otp" maxlength="4" name="otp" pattern="[0-9]{4}" required Placeholder="OTP" oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    />
                  <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                </div>
              </div>
        
              <button type="button" class="btn btn-danger w-100" id="saveBtn" > Sign in</button>
            </form>
            <!--<p class=' mt-3 text-center text-white'>Don't have an account ? <a href="<?=base_url('register')?>" class='text-white fw-bold'> Register Now</a></p>-->
          </div>
        </div>
        <!-- /Login -->
      </div>
    </div>

<style>
     .IMG{
            padding: 0rem 8rem;
        }
        
    .glass-card {
        
 padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 6px 3px rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}
</style>
    <!-- / Content -->

    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->

    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/jquery/jquery.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/popper/popper.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/js/bootstrap.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/node-waves/node-waves.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/hammer/hammer.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/i18n/i18n.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/typeahead-js/typeahead.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/js/menu.js"></script>

    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/@form-validation/umd/bundle/popular.min.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js"></script>
    <script src="<?php  echo base_url();?>assets/admin/main/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js"></script>

    <!-- Main JS -->
    <script src="<?php  echo base_url();?>assets/admin/main/js/main.js"></script>

    <!-- Page JS -->
    <script src="<?php  echo base_url();?>assets/admin/main/js/pages-auth.js"></script>
  </body>
</html>

<script>
$(document).ready(function () {
    $('#saveBtn').on('click', function () {
        let isValid = true;

        // Validate required fields
        $('#inputform [required]').each(function () {
            let value = $(this).val(); // Get the value
            if (Array.isArray(value)) {
                value = value.join(''); // Convert array to string
            }
            value = value ? value.toString().trim() : ''; // Convert value to string and trim

            if (value === '') {
                isValid = false;
                $(this).addClass('is-invalid'); // Add error styling
                showToast('Error', `${$(this).attr('placeholder')} is required`, 'error');
            } else {
                
                // Mobile Validation
                const mobileField = $('input[name="mobile"]');
                const mobile = mobileField.val().trim();
                const mobilePattern = /^[0-9]{10}$/; // RegEx for a 10-digit mobile number
                if (!mobilePattern.test(mobile)) {
                    isValid = false;
                    mobileField.addClass('is-invalid');
                    showToast('Error', 'Please enter a valid 10-digit mobile number', 'error');
                } else {
                    mobileField.removeClass('is-invalid').addClass('is-valid');
                }
                
                // OTP Validation
                const otpField = $('input[name="otp"]');
                const otp = otpField.val().trim();
                const otpPattern = /^[0-9]{4}$/; // New validation for 4-digit OTP
                if (!otpPattern.test(otp)) {
                    isValid = false;
                    otpField.addClass('is-invalid');
                    showToast('Error', 'Please enter a valid 4-digit otp', 'error');
                } else {
                    otpField.removeClass('is-invalid').addClass('is-valid');
                }
                
                $(this).removeClass('is-invalid'); // Remove error styling
                $(this).addClass('is-valid'); // Mark as valid
            }
        });
        

        if (isValid) {
            // If all fields are valid, submit the form
            const form = $('#inputform')[0];
            const formData = new FormData(form);

            $.ajax({
                url: '<?= base_url("admin/login/check_login"); ?>', // Your endpoint
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    const res = JSON.parse(response);
                    if (res.success) {
                        window.location.href = res.redirect_url; // ✅ dynamic redirect
                    } else {
                        showToast('Error', res.message, 'error');
                    }
                },
                error: function () {
                    showToast('Error', 'An unexpected error occurred.', 'error');
                },
            });
        } else {
            // Scroll to the first invalid field
            $('html, body').animate({
                scrollTop: $('.is-invalid:first').offset().top - 100,
            }, 500);
        }
    });

    // Remove validation feedback on input
    $('#teacherForm .form-control').on('input change', function () {
        if ($(this).val().trim() !== '') {
            $(this).removeClass('is-invalid').addClass('is-valid');
        } else {
            $(this).removeClass('is-valid').addClass('is-invalid');
        }
    });
});

</script>

<script>
$(document).ready(function () {
    $('#sendOtpBtn').on('click', function (e) {
        e.preventDefault();

        let mobileField = $('input[name="mobile"]');
        let loginTypeField = $('#loginType');
        let mobile = mobileField.val().trim();
        let loginType = loginTypeField.val().trim();
        let mobilePattern = /^[0-9]{10}$/;

        let isValid = true;

        // Validate login type
        if (loginType === '') {
            loginTypeField.addClass('is-invalid');
            showToast('Error', 'Please select login type', 'error');
            isValid = false;
        } else {
            loginTypeField.removeClass('is-invalid').addClass('is-valid');
        }

        // Validate mobile number
        if (!mobilePattern.test(mobile)) {
            mobileField.addClass('is-invalid');
            showToast('Error', 'Please enter a valid 10-digit mobile number', 'error');
            isValid = false;
        } else {
            mobileField.removeClass('is-invalid').addClass('is-valid');
        }

        if (!isValid) return;

        // Disable button while sending OTP
        $('#sendOtpBtn').text('Sending...').prop('disabled', true);

        // Send OTP via AJAX
        $.ajax({
            url: '<?= base_url("admin/login/send_otp"); ?>',
            type: 'POST',
            data: { mobile: mobile, login_type: loginType },
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    showToast('Success', response.message, 'success');
                } else {
                    showToast('Error', response.message, 'error');
                }
                $('#sendOtpBtn').text('Send OTP').prop('disabled', false);
            },
            error: function () {
                showToast('Error', 'Failed to send OTP. Try again.', 'error');
                $('#sendOtpBtn').text('Send OTP').prop('disabled', false);
            }
        });
    });

    // Clear validation styles on change
    $('#loginType').on('change', function () {
        if ($(this).val() !== '') {
            $(this).removeClass('is-invalid').addClass('is-valid');
        } else {
            $(this).removeClass('is-valid').addClass('is-invalid');
        }
    });
});
</script>

<!-- Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>


<script>
// Show toast using jQuery
function showToast(title, message, type) {
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: "3000",
    };

    if (type === 'success') {
        toastr.success(message, title);
    } else if (type === 'error') {
        toastr.error(message, title);
    } else if (type === 'info') {
        toastr.info(message, title);
    } else if (type === 'warning') {
        toastr.warning(message, title);
    }
}


</script>
