@extends('layouts.app')
@section('title', 'Create Order')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Create New Order</div>
        <div class="d-flex align-items-center ms-auto">
            <!-- Mandatory Action Set (Right) -->
            <!-- Add -->
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

            <!-- Save -->
            <i onclick="document.getElementById('orderForm').submit()"
                class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Submit Order" style="cursor: pointer;"></i>

            <!-- Edit -->
            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

            <!-- Delete -->
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

            <!-- Close -->
            <a href="{{ route('posm.orders.index') }}" class="mx-1">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="tooltip" title="Close"></i>
            </a>

            <!-- Column Visibility -->
            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
        </div>
    </div>

    <form action="{{ route('posm.orders.store') }}" method="POST" id="orderForm">
        @csrf
        @if($availabilityReport)
            <input type="hidden" name="availability_report_id" value="{{ $availabilityReport->id }}">
        @endif
        <div class="row mt-3">
            <!-- Order Information -->
            <div class="col-md-8">
                <div class="card rounded-border border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">Order Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="outlet_id" class="form-label fw-bold small text-muted uppercase">
                                    Outlet <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('outlet_id') is-invalid @enderror" id="outlet_id"
                                    name="outlet_id" required>
                                    <option value="">Select Outlet</option>
                                    @foreach($outlets as $outlet)
                                        <option value="{{ $outlet->id }}" 
                                            {{ (old('outlet_id') == $outlet->id || ($availabilityReport && $availabilityReport->outlet_id == $outlet->id)) ? 'selected' : '' }}>
                                            {{ $outlet->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('outlet_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="lsr_id" class="form-label fw-bold small text-muted uppercase">
                                    LSR Agent <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('lsr_id') is-invalid @enderror" id="lsr_id" name="lsr_id"
                                    required>
                                    <option value="">Select LSR</option>
                                    @foreach($lsrs as $lsr)
                                        <option value="{{ $lsr->id }}" 
                                            {{ (old('lsr_id') == $lsr->id || ($availabilityReport && $availabilityReport->submitted_by == $lsr->id)) ? 'selected' : '' }}>
                                            {{ $lsr->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('lsr_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="tm_id" class="form-label fw-bold small text-muted uppercase">
                                    Territory Manager
                                </label>
                                <select class="form-control @error('tm_id') is-invalid @enderror" id="tm_id" name="tm_id">
                                    <option value="">Select TM (Optional)</option>
                                    @foreach($tms as $tm)
                                        <option value="{{ $tm->id }}" {{ old('tm_id') == $tm->id ? 'selected' : '' }}>
                                            {{ $tm->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('tm_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="status" class="form-label fw-bold small text-muted uppercase">
                                    Status <span class="text-danger">*</span>
                                </label>
                                <select class="form-control @error('status') is-invalid @enderror" id="status" name="status"
                                    required>
                                    <option value="created" {{ old('status') == 'created' ? 'selected' : '' }}>Created
                                    </option>
                                    <option value="ready_for_collection" {{ old('status') == 'ready_for_collection' ? 'selected' : '' }}>Ready for Collection
                                    </option>
                                    <option value="collected" {{ old('status') == 'collected' ? 'selected' : '' }}>Collected
                                    </option>
                                    <option value="delivered" {{ old('status') == 'delivered' ? 'selected' : '' }}>Delivered
                                    </option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <label for="notes" class="form-label fw-bold small text-muted uppercase">Notes /
                                    Remarks</label>
                                <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes"
                                    rows="3"
                                    placeholder="Add any special instructions or notes...">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Items -->
                <div class="card rounded-border border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 fw-bold">Order Items</h5>
                        <button type="button" class="btn btn-sm btn-primary rounded-pill" onclick="addOrderItem()">
                            <i class="fa-solid fa-plus me-1"></i> Add Item
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="orderItemsContainer">
                            <!-- Items will be added here dynamically -->
                        </div>
                        <div id="emptyState" class="text-center py-5">
                            <i class="fa-solid fa-box-open text-muted opacity-25" style="font-size: 48px;"></i>
                            <p class="text-muted mt-3 mb-0">No items added yet. Click "Add Item" to start.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Summary Card -->
            <div class="col-md-4">
                <div class="card rounded-border border-0 shadow-sm sticky-top" style="top: 20px;">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">Order Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">Total Items</span>
                                <span class="fw-bold fs-5" id="totalItems">0</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">Total Quantity</span>
                                <span class="fw-bold" id="totalQuantity">0</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted">Estimated Value</span>
                                <span class="fw-bold text-success" id="totalValue">LKR 0.00</span>
                            </div>
                        </div>

                        <div class="alert alert-info border-0 shadow-sm small rounded-3 mb-0">
                             <i class="fa-solid fa-lightbulb text-warning me-1"></i>
                             Review your totals above and use the <strong>Save</strong> icon in the top action bar to submit this order.
                         </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('js')
    <script>
        let itemCounter = 0;
        const products = @json($products);

        function addOrderItem() {
            itemCounter++;
            const container = document.getElementById('orderItemsContainer');
            const emptyState = document.getElementById('emptyState');

            if (emptyState) {
                emptyState.style.display = 'none';
            }

            const itemHtml = `
                                <div class="order-item border rounded p-3 mb-3" id="item-${itemCounter}">
                                    <div class="row align-items-end">
                                        <div class="col-md-5">
                                            <label class="form-label fw-bold small text-muted uppercase">Product</label>
                                            <select class="form-control product-select" name="items[${itemCounter}][product_id]" onchange="updateProductPrice(${itemCounter})" required>
                                                <option value="">Select Product</option>
                                                ${products.map(p => `<option value="${p.id}" data-price="${p.unit_price}">${p.name} (${p.code})</option>`).join('')}
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small text-muted uppercase">Quantity</label>
                                            <input type="number" class="form-control quantity-input" name="items[${itemCounter}][quantity]" min="1" value="1" onchange="updateSummary()" required>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold small text-muted uppercase">Unit Price</label>
                                            <input type="text" class="form-control price-display" id="price-${itemCounter}" readonly value="0.00">
                                            <input type="hidden" name="items[${itemCounter}][unit_price]" id="price-hidden-${itemCounter}" value="0">
                                        </div>
                                        <div class="col-md-1">
                                            <button type="button" class="btn btn-sm btn-danger rounded-circle" onclick="removeOrderItem(${itemCounter})" title="Remove Item">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            `;

            container.insertAdjacentHTML('beforeend', itemHtml);
            updateSummary();
        }

        function removeOrderItem(id) {
            const item = document.getElementById(`item-${id}`);
            if (item) {
                item.remove();
                updateSummary();

                // Show empty state if no items
                const container = document.getElementById('orderItemsContainer');
                if (container.children.length === 0) {
                    document.getElementById('emptyState').style.display = 'block';
                }
            }
        }

        function updateProductPrice(itemId) {
            const select = document.querySelector(`#item-${itemId} .product-select`);
            const selectedOption = select.options[select.selectedIndex];
            const price = selectedOption.getAttribute('data-price') || 0;

            document.getElementById(`price-${itemId}`).value = parseFloat(price).toFixed(2);
            document.getElementById(`price-hidden-${itemId}`).value = price;
            updateSummary();
        }

        function updateSummary() {
            const items = document.querySelectorAll('.order-item');
            let totalItems = items.length;
            let totalQuantity = 0;
            let totalValue = 0;

            items.forEach(item => {
                const quantity = parseInt(item.querySelector('.quantity-input').value) || 0;
                const price = parseFloat(item.querySelector('.price-display').value) || 0;

                totalQuantity += quantity;
                totalValue += (quantity * price);
            });

            document.getElementById('totalItems').textContent = totalItems;
            document.getElementById('totalQuantity').textContent = totalQuantity;
            document.getElementById('totalValue').textContent = 'LKR ' + totalValue.toFixed(2);
        }

        // Add first item on load or pre-fill from availability report
        document.addEventListener('DOMContentLoaded', function () {
            @if($availabilityReport && count($availabilityReport->items) > 0)
                @foreach($availabilityReport->items as $reportItem)
                    @if($reportItem->variance > 0)
                        addOrderItemWithData({{ $reportItem->posm_product_id }}, {{ $reportItem->variance }});
                    @endif
                @endforeach
            @else
                addOrderItem();
            @endif
        });

        function addOrderItemWithData(productId, quantity) {
            addOrderItem();
            const lastItem = itemCounter;
            const select = document.querySelector(`#item-${lastItem} .product-select`);
            select.value = productId;
            
            const qtyInput = document.querySelector(`#item-${lastItem} .quantity-input`);
            qtyInput.value = quantity;
            
            updateProductPrice(lastItem);
        }
    </script>
@endpush