@extends('layouts.main')

@section('title', 'Your Cart')

@section('style')
  <style>
    .form-check-input:checked+.form-check-label {
      background-color: #e8f4ff;
      border-radius: 6px;
      padding: 8px 12px;
    }

    .card-title {
      border-bottom: 1px solid #ddd;
      padding-bottom: 8px;
    }

    .card {
      transition: 0.2s ease;
    }

    .card:hover {
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
    }

    .address-card {
      border: 1px solid #dee2e6;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 16px;
      background-color: #fff;
    }

    .address-card:hover {
      background-color: #f9f9f9;
    }

    .address-label {
      font-weight: 600;
      font-size: 15px;
    }

    .address-details {
      font-size: 14px;
      color: #555;
    }
  </style>
@endsection


@section('content')
  <div class="container my-5">
    @if (Auth::guest())
      <div class="alert alert-warning text-center">
        Please <a href="{{ route('login') }}" class="fw-bold">login</a> to proceed to checkout.
      </div>
    @else
      <div class="row">
        <!-- LEFT: ORDER SUMMARY -->
        <div class="col-md-7">
          <div class="order-summary border rounded p-3 shadow-sm bg-light">
            <h5 class="mb-3">Order Summary</h5>
            @php
              $mrp_total = 0;
              $sale_total = 0;
            @endphp
            @foreach ($cartItems as $item)
              @php
                $mrp_total += $item->product->mrp * $item->quantity;
                $sale_total += $item->product->sales_price * $item->quantity;
              @endphp
              <div class="cart-item d-flex justify-content-between border-bottom py-2">
                <div class="d-flex">
                  <img src="{{ url('images/products/' . $item->product->product_image_1) }}" width="100px" height="100px"
                    alt="{{ $item->product->product_name }}">
                  <div class="mx-2">
                    <strong>{{ $item->product->product_name }}</strong> × {{ $item->quantity }}
                    <br><small>Code: {{ $item->product->product_code }}</small>
                  </div>
                </div>
                <div>
                  <small><s>₹{{ amountFormat($item->product->mrp * $item->quantity) }}</s></small>
                  <br>
                  ₹{{ amountFormat($item->product->sales_price * $item->quantity) }}
                  <br>
                  <span class="text-success">
                    {{ $item->product->discount }}%&nbsp;Off
                  </span>
                </div>
              </div>
            @endforeach

            @php
              $initial_coins_to_use = 0;
              $coinValue = (float) getSetting('coin_value');
              if ($coinValue > 0 && Auth::user()->coins > 0) {
                  $maxCoinsForTotal = floor($totals['final_total'] / $coinValue);
                  $maxCoinsUserHas = Auth::user()->coins;
                  $initial_coins_to_use = min($maxCoinsForTotal, $maxCoinsUserHas);
              }
            @endphp

            <div class="cost-breakdown mt-4">
              <div class="d-flex justify-content-between">
                <span>Item Total</span><span>₹{{ amountFormat($mrp_total) }}</span>
              </div>
              <div class="d-flex justify-content-between">
                <span>Discount</span><span>-₹{{ amountFormat($mrp_total - $sale_total) }}</span>
              </div>
              <div class="d-flex justify-content-between">
                <span>Delivery Charges</span><span>₹{{ amountFormat($totals['delivery_charges']) }}</span>
              </div>
              <div class="d-flex justify-content-between">
                <span>Branding Charges</span><span>₹{{ amountFormat($totals['branding_charges']) }}</span>
              </div>
              <div class="d-flex justify-content-between text-success">
                <span>Coins Discount</span><span id="discount_display">-₹0.00</span>
              </div>
              <div class="d-flex justify-content-between text-success">
                <span>Coupon Discount <span id="remover_div"></span>
                </span>
                <span id="coupon_discount_display">-₹0.00</span>
              </div>
              <hr>
              <div class="d-flex justify-content-between fw-bold fs-5">
                <span>Total Payable</span><span
                  id="final_amount_display">₹{{ amountFormat($totals['final_total']) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- RIGHT: PAYMENT AND OPTIONS -->
        <div class="col-md-5">
          <form action="{{ route('placeorder') }}" method="post">
            @csrf
            <input type="hidden" name="address" value="{{ enc($addresses['id']) }}">
            <input type="hidden" name="coin_discount_amount" value="0">
            <input type="hidden" name="coupon_discount_amount" value="0">
            <input type="hidden" name="coins_used" value="0">
            <input type="hidden" name="final_total" value="0">

            <div class="payment-options border rounded-4 p-4 shadow-lg bg-white sticky-top"
              style="top: 100px; z-index: 111;">

              <div class="mb-3">
                <label for="coupon_code" class="form-label">Coupon Code</label>
                <div class="input-group">
                  <input type="text" name="coupon_code" id="coupon_code"
                    class="form-control @error('coupon_code') is-invalid @enderror" placeholder="Enter Coupon Code"
                    maxlength="16" style="text-transform: uppercase; letter-spacing: 2px;">
                  <button class="btn btn-primary" id="apply_coupon" type="button">Apply</button>
                </div>
                @error('coupon_code')
                  <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
              </div>

              <div class="mb-4 bg-warning-subtle border rounded-3 p-3 {{ $initial_coins_to_use == 0 ? 'd-none' : '' }}">
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <h5 class="mb-0">Use Coins</h5>
                  <div class="form-check form-switch">
                    <input class="form-check-input" value="1" name="use_coins" type="checkbox" id="useCoinsSwitch">
                  </div>
                </div>
                <div class="input-group">
                  <input type="text" class="form-control text-end fw-bold border-2"
                    value="{{ $initial_coins_to_use }}" name="coin_amount" id="coin_amount" readonly>
                  <span class="input-group-text bg-light border-2">
                    <img width="20px" src="{{ asset('assets/images/rewared_coin.png') }}" alt="Coin"
                      class="spin-y">
                  </span>
                </div>
              </div>

              <h5 class="mb-3">Select Payment Method</h5>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="payment_type" id="onlinePayment" value="Online"
                  checked>
                <label class="form-check-label" for="onlinePayment">
                  <i class="bi bi-credit-card me-1"></i> Online Payment (Razorpay)
                </label>
              </div>
              <div class="form-check mb-4">
                <input class="form-check-input" type="radio" name="payment_type" id="walletPayment" value="Wallet">
                <label class="form-check-label" for="walletPayment">
                  <i class="bi bi-wallet2 me-1"></i> Wallet Payment <small
                    class="text-success wallet_balance d-none"><br>
                    Balance : ₹{{ Auth::user()->wallet }}</small>
                </label>
              </div>

              <button class="btn btn-primary w-100 py-2 fs-5 rounded-pill">
                <i class="bi bi-lock-fill me-2"></i> Proceed to Pay
              </button>
            </div>
          </form>
        </div>
      </div>
    @endif
  </div>

  <!-- Modal -->
  <div class="modal fade" id="coupon_code_alert_modal" data-bs-backdrop="static" data-bs-keyboard="false"
    tabindex="-1" aria-labelledby="coupon_code_alert_modalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="coupon_code_alert_modalLabel">Alert!</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="coupon_code_alert_mass">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    // --- 1. Centralized State Management ---
    const checkout = {
      baseTotal: parseFloat(`{{ $totals['final_total'] }}`) || 0,
      coinValue: parseFloat(`{{ getSetting('coin_value') }}`) || 0,
      userCoinBalance: parseInt(`{{ Auth::user()->coins }}`, 10) || 0,
      coinsMaxUseSetting: parseFloat(`{{ getSetting('coins_max_use') }}`) || 0,
      coinsMaxUseType: `{{ getSetting('coins_max_use_by') }}`.trim(),
      useCoins: false,
      couponData: null,
      appliedCoinDiscount: 0,
      appliedCouponDiscount: 0,
      coinsToUse: 0,
      finalTotal: 0,
    };

    // --- 2. Main Calculation Function (IMPROVED LOGIC) ---
    function updateTotals() {
      // Reset values for a clean calculation
      checkout.appliedCouponDiscount = 0;
      checkout.appliedCoinDiscount = 0;
      checkout.coinsToUse = 0;
      checkout.finalTotal = checkout.baseTotal;

      // Step 1: Determine the maximum discount allowed to maintain a ₹1.00 minimum payment.
      const maxAllowedTotalDiscount = Math.max(0, checkout.baseTotal - 1.00);
      let remainingDiscountAllowance = maxAllowedTotalDiscount;

      // Step 2: Calculate and apply the Coupon discount first, respecting the discount limit.
      if (checkout.couponData) {
        let potentialCouponDiscount = 0;
        if (checkout.couponData.discount_type === 'percentage') {
          potentialCouponDiscount = checkout.baseTotal * (parseFloat(checkout.couponData.discount_amount) / 100);
        } else {
          potentialCouponDiscount = parseFloat(checkout.couponData.discount_amount);
        }

        // The actual discount is the lesser of its potential value or the total allowance.
        checkout.appliedCouponDiscount = Math.min(potentialCouponDiscount, remainingDiscountAllowance);

        // Reduce the available discount allowance for the next step.
        remainingDiscountAllowance -= checkout.appliedCouponDiscount;
      }

      // Step 3: Calculate and apply the Coin discount with the remaining allowance.
      if (checkout.useCoins && checkout.coinValue > 0) {
        // Calculate potential coin discount based on the total AFTER the coupon.
        const totalAfterCoupon = checkout.baseTotal - checkout.appliedCouponDiscount;

        const maxCoinsForTotal = Math.floor(totalAfterCoupon / checkout.coinValue);
        const maxCoinsUserHas = checkout.userCoinBalance;
        let maxCoinsBySetting = Infinity;
        if (checkout.coinsMaxUseSetting > 0) {
          if (checkout.coinsMaxUseType === '%') {
            const maxDiscountValue = (checkout.baseTotal * checkout.coinsMaxUseSetting) / 100;
            maxCoinsBySetting = Math.floor(maxDiscountValue / checkout.coinValue);
          } else {
            maxCoinsBySetting = parseInt(checkout.coinsMaxUseSetting, 10);
          }
        }

        const potentialCoinsToUse = Math.max(0, Math.min(maxCoinsForTotal, maxCoinsUserHas, maxCoinsBySetting));
        const potentialCoinDiscount = potentialCoinsToUse * checkout.coinValue;

        // The actual coin discount is the lesser of its potential value or what's left of the allowance.
        checkout.appliedCoinDiscount = Math.min(potentialCoinDiscount, remainingDiscountAllowance);

        // Recalculate the exact number of coins used based on the final, potentially-capped, discount.
        checkout.coinsToUse = checkout.coinValue > 0 ? Math.floor(checkout.appliedCoinDiscount / checkout.coinValue) : 0;
      }

      // Step 4: Calculate the final total based on the *actual* (and properly capped) applied discounts.
      checkout.finalTotal = checkout.baseTotal - checkout.appliedCouponDiscount - checkout.appliedCoinDiscount;

      updateDisplay();
    }


    // --- 3. Display Function (Handles UI updates) ---
    function updateDisplay() {
      const formatCurrency = (value) => `₹${value.toFixed(2)}`;
      $("#discount_display").html(`-${formatCurrency(checkout.appliedCoinDiscount)}`);
      $("#coupon_discount_display").html(`-${formatCurrency(checkout.appliedCouponDiscount)}`);
      $("#final_amount_display").html(formatCurrency(checkout.finalTotal));

      $('#coin_amount').val(checkout.coinsToUse);
      $('input[name="coin_discount_amount"]').val(checkout.appliedCoinDiscount.toFixed(2));
      $('input[name="coupon_discount_amount"]').val(checkout.appliedCouponDiscount.toFixed(2));
      $('input[name="coins_used"]').val(checkout.coinsToUse);
      $('input[name="final_total"]').val(checkout.finalTotal.toFixed(2));
    }

    // --- 4. Event Handlers ---
    $(document).ready(function() {
      // Handle Coin Switch changes
      $('#useCoinsSwitch').on('change', function() {
        checkout.useCoins = $(this).is(':checked');
        updateTotals();
      });

      // Handle Coupon Application
      $('#apply_coupon').on('click', function() {
        const couponCode = $("#coupon_code").val().trim();
        if (!couponCode) {
          showAlert('Please enter a valid coupon code!');
          return;
        }
        $.ajax({
          url: "{{ route('coupon.get') }}",
          type: "POST",
          data: {
            coupon_code: couponCode,
            _token: $("input[name='_token']").val()
          },
          success: (data) => {
            try {
              const response = JSON.parse(data);
              if (response.status === "s") {
                checkout.couponData = response.code_data;
                showCouponSuccess(couponCode, response.code_data);
                updateTotals();
              } else {
                const messages = {
                  f: 'Invalid Coupon code!',
                  e: 'This Coupon code has expired!',
                  u: 'This Coupon code has already been used!',
                  i: 'Invalid Coupon Code!',
                  n: 'Coupon Code Not Available',
                };
                showAlert("Invalid Coupon Code!");
                removeCoupon();
              }
            } catch (e) {
              showAlert('An error occurred while processing the response.');
            }
          },
          error: () => showAlert('Error communicating with the server.')
        });
      });

      // Handle payment type change to show/hide wallet balance
      $('input[name="payment_type"]').on('change', function() {
        if ($('#walletPayment').is(':checked')) {
          $('.wallet_balance').removeClass('d-none');
        } else {
          $('.wallet_balance').addClass('d-none');
        }
      });

      // Handle Coupon Removal
      $(document).on('click', '.remove_coupon', function() {
        removeCoupon();
      });

      function removeCoupon() {
        checkout.couponData = null;
        $("#coupon_code").val('');
        $("#remover_div").html("");
        updateTotals();
      }

      function showAlert(message) {
        $("#coupon_code_alert_mass").html(`<p class="text-danger text-center">${message}</p>`);
        $("#coupon_code_alert_modal").modal("show");
      }

      function showCouponSuccess(code, data) {
        $("#remover_div").html(`<button type="button" class="btn p-0 btn-sm text-danger mt-2 remove_coupon d-flex"
                    style="top:-10px;left : 0px;"><i class="fa-solid fa-xmark"></i>&nbsp;Remove&nbsp;Coupon</button>`);
        const successHtml = `
                <div class="text-center">
                    <h4 class="text-success mb-3"><i class="bi bi-check-circle-fill me-2"></i>${data.title}</h4>
                    <p class="text-muted">${data.description}</p>
                    <h5 class="mt-4 text-success fw-bold">
                        <i class="bi bi-ticket-perforated me-2"></i>${code.toUpperCase()} applied!
                    </h5>
                    <button type="button" class="btn btn-sm btn-outline-danger mt-2 remove_coupon">Remove</button>
                </div>`;
        $("#coupon_code_alert_mass").html(successHtml);
        $("#coupon_code_alert_modal").modal("show");
      }

      // Initial calculation on page load
      checkout.useCoins = $('#useCoinsSwitch').is(':checked');
      updateTotals();
    });
  </script>
@endsection