@extends('layouts.app')

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

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

<x-page-header title="New Purchase Order" subtitle="Select supplier and add line items.">
    <x-slot name="actions">
        <a href="{{ route('purchase-orders.index') }}" class="procure-btn"><i class="fas fa-arrow-left"></i> Back</a>
    </x-slot>
</x-page-header>

<form method="POST" action="{{ route('purchase-orders.store') }}" id="poForm">
    @csrf
    <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 @error('supplier_id') is-invalid @enderror" required style="border-radius:8px;">
                    <option value="">Select supplier...</option>
                    @foreach($suppliers ?? [] as $supplier)
                        <option value="{{ $supplier->id }}" @selected(old('supplier_id') == $supplier->id)>{{ $supplier->name }}</option>
                    @endforeach
                </select>
                @error('supplier_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-3 mb-3">
                <label class="font-weight-bold">Order Date <span class="text-danger">*</span></label>
                <input type="date" name="order_date" class="form-control" value="{{ old('order_date', date('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') }}" 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', 'SAR') }}" 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') }}</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') }}</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" id="poLinesTable">
                <thead>
                    <tr>
                        <th style="min-width:220px;">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>
            <p class="text-muted small mt-2 mb-0 px-1">
                Tip: select an item to auto-fill unit price (you can still edit it). Press <kbd>Enter</kbd> in Qty / Price / Tax to add another line.
            </p>
            <div id="poLinesEmpty" class="py-3">
                <x-empty-state icon="fas fa-list" title="No lines yet" message="Click Add Line to add items to this purchase order." />
            </div>
        </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.index') }}" class="procure-btn mr-2">Cancel</a>
        <button type="submit" class="procure-btn-primary"><i class="fas fa-save"></i> Save Draft</button>
    </div>
</form>
@endsection

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

    $poPreserveReason = (bool) old('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')),
        preserveReason: @json($poPreserveReason)
    });
})();
</script>
@endpush