@extends('admin.layouts.main')

@php
  $page_name = 'Return Orders';
@endphp

@section('content')
  <div class="card">
    <div class="card-body">
      <h2 class="mb-4">Return Orders</h2>

      {{-- Filter Form --}}
      <form method="GET" class="row g-3 mb-4">
        <div class="col-md-3">
          <input type="text" name="search" class="form-control" placeholder="Search..." value="{{ request('search') }}">
        </div>
        <div class="col-md-3">
          <input type="text" name="product_name" class="form-control" placeholder="Product Name"
            value="{{ request('product_name') }}">
        </div>
        <div class="col-md-2">
          <input type="text" name="reason" class="form-control" placeholder="Reason" value="{{ request('reason') }}">
        </div>
        <div class="col-md-2">
          <select name="status" class="form-select">
            <option value="">All Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>Accepted</option>
            <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
            <option value="returned" {{ request('status') == 'returned' ? 'selected' : '' }}>Pending Refund</option>
            <option value="refunded" {{ request('status') == 'refunded' ? 'selected' : '' }}>Complated</option>
          </select>
        </div>
        <div class="col-md-2">
          <input type="number" name="checkout_id" class="form-control" placeholder="Checkout ID"
            value="{{ request('checkout_id') }}">
        </div>
        <div class="col-md-2">
          <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
        <div class="col-md-2">
          <a href="{{ route('admin.return.orders') }}" class="btn btn-secondary w-100">Reset</a>
        </div>
      </form>

      {{-- Return Orders Table --}}
      <div class="table-responsive">
        <table class="table table-bordered align-middle">
          <thead class="">
            <tr>
              <th>ID</th>
              <th>Product</th>
              <th>Qty</th>
              <th>Reason</th>
              <th>Description</th>
              <th>Status</th>
              <th>Requested At</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($returnOrders as $order)
              <tr>
                <td>{{ $order->id }}</td>
                <td>
                  <div class="d-flex align-items-center">
                    <img src="{{ url('images/return_products/' . $order->product_image) }}" alt="image" width="50"
                      class="me-2 rounded" style="cursor: zoom-in;">
                    <div>{{ $order->product_name }}</div>
                  </div>
                </td>
                <td>{{ $order->quantity }}</td>
                <td>{{ ucfirst($order->reason) }}</td>
                <td>{{ $order->description }}</td>
                <td>
                  <span
                    class="badge bg-{{ $order->status == 'pending' ? 'warning' : ($order->status == 'rejected' ? 'danger' : 'success') }}">
                    {{ ucfirst($order->status) }}
                  </span>
                </td>
                <td>{{ \Carbon\Carbon::parse($order->created_at)->format('d M Y, h:i A') }}</td>
                <td>
                  <button class="btn btn-sm btn-info fullDetails" user_info = "{{ $order->user }}"
                    address = "{{ $order->checkout->shippingAddress }}" data-bs-toggle="modal"
                    data-bs-target="#fullDetails_modal">
                    View
                  </button>
                  <a class="btn btn-sm btn-info fullDetails" href="{{ route('admin.order.invoice',[$order->checkout->payment_order_id]) }}">
                    Order Invoice
                  </a>
                  @if ($order->status == 'pending')
                    <button class="btn btn-sm btn-success me-1" data-bs-toggle="modal" data-bs-target="#acceptModal"
                      data-id="{{ $order->id }}"
                      data-img="{{ url('images/return_products/' . $order->product_image) }}">
                      Accept
                    </button>
                    <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal"
                      data-id="{{ $order->id }}">
                      Reject
                    </button>
                  @elseif ($order->status == 'rejected')
                    {{ $order->comments }}
                  @elseif ($order->status == 'accepted')
                    {{-- UPDATED BUTTONS TO TRIGGER MODALS --}}

                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#initiateReturnModal"
                      data-id="{{ $order->id }}">
                      @if ($order->checkout->courier_id == '')
                        Manual
                      @else
                        Shiprocket
                      @endif Initiate Return
                    </button>
                  @elseif($order->status == 'returned')
                    <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#refundModal"
                      data-id="{{ $order->id }}" data-amount="{{ $order->product_price ?? 0 }}"
                      data-product-name="{{ $order->product_name }}">
                      Refund
                    </button>
                  @elseif($order->status == 'refunded' || $order->status == 'replace')
                    <span class="badge bg-info">Compleate</span>
                  @endif
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="8" class="text-center">No return orders found.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      {{-- Pagination --}}
      <div class="my-3">
        {{ $returnOrders->appends(request()->query())->links('pagination::bootstrap-5') }}
      </div>
    </div>
  </div>

  {{-- Accept Modal --}}
  <div class="modal fade" id="acceptModal" tabindex="-1" aria-labelledby="acceptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <form method="POST" action="{{ route('admin.return.orders.accept') }}">
          @csrf
          <input type="hidden" name="return_product_id" id="acceptReturnId">
          <div class="modal-header">
            <h5 class="modal-title">Accept Return Request</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center">
            <p>Are you sure you want to accept this return request?</p>
            <img id="acceptImagePreview" src="#" class="img-fluid img-thumbnail"
              style="max-height: 300px; cursor: zoom-in;" alt="Product Image">
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success">Accept</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {{-- Reject Modal --}}
  <div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <form method="POST" action="{{ route('admin.return.orders.reject') }}">
          @csrf
          <input type="hidden" name="return_product_id" id="rejectReturnId">
          <div class="modal-header">
            <h5 class="modal-title">Reject Return Request</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="rejection_reason" class="form-label">Reason for rejection</label>
              <textarea name="rejection_reason" class="form-control" rows="3" required></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-danger">Reject</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        {{-- You'll need a route for this form action --}}
        <form method="POST" action="{{ route('admin.return.orders.refund') }}">
          @csrf
          <input type="hidden" name="return_product_id" id="refundReturnId">

          <div class="modal-body">
            <p>Processing refund for: <strong id="refundProductName"></strong></p>
            <div class="mb-3">
              <label for="refundAmount" class="form-label">Refund Amount</label>
              <input type="number" name="amount" id="refundAmount" class="form-control" step="0.01" required>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-warning">Process Refund</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <div class="modal fade" id="initiateReturnModal" tabindex="-1" aria-labelledby="initiateReturnModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        {{-- You'll need a route for this form action --}}
        <form method="POST" action="{{ route('admin.return.orders.initiateReturn') }}">
          @csrf
          <input type="hidden" name="return_product_id" id="returnInitiateId">
          <div class="modal-header">
            <h5 class="modal-title" id="initiateReturnModalLabel">Initiate Product Return</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <h4>Do you want to Initiate this Return order?</h4>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="fullDetails_modal" tabindex="-1" aria-labelledby="fullDetails_modalModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="fullDetails_modalModalLabel">View Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>


  <div class="modal fade" id="zoomImageModal" tabindex="-1" aria-labelledby="zoomImageModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-body text-center">
          <img id="zoomImageTarget" src="#" class="img-fluid rounded" alt="Zoomed Image">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('script')
  <script>
    $(document).ready(function() {

      $(".fullDetails").on("click", function(e) {
        let bt = $(this);
        let adRaw = bt.attr("address");
        let coRaw = bt.attr("user_info");

        function htmlDecode(input) {
          return $('<textarea/>').html(input).text();
        }

        function parseJson(raw) {
          if (!raw) return null;
          // If it's already an object
          if (typeof raw === 'object') return raw;
          try {
            return JSON.parse(raw);
          } catch (err) {
            try {
              // Try decoding HTML entities then parse
              const dec = htmlDecode(raw);
              return JSON.parse(dec);
            } catch (err2) {
              try {
                // Last resort: evaluate JS object string (be cautious)
                const dec = htmlDecode(raw);
                return (new Function('return ' + dec))();
              } catch (err3) {
                return null;
              }
            }
          }
        }

        const address = parseJson(adRaw);
        const user = parseJson(coRaw);

        console.log(address);
        console.log(user);

        // Build modal HTML
        let html = '<div class="container-fluid">';
        if (user) {
          html += '<h6>User Details</h6><dl class="row mb-0">';
          html += '<dt class="col-sm-4">Name</dt><dd class="col-sm-8">' + (user.name || '—') + '</dd>';
          html += '<dt class="col-sm-4">Email</dt><dd class="col-sm-8">' + (user.email || '—') + '</dd>';
          html += '<dt class="col-sm-4">Mobile</dt><dd class="col-sm-8">' + (user.mobile || '—') + '</dd>';
          html += '<dt class="col-sm-4">Joined</dt><dd class="col-sm-8">' + (user.created_at || '—') + '</dd>';
          html += '</dl>';
        }

        if (address) {
          html += '<hr><h6>Shipping Address</h6><address class="mb-0">';
          if (address.line1) html += '<div>' + address.line1 + '</div>';
          if (address.line2) html += '<div>' + address.line2 + '</div>';
          if (address.city || address.district) html += '<div>' + [address.city, address.district].filter(Boolean)
            .join(', ') + '</div>';
          if (address.state || address.pincode) html += '<div>' + [address.state, address.pincode].filter(Boolean)
            .join(' - ') + '</div>';
          if (address.country) html += '<div>' + address.country + '</div>';
          html += '</address>';
        }

        if (!user && !address) {
          html += '<p class="mb-0">No details available.</p>';
        }

        html += '</div>';

        // Inject into modal (leave Bootstrap to open the modal via data-bs attributes)
        $('#fullDetails_modal .modal-title').text('Full Details');
        $('#fullDetails_modal .modal-body').html(html);
      });

      // Handle Accept Modal
      $('#acceptModal').on('show.bs.modal', function(event) {
        const button = $(event.relatedTarget);
        const returnId = button.data('id');
        const imgSrc = button.data('img');

        $('#acceptReturnId').val(returnId);
        $('#acceptImagePreview').attr('src', imgSrc);
      });

      // Handle Reject Modal
      $('#rejectModal').on('show.bs.modal', function(event) {
        const button = $(event.relatedTarget);
        const returnId = button.data('id');

        $('#rejectReturnId').val(returnId);
      });

      // NEW: Handle Refund Modal
      $('#refundModal').on('show.bs.modal', function(event) {
        const button = $(event.relatedTarget);
        const returnId = button.data('id');
        const amount = button.data('amount');
        const productName = button.data('product-name');

        $('#refundReturnId').val(returnId);
        $('#refundAmount').val(amount);
        $('#refundProductName').text(productName);
      });

      // NEW: Handle Initiate Return Modal
      $('#initiateReturnModal').on('show.bs.modal', function(event) {
        const button = $(event.relatedTarget);
        const returnId = button.data('id');
        $('#returnInitiateId').val(returnId);
      });


      // Zoom Image (Click to view larger in modal)
      $(document).on('click', 'img', function() {
        // Simple check to avoid triggering zoom on very small icons if any
        if ($(this).width() > 30) {
          const imgSrc = $(this).attr('src');
          $('#zoomImageTarget').attr('src', imgSrc);
          $('#zoomImageModal').modal('show');
        }
      });
    });
  </script>
@endsection