<?php $__env->startPush('css'); ?>
    <style>
        input.tdinput {
            display: block;
            width: 100%;
            height: 28px;
            padding: 0;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #dff0d8;
            border: 0px solid #fff;
            border-radius: 4px;
            border: 0px solid #fff !important;
            text-align: center;
        }

        .s-header {
            background: #337ab7;
            color: #fefefe;
            font-weight: bold;
        }

        .s-row {
            display: table-row;
        }

        .s-cell {
            display: table-cell;
            padding: 5px;
            border: 1px solid black;
        }

        .tt-menu {
            width: auto;
        }

        .tt-dataset {
            display: table;
            width: 700px !important;
            z-index: 100000;
        }

        .loader {
            position: relative;
            float: left;
            z-index: 1000;
            color: #3c8dbc;
            font-size: 30px !important;
            left: 60px;
        }

        .tbody td,
        tr th {
            border: 2px solid black !important;
        }

        .table-bordered th,
        .textcenter {
            text-align: center;
        }

        .table-bordered>tbody>tr>td {
            vertical-align: middle;
            padding: 2px !important;
        }

        .typeahead {
            z-index: 1051;
            direction: rtl;
        }

        .twitter-typeahead {
            width: 100%;
            height: 28px;
        }

        .tt-query {
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        }

        .tt-hint {
            color: #999
        }

        .tt-menu {
            /* used to be tt-dropdown-menu in older versions */
            width: 100%;
            margin-top: 2px;
            padding: 4px 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0, 0, 0, 0.2);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
            z-index: 10000 !important;
        }

        .tt-suggestion {
            padding: 3px 20px;
            line-height: 24px;
            direction: rtl;
        }

        .tt-suggestion.tt-cursor,
        .tt-suggestion:hover {
            color: #fff;
            background-color: #0097cf;

        }

        .tt-suggestion p {
            margin: 0;
        }
    </style>
<?php $__env->stopPush(); ?>
<?php $__env->startPush('typeaheadJs'); ?>
    <script src="<?php echo e(asset('assets/plugins/typeahead')); ?>/bloodhound.min.js"></script>
    <script src="<?php echo e(asset('assets/plugins/typeahead')); ?>/typeahead.jquery.js"></script>
    <script>
        function autocomplete() {
            var $typeaheadSearch = $('.typeahead');
            $typeaheadSearch.typeahead('destroy');
            $typeaheadSearch.typeahead({
                highlight: true
            }, {
                name: 'products',
                limit: 10,
                display: function(suggestion) {
                    return suggestion.name;
                },
                source: new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.whitespace,
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: "<?php echo e(route('getProductsList')); ?>",
                        prepare: function(query, settings) {
                            settings.url = "<?php echo e(route('getProductsList')); ?>" + '?type=خدمه&&term=' +
                                query;
                            return settings;
                        }
                    }
                }),
                templates: {
                    header: function() {
                        return '  <div class="s-row">\n' +
                            '                    <div class="s-cell">#</div>\n' +
                            '                    <div class="s-cell">اسم الخدمه</div>\n' +
                            '                    <div class="s-cell">التكلفة</div>\n' +
                            '                </div>';
                    },
                    suggestion: function(suggestion) {
                        var price = suggestion.price;

                        return '  <div class="s-row">\n' +
                            '                    <div class="s-cell">' + suggestion.id + '</div>\n' +
                            '                    <div class="s-cell">' + suggestion.name + '</div>\n' +
                            '                    <div class="s-cell">' + price + '</div>\n' +
                            '                </div>';
                    }
                }
            });
            $typeaheadSearch.on('typeahead:select', function(e, suggestion) {
                $(this).closest('tr').find('.pPrice').val(suggestion.price);
                calaculateTotal();
            });
        }
        $(document).on("click", ".addService", function(e) {
            e.preventDefault();
            var count = $(".prodItem").length + 1;
            var row =
                '<tr class="prodItem"> <td> <input class="qty" type="hidden" value="1"/> <input class="discount" type="hidden" value="0"/> ' +
                count +
                ' </td> <td><input autocomplete="off" type="text" name="service[title][]" class="form-control tdinput typeahead" value=""></td> <td><input type="text" name="service[price][]" class="form-control tdinput pPrice" value=""></td> <td><a href="#" class="btn btn-sm btn-danger rmService"> <i class="fa fa-trash"></i></a></td> </tr>';
            $("#serviceList").append(row);
            autocomplete();
        });
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH /home/mwarsha2023/public_html/test4.mwarsha.com/resources/views/invoices/typeahead.blade.php ENDPATH**/ ?>