@extends('admin.layouts.app')
@section('title', 'Create Order')
@section('page_title', 'Create Order')
@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Create Order</h5>
    </div>
    <div class="card-body">
        <form action="{{ route('orders.store') }}" method="POST">
            @csrf
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Order No</label>
                    <input type="text" class="form-control" value="{{ $nextOrderNo }}" readonly>
                    <input type="hidden" name="order_no" value="">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Order Date <span class="text-danger">*</span></label>
                    <input type="date" name="order_date" class="form-control @error('order_date') is-invalid @enderror" value="{{ old('order_date', date('Y-m-d')) }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Delivery Date <span class="text-danger">*</span></label>
                    <input type="date" name="delivery_date" class="form-control @error('delivery_date') is-invalid @enderror" value="{{ old('delivery_date', date('Y-m-d')) }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Order Type</label>
                    <select name="order_type" class="form-select @error('order_type') is-invalid @enderror">
                        <option value="">Select Order Type</option>
                        <option value="Daily Order" {{ old('order_type') == 'Daily Order' ? 'selected' : '' }}>Daily Order</option>
                        <option value="Pre Order" {{ old('order_type') == 'Pre Order' ? 'selected' : '' }}>Pre Order</option>
                    </select>
                    @error('order_type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Shipment Note</label>
                    <select name="shipment_note_id" class="form-control">
                        <option value="">Select Shipment Note (Optional)</option>
                        @foreach($shipmentNotes as $note)
                            <option value="{{ $note->id }}" {{ old('shipment_note_id') == $note->id ? 'selected' : '' }}>{{ $note->created_at->format('d-m-Y') }} - {{ Str::limit($note->note, 60) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Customer <span class="text-danger">*</span></label>
                    <select name="customer_id" id="customerSelect" class="form-control @error('customer_id') is-invalid @enderror" required>
                        <option value="">Select Customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}" data-branches='{!! $customer->branches->toJson() !!}' {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Branch</label>
                    <select name="branch_id" id="branchSelect" class="form-control">
                        <option value="">Select Branch (Optional)</option>
                    </select>
                </div>
            </div>

            <hr>
            <h5>Order Items</h5>
            <div class="table-responsive">
                <table class="table table-bordered" id="orderItemsTable">
                    <thead>
                        <tr>
                            <th style="min-width: 250px;">Product</th>
                            <th>Unit</th>
                            <th>Quantity</th>
                            <th>Rate</th>
                            <th>Amount</th>
                            <th><button type="button" class="btn btn-success btn-sm" id="addRow"><i class="fas fa-plus"></i></button></th>
                        </tr>
                    </thead>
                    <tbody id="orderItemsBody">
                        <tr>
                            <td>
                                <select name="products[]" class="form-select product-select" required>
                                    <option value="">Select Product</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}" data-price="{{ $product->sale_price ?? 0 }}" data-unit="{{ $product->unit->short_name ?? '' }}">{{ $product->name }} ({{ $product->code }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="text" class="form-control unit-display" readonly>
                            </td>
                            <td>
                                <input type="number" name="quantities[]" class="form-control quantity" step="0.001" value="1" required>
                            </td>
                            <td>
                                <input type="number" name="rates[]" class="form-control rate" step="0.01" value="0" required>
                            </td>
                            <td>
                                <input type="number" class="form-control amount" step="0.01" value="0" readonly>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm removeRow"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="text-end"><strong>Total:</strong></td>
                            <td><input type="number" name="total" id="totalAmount" class="form-control" step="0.01" value="0" readonly></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-primary">Save</button>
                <a href="{{ route('orders.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function loadBranches(customerSelect) {
        var selectedOption = customerSelect.find('option:selected');
        var branchSelect = $('#branchSelect');
        branchSelect.html('<option value="">Select Branch (Optional)</option>');

        try {
            var branches = JSON.parse(selectedOption.attr('data-branches') || '[]');
            if (branches && branches.length > 0) {
                $.each(branches, function(index, branch) {
                    if (branch.status == 1) {
                        branchSelect.append('<option value="' + branch.id + '">' + branch.name + '</option>');
                    }
                });
            }
        } catch(e) {
            console.error('Branch parse error:', e);
        }
    }

    $('#customerSelect').change(function() {
        loadBranches($(this));
    });

    $(document).ready(function() {
        if ($('#customerSelect').val()) {
            loadBranches($('#customerSelect'));
        }
        initOrderItems();
    });

    function initOrderItems() {
        function calculateRow(row) {
            var qty = parseFloat(row.find('.quantity').val()) || 0;
            var rate = parseFloat(row.find('.rate').val()) || 0;
            row.find('.amount').val((qty * rate).toFixed(2));
            calculateTotal();
        }

        function calculateTotal() {
            var total = 0;
            $('.amount').each(function() {
                total += parseFloat($(this).val()) || 0;
            });
            $('#totalAmount').val(total.toFixed(2));
        }

        $(document).on('change', '.product-select', function() {
            var unit = $(this).find('option:selected').data('unit') || '';
            $(this).closest('tr').find('.unit-display').val(unit);
        });

        $(document).on('change keyup', '.quantity, .rate', function() {
            calculateRow($(this).closest('tr'));
        });

        $('#addRow').click(function() {
            var row = $('#orderItemsBody tr:first').clone();
            row.find('select').val('');
            row.find('.unit-display').val('');
            row.find('input:not(.unit-display)').val('');
            row.find('.amount').val('0');
            $('#orderItemsBody').append(row);
        });

        $(document).on('click', '.removeRow', function() {
            if ($('#orderItemsBody tr').length > 1) {
                $(this).closest('tr').remove();
                calculateTotal();
            }
        });

        $('#orderItemsBody tr').each(function() {
            calculateRow($(this));
        });
    }
</script>
@endsection