@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-sm-7 col-xs-7 col-md-8 col-md-8 ">
          <div class="order_head_title">
            <h3>Referal</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-12">
          <div class="referal_box">
            <h4>Invite friend to get <i class="fa fa-inr"></i> <span id="refBonus">200</span> </h4>
            <p>Invite friends to Mangalore Stores and get <i class="fa fa-inr"></i> <span id="refBonusDesc">200</span> when your friend makes their first order.</p>

            <h4>Copy Code <b id="referralCode">LOADING...</b> <button class="btn btn-copy" id="btnCopyReferral" onclick="window.msNotify('Referral API is coming soon!', 'info')"><i class="fa fa-clone" aria-hidden="true"></i></button></h4>
            <button href="#" class="btn order-view" id="btnShareReferral" onclick="window.msNotify('Referral API is coming soon!', 'info')">Invite</button>
            <hr>

            <div class="row" style="margin-top: 30px;">
              <div class="col-md-12 text-center" style="padding: 50px 0; background: #fafafa; border-radius: 8px;">
                  <!-- TODO: Integrate with backend API to fetch real referral history once available -->
                  <i class="fa fa-users" style="font-size: 48px; color: #ccc; margin-bottom: 20px;"></i>
                  <h4 style="color: #666;">No Referrals Yet</h4>
                  <p style="color: #999;">Your referral history will appear here once you invite friends.</p>
              </div>
            </div>

          </div>
        </div>
      </div>
          
      
    </div>
  </section>
@endsection
@push('scripts')

{{-- 
Page Script:
File: referral.js
Location: public/common/js/customer/referral.js
Used For: referral page specific actions.
--}}
<script src="{{ asset('common/js/customer/referral.js') }}"></script>
<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Referral.blade
Blade File: resources/views/customer/referral.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 File:
   public/common/js/customer/referral.js
   Loaded here locally
   Purpose:
   - Display Referral Program details and empty states
===================================================== -->
<script src="{{ asset('common/js/customer/referral.js') }}"></script>
@endpush