@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Add Order')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

         <!-- Begin Page Content -->
         <div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Add Order</h1>
<!-- DataTales Example -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.orders')}}"><i class="fa fa-chevron-left"></i></a>Add Order</h6>
    </div>
   
    <div class="card-body">
    <!-- Displaying Success Message -->
    @if (session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif

    <!-- Displaying Errors -->
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="post" action="{{ route('admin.order.add') }}" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <!-- Payment Method -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="payment_method">Payment Method</label>
                <select class="form-control" name="payment_method" id="payment_method" required>
                    <option value="card">Card</option>
                    <option value="cash">Cash</option>
                    <option value="wallet">Wallet</option>
                    <option value="card_cash">Card + Cash</option>
                </select>
            </div>
        </div>

        <!-- Delivery Address -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="delivery_address">Delivery Address</label>
                <input type="text" class="form-control" name="delivery_address" id="delivery_address" placeholder="Enter Delivery Address" required>
            </div>
        </div>
        <!-- Lattitude -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="lat">Lattitude</label>
                <input type="text" class="form-control" name="lat" id="lat" placeholder="Enter Lattitude" required>
            </div>
        </div>
        <!-- Longittude -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="lng">Longittude</label>
                <input type="text" class="form-control" name="lng" id="lng" placeholder="Enter Longittude" required>
            </div>
        </div>

        <!-- Delivery Method -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="delivery_method_id">Delivery Method</label>
                <select class="form-control searchable-select" name="delivery_method_id" id="delivery_method_id" required>
                    <option value="">Select Delivery Method</option>
                    @foreach($delivery_methods as $delivery_method)
                        <option value="{{ $delivery_method->id }}">{{ $delivery_method->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Select User -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="user_id">Select User</label>
                <select class="form-control searchable-select" name="user_id" id="user_id" required>
                    <option value="">Select User</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->phone }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Select Rider -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="rider_id">Select Rider</label>
                <select class="form-control searchable-select" name="rider_id" id="rider_id">
                    <option value="">Select Rider</option>
                    @foreach($riders as $rider)
                        <option value="{{ $rider->id }}">{{ $rider->name }} - {{ $rider->phone }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <!-- Product Dropdowns -->
        <div id="products_section" class="col-12">
            <!-- Initial Product Dropdown -->
            <div class="row product-group">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="product_0_id">Select Product 1</label>
                        <select class="form-control product-select" name="products[0][product_id]" id="product_0_id" onchange="calculateTotal()" required>
                            <option value="">Select Product</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" data-price="{{ $product->price }}-{{ $product->category_id }}">
                                    {{ $product->title }} - Price: {{ $product->price }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="product_0_qty">Quantity</label>
                        <input type="number" class="form-control quantity-input" name="products[0][qty]" id="product_0_qty" placeholder="Enter Quantity" min="1" value="1" oninput="calculateTotal()" required>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add More Products Button -->
        <div class="col-12 mb-4">
            <button type="button" class="btn btn-secondary" onclick="addProduct()">Add Another Product</button>
        </div>

        <!-- Subtotal -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="sub_total">Subtotal</label>
                <input type="text" class="form-control" name="sub_total" id="sub_total" placeholder="Subtotal" readonly>
            </div>
        </div>
 <!-- Platform Fee -->
 <div class="col-sm-6">
            <div class="form-group">
                <label for="platform_fee">Load-unload Fee</label>
                <input type="text" class="form-control" name="platform_fee" id="platform_fee" value="{{ $platform_fee }}" readonly>
                <input type="hidden" class="form-control" name="platform_fee_hidden" id="platform_fee_hidden" value="{{ $platform_fee }}">
            </div>
        </div>

        <!-- Delivery Fee -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="delivery_fee">Delivery Fee</label>
                <input type="text" class="form-control" name="delivery_fee" id="delivery_fee" value="{{ $delivery_fee }}" readonly>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="vat">Vat</label>
                <input type="text" class="form-control" name="vat" id="vat" value="{{ $vat }}" readonly>
            </div>
        </div>

        <!-- Total -->
        <div class="col-sm-6">
            <div class="form-group">
                <label for="total">Total</label>
                <input type="text" class="form-control" name="total" id="total" placeholder="Total" readonly>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="col-lg-12">
            <div class="form-group">
                <button class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Place Order</button>
            </div>
        </div>
    </div>
</form>



    </div>
</div>

</div>
<!-- /.container-fluid -->
    </div>
    <script>

    let productIndex = 1; // Start index for additional products

function addProduct() {
    const productsSection = document.getElementById('products_section');

    const newProductGroup = `
        <div class="row product-group mt-3">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="product_${productIndex}_id">Select Product ${productIndex + 1}</label>
                    <select class="form-control product-select" name="products[${productIndex}][product_id]" id="product_${productIndex}_id" onchange="calculateTotal()" required>
                        <option value="">Select Product</option>
                        @foreach($products as $product)
                            <option value="{{ $product->id }}" data-price="{{ $product->price }}-{{ $product->category_id }}">
                                {{ $product->title }} - Price: {{ $product->price }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="product_${productIndex}_qty">Quantity</label>
                    <input type="number" class="form-control quantity-input" name="products[${productIndex}][qty]" id="product_${productIndex}_qty" placeholder="Enter Quantity" min="1" value="1" oninput="calculateTotal()" required>
                </div>
            </div>
        </div>`;

    productsSection.insertAdjacentHTML('beforeend', newProductGroup);

    productIndex++;
}

function calculateTotal() {
    let subtotal = 0;

    document.querySelectorAll('.product-group').forEach(function(group) {
        const productSelect = group.querySelector('.product-select');
        const quantityInput = group.querySelector('.quantity-input');
        const quantity = parseInt(quantityInput.value) || 1;

        let platformFee = parseFloat(document.getElementById('platform_fee_hidden').value) || 0;

        const selectedOption = productSelect.options[productSelect.selectedIndex];
        let data_price = selectedOption.getAttribute('data-price');
        let price = 0;
        data_price = data_price.split("-");
        if(data_price[1] == 11){
            platformFee = parseFloat(platformFee) * quantity;
            console.log(platformFee)
            $('#platform_fee').val(platformFee);
            price = data_price[0] + parseFloat(platformFee);
        }else{
            price = data_price[0];
        }

        subtotal += price * quantity;
    });

    document.getElementById('sub_total').value = subtotal.toFixed(2);

        const deliveryFee = parseFloat(document.getElementById('delivery_fee').value) || 0;
        const vat = parseFloat(document.getElementById('vat').value) || 0;

        // Calculate total
        let total = subtotal + deliveryFee;
        let totalvat = subtotal * (vat / 100);
        total = totalvat + total;
    document.getElementById('total').value = total.toFixed(2);
}
</script>

@include('Admin.layouts.footer')
@include('Admin.layouts.modal')