@extends('layouts.customer')
@section('body_attributes')
data-help-page-type="secure_payments"
@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">

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
@endsection
@section('content')
<!-- Main Slider Section Start -->
    <!--welcome section-->
<section class="section">
  <div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">Home</a>
            </li>
            <li class="breadcrumb-item active">
                Shipping Information
            </li>
        </ol>
        <h4>Shipping Information</h4>
    </nav>
</div>
</section>

<section class="py-4">
    <div class="container-fluid px-md-5">
        <div class="row g-4">
            
            <!-- Sidebar Navigation Column -->
            <div class="col-lg-3">
                <div class="sidebar-card">
                    <div class="sidebar-title">Help Center</div>
                     <nav class="nav flex-column">
                      <a class="nav-link-custom" href="{{ route('customer.shipping') }}"><i class="bi bi-truck"></i> Shipping Information</a>
                      <a class="nav-link-custom" href="{{ route('customer.return-refund') }}"><i class="bi bi-arrow-counterclockwise"></i> Returns & Refunds</a>
                      <a class="nav-link-custom" href="{{ route('customer.faq') }}"><i class="bi bi-question-circle"></i> FAQs</a>
                      <a class="nav-link-custom active" href="{{ route('customer.secure') }}"><i class="bi bi-shield-check"></i> Secure Payments</a>
                      <a class="nav-link-custom" href="{{ route('customer.track-order') }}"><i class="bi bi-geo-alt"></i> Track Your Order</a>
                      <a class="nav-link-custom" href="{{ route('customer.contacts') }}"><i class="bi bi-headset"></i> Help Center</a>
                  </nav>
                </div>

                <div class="help-box">
                    <h5 class="fw-bold mb-2 fs-6">Need Help?</h5>
                    <p class="text-white-50 small mb-4">Our payment support desk is open 24/7 for you.</p>
                    <button class="btn btn-contact w-100"><i class="bi bi-chat-left-text me-2"></i> Contact Us</button>
                </div>
            </div>

            <!-- Main Content Area Column -->
            <div class="col-lg-9">
                
                <!-- Main Header Banner -->
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="header-banner">
                            <div class="d-flex align-items-center mb-2">
                                <i class="bi bi-shield-check-fill text-primary fs-2 me-3"></i>
                                <h2 class="mb-0 fw-bold h3" id="dynamicPageTitle">Secure Payment Options</h2>
                            </div>
                            <p class="text-muted mb-0 col-lg-10" id="dynamicPageDescription">
                                Loading...
                            </p>
                        </div>
                    </div>
                </div>

                <div id="dynamicTopCards" class="row g-3 mb-4">
                    <!-- Top cards will be injected here via JS -->
                </div>

                <div id="dynamicMainCards" class="row g-4 mb-4">
                    <!-- Main cards will be injected here via JS -->
                </div>

                <div id="dynamicBottomCards" class="row g-4 mb-5">
                    <!-- Bottom cards will be injected here via JS -->
                </div>

            </div>
        </div>

        <!-- Trust Badges Footer -->
    <div class="trust-footer">
        <div class="row g-4 justify-content-between">
            <div class="col-md-4 col-xl-2.5">
                <div class="badge-item">
                    <div class="badge-icon-box"><i class="bi bi-truck"></i></div>
                    <div>
                        <h6 class="badge-title">Fast & Reliable Delivery</h6>
                        <p class="badge-desc">Directly from Mangalore to your doorstep</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xl-2.5">
                <div class="badge-item">
                    <div class="badge-icon-box"><i class="bi bi-award"></i></div>
                    <div>
                        <h6 class="badge-title">100% Authentic Products</h6>
                        <p class="badge-desc">Genuine coastal & grocery products</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xl-2.5">
                <div class="badge-item">
                    <div class="badge-icon-box"><i class="bi bi-lock"></i></div>
                    <div>
                        <h6 class="badge-title">Secure Payments</h6>
                        <p class="badge-desc">Safe and encrypted transactions</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xl-2.5">
                <div class="badge-item">
                    <div class="badge-icon-box"><i class="bi bi-arrow-left-right"></i></div>
                    <div>
                        <h6 class="badge-title">Easy Returns</h6>
                        <p class="badge-desc">Hassle-free returns within policy</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xl-2.5">
                <div class="badge-item">
                    <div class="badge-icon-box"><i class="bi bi-headset"></i></div>
                    <div>
                        <h6 class="badge-title">Customer Support</h6>
                        <p class="badge-desc">Dedicated coastal helpline support</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>



              
  <!--welcome section-->
<!--welcome section-->

<!--welcome section-->
 
    <!-- Main Slider Section End -->

  <!-- Main Slider Section End -->
    
<!-- Main Slider Section End -->
    
    <!-- Footer Section Start -->
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('common/js/customer/help-pages.js') }}?v={{ time() }}" data-page-type="secure_payments"></script>
<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Secure.blade
Blade File: resources/views/customer/secure.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