@extends('layouts.app')

@section('title', 'Stock Transfer')
@section('page', 'inventory')
@section('inventoryNav', 'transfers')

@php
  $statusVariant = fn ($s) => match ($s) {
    'Received' => 'success',
    'In transit' => 'info',
    'Draft' => 'warning',
    'Cancelled' => 'danger',
    default => 'neutral',
  };
@endphp

@section('content')
  @include('partials.inventory-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="transfers-table"
    class="catalog-table transfers-table"
    title="Stock Transfer"
    subtitle="Move inventory between warehouses."
    search-placeholder="Search transfers..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#transferModal" data-transfer-add>
        <i class="bi bi-plus-lg"></i> New Transfer
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <div class="edt-date-period" role="group" aria-label="Date period">
        <input type="date" class="form-control form-control-sm" data-edt-date-from="date" aria-label="From date" title="From date">
        <span class="edt-date-period__sep">–</span>
        <input type="date" class="form-control form-control-sm" data-edt-date-to="date" aria-label="To date" title="To date">
      </div>
      <select class="form-select form-select-sm" data-edt-col-filter="from" aria-label="From warehouse">
        <option value="">From warehouse</option>
        @foreach ($warehouses as $warehouse)
          <option value="{{ $warehouse->name }}">{{ $warehouse->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="to" aria-label="To warehouse">
        <option value="">To warehouse</option>
        @foreach ($warehouses as $warehouse)
          <option value="{{ $warehouse->name }}">{{ $warehouse->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Received</option>
        <option>In transit</option>
        <option>Draft</option>
        <option>Cancelled</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-arrow-left-right"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Transfers</p>
                <p class="product-kpi__value">{{ $totalTransfers }}</p>
                <p class="product-kpi__meta">All transfer orders</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-check-lg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Received</p>
                <p class="product-kpi__value">{{ $receivedTransfers }}</p>
                <p class="product-kpi__meta">Completed transfers</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-truck"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">In Transit</p>
                <p class="product-kpi__value">{{ $inTransitTransfers }}</p>
                <p class="product-kpi__meta">On the way</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--inactive">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-file-earmark-text"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Draft</p>
                <p class="product-kpi__value">{{ $draftTransfers }}</p>
                <p class="product-kpi__meta">Pending submission</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Transfer #" col="ref" />
      <x-data-table-th label="Date" col="date" />
      <x-data-table-th label="Item" col="item" />
      <x-data-table-th label="From" col="from" />
      <x-data-table-th label="To" col="to" />
      <x-data-table-th label="Qty" col="qty" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
      <x-data-table-th label="Created By" col="user" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($transfers as $transfer)
        <tr data-id="{{ $transfer->id }}">
          <td data-col="ref" class="cell-primary">{{ $transfer->ref }}</td>
          <td data-col="date">{{ optional($transfer->transfer_date)->format('Y-m-d') }}</td>
          <td data-col="item">
            <span class="cell-primary">{{ $transfer->item_name }}</span>
            <div class="text-muted small">{{ $transfer->item_code }}</div>
          </td>
          <td data-col="from">{{ $transfer->fromWarehouse?->name }}</td>
          <td data-col="to">{{ $transfer->toWarehouse?->name }}</td>
          <td data-col="qty">{{ $transfer->qty }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($transfer->status)">{{ $transfer->status }}</x-badge></td>
          <td data-col="user">{{ $transfer->user?->name ?? '—' }}</td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="Delete"
                aria-label="Delete"
                data-edt-action="delete"
                data-backend
                data-delete-open
                data-delete-url="{{ route('inventory.transfers.destroy', $transfer) }}"
                data-delete-label="{{ $transfer->ref }}"
                data-delete-type="transfer"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="9" class="text-center text-muted py-4">No stock transfers yet.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <div class="modal fade" id="transferModal" tabindex="-1" aria-labelledby="transferModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="transfer-form" method="post" action="{{ route('inventory.transfers.store') }}">
          @csrf
          <input type="hidden" name="redirect_to" value="transfers">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="transferModalLabel">Stock transfer</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label" for="tr_stock_item">Item</label>
                <select class="form-select" id="tr_stock_item" name="stock_item_id" required data-transfer-stock-select>
                  <option value="">Select stock item</option>
                  @foreach ($stockItems as $item)
                    <option
                      value="{{ $item->id }}"
                      data-warehouse-id="{{ $item->warehouse_id }}"
                      data-warehouse-name="{{ $item->warehouse?->name }}"
                      data-qty="{{ $item->qty }}"
                    >
                      {{ $item->code }} — {{ $item->name }}
                    </option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="tr_from">From warehouse</label>
                <input type="text" class="form-control" id="tr_from" value="" readonly data-transfer-from-label>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="tr_available_qty">Available qty</label>
                <input type="text" class="form-control" id="tr_available_qty" value="" readonly data-transfer-available-qty>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="tr_to">To warehouse</label>
                <select class="form-select" id="tr_to" name="to_warehouse_id" required data-transfer-to-select>
                  <option value="">Select warehouse</option>
                  @foreach ($warehouses as $warehouse)
                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="tr_qty">Transfer qty</label>
                <input type="number" class="form-control" id="tr_qty" name="qty" min="1" value="1" required>
              </div>
              <div class="col-12">
                <label class="form-label" for="tr_notes">Notes</label>
                <textarea class="form-control" id="tr_notes" name="notes" rows="2" placeholder="Optional notes"></textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Transfer</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete transfer</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this item</strong>? This action cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/css/pages/inventory.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/products.js') }}"></script>
@endpush