@extends('layouts.customer')
@section('auth_type', 'customer')
@section('body_attributes')

@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>

    <!-- 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/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">
@endsection
@section('content')
<section class="section section_top account" style="background-color:#fff;">
    <div class="container order-box">
      <div class="row">
        <div class="col-sm-7 col-xs-7 col-md-8 col-md-8 ">
          <div class="order_head_title">
            <h3>Settings</h3>
          </div>
        </div>
        <div class="col-sm-5 col-xs-5 col-md-4 col-md-4 ">
          <div class="wallet_btn text-right">
            
          </div>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
          <div class="box_form">
            <form id="addressForm">
              <div class="row">
                <div class="col-md-12">
                  <div class="location_add">
                    <label><input type="radio" class="radio-inline" name="type" value="Home" checked><span class="outside"><span class="inside"></span></span>Home</label>
                    <label><input type="radio" class="radio-inline" name="type" value="Office"><span class="outside"><span class="inside"></span></span>Office</label>
                    <label><input type="radio" class="radio-inline" name="type" value="Venue"><span class="outside"><span class="inside"></span></span>Venue</label>
                    <label><input type="radio" class="radio-inline" name="type" value="Others"><span class="outside"><span class="inside"></span></span>Others</label>
                  </div>
                </div>
                <div class="col-md-12">
                  <input type="text" id="fullName" name="fullName" data-error-key="name" placeholder="Enter full name" class="form-control" value="{{ auth('customer')->user()->name ?? '' }}" autocomplete="name">
                  <small id="fullNameError" style="color:red; display:none;">Full Name is required</small>
                </div>
                <div class="col-md-12">
                  <div class="mobile_number">
                    <label for="phoneNumber">
                      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/330px-Flag_of_India.svg.png" alt="Indian Flag" class="flag">
                      +91
                    </label>
                    <input type="tel" id="phoneNumber" name="phoneNumber" data-error-key="mobile" placeholder="10 digit mobile number" value="{{ auth('customer')->user()->mobile ?? '' }}" inputmode="numeric" maxlength="10" autocomplete="tel">
                  </div>
                  <small id="phoneNumberError" style="color:red; display:none; margin-top:5px;">Please enter a valid 10 digit Indian mobile number</small>
                </div>
                <div class="col-md-12" style="margin-top: 15px;">
                  <input type="text" id="email" name="email" placeholder="example@gmail.com" class="form-control" value="{{ auth('customer')->user()->email ?? '' }}" autocomplete="email">
                  <small id="emailError" style="color:red; display:none;">Please enter a valid email address containing @</small>
                </div>
                <div class="col-md-12" style="margin-top: 15px;">
                  <input type="text" id="flat" name="flat" data-error-key="house_no" placeholder="Enter house / flat / building" class="form-control">
                  <small id="flatError" style="color:red; display:none;">This field is required</small>
                </div>
                <div class="col-md-12" style="margin-top: 15px;">
                  <input type="text" id="area" name="area" data-error-key="street" placeholder="Enter area / street" class="form-control">
                  <small id="areaError" style="color:red; display:none;">This field is required</small>
                </div>
                <div class="col-md-12" style="margin-top: 15px;">
                  <input type="text" id="landmark" name="landmark" data-error-key="landmark" placeholder="Enter nearby landmark" class="form-control">
                  <small id="landmarkError" style="color:red; display:none;">Landmark is required</small>
                </div>
                <div class="col-md-12" style="margin-top: 15px;">
                  <input type="text" id="pincode" name="pincode" data-error-key="pincode" placeholder="Enter 6 digit pincode" class="form-control" inputmode="numeric" maxlength="6">
                  <small id="pincodeError" style="color:red; display:none;">Pincode is required</small>
                </div>
                <div class="col-md-6" style="margin-top: 15px;">
                  <select type="text" id="state" name="state" data-error-key="state" placeholder="State" class="form-control">
                    <option value="">Select State</option>
                    <option value="Andhra Pradesh">Andhra Pradesh</option>
                    <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                    <option value="Assam">Assam</option>
                    <option value="Bihar">Bihar</option>
                    <option value="Chhattisgarh">Chhattisgarh</option>
                    <option value="Goa">Goa</option>
                    <option value="Gujarat">Gujarat</option>
                    <option value="Haryana">Haryana</option>
                    <option value="Himachal Pradesh">Himachal Pradesh</option>
                    <option value="Jharkhand">Jharkhand</option>
                    <option value="Karnataka">Karnataka</option>
                    <option value="Kerala">Kerala</option>
                    <option value="Maharashtra">Maharashtra</option>
                    <option value="Madhya Pradesh">Madhya Pradesh</option>
                    <option value="Manipur">Manipur</option>
                    <option value="Meghalaya">Meghalaya</option>
                    <option value="Mizoram">Mizoram</option>
                    <option value="Nagaland">Nagaland</option>
                    <option value="Odisha">Odisha</option>
                    <option value="Punjab">Punjab</option>
                    <option value="Rajasthan">Rajasthan</option>
                    <option value="Sikkim">Sikkim</option>
                    <option value="Tamil Nadu">Tamil Nadu</option>
                    <option value="Tripura">Tripura</option>
                    <option value="Telangana">Telangana</option>
                    <option value="Uttar Pradesh">Uttar Pradesh</option>
                    <option value="Uttarakhand">Uttarakhand</option>
                    <option value="West Bengal">West Bengal</option>
                  </select>
                  <small id="stateError" style="color:red; display:none;">State is required</small>
                </div>
                <div class="col-md-6" style="margin-top: 15px;">
                  <select type="text" id="city" name="city" data-error-key="city" placeholder="City" class="form-control">
                    <option value="">Select City</option>
                    <option value="Bangalore">Bangalore</option>
                    <option value="Belgaum">Belgaum</option>
                    <option value="Bellary">Bellary</option>
                    <option value="Bijapur">Bijapur</option>
                    <option value="Chikmagalur">Chikmagalur</option>
                    <option value="Coorg">Coorg</option>
                    <option value="Davangere">Davangere</option>
                    <option value="Dharwad">Dharwad</option>
                    <option value="Gangavathi">Gangavathi</option>
                    <option value="Gulbarga">Gulbarga</option>
                    <option value="Hassan">Hassan</option>
                    <option value="Hospet">Hospet</option>
                    <option value="Hubli">Hubli</option>
                    <option value="Karwar">Karwar</option>
                    <option value="Kolar">Kolar</option>
                    <option value="Mangalore">Mangalore</option>
                    <option value="Manipal">Manipal</option>
                    <option value="Murudeshwar">Murudeshwar</option>
                    <option value="Mysore">Mysore</option>
                    <option value="Sandur">Sandur</option>
                    <option value="Shimoga">Shimoga</option>
                    <option value="Udupi">Udupi</option>
                  </select>
                  <small id="cityError" style="color:red; display:none;">City is required</small>
                </div>
                <div class="col-md-12">
                  <!-- Checkbox -->
                  <div class="alt_de">
                    <label class="check" for="checkbox"> <i class="fa fa-plus"></i> Alternative Details  <div class="tooltip-container">
                      <span class="icon-info"></span>
                      <div class="tooltip">
                        <p>Delivery fee Breakup for this offer</p>
                      </div>
                    </div>
                     
                      <input type="checkbox" id="checkbox" checked="checked" name="is_name">
                      <span class="checkmark"></span>
                    </label>
                  </div>
                  <!-- Div to show/hide -->
                  <div id="hiddenDiv" >
                    <div class="">
                      <div class="col-md-12">
                        <input type="text" id="alternateName" name="alternateName" data-error-key="alternate_name" placeholder="Enter alternate full name" class="form-control" autocomplete="name">
                        <small id="alternateNameError" style="color:red; display:none;">Full Name is required</small>
                      </div>
                      <div class="col-md-12">
                        <div class="mobile_number">
                          <label for="alternatePhoneNumber">
                            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/330px-Flag_of_India.svg.png" alt="Indian Flag" class="flag">
                            +91
                          </label>
                          <input type="tel" id="alternatePhoneNumber" name="alternatePhoneNumber" data-error-key="alternate_mobile" placeholder="10 digit mobile number" inputmode="numeric" maxlength="10" autocomplete="tel">
                        </div>
                        <small id="alternatePhoneNumberError" style="color:red; display:none; margin-top:5px;">Please enter a valid 10 digit Indian mobile number</small>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <button type="submit" id="saveAddressBtn" class="btn btn-change btn-size"> Add Address</button>
                </div>
                
              </div>
            </form>
          </div>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
  </section>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('Mangalore-Stores/assets/js/user.js') }}"></script>

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

<script src="{{ asset('Mangalore-Stores/assets/js/address-form.js') }}"></script>
<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Settings.blade
Blade File: resources/views/customer/settings.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