@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>
      @return
    @else
      <div class="row">
        <!-- LEFT -->
        <div class="col-md-7">
          <!-- ORDER SUMMARY -->
          <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="">
                  <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
              $coinValue = getSetting('coin_value');
              $coins_max_use = (float) getSetting('coins_max_use');
              $coins_max_use_by = trim(getSetting('coins_max_use_by'));
              $coin_discount = 0;
              if ($coinValue > 0) {
                  $maxDiscountAllowed = max(0, $totals['final_total'] - 1);
                  $coinsToUse = floor($maxDiscountAllowed / $coinValue);

                  // Apply coins_max_use limit
                  if ($coins_max_use_by === '%') {
                      $maxBySetting = floor(($totals['final_total'] * $coins_max_use) / 100);
                  } else {
                      $maxBySetting = (int) $coins_max_use;
                  }

                  $coinsToUse = min($coinsToUse, $maxBySetting);
                  $coin_discount = $coinsToUse * $coinValue;
              } else {
                  $coinsToUse = 0;
              }
            @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">
                <span>Coins Discount</span><span id="discount_display">-₹{{ amountFormat($coin_discount) }}</span>
              </div>
              <div class="d-flex justify-content-between">
                {{-- <span>GST</span><span>₹{{ $totals['gst'] }}</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'] - $coin_discount) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- RIGHT -->
        <div class="col-md-5">
          <form action="{{ route('placeorder') }}" method="post">
            @csrf
            <input type="hidden" name="amount" value="{{ enc($totals['final_total']) }}">
            <input type="hidden" name="address" value="{{ enc($addresses['id']) }}">

            <div class="payment-options border rounded-4 p-4 shadow-lg bg-white sticky-top"
              style="top: 100px; z-index: 111;">
              <div class="mb-4 bg-warning-subtle border rounded-3 p-3 {{ $coinsToUse == 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"
                      checked="false">
                  </div>
                </div>

                <div class="input-group">

                  <input type="text" class="form-control text-end fw-bold border-2" value="{{ $coinsToUse }}"
                    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"><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>
@endsection

@section('script')
  <script>
    const final_total = parseFloat(`{{ $totals['final_total'] }}`);

    const coin_value = parseFloat(`{{ getSetting('coin_value') }}`);

    const available_coins = parseInt(`{{ auth()->user()->coins }}`);

    const coins_max_use = parseFloat(`{{ getSetting('coins_max_use') }}`);

    const coins_max_use_by = `{{ getSetting('coins_max_use_by') }}`;


    function coins_discount() {
      if ($('#coin_amount').val().slice(-1) === ".") return;

      let useCoins = $('#useCoinsSwitch').is(':checked');

      if (!useCoins) {
        $('#discount_display').text(`- ₹0.00`);
        $('#final_amount_display').text(`₹${final_total}`);
        return;
      }

      let enteredCoins = parseInt($('#coin_amount').val() || 0);

      // Step 1: Limit to available coins
      enteredCoins = Math.min(enteredCoins, available_coins);

      // Step 2: Max discount allowed (leave ₹1 minimum)
      let maxDiscountAllowed = Math.max(0, final_total - 1);
      let maxUsableCoins = Math.floor(maxDiscountAllowed / coin_value);

      // Step 3: Apply setting limit
      let maxBySetting = 0;
      if (coins_max_use_by === '%') {
        maxBySetting = Math.floor((final_total * coins_max_use) / 100);
      } else {
        maxBySetting = parseInt(coins_max_use);
      }

      let coinsToUse = Math.min(enteredCoins, maxUsableCoins, maxBySetting);

      // Step 4: Final calculations
      let discount = parseFloat((coinsToUse * coin_value).toFixed(2));
      let payableAmount = parseFloat((final_total - discount).toFixed(2));

      // Step 5: Update DOM
      $('#coin_amount').val(coinsToUse);
      $('#discount_display').text(`- ₹${discount}`);
      $('#final_amount_display').text(`₹${payableAmount}`);
    }

    // Trigger function when coin input changes
    $(document).on('keyup', "#coin_amount", coins_discount);
    $(document).on('change', "#useCoinsSwitch", coins_discount);


    $(document).ready(() => {
      coins_discount();
    })

    $(document).ready(function() {
      $('input[name="payment_type"]').on('change', function() {
        if ($('#walletPayment').is(':checked')) {
          $('.wallet_balance').removeClass('d-none');
        } else {
          $('.wallet_balance').addClass('d-none');
        }
      });

      // Trigger once on page load in case it's pre-selected
      $('input[name="payment_type"]:checked').trigger('change');
    });
  </script>
@endsection