@extends('layouts.admin')

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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.orders.index') }}">Orders</a></li>
    <li class="breadcrumb-item active">Create</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Create New Order</h3>
                </div>
                <form action="{{ route('admin.orders.store') }}" method="POST">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="customer_id">Customer</label>
                                    <select name="customer_id" id="customer_id" class="form-control select2 @error('customer_id') is-invalid @enderror" required>
                                        <option value="">Select Customer</option>
                                        @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                                {{ $customer->name }} ({{ $customer->phone ?? 'No Phone' }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('customer_id')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted">
                                        <a href="{{ route('admin.customers.create') }}">Create New Customer</a>
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="status">Order Status</label>
                                    <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required>
                                        <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="processing" {{ old('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                                        <option value="completed" {{ old('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                        <option value="cancelled" {{ old('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                    </select>
                                    @error('status')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="payment_status">Payment Status</label>
                                    <select name="payment_status" id="payment_status" class="form-control @error('payment_status') is-invalid @enderror" required>
                                        <option value="unpaid" {{ old('payment_status') == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                                        <option value="paid" {{ old('payment_status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                    </select>
                                    @error('payment_status')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <h4 class="mt-4 mb-3">Products</h4>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="products_table">
                                <thead>
                                    <tr>
                                        <th width="50%">Product</th>
                                        <th width="20%">Price</th>
                                        <th width="20%">Quantity</th>
                                        <th width="10%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="product_row_0">
                                        <td>
                                            <select name="products[0][id]" class="form-control product-select" onchange="updatePrice(0)" required>
                                                <option value="">Select Product</option>
                                                @foreach($products as $product)
                                                    <option value="{{ $product->id }}" data-price="{{ $product->price }}" data-stock="{{ $product->stock }}">
                                                        {{ $product->name }} (Stock: {{ $product->stock }}) - ${{ number_format($product->price, 2) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control price-input" id="price_0" readonly>
                                        </td>
                                        <td>
                                            <input type="number" name="products[0][quantity]" class="form-control quantity-input" min="1" value="1" required>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm remove-row" disabled><i class="fas fa-trash"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-success btn-sm" id="add_product_row"><i class="fas fa-plus"></i> Add Product</button>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Create Order</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let rowId = 1;
    
    function updatePrice(id) {
        const select = document.querySelector(`select[name="products[${id}][id]"]`);
        const option = select.options[select.selectedIndex];
        const price = option.getAttribute('data-price');
        document.getElementById(`price_${id}`).value = price ? '$' + parseFloat(price).toFixed(2) : '';
    }

    document.getElementById('add_product_row').addEventListener('click', function() {
        const tableBody = document.querySelector('#products_table tbody');
        const newRow = document.createElement('tr');
        newRow.id = `product_row_${rowId}`;
        newRow.innerHTML = `
            <td>
                <select name="products[${rowId}][id]" class="form-control product-select" onchange="updatePrice(${rowId})" required>
                    <option value="">Select Product</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}" data-price="{{ $product->price }}" data-stock="{{ $product->stock }}">
                            {{ $product->name }} (Stock: {{ $product->stock }}) - ${{ number_format($product->price, 2) }}
                        </option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" class="form-control price-input" id="price_${rowId}" readonly>
            </td>
            <td>
                <input type="number" name="products[${rowId}][quantity]" class="form-control quantity-input" min="1" value="1" required>
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm remove-row" onclick="removeRow(${rowId})"><i class="fas fa-trash"></i></button>
            </td>
        `;
        tableBody.appendChild(newRow);
        rowId++;
    });

    function removeRow(id) {
        const row = document.getElementById(`product_row_${id}`);
        row.remove();
    }
</script>
@endpush