@extends('layouts.user')

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>


{{-- Web site Title --}}

{{-- Content --}}

@section('content')

<form method="POST" action="{{ route('save.sales.order') }}" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    @foreach($sale_order as $n_q)

    <div class="form-group row">

<input type="hidden" value="{{$n_q->order_id}}" name="order_id">


        <div class="col-xs-4">
            <label for="ex1">Customer ID NO</label>
            <input readonly class="form-control" value="{{$n_q->customer_id}}" onfocusout="getCustomerInfo()" name="id_no" type="number" id="c_id" placeholder="Enter ID No" required>
        </div>

        <div class="col-xs-4">
            <label for="ex1">Customer Mobile</label>
            <input readonly class="form-control" value="{{$n_q->mobile}}" type="number" id="c_mobile" name="contact" placeholder="Enter Mobile Number" required>
        </div>


        <div class="col-xs-4">
            <label for="ex1">Customer Name</label>
                        <input readonly class="form-control" value="{{$c_name}}" id="c_name" type="text" name="name" placeholder="Enter Customer Name">
        </div>




        <div class="form-group removeleft">
            <br>
            <div class="col-xs-3">
                <label for="name_en">Select Package</label>
                <select  class="form-control form-select" aria-label=".form-select-lg example" id="package_id" name="package"  required>
                                    </select>
            </div>
            <div class="col-xs-3">
                <label for="name_en">Event Date</label>

                <div class='input-group datetime' id='datetimepicker2'>
                    <input readonly value="{{$n_q->event_date}}" type='text' name="date" class="form-control" required />
                
                </div>
            </div>
            <div class="col-xs-3">
                <label for="name_en">Invoice Due Date</label>

                <div class='input-group datetime' id='datetimepicker2'>
                    <input type='text' name="date" class="form-control" required />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>


                    </span>
                </div>
            </div>
       
        </div>


    </div>

    

   
    <div class="form-group row">
        <div class="col-xs-12">
            <table  class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <td>#.</td>

                        <td>Name</td>
                        <td>Price</td>
                        <td>Quantity</td>
                        <td>Sub Total</td>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sale_order_services as $key=>$ser_con)
                    <tr>
                        <td>{{$key+1}}</td>
                        <td>{{$ser_con->service_name}}</td>
                        <td>{{$ser_con->service_price}}</td>
                        <td>{{$ser_con->qty}}</td>
                        <td>{{$ser_con->t_price}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="form-group row">

        <div class="col-xs-4">
            <label for="name_en">Actual Price</label>
            <input type='number' value="{{$n_q->total_price}}" name="a_price" value="0" id="t_price" class="form-control" readonly />
        </div>
        <div class="col-xs-4">
            <label for="name_en">Dicount %</label>
            <input type='number' readonly value="{{$n_q->discount}}" name="discount" value="0" id="discount" oninput="updatePrices()" class="form-control" />
        </div>
        <div class="col-xs-4">
            <label for="name_en">Final Payment</label>
            <input type='text' value="{{$n_q->price_after_discount}}" name="f_amount" value="0" id="final_payment" class="form-control" oninput="setTwoNumberDecimal(this)" readonly />
        </div>
    </div>




    <div class="form-group row">

        <div class="col-xs-6">
            <label for="name_en">Vat</label>
            <input type='number'  value="{{$n_q->vat}}" name="vat" value="0" id="vat" oninput="setTwoNumberDecimal(this)" class="form-control" readonly />
        </div>
        <div class="col-xs-6">
            <label for="name_en">Total Amount</label>
            <input type='text' readonly value="{{$n_q->pending_amount}}" name="g_t_price" value="0" id="total_amount" class="form-control" oninput="setTwoNumberDecimal(this)" />
        </div>
    </div>





    <div class="form-group row">
        <div class="col-xs-3">
            <label for="name_en">Paid Amount</label>
            <input type='number' step="0.01" name="paid" value="0" id="paid" oninput="updatePrices2(this)" class="form-control" />
        </div>
        <div class="col-xs-3">
            <label for="name_en">Pending Amount</label>
            <input type='number' value="{{$n_q->pending_amount}}" name="pending" value="0" id="pending" class="form-control" readonly oninput="setTwoNumberDecimal(this)" />
        </div>

        <div class="col-xs-3">
            <label for="name_en">Payment Status</label>
            <input type='text' name="status" value="Pending" id="status" class="form-control" readonly />
        </div>

        {{-- <div class="col-xs-3">
            <label for="name_en">Payment Status</label>
            <select class="form-control" name="status" required>
                <option value="" selected disabled>Select payment status</option>
                <option value="1">All Paid</option>
                <option value="2">Partial Paid</option>
            </select>
        </div> --}}

        <div class="col-xs-3">
            <label for="name_en">Select Account</label>
            <select class="form-control" name="account_id" required>
                <option value="" selected disabled>---Select Account---</option>
               @foreach($account as $ac)
                <option value="{{$ac->id}}">{{$ac->beneficiary_name}}</option>
               @endforeach
            </select>
        </div>

    </div>







    <div class="form-group" class="col-xs-8">
        <label for="description_ar">
            Description
        </label>
        <textarea readonly class="form-control" name="note" id="note_ar" rows="3">{{$n_q->terms_and_conditions}}</textarea>
    </div>
    <div class="form-group" class="col-xs-4">
        <label for="description_ar">
            File
        </label>
        <input name="attachment" type="file">
    </div>


    <button type="submit" class="btn btn-primary">Save</button>
    @endforeach
</form>
@stop 
<script>
    function updatePrices2() {
        //var price = document.getElementById("total_amount").value;
        document.getElementById("pending").value = toFixedTrunc(document.getElementById("total_amount").value - document.getElementById("paid").value,3);
        if (document.getElementById("paid").value === document.getElementById("total_amount").value || document.getElementById("pending").value < 0)
            document.getElementById("status").value = 'Paid';
        else if (document.getElementById("pending").value === document.getElementById("total_amount").value)

            document.getElementById("status").value = 'Pending';
        else

            document.getElementById("status").value = 'Partially Paid';




    }
    function toFixedTrunc(x, n) {
  const v = (typeof x === 'string' ? x : x.toString()).split('.');
  if (n <= 0) return v[0];
  let f = v[1] || '';
  if (f.length > n) return `${v[0]}.${f.substr(0,n)}`;
  while (f.length < n) f += '0';
  return `${v[0]}.${f}`
}

</script>