@extends('layouts.app')

@section('title', 'Purchase')
@section('page', 'purchases')

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

@section('content')
  @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="purchases-table"
    class="catalog-table purchases-table"
    title="Purchase Orders"
    subtitle="Track supplier purchase orders. Showing {{ $dateFrom }} to {{ $dateTo }}."
    search-placeholder="Search purchases..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#purchaseModal" data-purchase-add>
        <i class="bi bi-plus-lg"></i> Add Purchase
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <x-date-range-filter
        :action="route('purchases.index')"
        :date-from="$dateFrom"
        :date-to="$dateTo"
        :filter-month="$filterMonth"
        :show-month="false"
        id="purchase-filter-form"
      >
        <x-slot:afterDates>
          <select class="form-select form-select-sm" name="supplier_id" id="filter_supplier_id" data-purchase-supplier-filter aria-label="Supplier">
            <option value="">All Suppliers</option>
            @foreach ($suppliers as $supplier)
              <option value="{{ $supplier->id }}" @selected((int) $selectedSupplierId === (int) $supplier->id)>{{ $supplier->name }}</option>
            @endforeach
          </select>
        </x-slot:afterDates>
      </x-date-range-filter>
      <select class="form-select form-select-sm" data-edt-col-filter="type" aria-label="Type">
        <option value="">All Types</option>
        <option>Purchase</option>
        <option>Return</option>
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Ordered</option>
        <option>Partial</option>
        <option>Received</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-cart-plus"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Orders</p>
                <p class="product-kpi__value">{{ $totalOrders }}</p>
                <p class="product-kpi__meta">In selected period</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-hourglass-split"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Ordered</p>
                <p class="product-kpi__value">{{ $ordered }}</p>
                <p class="product-kpi__meta">Awaiting delivery</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">{{ $received }}</p>
                <p class="product-kpi__meta">Fully received</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-cash-stack"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Value</p>
                <p class="product-kpi__value">{{ number_format($totalValue, 2) }}</p>
                <p class="product-kpi__meta">In selected period</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="PO No" col="po" />
      <x-data-table-th label="Type" col="type" />
      <x-data-table-th label="Date" col="date" />
      <x-data-table-th label="Supplier" col="supplier" />
      <x-data-table-th label="Warehouse" col="warehouse" />
      <x-data-table-th label="Items" col="items" sort-type="number" />
      <x-data-table-th label="Total" col="total" sort-type="number" />
      <x-data-table-th label="Payment" col="payment" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($purchases as $row)
        @php
          $purchaseItemsPayload = $row->items->map(static function ($item) {
            return [
              'stock_item_id' => $item->stock_item_id,
              'code' => $item->stockItem?->code,
              'name' => $item->stockItem?->name,
              'qty' => $item->qty,
              'unit_cost' => (float) $item->unit_cost,
            ];
          })->values();
          $typeVariant = $row->type === 'Return' ? 'warning' : 'info';
          $paymentLabel = match ($row->payment_method) {
            'credit' => 'Credit',
            'bank' => 'Bank',
            default => 'Cash',
          };
          $paymentVariant = match ($row->payment_method) {
            'credit' => 'warning',
            'bank' => 'info',
            default => 'success',
          };
        @endphp
        <tr data-id="{{ $row->id }}">
          <td data-col="po" class="cell-primary">{{ $row->po_number }}</td>
          <td data-col="type"><x-badge :variant="$typeVariant">{{ $row->type }}</x-badge></td>
          <td data-col="date">{{ $row->purchase_date?->format('Y-m-d') }}</td>
          <td data-col="supplier">{{ $row->supplier?->name ?? '—' }}</td>
          <td data-col="warehouse">{{ $row->warehouse?->name ?? '—' }}</td>
          <td data-col="items">{{ $row->items_count }}</td>
          <td data-col="total">{{ number_format((float) $row->total, 2) }}</td>
          <td data-col="payment"><x-badge :variant="$paymentVariant">{{ $paymentLabel }}</x-badge></td>
          <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></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--print"
                title="Print"
                aria-label="Print"
                data-purchase-print
                data-slip-url="{{ route('purchases.slip', $row) }}"
              >
                <i class="bi bi-printer" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--edit"
                title="Edit"
                aria-label="Edit"
                data-backend
                data-purchase-edit
                data-id="{{ $row->id }}"
                data-type="{{ $row->type ?? 'Purchase' }}"
                data-supplier-id="{{ $row->supplier_id }}"
                data-warehouse-id="{{ $row->warehouse_id }}"
                data-purchase-date="{{ $row->purchase_date?->format('Y-m-d') }}"
                data-status="{{ $row->status }}"
                data-payment-method="{{ $row->payment_method ?? 'cash' }}"
                data-cash-book-id="{{ $row->cash_book_id }}"
                data-bank-account-id="{{ $row->bank_account_id }}"
                data-notes="{{ $row->notes }}"
                data-items='@json($purchaseItemsPayload)'
                data-update-url="{{ route('purchases.update', $row) }}"
              >
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="Delete"
                aria-label="Delete"
                data-backend
                data-delete-open
                data-delete-url="{{ route('purchases.destroy', $row) }}"
                data-delete-label="{{ $row->po_number }}"
                data-delete-type="purchase"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="12" class="text-center text-muted py-4">No purchase orders for this period. Adjust the date filter or add a purchase.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <div class="modal fade" id="purchaseModal" tabindex="-1" aria-labelledby="purchaseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content edt-modal">
        <form id="purchase-form" method="post" action="{{ route('purchases.store') }}" data-store-url="{{ route('purchases.store') }}">
          @csrf
          <input type="hidden" name="_method" id="purchase_form_method" value="POST">
          <input type="hidden" name="filter_date_from" value="{{ $dateFrom }}">
          <input type="hidden" name="filter_date_to" value="{{ $dateTo }}">
          @if ($filterMonth)
            <input type="hidden" name="filter_month" value="{{ $filterMonth }}">
          @endif
          @if ($selectedSupplierId)
            <input type="hidden" name="filter_supplier_id" value="{{ $selectedSupplierId }}">
          @endif
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="purchaseModalLabel">Add purchase</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 mb-3">
              <div class="col-md-3">
                <label class="form-label" for="purchase_type">Purchasing type</label>
                <select class="form-select" id="purchase_type" name="type" required>
                  <option value="Purchase" @selected(old('type', 'Purchase') === 'Purchase')>Purchase</option>
                  <option value="Return" @selected(old('type') === 'Return')>Return</option>
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label" for="purchase_supplier">Supplier</label>
                <select class="form-select" id="purchase_supplier" name="supplier_id" required>
                  <option value="">Select supplier</option>
                  @foreach ($suppliers as $supplier)
                    <option value="{{ $supplier->id }}" @selected((string) old('supplier_id') === (string) $supplier->id)>{{ $supplier->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label" for="purchase_warehouse">Warehouse</label>
                <select class="form-select" id="purchase_warehouse" name="warehouse_id" required>
                  <option value="">Select warehouse</option>
                  @foreach ($warehouses as $warehouse)
                    <option value="{{ $warehouse->id }}" @selected((string) old('warehouse_id') === (string) $warehouse->id)>{{ $warehouse->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-3">
                <label class="form-label" for="purchase_date">Date</label>
                <input type="date" class="form-control" id="purchase_date" name="purchase_date" required value="{{ old('purchase_date', now()->toDateString()) }}">
              </div>
              <div class="col-md-3">
                <label class="form-label" for="purchase_status">Status</label>
                <select class="form-select" id="purchase_status" name="status">
                  <option value="Ordered" @selected(old('status', 'Ordered') === 'Ordered')>Ordered</option>
                  <option value="Partial" @selected(old('status') === 'Partial')>Partial</option>
                  <option value="Received" @selected(old('status') === 'Received')>Received</option>
                  <option value="Cancelled" @selected(old('status') === 'Cancelled')>Cancelled</option>
                </select>
              </div>
              <div class="col-md-9">
                <label class="form-label" for="purchase_notes">Notes</label>
                <input type="text" class="form-control" id="purchase_notes" name="notes" value="{{ old('notes') }}" placeholder="Optional notes">
              </div>
              <div class="col-12">
                <p class="form-text mb-0" id="purchase-type-help">
                  Purchase adds stock to the warehouse when status is Received. Return deducts stock when status is Received.
                </p>
              </div>
            </div>

            <div class="d-flex align-items-center justify-content-between mb-2">
              <h3 class="h6 mb-0">Items</h3>
              <button type="button" class="btn btn-sm btn-outline-primary" id="purchase-add-row">
                <i class="bi bi-plus-lg"></i> Add line
              </button>
            </div>

            <div class="table-responsive purchase-lines-wrap">
              <table class="table table-sm align-middle mb-0" id="purchase-lines-table">
                <thead>
                  <tr>
                    <th style="width: 140px;">Item code</th>
                    <th>Item name</th>
                    <th style="width: 130px;">Unit cost</th>
                    <th style="width: 110px;">Qty</th>
                    <th style="width: 130px;" class="text-end">Line total</th>
                    <th style="width: 48px;"></th>
                  </tr>
                </thead>
                <tbody id="purchase-lines-body"></tbody>
                <tfoot>
                  <tr>
                    <td colspan="4" class="text-end fw-semibold">Grand total</td>
                    <td class="text-end fw-semibold" id="purchase-grand-total">0.00</td>
                    <td></td>
                  </tr>
                </tfoot>
              </table>
            </div>

            <div class="row g-3 mt-3 pt-3 border-top">
              <div class="col-md-4">
                <label class="form-label" for="purchase_payment_method">Payment</label>
                <select class="form-select" id="purchase_payment_method" name="payment_method" required>
                  <option value="cash" @selected(old('payment_method', 'cash') === 'cash')>Cash</option>
                  <option value="bank" @selected(old('payment_method') === 'bank')>Bank</option>
                  <option value="credit" @selected(old('payment_method') === 'credit')>Credit</option>
                </select>
              </div>
              <div class="col-md-4" data-purchase-pay="cash">
                <label class="form-label" for="purchase_cash_book_id">Cash book</label>
                <select class="form-select" id="purchase_cash_book_id" name="cash_book_id">
                  <option value="">Select cash book</option>
                  @foreach ($cashBooks as $book)
                    <option value="{{ $book->id }}" @selected((string) old('cash_book_id') === (string) $book->id)>{{ $book->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4 d-none" data-purchase-pay="bank">
                <label class="form-label" for="purchase_bank_account_id">Bank account</label>
                <select class="form-select" id="purchase_bank_account_id" name="bank_account_id">
                  <option value="">Select bank account</option>
                  @foreach ($bankAccounts as $account)
                    <option value="{{ $account->id }}" @selected((string) old('bank_account_id') === (string) $account->id)>
                      {{ $account->name }}{{ $account->bank?->name ? ' ('.$account->bank->name.')' : '' }}
                    </option>
                  @endforeach
                </select>
              </div>
              <div class="col-12">
                <p class="form-text mb-0" id="purchase-payment-help">
                  Cash/Bank posts an Out entry. Credit adds the bill total to the supplier outstanding balance.
                </p>
              </div>
            </div>

            <template id="purchase-line-template">
              <tr class="purchase-line">
                <td>
                  <input type="hidden" name="items[__INDEX__][stock_item_id]" value="" data-line-id>
                  <input type="text" class="form-control form-control-sm" data-line-code placeholder="Item code" autocomplete="off">
                </td>
                <td>
                  <span class="purchase-line__name text-muted" data-line-name>—</span>
                </td>
                <td>
                  <input type="number" class="form-control form-control-sm" name="items[__INDEX__][unit_cost]" min="0" step="0.01" value="0" required data-line-cost>
                </td>
                <td>
                  <input type="number" class="form-control form-control-sm" name="items[__INDEX__][qty]" min="1" value="1" required data-line-qty>
                </td>
                <td class="text-end" data-line-total>0.00</td>
                <td class="text-end">
                  <button type="button" class="btn btn-sm btn-icon product-action product-action--delete" data-line-remove title="Remove" aria-label="Remove">
                    <i class="bi bi-trash" aria-hidden="true"></i>
                  </button>
                </td>
              </tr>
            </template>
          </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">Save</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')
          <input type="hidden" name="filter_date_from" value="{{ $dateFrom }}">
          <input type="hidden" name="filter_date_to" value="{{ $dateTo }}">
          @if ($filterMonth)
            <input type="hidden" name="filter_month" value="{{ $filterMonth }}">
          @endif
          @if ($selectedSupplierId)
            <input type="hidden" name="filter_supplier_id" value="{{ $selectedSupplierId }}">
          @endif
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete purchase</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>

  <div class="modal fade" id="purchaseSlipModal" tabindex="-1" aria-labelledby="purchaseSlipModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <div class="modal-header">
          <h2 class="modal-title fs-5" id="purchaseSlipModalLabel">Purchase order</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="purchase-slip-body">
          <div class="text-center text-muted py-4">Loading purchase order…</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="purchase-slip-print-btn"><i class="bi bi-printer"></i> Print</button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/css/pages/purchase-slip.css') }}" rel="stylesheet">
  <style>
    .purchase-lines-wrap {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .purchase-lines-wrap .table {
      margin: 0;
    }
    .purchase-lines-wrap thead th {
      background: #f8fafc;
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-muted);
      border-bottom: 1px solid var(--color-border);
    }
    .purchase-line__name {
      font-size: var(--fs-sm);
      color: var(--text-primary);
    }
  </style>
@endpush

@push('scripts')
  <script>
    window.PURCHASE_STOCK_CATALOG = @json($stockCatalog);
  </script>
  <script src="{{ asset('assets/js/pages/purchases.js') }}"></script>
@endpush