@extends('layouts.app')

@section('title', 'Edit Purchase Order')

@section('content')
<x-breadcrumb :items="[
    ['label' => 'Purchase Orders', 'url' => route('purchase-orders.index')],
    ['label' => $purchaseOrder->po_number, 'url' => route('purchase-orders.show', $purchaseOrder)],
    ['label' => 'Edit'],
]" />

<x-page-header title="Edit Purchase Order" :subtitle="$purchaseOrder->po_number">
    <x-slot name="actions">
        <a href="{{ route('purchase-orders.show', $purchaseOrder) }}" class="procure-btn"><i class="fas fa-arrow-left"></i> Back</a>
    </x-slot>
</x-page-header>

<form method="POST" action="{{ route('purchase-orders.update', $purchaseOrder) }}" id="poForm">
    @csrf
    @method('PUT')
    <div class="procure-form-card mb-3">
        <div class="row">
            <div class="col-md-4 mb-3">
                <label class="font-weight-bold">Supplier <span class="text-danger">*</span></label>
                <select name="supplier_id" id="poSupplier" class="form-control" required style="border-radius:8px;">
                    @foreach($suppliers ?? [] as $supplier)
                        <option value="{{ $supplier->id }}" @selected(old('supplier_id', $purchaseOrder->supplier_id) == $supplier->id)>
                            {{ $supplier->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label class="font-weight-bold">Order Date</label>
                <input type="date" name="order_date" class="form-control"
                       value="{{ old('order_date', optional($purchaseOrder->order_date)->format('Y-m-d')) }}" required style="border-radius:8px;">
            </div>
            <div class="col-md-3 mb-3">
                <label class="font-weight-bold">Expected Delivery</label>
                <input type="date" name="expected_delivery_date" class="form-control"
                       value="{{ old('expected_delivery_date', optional($purchaseOrder->expected_delivery_date)->format('Y-m-d')) }}" style="border-radius:8px;">
            </div>
            <div class="col-md-2 mb-3">
                <label class="font-weight-bold">Currency</label>
                <input type="text" name="currency" id="poCurrency" class="form-control" value="{{ old('currency', $purchaseOrder->currency) }}" style="border-radius:8px;">
            </div>
        </div>
        <div class="mb-3">
            <label class="font-weight-bold">Notes</label>
            <textarea name="notes" rows="2" class="form-control" style="border-radius:8px;">{{ old('notes', $purchaseOrder->notes) }}</textarea>
        </div>
        <div id="supplierReasonWrap" class="mb-0" style="display:none;">
            <div class="alert alert-warning py-2" style="border-radius:8px;font-size:13px;">
                You selected a supplier other than the lowest-priced recommendation. Please provide a reason.
            </div>
            <label class="font-weight-bold">Reason for selecting a supplier other than the recommended supplier <span class="text-danger">*</span></label>
            <textarea name="supplier_selection_reason" id="supplierSelectionReason" rows="2" class="form-control @error('supplier_selection_reason') is-invalid @enderror" style="border-radius:8px;">{{ old('supplier_selection_reason', $purchaseOrder->supplier_selection_reason) }}</textarea>
            @error('supplier_selection_reason')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>
    </div>

    <div id="priceRecommendationCard" class="chart-card mb-3" style="display:none;">
        <div class="chart-card-header">
            <h3 class="chart-card-title">Supplier Price Recommendation</h3>
        </div>
        <div class="chart-card-body" id="priceRecommendationBody"></div>
    </div>

    <div class="chart-card mb-3">
        <div class="chart-card-header">
            <h3 class="chart-card-title">Line Items</h3>
            <button type="button" class="procure-btn-primary" id="addLineBtn"><i class="fas fa-plus"></i> Add Line</button>
        </div>
        <div class="chart-card-body" style="overflow-x:auto;">
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th style="width:120px;">Qty</th>
                        <th style="width:140px;">Unit Price</th>
                        <th style="width:100px;">Tax %</th>
                        <th style="width:120px;">Line Total</th>
                        <th style="width:60px;"></th>
                    </tr>
                </thead>
                <tbody id="poLinesBody"></tbody>
            </table>
        </div>
        <div class="px-4 pb-3 text-right">
            <strong>Subtotal:</strong> <span id="poSubtotal">0.00</span>
            &nbsp;&nbsp;<strong>Tax:</strong> <span id="poTax">0.00</span>
            &nbsp;&nbsp;<strong>Total:</strong> <span id="poTotal">0.00</span>
        </div>
    </div>

    <div class="d-flex justify-content-end">
        <a href="{{ route('purchase-orders.show', $purchaseOrder) }}" class="procure-btn mr-2">Cancel</a>
        <button type="submit" class="procure-btn-primary"><i class="fas fa-save"></i> Update PO</button>
    </div>
</form>
@endsection

@php
    $poFormItems = ($items ?? collect())->map(function ($i) {
        return [
            'id' => $i->id,
            'label' => $i->item_code.' — '.$i->name_en,
        ];
    })->values();

    $poFormLines = ($purchaseOrder->lines ?? collect())->map(function ($l) {
        return [
            'item_id' => $l->item_id,
            'quantity' => $l->quantity,
            'unit_price' => $l->unit_price,
            'tax_rate' => $l->tax_rate,
        ];
    })->values();

    $poPreserveReason = (bool) old('supplier_selection_reason', $purchaseOrder->supplier_selection_reason);
@endphp

@push('scripts')
<script src="{{ asset('js/purchase-order-form.js') }}"></script>
<script>
(function () {
    initPurchaseOrderForm({
        items: @json($poFormItems),
        comparisonUrl: @json(route('purchase-orders.price-comparison')),
        existingLines: @json($poFormLines),
        preserveReason: @json($poPreserveReason)
    });
})();
</script>
@endpush