@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">
{{-- 
Page CSS:
File: checkout.css
Location: public/common/css/customer/checkout.css
Used For: checkout page specific layout and styling.
--}}
<link rel="stylesheet" href="{{ asset('common/css/customer/checkout.css') }}">
@endsection
@section('content')
<section class="section section_top account" style="background-color:#fff;">
    <div class="container-fluid order-box">
      
      <div class="offer_box" style="padding:10px 10px;">
        <div class="row">
          <div class="col-sm-7 col-xs-7 col-md-8 col-md-8 ">
            <div class="order_head_title">
              <h3>Payments</h3>
            </div>
          </div>
          <div class="col-sm-5 col-xs-5 col-md-4 col-md-4 ">
            <div class="wallet_btn text-right">
              <a href="javascript:void(0)" data-toggle="modal" data-target="#upi" class="btn order-view ">Add UPI </a>
            </div>
          </div>
        </div>
        <br>
        <div id="upi-list"></div>
      </div> <!-- End of first offer_box (UPI) -->

      <div class="offer_box" style="padding:10px 10px; margin-top:20px;">
        <div class="row">
          <div class="col-sm-7 col-xs-7 col-md-8 col-md-8 ">
            <div class="order_head_title">
              <h3>Credit / Debit Card</h3>
            </div>
          </div>
          <div class="col-sm-5 col-xs-5 col-md-4 col-md-4 ">
            <div class="wallet_btn text-right">
              <a href="javascript:void(0)" data-toggle="modal" data-target="#c-d-card" class="btn order-view ">Add Card </a>
            </div>
          </div>
        </div>
        <br>
        <div id="card-list"></div>
      </div> <!-- End of second offer_box (Card) -->

      <div class="offer_box" style="padding:10px 10px; margin-top:20px;">
        <div class="row">
          <div class="col-sm-7 col-xs-7 col-md-8 col-md-8 ">
            <div class="order_head_title">
              <h3>Add Gift Card</h3>
            </div>
          </div>
          <div class="col-sm-5 col-xs-5 col-md-4 col-md-4 ">
            <div class="wallet_btn text-right">
              <a href="javascript:void(0)" data-toggle="modal" data-target="#gift_card" class="btn order-view ">Add Gift Card </a>
            </div>
          </div>
        </div>
        <br>
        <div id="gift-list"></div>
      </div> <!-- End of third offer_box (Gift Card) -->
      
    </div>
  </section>

<!-- Modal -->
<div class="venue_box_33">
  <div class="modal fade" id="upi" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add UPI</h4>
        </div>
        <div class="modal-body">
          <div class="box_form">
            <form id="addUpiForm">
              <div class="row">
                <div class="col-md-12">
                  <p><img class="upi_img" src="{{ asset('Mangalore-Stores/assets/img/UPI.gif') }}"><b>UPI</b></p>
                    <p> Pay by any UPI App</p>
                </div>
                <div class="col-md-5">
                  <div class="link_upi">
                    <a href="">Verify</a>
                    <input type="text" id="upiId" name="upiId" placeholder="Enter UPI Id" class="form-control">
                  </div>
                </div>
                <div class="col-sm-1"></div>
                <div class="col-sm-3">
                  <button type="submit" class="btn btn-change">Add UPi</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal Close -->


<!-- Modal -->
<div class="venue_box_33">
  <div class="modal fade" id="c-d-card" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Credit / Debit / ATM Card</h4>
        </div>
        <div class="modal-body">
          <div class="box_form">
            <form id="addCardForm">
              <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-12">
                      <input type="text" id="cardName" name="cardName" placeholder="Enter Name" class="form-control">
                    </div>
                    <div class="col-md-12">
                      <input type="text" id="cardNumber" name="cardNumber" placeholder="Enter Card Number" class="form-control" maxlength="16">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-8 col-xs-8 col-md-8 col-lg-8">
                      <div class="border_input">
                        <h4>Valid Thru</h4>
                        <select id="cardMonth" name="cardMonth">
                          <option value="">MM</option>
                          <option value="01">01</option>
                          <option value="02">02</option>
                          <option value="03">03</option>
                          <option value="04">04</option>
                          <option value="05">05</option>
                          <option value="06">06</option>
                          <option value="07">07</option>
                          <option value="08">08</option>
                          <option value="09">09</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                        </select>
                        <select id="cardYear" name="cardYear">
                          <option value="">YY</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4">
                      <input type="text" id="cardCvv" name="cardCvv" placeholder="CVV" class="form-control" maxlength="3">
                    </div>
                    
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                       <ul class="payment_icon pop_box_img">          
                          <li><a href=""><img src="{{ asset('Mangalore-Stores/assets/img/payment/1.png') }}"></a></li>
                          <li><a href=""><img src="{{ asset('Mangalore-Stores/assets/img/payment/2.png') }}"></a></li>
                          <li><a href=""><img src="{{ asset('Mangalore-Stores/assets/img/payment/3.png') }}"></a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                      <button type="submit" class="btn btn-change">Enter Card Details</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal Close -->

<!-- Modal -->
<div class="venue_box_33">
  <div class="modal fade" id="gift_card" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add Gift Card</h4>
        </div>
        <div class="modal-body">
         <div class="box_form">
            <form id="addGiftCardForm">
              <div class="row">
                <div class="col-md-5">
                  <div class="link_upi">
                    <input type="text" id="giftCardNumber" name="giftCardNumber" placeholder="Voucher Number" class="form-control">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="link_upi">
                    <input type="text" id="giftCardPin" name="giftCardPin" placeholder="Voucher Pin" class="form-control">
                  </div>
                </div>
                <div class="col-md-3 text-right">
                  <button type="submit" class="btn btn-change">Apply</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal Close -->

</div>
<!-- Main contetn End -->
@endsection
@push('scripts')
<script src="{{ asset('common/js/customer/checkout.js') }}"></script>
<script src="{{ asset('common/js/customer/payment-methods.js') }}"></script>
<!-- =====================================================
JS FILE CONNECTIONS FOR THIS CUSTOMER BLADE FILE
Page: Customer Checkout.blade
Blade File: resources/views/customer/checkout.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/checkout.js
   Loaded from this Blade file
   Purpose:
   - Load checkout cart and address data
   - Place customer orders through API
   - Initiate online payment when configured
   - Prevent duplicate checkout submits

5. 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