@extends('core::layouts.master')
@section('title')
ការលក់ត្រឡប់
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form method="post" action="#">
                        {{csrf_field()}}                    
                        <div class="card-header">ការលក់ត្រឡប់</div>
                        <div class="card-body">

                    

                            
                            <div class="row">
                                <div class="col-sm-12 col-lg-12">
                                    <div class="form-group row">
                                        <div class="col-sm-12 control-label"><label for="nf-email">ជ្រើសរើសផលិតផល</label> <span class="text-danger">*</span></div>
                                        <div class="col-sm-12">
                                        <input type="text" name="product" placeholder="Search Property Name / Barcode" class="form-control search"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <table id="example" class="table table-striped table-condensed table-hover dataTable no-footer table-bordered" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th>Branch</th>
                                                <th>Property</th>
                                                <th>Code</th>
                                                <th>Quantity</th>
                                                <th>Price</th>
                                                <th>Discount</th>
                                                <th>Tax</th>
                                                <th>SubTotal</th>
                                                <th>Delete</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach($tmp as $k => $v)
                                            <tr>
                                                <td>{{ $v->get_branch->branch }}</td>
                                                <td>{{ $v->property_title }} <input type="hidden" value="{{ $v->property_id }}" name="property_id[]"/></td>
                                                <td>{{ $v->property_code }}</td>
                                                <td width="180px">
                                                    <input type="number" name="quantity[]" value="1" class="form-control qty" index="{{ $k }}"/>
                                                </td>
                                                <td>
                                                    <span class="dis_price_{{$k}}"> ${{ number_format($v->price_per_unit,2) }} </span>
                                                    <input class="price_{{$k}}" type="hidden" value="{{ $v->price_per_unit }}" name="price[]"/>
                                                    <input class="price dis_price_val_{{$k}}" type="hidden" value="{{ $v->price_per_unit }}"/>

                                                </td>
                                                <td>
                                                    <span class="dis_discount_{{$k}}">${{ number_format($v->discount,2) }}</span>
                                                    <input class="discount_{{$k}}" type="hidden" value="{{ $v->discount }}" name="discount[]"/>
                                                    <input class="discount dis_discount_val_{{$k}}" type="hidden" value="{{ $v->discount }}"/>
                                                </td>
                                                <td>
                                                <span class="dis_tax_{{$k}}"> ${{ number_format($v->tax,2) }} </span>
                                                    <input class="tax_{{$k}}" type="hidden" value="{{ $v->tax }}" name="tax[]"/>
                                                    <input class="tax dis_tax_val_{{$k}}" type="hidden" value="{{ $v->tax }}"/>
                                                </td>
                                                <td>
                                                    <span class="dis_sub_total_{{$k}}"> ${{ number_format($v->total_price,2) }} </span>
                                                    <input class="sub_total_{{$k}}" type="hidden" value="{{ $v->total_price }}" name="subtotal[]"/>
                                                    <input class="sub_total dis_sub_total_val_{{$k}}" type="hidden" value="{{ $v->total_price }}"/>
                                                </td>
                                                <td>
                                                    <a data-hint="@lang('message.delete')" data-toggle="modal" data-target="#DeleteModal" class="btn btn-square btn-sm btn-danger hint--left hint--default text-white" onclick="deleteData({{$v->id}})"><i class="fa fa-trash"></i></a>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                                <th>Total</th>
                                                <th><span id="total_qty"></span></th>
                                                <th><span id="total_price"></span></th>
                                                <th><span id="total_discount"></span></th>
                                                <th><span id="total_tax"></span></th>
                                                <th><span id="total_sub_total"></span></th>
                                                <th></th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>


                            </div>

                            <div class="row">
                            <div class="col-sm-12 col-lg-6">
                                <div class="form-group row">
                                    <div class="col-sm-12 control-label"><label for="nf-email">សាខា</label> <span class="text-danger">*</span></div>
                                    <div class="col-sm-12 @if($errors->has('supplier')) has-error @endif">
                                        <select name="branch"  class="form-control select2 branch" style="width: 100% !important;">
                                            <option value="" disabled selected>---Selected---</option>
                                            @foreach($branches as $k => $v) 
                                                <option @if(old('branch') == $v->id) selected @endif value="{{ $v->id }}">{{ $v->name }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->first('branch'))
                                            <span class="text-danger">{{$errors->first('branch')}}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>



                            <div class="col-sm-12 col-lg-6">
                                <div class="form-group row">
                                    <div class="col-sm-12 control-label"><label for="nf-email">Biller</label> <span class="text-danger">*</span></div>
                                    <div class="col-sm-12 @if($errors->has('biller')) has-error @endif">
                                        <select name="biller"  class="form-control select2 biller" style="width: 100% !important;">
                                            <option value="" disabled selected>---Selected---</option>
                                            @foreach($biller as $k => $v) 
                                                <option @if(old('biller') == $v->id) selected @endif value="{{ $v->id }}">{{ $v->first_name }} {{ $v->last_name }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->first('biller'))
                                            <span class="text-danger">{{$errors->first('biller')}}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-12 col-lg-6">
                                <div class="form-group row">
                                    <div class="col-sm-12 control-label"><label for="nf-email">អតិថិជន</label> <span class="text-danger">*</span></div>
                                    <div class="col-sm-12 @if($errors->has('customer')) has-error @endif">
                                        <select name="customer"  class="form-control select2 customer" style="width: 100% !important;">
                                            <option value="" disabled selected>---Selected---</option>
                                            @foreach($customer as $k => $v) 
                                                <option @if(old('customer') == $v->id) selected @endif value="{{ $v->id }}">{{ $v->first_name }} {{ $v->last_name }}(#{{ $v->id }})</option>
                                            @endforeach
                                        </select>
                                        @if($errors->first('customer'))
                                            <span class="text-danger">{{$errors->first('customer')}}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                    
                            <div class="col-sm-12 col-lg-6">
                                <div class="form-group row">
                                    <div class="col-sm-12 control-label"><label for="nf-email">Order Tax</label> <span class="text-danger">*</span></div>
                                    <div class="col-sm-12 @if($errors->has('order_tax')) has-error @endif">
                                        <select name="order_tax"  class="form-control select2 biller" style="width: 100% !important;">
                                            <option value="" disabled selected>---Selected---</option>
                                            @foreach($tax as $k => $v) 
                                                <option @if(old('order_tax') == $v->id) selected @endif value="{{ $v->id }}">{{ $v->name }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->first('order_tax'))
                                            <span class="text-danger">{{$errors->first('order_tax')}}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12 col-lg-12 mt-3">
                                <div class="form-group row">
                                    <div class="col-sm-12 control-label"><label for="nf-email">Noted</label> <span class="text-danger">*</span></div>
                                    <div class="col-sm-12 @if($errors->has('note')) has-error @endif">
                                        <textarea class="form-control" name="note" style="height: 100px"></textarea>
                                        @if($errors->first('note'))
                                            <span class="text-danger">{{$errors->first('note')}}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="card-footer text-right">
                            <button class="btn btn-md btn-primary btn-square" type="submit">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="DeleteModal" class="modal fade text-danger" role="dialog">
        <div class="modal-dialog">
            <form action="" id="deleteForm" method="post">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Delete Information</h4>
                        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        </div>
                    <div class="modal-body">
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}
                        <p class="text-center"> Are you sure do you want to delete?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success btn-square" data-dismiss="modal"> Cancel</button>
                        <button type="submit"  class="btn btn-danger btn-square" data-dismiss="modal" onclick="formSubmit()">Okay</button>
                    </div>
                </div>
            </form>
        </div>
    </div>



    <style>

        .tt-menu{
            width: 100%;
            background-color: #fff;
            box-shadow: 0 0.5rem 1rem rgb(0 0 21 / 15%) !important;
        }
        .tt-menu .list-group-item{
            border: 0px !important;
            padding: 5px;
        }
        .twitter-typeahead{width: 100%;}
        .input-group .select2-hidden-accessible{ display: none;}
        .input-group .select2-container{ float: left; width: 92% !important;}
        .input-group .select2-container--default,
        .input-group .select2-selection--single{
            border-radius: 4px 0px 0px 4px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow,
        .select2-container .select2-selection--single{
            height: 38px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 27px !important;
        }
    </style>
@endsection


@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script>
    $('.select2').select2({width: "100%"});

    jQuery(document).ready(function($) {
        // Set the Options for "Bloodhound" suggestion engine
        var engine = new Bloodhound({

            remote: {
                url: '{{ route('sale.search') }}/?product=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace('product'),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $(".search").typeahead({
            hint: true,
            highlight: true,
            minLength: 1,
        }, {
            limit: 100,
            source: engine.ttAdapter(),
            displayKey: 'name',
            // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
            name: 'usersList',

            // the key from the array we want to display (name,id,email,etc...)
            templates: {
                empty: [
                    '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
                ],
                header: [
                    '<div class="list-group search-results-dropdown">'
                ],
                suggestion: function (data) {
                    return '<a href="'+data.url+'" class="list-group-item">'+data.branch+'-'+data.name+'('+data.barcode+')'+'</a>'

                }
            }
        });
    });


    function deleteData(id)
        {
            var id  = id;
            var url = '{{ route("saleTmp.destroy", ":id") }}';
            url     = url.replace(':id', id);
            $("#deleteForm").attr('action', url);
        }

        function formSubmit()
        {
            $("#deleteForm").submit();
        }

        var sum      = 0;
        var price    = 0;
        var discount = 0;
        var tax      = 0;
        var subtotal = 0;
        $('.qty').each(function() {
                index = $(this).attr('index');
                sum += Number($(this).val());
                price    += parseFloat($('.price_'+index).val());
                discount += parseFloat($('.discount_'+index).val());
                tax      += parseFloat($('.tax_'+index).val());
                subtotal += parseFloat($('.sub_total_'+index).val());
        });
       // console.log(price);
        $('#total_qty').text(sum);
        $('#total_price').text('$'+parseFloat(price).toFixed(2));
        $('#total_discount').text('$'+parseFloat(discount).toFixed(2));
        $('#total_tax').text('$'+parseFloat(tax).toFixed(2));
        $('#total_sub_total').text('$'+parseFloat(subtotal).toFixed(2));


        var dis_price = 0;
        var dis_tax   = 0;
        var dis_sub_total = 0;
        $('.qty').keyup(function () {
            var index     = $(this).attr('index');
            var qty = Number($(this).val());
            console.log(qty);
            if(qty == 0){
                 qty = 1;
                 $(this).val(qty);
                 dis_price = parseFloat(qty * parseFloat($('.price_'+index).val()) ).toFixed(2);
                 dis_tax = parseFloat(qty * parseFloat($('.tax_'+index).val())).toFixed(2);
                 dis_sub_total = parseFloat(qty * parseFloat($('.sub_total_'+index).val())).toFixed(2);
            }else{
                 dis_price = parseFloat(qty * parseFloat($('.price_'+index).val())).toFixed(2);
                 dis_tax = parseFloat(qty * parseFloat($('.tax_'+index).val())).toFixed(2);
                 dis_sub_total = parseFloat(qty * parseFloat($('.sub_total_'+index).val())).toFixed(2);
            }

            $('.dis_price_'+index).text('$'+dis_price);
            $('.dis_price_val_'+index).val(dis_price);
            $('.dis_tax_'+index).text('$'+dis_tax);
            $('.dis_tax_val_'+index).val(dis_tax);
            $('.dis_sub_total_'+index).text('$'+dis_sub_total);
            $('.dis_sub_total_val_'+index).val(dis_sub_total);

             var sum      = 0;
            var price    = 0;
            // var discount = 0;
             var tax      = 0;
             var subtotal = 0;

            $('.qty').each(function() {
                sum += Number($(this).val());
            });
            $('.price').each(function() {
                price += parseFloat($(this).val());
            });
            $('.tax').each(function() {
                tax += parseFloat($(this).val());
            });
            $('.sub_total').each(function() {
                subtotal += parseFloat($(this).val());
            });
            $('#total_qty').text(sum);
            $('#total_price').text('$'+parseFloat(price).toFixed(2));
            //$('#total_discount').text('$'+parseFloat(discount).toFixed(2));
            $('#total_tax').text('$'+parseFloat(tax).toFixed(2));
            $('#total_sub_total').text('$'+parseFloat(subtotal).toFixed(2));

        });
</script>

@endsection