@extends('layouts/layoutMaster')

@section('title', __('locale.Order Details'))

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js', 'resources/assets/vendor/libs/sweetalert2/sweetalert2.js', 'resources/assets/vendor/libs/cleave-zen/cleave-zen.js', 'resources/assets/vendor/libs/@form-validation/popular.js', 'resources/assets/vendor/libs/@form-validation/bootstrap5.js', 'resources/assets/vendor/libs/@form-validation/auto-focus.js', 'resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('page-script')
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).on('click', '.change-order-status', function() {
      let orderId = $(this).data('id');
      let status = $(this).data('status');

      $.ajax({
        url: `${baseURL}/orders/${orderId}/status`,
        method: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          status: status
        },
        success: function(data) {
          const toastType = data.status == 200 ? 'bg-success' : 'bg-warning';
          window.showToast({
            title: 'Orders 🛒',
            message: data.message,
            type: toastType,
            animation: 'animate__fadeInUp',
            time: 'Just now',
            delay: 3000
          });
          if (Array.isArray(data.data[0])) {
            const performedStatuses = data.data[0]; // Correct access

            const allStatuses = ['Placed', 'Accepted', 'Preparing', 'Ready', 'Dispatched', 'Out for Delivery',
              'Delivered', 'Cancelled'
            ];

            const newDropdown = allStatuses
              .filter(s => !performedStatuses.includes(s))
              .map(s =>
                `<li><a class="dropdown-item change-order-status" href="javascript:void(0);" data-id="${orderId}" data-status="${s}">${s}</a></li>`
              )
              .join('');
            $(`#dropdown-wrapper-${orderId} .dropdown-menu`).html(newDropdown);
            $('#newStatus').text(status);
          }
        },
        error: function(xhr) {
          console.log(xhr.responseJSON);
        }
      });
    });
  </script>
@endsection

@section('content')
  <div
    class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
    <div class="d-flex flex-column justify-content-center">
      <div class="mb-1"><span class="h5">{{ __('locale.Order') }} #{{ $order->order_id }} </span><span
          class="badge bg-label-success me-1 ms-2">{{ $order->payment_status }}</span>
        <span class="badge bg-label-info">{{ $order->status }}</span>
      </div>
      <p class="mb-0"{{ $order->created_at->format('d, M') }}<span id="orderYear">
        {{ $order->created_at->format('Y') }}</span>, {{ $order->created_at->format('h:i A') }}</p>
    </div>
    <div class="d-flex align-content-center flex-wrap gap-2">
      <div class="btn-group" id="dropdown-wrapper-{{ $order->id }}">
        <button type="button" class="btn btn-primary" id="newStatus">{{ $order->status ?? 'Placed' }}</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
          aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          @php
            $currency = Helper::setting('currency_symbol', 'currency');
            $allStatuses = [
                'Placed',
                'Accepted',
                'Preparing',
                'Ready',
                'Dispatched',
                'Out for Delivery',
                'Delivered',
                'Cancelled',
            ];
          @endphp

          @foreach ($allStatuses as $status)
            @if (!in_array($status, $performedStatuses))
              <li>
                <a class="dropdown-item change-order-status" href="javascript:void(0);" data-id="{{ $order->id }}"
                  data-status="{{ $status }}">
                  {{ $status }}
                </a>
              </li>
            @endif
          @endforeach
        </ul>

      </div>

    </div>
  </div>

  <!-- Order Details Table -->

  <div class="row">
    <div class="col-12 col-lg-8">
      <div class="card mb-6">
        <div class="card-datatable">
          <table class="datatables-order-details table mb-0">
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th class="w-50">{{ __('locale.Products') }}</th>
                <th class="w-25">{{ __('locale.Price') }}</th>
                <th class="w-25">{{ __('locale.Qty') }}</th>
                <th>{{ __('locale.Total') }}</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($order->items as $item)
                <tr>
                  <td></td>
                  <td></td>
                  <td class="w-50">{{ $item->name ?? 'N/A' }}</td>
                  <td class="w-25">{{ $currency }}{{ number_format($item->price, 2) }}</td>
                  <td class="w-25">{{ $item->quantity }}</td>
                  <td>{{ $currency }}{{ number_format($item->price * $item->quantity, 2) }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>

          <div class="d-flex justify-content-end align-items-center m-6 mb-2">
            <div class="order-calculations">
              <div class="d-flex justify-content-start mb-2">
                <span class="w-px-100 text-heading">{{ __('locale.Subtotal') }}:</span>
                <h6 class="mb-0">{{ $currency }}{{ number_format($order->subtotal, 2) }}</h6>
              </div>
              <div class="d-flex justify-content-start mb-2">
                <span class="w-px-100 text-heading">{{ __('locale.Discount') }}:</span>
                <h6 class="mb-0 text-primary">{{ $currency }}{{ number_format($order->discount ?? 0, 2) }}</h6>
              </div>
              <div class="d-flex justify-content-start mb-2">
                <span class="w-px-100 text-heading">{{ __('locale.Tax') }}:</span>
                <h6 class="mb-0 text-success">{{ $currency }}{{ number_format($order->tax ?? 0, 2) }}</h6>
              </div>
              <div class="d-flex justify-content-start">
                <h6 class="w-px-100 mb-0">{{ __('locale.Total') }}:</h6>
                <h6 class="mb-0">{{ $currency }}{{ number_format($order->grand_total, 2) }}</h6>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="card mb-6">
        <div class="card-header">
          <h5 class="card-title m-0">{{ __('locale.Shipping Activity') }}</h5>
        </div>
        <div class="card-body pt-1">
          <ul class="timeline pb-0 mb-0">
            @forelse($order->statusLogs->sortBy('created_at') as $log)
              <li
                class="timeline-item timeline-item-transparent {{ $loop->last ? 'border-transparent pb-0' : 'border-primary' }}">
                <span
                  class="timeline-point {{ $loop->last ? 'timeline-point-secondary' : 'timeline-point-primary' }}"></span>
                <div class="timeline-event {{ $loop->last ? 'pb-0' : '' }}">
                  <div class="timeline-header">
                    <h6 class="mb-0 text-capitalize">{{ str_replace('_', ' ', $log->status) }}</h6>
                    <small class="text-body-secondary">
                      {{ $log->created_at->format('l h:i A') }}
                    </small>
                  </div>
                  <p class="mt-3 mb-0">
                    {{ Helper::getStatusMessage($log->status) }}
                  </p>
                </div>
              </li>
            @empty
              <li class="timeline-item timeline-item-transparent border-transparent pb-0">
                <span class="timeline-point timeline-point-secondary"></span>
                <div class="timeline-event pb-0">
                  <div class="timeline-header">
                    <h6 class="mb-0">{{ __('locale.No Status Updates') }}</h6>
                  </div>
                </div>
              </li>
            @endforelse
          </ul>
        </div>
      </div>

    </div>
    <div class="col-12 col-lg-4">
      <div class="card mb-6">
        <div class="card-header">
          <h5 class="card-title m-0">{{ __('locale.Customer details') }}</h5>
        </div>
        <div class="card-body">
          <div class="d-flex justify-content-start align-items-center mb-6">
            <div class="avatar me-3">
              <img
                src="{{ $order->user->profile_photo_path ? asset('storage/' . $order->user->profile_photo_path) : asset('assets/img/placeholder.jpg') }}"
                alt="Avatar" class="rounded-circle"
                onerror="this.onerror=null;this.src='{{ asset('assets/img/placeholder.jpg') }}';" />
            </div>
            <div class="d-flex flex-column">
              <a href="{{ url('users/' . $order->user->id) }}" class="text-body text-nowrap">
                <h6 class="mb-0">{{ $order->user->name ?? 'N/A' }}</h6>
              </a>
              <span>{{ __('locale.Customer ID') }}: #{{ $order->user->id }}</span>
            </div>
          </div>

          <div class="d-flex justify-content-start align-items-center mb-6">
            <span class="avatar rounded-circle bg-label-success me-3 d-flex align-items-center justify-content-center">
              <i class="icon-base ti tabler-shopping-cart icon-lg"></i>
            </span>
            <h6 class="text-nowrap mb-0">

            </h6>
          </div>

          <div class="d-flex justify-content-between">
            <h6 class="mb-1">{{ __('locale.Contact info') }}</h6>
          </div>

          <p class="mb-1">{{ __('locale.Email') }}: {{ $order->user->email ?? 'N/A' }}</p>
          <p class="mb-0">{{ __('locale.Phone') }}: {{ $order->user->phone ?? 'N/A' }}</p>
        </div>

      </div>

      @php
        $address = is_array($order->address) ? $order->address : json_decode($order->address, true);
      @endphp


      <div class="card mb-6">
        <div class="card-header d-flex justify-content-between">
          <h5 class="card-title m-0">{{ __('locale.Shipping Address') }}</h5>
          <h6 class="m-0">
          </h6>
        </div>
        <div class="card-body">
          @if (!empty($address))
            <p class="mb-0">
              {{ $address['name'] ?? '' }}<br />
              {{ $address['address'] ?? '' }}<br />
              {{ $address['city'] ?? '' }} - {{ $address['postcode'] ?? '' }}<br />
              {{ $address['state'] ?? '' }}<br />
              {{ $address['country'] ?? '' }}
            </p>
          @else
            <p class="mb-0 text-muted">{{ __('locale.No address available.') }}</p>
          @endif
        </div>
      </div>

      @if (!empty($order->transaction))
        <div class="card mb-6">
          <div class="card-header d-flex justify-content-between">
            <h5 class="card-title m-0">{{ __('locale.Payment Details') }}</h5>
          </div>
          <div class="card-body">
            <p class="mb-6">{{ $order->transaction?->txn_id }}</p>
            <h5 class="mb-1">{{ $order->transaction?->payment_mode }}</h5>
            <p class="mb-0">{{ $currency }}{{ $order->transaction?->amount }}</p>
          </div>
        </div>
      @endif
    </div>
  </div>

  <!-- Modals -->

@endsection