@extends('admin.main')

@section('content')
      
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-primary">
                            <div class="d-flex">
                                <div style="width: 50px;"><img src="{{ $patient->profile_image ? asset('profile_images/' . $patient->profile_image) :asset('/img/upload.png') }}" onerror="$(this).attr('src',$(this).attr('err_image'))" err_image="{{asset('/img/upload.png')}}" id="imagePreview" class="img-fluid border p-1" alt="Profile Image"></div>
                                <div class="ml-2 flex-grow-1 bg-primary text-white">
                                    <h4 class="text-white">{{(!empty($patient->title) ? ucfirst($patient->title) : '').' '.(!empty($patient->name) ? ucfirst($patient->name) : '')}} 
                                     @if(!empty($patient->patientCategory)) -
                                        <span class="uniqColorSet" style="background-color: {{  $patient->patientCategory->color_code }};"></span>
                                     @endif
                                        <a href="{{ route('bills.show',$patient->id) }}" class="btn btn-primary float-right"><b>X</b></a></h4>
                                    <span class="text-white">{{!empty($patient->gender) ? $patient->gender : ''}} | {{!empty($patient->dob_or_age) ? (\Carbon\Carbon::parse($patient->dob_or_age)->age) : ''}} Years | {{!empty($patient->id) ? $patient->id : ''}}</span>
                                </div>
                            </div>
                        </div>
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="card-body">
                            <form action="{{ route('bills.store') }}" method="POST">
                               @csrf
                            <div class="row m-1">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="form-group row">
                                                <label for="bill_date" class="col-sm-5 col-form-label">Bill Date:</label>
                                                <div class="col-sm-7">
                                                  <input type="date" class="form-control" id="bill_date" value="{{date('Y-m-d')}}">
                                                </div>
                                              </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="group row">
                                                <label for="deposit_amount" class="offset-sm-5 col-sm-3 col-form-label">Deposit Amount:</label>
                                                <div class="col-sm-4">
                                                  <input type="text" class="form-control" id="deposit_amount" value="0">
                                                </div>
                                                <!-- <div class="col-sm-3 pr-1 text-right">
                                                  <button class="btn btn-primary addbill" id="addbill"><i class="i-Add"></i></button>
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                     <div class="table-responsive"> 
                                        <table class="display table-striped table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th style="min-width: 200px;">Service Name</th>
                                                    <th>Qty</th>
                                                    <th>Unit Price</th>
                                                    <th>GST %</th>
                                                    <th>GST In Rs</th>
                                                    <th>Discount</th>
                                                    <th>Total Price</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody id="add_services">
                                                <tr row-id="1">
                                                    <td>1</td>
                                                    <td>
                                                        <select class="form-control doctorservices" name="service_name[]" id="service_id-1" required>
                                                            <option value="">Add Service</option>
                                                            @if(!empty($services))
                                                                @foreach($services as $in=>$list)
                                                                <option price="{{$list->service_consultant_price}}" value="{{$list->service_name}}" >{{$list->service_name}}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                    </td>
                                                    <td><input step="any" type="number" name="qty[]"  id="qty-1" class="form-control qtychange" value="1" min="1"></td>
                                                    <td><input step="any" type="number" name="unit_price[]" id="unit_price-1" class="form-control price_change" placeholder="₹" value="" ></td>
                                                    <td><input class="form-control gstpre" step="any" type="number" name="gst_in_per[]" id="gst_in_per-1" placeholder="0" value="" min="0"></td>
                                                    <td><input step="any" type="number" name="gst_in_rs[]" id="gst_in_rs-1" class="form-control" placeholder="0" value="" readonly></td>
                                                    <td><input class="form-control discountprice" step="any" type="number" name="discount[]" id="discount-1" placeholder="₹" value="" min="0"></td>
                                                    <td><input step="any" type="number" class="form-control" name="net_price[]" id="net_price-1" placeholder="0" value=""></td>
                                                    <td><i class="i-Remove remove_row text-danger d-none"></i></td>
                                                    <input type="hidden" name="purchase_services_id[]" id="purchase_services_id-1" value="">
                                                </tr>
                                            </tbody>
                                        </table>
                                     </div>

                                     <div class="form-group remarkArea w-100" style="display: none;">
                                      <label for="remark">Discount Remark *</label>
                                      <textarea class="form-control" id="remark" rows="4" name="discount_remark"  placeholder="Enter Text"></textarea>
                                   </div>
                                    </div>
                                    <div class="row">
                                        <button class="col-md-2 btn btn-primary addbill mt-3 py-2" id="addbill" data-toggle="tooltip" title="Add Service">Add Service</button>

                                        <button class="col-md-2 btn btn-primary mt-3 py-2 ml-2" id="add_item">Add Custom Service</button>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card-header bg-primary text-white h5">Bill Summary</div>
                                    <table class="display table">
                                        <tbody>
                                            <input type="hidden" name="patient_id" value="{{$patient_id}}">
                                            <input type="hidden" name="doctor_id" value="{{$doctor_id}}">
                                            <tr>
                                                <th>Total Billed Amount:</th>
                                                <th id="total_billed_amount">₹ 0</th>
                                                <input class="total_billed_amount" type="hidden" name="base_amount" value="{{old('base_amount')}}">
                                            </tr>
                                            <tr>
                                                <td>Discount Amount: </td>
                                                <td id="total_discount_amount">- ₹ 0</td>
                                                <input class="total_discount_amount" type="hidden" name="total_discount" value="{{old('total_discount')}}">
                                            </tr>
                                            <tr>
                                                <td>Tax Amount: </td>
                                                <td id="total_tax_amount">₹ 0</td>
                                                <input class="total_tax_amount" type="hidden" name="total_tax" value="{{old('total_tax')}}">
                                            </tr>
                                            <tr>
                                                <td>Final Amount: </td>
                                                <td id="total_final_amount">₹ 0</td>
                                                <input class="total_final_amount" type="hidden" name="final_amount" value="{{old('final_amount')}}">
                                            </tr>
                                            <tr>
                                                <td>Pre-deposit: </td>
                                                <td id="total_pre_deposit">- ₹ 0</td>
                                                <input class="total_pre_deposit" type="hidden" name="pre_deposite" value="{{old('pre_deposite')}}">
                                            </tr>
                                            <tr>
                                                <td>Received Amount: </td>
                                                <td id="total_received_amount">- ₹ 0</td>
                                                <input class="total_received_amount" type="hidden" name="received_amount" value="{{old('received_amount')}}">
                                            </tr>
                                            <tr>
                                                <td>Refund Amount: </td>
                                                <td id="total_refund_amount">₹ 0</td>
                                                <input class="total_refund_amount" type="hidden" name="refund_amount" value="{{old('refund_amount')}}">
                                            </tr>
                                            <tr>
                                                <th>Total Balance: </th>
                                                <th id="total_balance_amount">₹ 0</th>
                                                <input class="total_balance_amount" type="hidden" name="net_amount" value="{{old('net_amount')}}">
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-4">
                                    <div class="card-header bg-primary text-white h5">Pay Bill</div>
                                    <table class="display table">
                                        <tbody>
                                            <!-- <tr>
                                                <th colspan="2" class="text-center text-primary">Pay Bill</th>
                                            </tr> -->
                                            <!-- <tr>
                                                <td colspan="2">
                                                    <select class="form-control" name="payment_mode">
                                                        <option {{old("payment_mode") == "CASH"?"selected":""}} value="CASH">CASH</option>
                                                        <option {{old("payment_mode") == "ONLINE"?"selected":''}} value="ONLINE">ONLINE</option>
                                                    </select>
                                                </td>
                                            </tr> -->
                                             <tr>
                                                <td><b>Cash:</b></td>
                                                <td> <input class="form-control" placeholder="0.00" id="cash_amount" type="test" name="cash_amount" min="0.00" value="{{old('cash_amount',0.00)}}"></td>
                                            </tr>

                                            <tr>
                                                <td><b>Online:</b></td>
                                                <td> <input class="form-control" id="online_amount" placeholder="0.00" type="text"  name="online_amount" min="0.00" value="{{old('online_amount',0.00)}}"></td>
                                            </tr>


                                            <tr>
                                                 <td><b>Remaining:</b></td>
                                                <td><input class="form-control" id="remaining_amunt" type="text"  name="remaining_amunt" readonly></td>
                                            </tr>

                                             <input type="hidden" id="paid_amount" type="number" step="any" name="paid_amount" min="0" value="{{old('paid_amount',0)}}" > 


                                            <!-- <tr>
                                                
                                                <td colspan="2"><input class="form-control" id="paid_amount" type="number" step="any" name="paid_amount" min="0" value="{{old('paid_amount',0)}}"></td>
                                            </tr> -->
                                            <tr>
                                                <td colspan="2"><input class="form-control" type="text" name="add_details" placeholder="Add Details" value="{{old('paid_amount')}}"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="2"><button type="submit" class="btn btn-lg btn-block btn-primary paysubmit" disabled>Pay </button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#addbill").click(function(e) {
            e.preventDefault();

            let row_html = createHtml("select");
            
            $("#add_services").append(row_html);
            updateRemoveBtn();
            $("#service_id-"+index).change();
        });
        $("#add_item").click(function(e) {
            e.preventDefault();
            let row_html = createHtml("text");

            $("#add_services").append(row_html);
            updateRemoveBtn();
        });
        $("#add_services").on('change', ".doctorservices",function (){
            var serviceId = $(this).find('option:selected').val();
            var unit_price = $(this).find('option:selected').attr("price");
            var current_row = $(this).parents("tr").attr('row-id');
            if (serviceId == "Add Service") {
                $("#unit_price-"+current_row+",#net_price-"+current_row).val(parseFloat(0));
            }else{
                $("#unit_price-"+current_row+",#net_price-"+current_row).val(parseFloat(unit_price));
            }
            $("#qty-"+current_row).change();
            // updatePrice(unit_price,current_row);
        });
        $("#add_services").on("change keyup blur",'.qtychange,.discountprice,.gstpre,.price_change',function () {
          var current_row = $(this).parents("tr").attr('row-id');
          let unit_price = $("#unit_price-"+current_row).val();
          let qty = $("#qty-"+current_row).val();
          let discount = $('#discount-'+current_row).val();
          let gst_in_per = $("#gst_in_per-"+current_row).val();
          let net_price = parseFloat(unit_price)*parseFloat(qty);
          $('.remarkArea').hide();
          if (discount) {
             net_price = parseFloat(net_price) - parseFloat(discount);
          }
          if (net_price < 0) {
             net_price = 0;
          }
          if (gst_in_per) {
             let gst_rs = (net_price * (gst_in_per/100)).toFixed(2);
             $('#gst_in_rs-'+current_row).val(gst_rs);
             net_price = parseFloat(net_price) + parseFloat(gst_rs);
          }
          $("#net_price-"+current_row).val(net_price);
             updatePrice('',current_row);
        });

        $("#paid_amount").on("keyup", function(){
            $(".pay_btn").html($(this).val());
            updatePrice('','');
        })
        $("#add_services").on('click', ".remove_row",function (){
            $(this).parents("tr").remove();
            updatePrice('','');
            updateRemoveBtn();
        });
        $("#deposit_amount").on("keyup", function(){
            updatePrice('','');
        });


         $('#cash_amount').on("keyup", function(){

             let cashamt =parseFloat($('#cash_amount').val()) || 0;
             let onlinepay =  parseFloat($('#online_amount').val()) || 0;

              if (cashamt >= 0 && onlinepay >= 0) {
                payamt = parseFloat(cashamt) + parseFloat(onlinepay);
                console.log('cash_'+cashamt + '--'+onlinepay +'---' +payamt)
                $("#paid_amount").val(payamt);
                updatePrice('','');
              }
        });


        $('#online_amount').on("keyup", function(){

             let cashamt =parseFloat($('#cash_amount').val()) || 0;
             let onlinepay =  parseFloat($('#online_amount').val()) || 0;

              if (cashamt >= 0 && onlinepay >= 0) {
                payamt = parseFloat(cashamt) + parseFloat(onlinepay);
                console.log('cash_'+cashamt + '--'+onlinepay +'---' +payamt)
                $("#paid_amount").val(payamt);
                updatePrice('','');
              }
        });
       
    });

function updatePrice(amount,count_val){
    // var index = $("#add_services tr").length;
    let total = 0;
    let discount = 0;
    let gst_in_rs = 0;
    let unit_price = 0;
    let deposit = $("#deposit_amount").val() || 0;
    let receved_amount = $("#paid_amount").val() || 0;
    $("#add_services tr").each(function () {
        let row_index = $(this).attr("row-id");
        let qty = parseFloat($("#qty-"+row_index).val()) || 1;
        let u_price = parseFloat($("#unit_price-"+row_index).val()) || 0;
        unit_price += u_price * qty;
        total += parseFloat($("#net_price-"+row_index).val()) || 0;
        discount += parseFloat($("#discount-"+row_index).val()) || 0;
        gst_in_rs += parseFloat($("#gst_in_rs-"+row_index).val()) || 0;
    });
    total = total.toFixed(2);
    discount = discount.toFixed(2);
    gst_in_rs = gst_in_rs.toFixed(2);
    $("#total_final_amount").html('₹ '+total);
    let total_balance = parseFloat(total) - parseFloat(deposit);
    total_balance = parseFloat(total_balance) - parseFloat(receved_amount);
    $("#total_balance_amount").html('₹ '+total_balance);
    $("#total_discount_amount").html('- ₹ '+discount);
    $("#total_tax_amount").html('₹ '+gst_in_rs);
    $("#total_billed_amount").html('₹ '+unit_price);
    $("#total_pre_deposit").html('- ₹ '+deposit);
    $("#total_received_amount").html('- ₹ '+receved_amount);
    $("#total_refund_amount").html(0);

    $(".total_final_amount").val(total);
    $(".total_balance_amount").val(total_balance);
    $(".total_discount_amount").val(discount);
    $(".total_tax_amount").val(gst_in_rs);
    $(".total_billed_amount").val(unit_price);
    $(".total_pre_deposit").val(deposit);
    $(".total_received_amount").val(receved_amount);
    $(".total_refund_amount").val(0);


    $('#remaining_amunt').val(total_balance);

    //$('#paid_amount').val(total);

    if ($('.total_discount_amount').val() > 0) {
        $('.remarkArea').show();
        $('.remarkArea textarea').attr('required', true);
    }

   

    var remaining_amunt = $('#remaining_amunt').val();
    console.log('remaining_amunt '+ parseFloat(remaining_amunt));

    if(parseFloat(remaining_amunt) == 0){
         console.log('here');
        $('.paysubmit').prop('disabled', false);
       
    }else{
         console.log('elehere');
         $('.paysubmit').prop('disabled', true);
    }

}
function updateRemoveBtn()
{
    if ($("#add_services tr").length > 1 && $("#add_services tr:first .remove_row").hasClass('d-none')) {
        $("#add_services tr:first .remove_row").removeClass('d-none');
    }
    if ($("#add_services tr").length <= 1){
        $("#add_services tr:first .remove_row").addClass('d-none');
    }
    $("#add_services tr").each(function (index) {
        $(this).find("td:first").html(index + 1);
    });
}
function createHtml(type)
{
    var index = $("#add_services tr:last").attr("row-id");
    index++;
    let serviceHtml = "";
    if (type == "select") {
        serviceHtml += `<select class="form-control doctorservices" name="service_name[]" id="service_id-${index}" required>
                <option value="">Add Service</option>
                @if(!empty($services))
                    @foreach($services as $in=>$list)
                        <option price="{{$list->service_consultant_price}}" value="{{$list->service_name}}">{{$list->service_name}}</option>
                    @endforeach
                @endif
            </select>`;
    }else if(type == "text"){
        serviceHtml += `<input type="text" class="form-control" name="service_name[]" id="service_name-${index}" placeholder="Add Text">`;
    }
    let row_html = `<tr row-id="${index}">
                <td>${index}</td>
                <td>
                    `+serviceHtml+`
                </td>
                <td><input type="number" step="any" name="qty[]" id="qty-${index}" class="form-control qtychange" value="1" min="1"></td>
                <td><input type="number" step="any" name="unit_price[]" id="unit_price-${index}" class="form-control price_change" placeholder="₹" value="0"></td>
                <td><input class="form-control gstpre" type="number" step="any" name="gst_in_per[]" id="gst_in_per-${index}" placeholder="0" value="0" min="0"></td>
                <td><input type="number" step="any" name="gst_in_rs[]" id="gst_in_rs-${index}" class="form-control" placeholder="0" value="0" readonly></td>
                <td><input class="form-control discountprice" type="number" step="any" name="discount[]" id="discount-${index}" placeholder="₹" value="0" min="0"></td>
                <td><input type="number" step="any" class="form-control" name="net_price[]" id="net_price-${index}" placeholder="0" value="0"></td>
                <td><i class="i-Remove remove_row text-danger"></i></td>
                <input type="hidden" name="purchase_services_id[]" id="purchase_services_id-${index}" value="">
            </tr>`;
    return row_html;
}
</script>
@endsection