@extends('layouts.main')

@section('title', 'Return Order')

@section('content')
  <div class="container mt-5 mb-5">
    <div class="card shadow-lg p-4">
      <h4 class="mb-4">Return Order - #{{ $order['payment_order_id'] }}</h4>
      <form id="returnForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="order_id" value="{{ $order['id'] }}">

        <!-- Product Selection -->
        <div class="mb-3 position-relative" id="products_div">
          <label for="products" class="form-label">Select Product(s) to Return</label>
          <select id="products" name="products[]" multiple="multiple" required>
            @foreach ($order['checkout_products'] as $item)
              {{-- IMPROVEMENT: Added a data-quantity attribute to store the max returnable quantity --}}
              <option value="{{ $item['id'] }}" data-quantity="{{ $item['quantity'] }}">{{ $item['product_name'] }}
              </option>
            @endforeach
          </select>
        </div>

        <!-- Dynamic Product Fields -->
        <div id="productFields" class="mb-4"></div>

        {{-- This div will show validation errors from the server --}}
        <div id="errorMessages" class="alert alert-danger d-none"></div>

        <!-- Submit Button -->
        <div class="text-center">
          <button type="submit" class="btn btn-primary px-5">Submit Return Request</button>
        </div>
      </form>
    </div>
  </div>
@endsection

@push('script')
  {{-- IMPROVEMENT: Combined both scripts into a single, more organized block --}}
  <script>
    $(document).ready(function() {
      // 1. Initialize Select2 Dropdown
      $('#products').select2({
        placeholder: "Select one or more products to return",
        allowClear: true,
        width: '100%',
        closeOnSelect: false,
        dropdownParent: $('#products_div')
      });

      // 2. Handle Product Selection Changes
      $('#products').on('change', function() {
        const selectedProducts = $(this).val();
        const fieldsContainer = $('#productFields').empty();

        if (selectedProducts && selectedProducts.length) {
          selectedProducts.forEach(productId => {
            const option = $("#products").find(`option[value=${productId}]`);
            const label = option.text();
            // IMPROVEMENT: Get the max quantity from the data attribute
            const maxQuantity = option.data('quantity');

            // Generate a card with form fields for each selected product
            const block = `
              <div class="card p-3 mb-4 border border-primary-subtle">
                <input type="hidden" name="items[${productId}][product_id]" value="${productId}">
                <h5 class="text-primary mb-3">${label}</h5>
                <div class="row mb-3">
                  <div class="col-md-6">
                    {{-- IMPROVEMENT: Added a helper text to show purchased quantity --}}
                    <label class="form-label">Quantity <small class="text-muted">(Purchased: ${maxQuantity})</small></label>
                    {{-- IMPROVEMENT: Set the 'max' attribute to prevent returning more than purchased --}}
                    <input type="number" name="items[${productId}][quantity]" class="form-control" min="1" max="${maxQuantity}" required>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Reason</label>
                    <select class="form-select" name="items[${productId}][reason]" required>
                      <option value="" disabled selected>Select a reason</option>
                      <option value="damaged">Damaged Product</option>
                      <option value="wrong_item">Wrong Item Received</option>
                      <option value="not_satisfied">Not Satisfied</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                </div>
                <div class="mb-3">
                  <label class="form-label">Description</label>
                  <textarea name="items[${productId}][description]" class="form-control" rows="3" placeholder="Please describe the issue in detail..." required></textarea>
                </div>
                <div class="mb-3">
                  <label class="form-label">Upload Photo (optional)</label>
                  <input type="file" name="items[${productId}][photo]" class="form-control" accept="image/*">
                </div>
              </div>
            `;
            fieldsContainer.append(block);
          });
        }
      });

      // 3. Handle Form Submission with AJAX
      $('#returnForm').on('submit', function(e) {
        e.preventDefault();

        const form = $(this)[0];
        const formData = new FormData(form);
        const submitButton = $(this).find('button[type="submit"]');

        // Clear previous errors
        $('#errorMessages').addClass('d-none').html('');
        $('#globalAlert').addClass('d-none').html('');

        // IMPROVEMENT: Add loading state to the button to prevent double-clicks
        submitButton.prop('disabled', true).html(
          '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...'
        );

        $.ajax({
          url: "{{ route('return.order.store') }}",
          type: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function(res) {

            showAlert("Return request submitted successfully. We will review it shortly.", "success");
            // On success, permanently disable the form and show a success state on the button
            submitButton.removeClass('btn-primary').addClass('btn-success').html(
              '<i class="bi bi-check-circle"></i> Submitted Successfully'
            );
            // FIXED: Replaced the undefined route with a generic URL.
            // IMPORTANT: Replace '/my-orders' with the actual URL for your user's order history page.
            setTimeout(() => window.location.href = "{{ url('/my-orders') }}", 2000);
          },
          error: function(xhr) {
            if (xhr.status === 422) { // Validation error
              let errors = xhr.responseJSON.errors;
              let errorHtml = '<h6>Please correct the following errors:</h6><ul>';
              Object.keys(errors).forEach(function(key) {
                errors[key].forEach(function(msg) {
                  errorHtml += `<li>${msg}</li>`;
                });
              });
              errorHtml += '</ul>';
              $('#errorMessages').removeClass('d-none').html(errorHtml);
              // Scroll to the error messages so the user sees them
              $('html, body').animate({
                scrollTop: $('#errorMessages').offset().top - 100
              }, 300);
            } else { // Generic server error
              showAlert("An unexpected error occurred. Please try again later.", "danger");
            }
          },
          complete: function() {
            // IMPROVEMENT: Re-enable the button ONLY if there was an error.
            if ($('#errorMessages').hasClass('d-none')) {
              // It was a success, button state is already changed.
            } else {
              submitButton.prop('disabled', false).html('Submit Return Request');
            }
          }
        });
      });
    });
  </script>
@endpush