@extends('admin.layouts.masterlayout')

@section('content')

<div class="main-content">

<div class="card">

<div class="card-header d-flex justify-content-between">
<h5>Add Order</h5>

<a href="{{ route('order.view') }}" class="btn btn-secondary btn-sm">Back</a>
</div>

<div class="card-body">

<form method="POST">
@csrf

<!-- USER -->
<div class="mb-3">
<label>Select User</label>
<select name="user_id" class="form-control" required>
<option value="">Select User</option>

@foreach($users as $u)
<option value="{{ $u->id }}">
    {{ $u->name ?? $u->username ?? 'No Name' }}
</option>
@endforeach

</select>
</div>

<hr>

<div id="productRow">

<div class="row mb-3 align-items-end product-row">

<div class="col-md-3">
<label>Product</label>
<select name="products[]" class="form-control product-select">
<option value="">Select Product</option>

@foreach($products as $p)
<option value="{{ $p->id }}"
data-price="{{ $p->price }}"
data-coin="{{ $p->reward_coin }}">
{{ $p->name }}
</option>
@endforeach

</select>
</div>

<div class="col-md-2">
<label>Price</label>
<input type="number" name="price[]" class="form-control price" readonly>
</div>

<div class="col-md-2">
<label>Qty</label>
<input type="number" name="qty[]" class="form-control qty" value="1">
</div>

<div class="col-md-2">
<label>Coin</label>
<input type="number" name="coin[]" class="form-control coin" readonly>
</div>

<div class="col-md-2">
<label>Total</label>
<input type="text" class="form-control total" readonly>
</div>

<div class="col-md-1">
<button type="button" class="btn btn-danger removeRow">X</button>
</div>

</div>

</div>

<button type="button" onclick="addRow()" class="btn btn-secondary btn-sm">
+ Add Product
</button>

<hr>

<h5>Total Amount: ₹ <span id="grandTotal">0</span></h5>
<h5>Total Coin: <span id="grandCoin">0</span></h5>

<br>

<button class="btn btn-success">Save Order</button>

</form>

</div>

</div>

</div>

@endsection


@push('scripts')

<script>

// Add new row
function addRow(){

let html = $('.product-row:first').clone();

html.find('input').val('');
html.find('.qty').val(1);

$('#productRow').append(html);
}

// Remove row
$(document).on('click','.removeRow',function(){
$(this).closest('.product-row').remove();
calculateGrandTotal();
});

// Product select
$(document).on('change','.product-select',function(){

let price = $(this).find(':selected').data('price');
let coin = $(this).find(':selected').data('coin');

let row = $(this).closest('.product-row');

row.find('.price').val(price);
row.find('.coin').val(coin);

calculateRow(row);
});

// Qty change
$(document).on('input','.qty',function(){

let row = $(this).closest('.product-row');

calculateRow(row);
});

// Calculate row total
function calculateRow(row){

let price = parseFloat(row.find('.price').val()) || 0;
let qty = parseInt(row.find('.qty').val()) || 0;

let total = price * qty;

row.find('.total').val(total);

calculateGrandTotal();
}

// Calculate grand total
function calculateGrandTotal(){

let grandTotal = 0;
let grandCoin = 0;

$('.product-row').each(function(){

let price = parseFloat($(this).find('.price').val()) || 0;
let qty = parseInt($(this).find('.qty').val()) || 0;
let coin = parseInt($(this).find('.coin').val()) || 0;

grandTotal += price * qty;
grandCoin += coin * qty;

});

$('#grandTotal').text(grandTotal);
$('#grandCoin').text(grandCoin);
}

</script>

@endpush