@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-fluid order-box">
      
      <div class="row">
        <div class="col-md-6">
          <div class="">
            <div class="">
              <h2>My Account : I'M  <span data-customer-name></span></h2>
            </div>
          </div>
        </div>

        <div class="col-md-6 text-right">
          <button
              type="button"
              id="customerLogoutBtn"
              class="btn-group"
              data-customer-logout>
             Logout 
          </button>
        </div>
      </div>
      
      <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.wallet') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/17.png') }}">
              <h4> Wallet</h4>
              <p>Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box" style="cursor: pointer;">
            <a href="#" data-toggle="modal" data-target="#cart">
              <img src="{{ asset('Mangalore-Stores/assets/img/gifts/icon/3.png') }}">
              <h4>Cart</h4>
              <p data-account-summary="cart">0 cart items</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.orders') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/11.png') }}">
              <h4>Your Orders</h4>
              <p data-account-summary="orders">Track, return, or buy things again</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.wishlist') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/18.png') }}">
              <h4>Wishlist</h4>
              <p data-account-summary="wishlist">Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.profile') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/12.png') }}">
              <h4>Login & security</h4>
              <p data-account-summary="security">Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.address') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/13.png') }}">
              <h4>Your Addresses</h4>
              <p data-account-summary="addresses">Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.payment') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/14.png') }}">
              <h4>Payment options</h4>
              <p>Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.contacts') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/15.png') }}">
              <h4>Contact us</h4>
              <p>Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.coupons') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/16.png') }}">
              <h4> Coupons</h4>
              <p>Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
          <div class="my_account_box">
            <a href="{{ route('customer.referral') }}">
              <img src="{{ asset('Mangalore-Stores/assets/img/icon/19.png') }}">
              <h4> Referral </h4>
              <p>Edit addresses for orders and gifts</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>







</div>
<!-- Main contetn End -->



<!-- Footer Section Start -->
@endsection
@push('scripts')

{{-- 
Page Script:
File: my-account.js
Location: public/common/js/customer/my-account.js
Used For: my-account page specific actions.
--}}
<script src="{{ asset('common/js/customer/my-account.js') }}"></script>
<script src="{{ asset('common/js/customer/my-account.js') }}"></script>
{{-- =====================================================
JS FILE CONNECTIONS FOR THIS BLADE FILE
Page: Customer My Account
Blade File: resources/views/customer/my-account.blade.php

1. JS File:
   public/common/js/customer/my-account.js
   Load Type:
   - Pushed via @stack('scripts') in customer layout.
   Purpose:
   - Fetch customer profile and populate account summary cards.
   - Update cart, orders, wishlist, and address counts.
   - Customer logout with SweetAlert confirmation.
   - Token authentication check.

2. Inherited from customer layout (layouts/customer.blade.php):
   - public/common/js/api.js (Shared API client)
   - public/common/js/customer/auth-check.js (Auth guard)
   - public/common/js/customer/header-dynamic.js (Header state, cart sidebar)
   - public/common/js/customer/legacy-pages.js (Legacy dynamic behavior)
   - SweetAlert2 plugin
===================================================== --}}
@endpush