@extends('layouts.customer')
@section('body_attributes')
style="background-color: #fff;"
@endsection
@section('head')
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Mangalore Stores</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/bootstrap.min.css') }}" >    
  <!-- Main Style -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/main.css') }}">
  <!-- Responsive Style -->
  <link rel="shortcut icon" href="{{ asset('Mangalore-Stores/assets/img/catagory/fruits/fav.png') }}" type="image/x-icon">
  <!-- Responsive Style -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/responsive.css') }}">
  <!-- Fonts -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/font-awesome.min.css') }}">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Mangalore Stores</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/bootstrap.min.css') }}" >    
  <!-- Main Style -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/main.css') }}">
  <!-- Responsive Style -->
  <link rel="shortcut icon" href="{{ asset('Mangalore-Stores/assets/img/catagory/fruits/fav.png') }}" type="image/x-icon">
  <!-- Responsive Style -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/responsive.css') }}">
  <!-- Fonts -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/font-awesome.min.css') }}">
  <!-- Icon -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/fonts/simple-line-icons.css') }}"> 
  <!-- Slicknav -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/slicknav.css') }}">
  <!-- Nivo Lightbox -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/nivo-lightbox.css') }}" > 
  <!-- Animate -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/animate.css') }}">
  <!-- Owl carousel -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/owl.carousel.css') }}">   

  <!-- Color CSS Styles  -->
  <link rel="stylesheet" type="text/css" href="{{ asset('Mangalore-Stores/assets/css/colors/default.css') }}" media="screen" /> 

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
@endsection
@section('customer_auth_minimal', '1')
@section('content')
<!-- Roof area Starts -->



  


<section class="section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="logo_login">
          <h5><a onclick="history.back()"> <i class="fa fa-long-arrow-left"></i> Back</a></h5>
        </div>
      </div>
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <div class="logo_login text-center">
          <img src="{{ asset('Mangalore-Stores/assets/img/logo.png') }}" width="100%">
        </div>
        <br>
        <div class="login_box">
            <div class="box_form">
              <form id="customerOtpLoginForm">
                <div class="row">
                  <div class="col-md-12">
                    <div class="login_header">
                      <h3>Authentication required</h3>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <p><span id="displayMobileNumber">+91...</span> <a href="{{ route('customer.login') }}">  Change </a></p>
                    <p>We’ve sent a One Time Password (OTP) to the mobile number above. Please enter it to complete verification.</p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <input type="text" id="otpInput" name="otp" placeholder="Enter 6-digit OTP" class="form-control" maxlength="6" inputmode="numeric">
                  </div>
                </div>
                
                <div class="row mt-3">
                  <div class="col-md-12 text-center">
                    <button type="submit" class="btn btn-change" style="width: 100%;"> Verify OTP</button>
                    <p class="mt-2"> <a href="javascript:void(0);" id="resendOtpBtn">Resend OTP</a> <span id="resendTimer" class="text-muted" style="display:none;">(60s)</span></p>
                  </div>
                </div>
              </form>
            </div>
            <hr>
            <div class="row text-center">
              <div class="col-md-12">
                <a href="{{ route('customer.signin') }}" class="btn btn-signin" id="loginWithPasswordBtn"> Signin with your password</a>
              </div>
            </div>
          </div>
      </div>
      <div class="col-md-4"></div>
    </div>
  </div>
</section>
@endsection
@push('scripts')

{{-- 
Page Script:
File: otpsignin.js
Location: public/common/js/customer/otpsignin.js
Used For: otpsignin page specific actions.
--}}
<script src="{{ asset('common/js/customer/otpsignin.js') }}"></script>


<!-- -->

<script src="{{ asset('common/js/customer/otpsignin.js') }}"></script>

<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Otpsignin.blade
Blade File: resources/views/customer/otpsignin.blade.php

1. JS File:
   public/common/js/api.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Shared customer API helper
   - Customer token and route helpers

2. JS File:
   public/common/js/customer/auth-check.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Customer auth/profile handling
   - Header auth text/profile link handling when the shared header is shown

3. JS Vendor Bundle:
   public/Mangalore-Stores/assets/js/*.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Shared customer UI plugins and legacy theme scripts

4. JS File:
   public/common/js/customer/legacy-pages.js
   Loaded from layouts/customer.blade.php
   Purpose:
   - Legacy shared customer behavior for non-migrated customer pages
===================================================== -->
@endpush