@extends('layouts.main')

@section('style')
  <style>
    .product-wrapper {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      padding: 2rem;
    }

    .product-image {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 1rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-image img {
      max-height: 220px;
      object-fit: contain;
    }

    .preset-buttons .btn {
      margin: 0.25rem;
      border-radius: 20px;
    }

    .product-tabs {
      margin-top: 2rem;
    }
  </style>

  <style>
    .glass-card {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;
    }

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

    .theme-img:hover {
      border: 2px solid #0d6efd;
      transform: scale(1.05);
      transition: all 0.2s ease-in-out;
      cursor: pointer;
    }

    .form-floating>.form-control:focus {
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
    }

    .delivery-option {
      padding: 1px 5px;
      border: 1px solid #dee2e6;
      border-radius: 0.25rem;
      background: linear-gradient(135deg, #f9f9f9, #ffffff);
      color: #333;
      font-weight: 500;
      transition: all 0.2s ease-in-out;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }

    .btn-check:checked+.delivery-option {
      background: #0d6efd;
      color: white;
      border-color: #0d6efd;
      box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
    }

    .delivery-option:hover {
      background-color: #f1f1f1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
  </style>
@endsection


@section('content')
  <div class="container py-4">

    <div class="row product-wrapper">
      <!-- Left: Product Image -->
      <div class="col-md-5 mb-4 mb-md-0 product-image">
        <img src="{{ $woohoo_product['images']['small'] ?? asset('assets/images/defaultimage.jpg') }}"
          onerror="this.src='{{ asset('assets/images/defaultimage.jpg') }}';" class="img-fluid"
          alt="{{ $woohoo_product['name'] }}">
      </div>

      <!-- Right: Product Info -->
      <div class="col-md-7">
        <h3 class="fw-bold mb-2">{{ $woohoo_product['name'] }}</h3>
        <p class="text-muted mb-1">SKU: {{ $woohoo_product['sku'] }}</p>
        <p class="text-muted">Instant Delivery via Email/SMS</p>

        <!-- Price Selection -->
        <div class="my-3">
          <label class="form-label fw-semibold">Select Denomination</label>
          <input type="range" class="form-range" id="amountSlider" min="{{ $woohoo_product['price']['min'] }}"
            max="{{ $woohoo_product['price']['max'] }}" step="1" oninput="amountOutput.value = this.value">
          <div class="d-flex justify-content-between small text-muted mb-2">
            <span>Min: {{ $woohoo_product['currency']['symbol'] }}{{ $woohoo_product['price']['min'] }}</span>
            <span>Max: {{ $woohoo_product['currency']['symbol'] }}{{ $woohoo_product['price']['max'] }}</span>
          </div>
          <div class="input-group" style="max-width: 200px;">
            <span class="input-group-text">{{ $woohoo_product['currency']['symbol'] ?? '₹' }}</span>
            <input type="number" id="amountOutput" class="form-control text-center">
          </div>
        </div>

        <!-- Preset Buttons -->
        @php
          $min = (int) $woohoo_product['price']['min'];
          $max = (int) $woohoo_product['price']['max'];
          $range = $max - $min;
          $steps = min(10, $range); // max 10 buttons
          $stepValue = $steps > 1 ? round($range / ($steps - 1)) : $range;

          $dynamicAmounts = [];
          for ($i = 0; $i < $steps; $i++) {
              $val = $min + $i * $stepValue;
              if ($val <= $max) {
                  $dynamicAmounts[] = $val;
              }
          }
        @endphp

        <!-- Preset Buttons -->
        <div class="preset-buttons mb-3">
          @foreach ($dynamicAmounts as $val)
            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn rounded"
              data-amt="{{ $val }}">
              ₹{{ $val }}
            </button>
          @endforeach
        </div>
      </div>
    </div>

    @if ($woohoo_product['rewards_description'] != '')
    @endif
    <div class="my-3">

    </div>

    <div class="my-2">
      <form id="woohoo_form" action="{{ route('woohoo.fill_payment_details') }}" method="POST">
        <input type="hidden" value="{{ $woohoo_product['sku'] }}" name="sku">
        @csrf



        <div class="glass-card p-4 rounded-4 shadow-sm">
          <div class="row">
            <div class="col-md-6">
              {{-- order mode --}}
              <div class="mb-4">
                <label class="form-label fw-bold fs-6 text-dark-emphasis mb-2">Choose Order Mode</label>
                <div class="d-flex gap-3 flex-wrap">
                  <!-- Gift -->
                  <input type="radio" class="btn-check" name="orderMode" value="GIFT" id="modegift"
                    autocomplete="off" checked>
                  <label class="delivery-option shadow-sm" for="modegift">
                    <i class="bi bi-chat-dots-fill me-2 text-success"></i> Gift
                  </label>
                  <!-- Self -->
                  <input type="radio" class="btn-check" name="orderMode"
                    user_data = "{{ auth()->user()->name ?? '' }},{{ auth()->user()->mobile ?? '' }},{{ auth()->user()->email ?? '' }}"
                    value="SELF" id="modeself" autocomplete="off">
                  <label class="delivery-option shadow-sm" for="modeself">
                    <i class="bi bi-envelope-fill me-2 text-primary"></i> Self
                  </label>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <!-- Delivery Mode -->
              <div class="mb-4">
                <label class="form-label fw-bold fs-6 text-dark-emphasis mb-2">Choose Delivery Mode</label>
                <div class="d-flex gap-3 flex-wrap">
                  <!-- Email -->
                  <input type="radio" class="btn-check" name="delivery_mode" value="EMAIL" id="modeEmail"
                    autocomplete="off">
                  <label class="delivery-option shadow-sm" for="modeEmail">
                    <i class="bi bi-envelope-fill me-2 text-primary"></i> Email
                  </label>

                  <!-- SMS -->
                  <input type="radio" class="btn-check" name="delivery_mode" value="SMS" id="modeSMS"
                    autocomplete="off" checked>
                  <label class="delivery-option shadow-sm" for="modeSMS">
                    <i class="bi bi-chat-dots-fill me-2 text-success"></i> SMS
                  </label>

                  <!-- Both -->
                  <input type="radio" class="btn-check" name="delivery_mode" value="ANY" id="modeBoth"
                    autocomplete="off">
                  <label class="delivery-option shadow-sm" for="modeBoth">
                    <i class="bi bi-link-45deg me-2 text-secondary"></i> Both
                  </label>
                </div>
              </div>
            </div>
          </div>



          <!-- Name -->
          <div class="form-floating mb-4">
            <input type="text" class="form-control shadow-sm" id="receiverName" placeholder="Receiver Name"
              name="receiver">
            <label for="receiverName">Receiver's Name</label>
          </div>

          <div class="row">
            <div class="col-md-6">
              <!-- Email -->
              <div class="form-floating mb-4">
                <input type="email" class="form-control shadow-sm" id="emali" placeholder="Email Address"
                  name="email">
                <label for="email">Email Address <small id="email_error" class="text-danger"></small></label>
              </div>
            </div>
            <div class="col-md-6">
              <!-- Mobile -->
              <div class="form-floating mb-4">
                <input type="tel" class="form-control shadow-sm" id="mobile" placeholder="Mobile Number"
                  name="mobile">
                <label for="mobile">Mobile Number <small id="mobile_error" class="text-danger"></small></label> 
              </div>
              
            </div>
          </div>




          <!-- Message -->
          <div class="form-floating mb-4">
            <textarea class="form-control shadow-sm" placeholder="Write message" id="message" style="height: 80px;"
              name="message"></textarea>
            <label for="message">Message (Optional)</label>
            <div class="form-text text-end small mt-1">Max 200 characters</div>
          </div>

          <!-- Coupon code -->
          {{-- <div class="form-floating mb-4">
            <input type="text" class="form-control shadow-sm" id="couponCode" placeholder="Coupon Code"
              name="couponCode">
            <label for="mobile">Coupon code</label>
          </div> --}}
          <div class="form-floating mb-4">
            <select name="quantity" id="quantity" class="form-select shadow-sm">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>

            <label for="mobile">Quantity</label>
          </div>

          <div class="d-flex flex-wrap">
            <!-- Gift Preview -->
            <div class="mb-4 w-100" style="max-width: 500px;">
              <div class="text-secondary small mb-2">Gift Preview</div>
              <div id="giftPreview" class="p-3 rounded border bg-white shadow-sm" style="margin: auto;">
                <div class="d-flex justify-content-between border-bottom pb-2 mb-2">
                  <img src="{{ asset('assets/images/logo_black.png') }}" alt="Logo" style="height: 40px;">
                  <div>
                    <div class="text-end">
                      gogifts.info@gmail.com
                    </div>
                    <div class="text-end">
                      +91-8779863826
                    </div>
                  </div>
                </div>
                <div class="mb-2">
                  <img src="{{ asset('assets/images/logo_black.png') }}" id="previewImage" alt="Woohoo Logo"
                    style="width: 100%;">
                </div>
                <p class="fw-semibold mb-1">Hi <span id="previewName">receiver</span>,</p>
                <p class="small text-muted">You've got a <span id="previewBrand">{{ $woohoo_product['name'] }}</span>
                  <span id="not_self"> from {{ auth()->user()->name ?? 'User' }}</span>
                </p>
                <p><em id="previewMsg"></em></p>
                <div class="d-flex">
                  <div class="w-50">
                    <img src="{{ $woohoo_product['images']['small'] ?? asset('assets/images/logo_black.png') }}"
                      style="width: 100%;" alt="Gift Image">
                  </div>
                  <div class="w-50 px-2">
                    <p class="m-0">Amount:</p>
                    <h1 class="">₹<span id="previewAmount">160</span>.00</h1>
                    <p class="mb-1"><strong>Card Number:</strong> xxxxxxxxxxxxxxxx</p>
                    <p class="mb-1"><strong>Pin:</strong> xxxxxx</p>
                    <p class="text-warning small mt-2">* Validity: xx xx xxxx</p>
                  </div>
                </div>
                <div class="d-flex justify-content-center">
                  * Show this barcode at the store to redeem the card
                </div>
              </div>
            </div>

            <!-- Theme -->
            <div class="mb-2 mx-2">
              <label class="form-label fw-semibold">Select Theme</label>
              <div class="d-flex gap-2">
                <img src="{{ asset('assets/images/logo_black.png') }}"
                  onerror="this.src='{{ asset('assets/images/defaultimage.jpg') }}';"
                  class="img-thumbnail theme-img rounded-3" style="height: 100px; width: 100px; object-fit: cover;"
                  data-theme-sku="" data-theme-image="{{ asset('assets/images/logo_black.png') }}">
                @foreach ($woohoo_product['themes'] ?? [] as $theme)
                  <img src="{{ $theme['image'] ?? asset('assets/images/defaultimage.jpg') }}"
                    onerror="this.src='{{ asset('assets/images/defaultimage.jpg') }}';"
                    class="img-thumbnail theme-img rounded-3" style="height: 100px; width: 100px; object-fit: cover;"
                    data-theme-sku="{{ $theme['sku'] }}" data-theme-image="{{ $theme['image'] }}">
                @endforeach
                <!-- You can loop other themes if needed -->
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-center">
            @if (Auth::check())
              <button type="button" onclick="wh_add('woohoo_form')" class="pay-now btn btn-success w-50">Add To
                Cart</button>
            @else
              <a class="btn btn-primary w-50" href="{{ route('login') }}">Login For Buy</a>
            @endif
          </div>
        </div>

        <input type="hidden" id="price_input" name="price">
        <input type="hidden" id="theme_image" value="{{ asset('assets/images/logo_black.png') }}"
          name="theme_image">
        <input type="hidden" value="{{ $woohoo_product['images']['base'] ?? asset('assets/images/logo_black.png') }}"
          name="card_image">
        <input type="hidden" id="theme_code" value="" name="theme_code">
        <input type="hidden" id="reloadCardNumber" value="{{ $woohoo_product['reloadCardNumber'] }}"
          name="reloadCardNumber">
        <input type="hidden" id="currency" value="{{ $woohoo_product['currency']['numericCode'] }}"
          name="currency">
      </form>
    </div>

    <!-- Tabs: Description, Redemption, Terms -->
    <div class="product-tabs mt-5">
      <ul class="nav nav-tabs" id="productTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button"
            role="tab">Description</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="redeem-tab" data-bs-toggle="tab" data-bs-target="#redeem" type="button"
            role="tab">How to Redeem</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="terms-tab" data-bs-toggle="tab" data-bs-target="#terms" type="button"
            role="tab">Terms</button>
        </li>
      </ul>
      <div class="tab-content border border-top-0 p-3" id="productTabContent">
        <div class="tab-pane fade show active" id="desc" role="tabpanel">
          {!! $woohoo_product['description'] ?? 'No description available.' !!}
        </div>
        <div class="tab-pane fade" id="redeem" role="tabpanel">
          @if ($woohoo_product['redemption_terms'] != '')
            @php
              $woohoo_product['redemption_terms'] = json_decode($woohoo_product['redemption_terms'], true);
            @endphp
            <ol>
              @foreach ($woohoo_product['redemption_terms'] as $key => $terms)
                @isset($terms['text'])
                  <li>{{ $terms['text'] }}</li>
                @endisset
              @endforeach
            </ol>
          @endif
        </div>
        <div class="tab-pane fade" id="terms" role="tabpanel">
          @if ($woohoo_product['tnc'] != '')
            {!! json_decode($woohoo_product['tnc'], true)['content'] ?? 'Terms & conditions will be shown here.' !!}
          @endif
        </div>
      </div>
    </div>

  </div>
@endsection

@section('script')
  <script>
    $(document).ready(function() {
      var $slider = $('#amountSlider');
      var $output = $('#amountOutput');
      var $name = $('#receiverName');
      var $message = $('#message');

      function updatePreview() {
        $('#previewName').text($name.val() || 'receiver name');
        $('#previewMsg').text($message.val() || 'this is message');
        $('#previewAmount').text($output.val());
        $('#price_input').val($output.val());
      }
      // Set initial slider value
      $output.val($slider.val());

      // Function to update preview


      // Slider change
      $slider.on('input change', function() {
        $output.val($(this).val());
        updatePreview();
      });
      $output.on('input change', function() {
        $val = $(this).val();
        if ($val > {{ $woohoo_product['price']['max'] ?? 0 }}) {
          $val = `{{ $woohoo_product['price']['max'] }}`;
          $output.val($val);
        }
        $slider.val($val);
        updatePreview();
      });
      $output.on('focusout', function() {
        $val = $(this).val();
        if ($val < {{ $woohoo_product['price']['min'] ?? 0 }}) {
          $val = `{{ $woohoo_product['price']['min'] }}`;
          $output.val($val);
        }
        $slider.val($val);
        updatePreview();
      });

      // Preset buttons
      $(document).on('click', '.preset-btn', function() {
        const value = $(this).attr('data-amt');
        $slider.val(value);
        $output.val(value);
        updatePreview();
      });

      // Name and message input
      $name.on('input', updatePreview);
      $message.on('input', updatePreview);

      // Optional: theme image click
      $('.theme-img').on('click', function() {
        const src = $(this).attr('src');
        $('#previewImage').attr('src', src);
        $('#theme_image').val(src);
        $('#theme_image').val($(this).attr("data-theme-sku"));
      });
      updatePreview();
      $(document).on("change", "input[name=orderMode]", function() {
        let input_data = $(this);
        if (input_data.val() == "SELF") {
          let user_data = input_data.attr("user_data").split(",");
          let receiverName = user_data[0];
          let mobile = user_data[1];
          let emali = user_data[2];
          $("#receiverName").val(receiverName);
          $("#mobile").val(mobile);
          $("#emali").val(emali);
          $("#not_self").html(``);
          updatePreview();
        } else {
          $("#receiverName").val("");
          $("#mobile").val("");
          $("#emali").val("");
          $("#not_self").html(`from ${"{{ auth()->user()->name ?? '' }}"}`);
          updatePreview();
        }
      })
    });
  </script>
@endsection