@extends('layouts.app')

@section('title', __('Invoices'))

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-10">
                @can('add invoice')
                    {{--Add Card--}}
                    <div class="card mb-3 d-print-none">
                        <div class="card-header">
                            <h5 class="float-left">{{ __('New Invoice') }}</h5>
                            <button class="float-right btn btn-sm" onclick="collapse(event)">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <div class="card-body" style="display: none;">
                            <form method="post" action="{{ route('invoice.add') }}" class="needs-validation" novalidate>
                                @csrf
                                @method('put')
                                <div class="form-row">
                                    <div class="col-md-3">
                                        <input type="date" class="form-control mb-2" name="date" value="{{ $now }}"
                                               readonly/>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text" id="date_range" class="form-control mb-2"
                                               placeholder="{{ __('Select Date') }}"
                                               required/>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text"
                                               class="form-control mb-2 @if($errors->has('from')) is-invalid @endif"
                                               name="from" value="{{ old('from') }}" placeholder="{{ __('From') }}"
                                               readonly/>
                                        <div class="invalid-feedback">
                                            @if($errors->has('from'))
                                                {{ $errors->first('from') }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="text"
                                               class="form-control mb-2 @if($errors->has('to')) is-invalid @endif"
                                               name="to"
                                               value="{{ old('to') }}" placeholder="{{ __('To') }}" readonly/>
                                        <div class="invalid-feedback">
                                            @if($errors->has('to'))
                                                {{ $errors->first('to') }}
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row ">
                                    <div class="col-md-6">
                                        <label for="type">{{ __('Select Type') }}</label>
                                        <select id="type" name="type" class="custom-select mb-2">
                                            <option value="project"
                                                    @if(old('type') == 'project') selected @endif>{{ __('Project') }}</option>
                                            <option value="customer"
                                                    @if(old('type') == 'customer') selected @endif>{{ __('Customer') }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 customer">
                                        <label for="customerAdd">{{ __('Customer') }}</label>
                                        <select id="customerAdd" name="customer"
                                                class="custom-select mb-2 @if($errors->has('customer')) is-invalid @endif">
                                        </select>
                                        <div class="invalid-feedback">
                                            @if($errors->has('customer'))
                                                {{ $errors->first('customer') }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6 project">
                                        <label for="project">{{ __('Project') }}</label>
                                        <select id="project" name="project"
                                                class="custom-select mb-2 @if($errors->has('project')) is-invalid @endif">
                                        </select>
                                        <div class="invalid-feedback">
                                            @if($errors->has('project'))
                                                {{ $errors->first('project') }}
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row ">
                                    <div class="col-12">
                                        <button type="button"
                                                class="btn btn-outline-primary mb-2"
                                                style="width: 100%;" data-toggle="modal"
                                                data-target="#items_modal">{{ __('Items') }}
                                        </button>
                                        @if($errors->has('items.*'))
                                            <small class="form-text text-danger">
                                                {{ $errors->first('items.*') }}
                                            </small>
                                        @endif
                                    </div>

                                    <div class="modal fade" id="items_modal" tabindex="-1" role="dialog"
                                         aria-labelledby="items_modal"
                                         aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">{{ __('Items') }}</h5>
                                                </div>
                                                <div class="modal-body">

                                                    <div id="items-list" class="col-12 mb-3">
                                                        <div class="form-row item">
                                                            <div class="form-group col-md-3">
                                                                <label
                                                                    for="item_name_0_name">{{ __('Item Name') }}</label>
                                                                <input id="item_name_0_name" class="form-control"
                                                                       type="text"
                                                                       name="items[0][name]"
                                                                       value="{{ old('items[0][name]') }}" required/>
                                                            </div>
                                                            <div class="form-group col-md-3">
                                                                <label
                                                                    for="item_name_0_fee">{{ __('Item Fee') }}</label>
                                                                <input id="item_name_0_fee" class="form-control fee"
                                                                       type="text"
                                                                       name="items[0][fee]"
                                                                       value="{{ old('items[0][fee]') }}"
                                                                       onkeyup="calc(event)" required/>
                                                            </div>
                                                            <div class="form-group col-md-3">
                                                                <label
                                                                    for="item_name_0_quantity">{{ __('Item Quantity') }}</label>
                                                                <input id="item_name_0_quantity"
                                                                       class="form-control quantity" type="text"
                                                                       name="items[0][quantity]"
                                                                       value="{{ old('items[0][quantity]') }}"
                                                                       onkeyup="calc(event)" required/>
                                                            </div>
                                                            <div class="form-group col-md-3">
                                                                <label
                                                                    for="item_name_0_total">{{ __('Item Total') }}</label>
                                                                <input id="item_name_0_total" class="form-control total"
                                                                       readonly
                                                                       type="text" name="items[0][total]"
                                                                       value="{{ old('items[0][total]') }}"/>
                                                            </div>
                                                        </div>
                                                        <div id="projectSelect"></div>
                                                    </div>

                                                    <div class="col-12">
                                                        <button type="button"
                                                                class="btn btn-lg btn-outline-primary mb-3"
                                                                onclick="addItem()"
                                                                style="width: 100%;">{{ __('Add') }}</button>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary"
                                                            data-dismiss="modal">{{ __('Ok') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="form-row ">
                                    <div class="col-md-2">
                                        <label for="total_quantity">{{ __('Total Quantity') }}</label>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="total_quantity" class="form-control mb-2" value="0" readonly/>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="total_amount">{{ __('Total Amount') }}</label>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="total_amount" class="form-control mb-2" name="total" value="0"
                                               readonly/>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-2">
                                        <label for="notes">{{ __('Notes') }}</label>
                                    </div>
                                    <div class="col-md-10 mb-2">
                                        <textarea class="form-control" name="notes" id="notes"
                                                  rows="3">{{ old('notes') }}</textarea>
                                    </div>
                                </div>

                                <div class="form-row  justify-content-between">
                                    <div class="col-md-2 col-sm-12">
                                        <button type="submit" class="btn btn-primary mb-2"
                                                style="width: 100%;">{{ __('Save') }}</button>
                                    </div>
                                    <div class="col-md-2 col-sm-12">
                                        <button type="reset" class="btn btn-danger mb-2"
                                                style="width: 100%;">{{ __('Clear') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                @endcan

                @can('view invoice')
                    {{--Search Card--}}
                    <div class="card mb-3 d-print-none">
                        <div class="card-header">
                            <h5 class="float-left">{{ __('Search Invoice') }}</h5>
                            <button class="float-right btn btn-sm" onclick="collapse(event)">
                                <i class="fas fa-minus"></i>
                            </button>
                        </div>
                        <div class="card-body">
                            <form method="post" action="{{ route('invoice.search') }}">
                                @csrf
                                <div class="form-row">
                                    <div class="col-md-3 mb-2">
                                        <select id="search" name="type" class="custom-select">
                                            <option value="all" selected>{{ __('All') }}</option>
                                            <option value="customer">{{ __('Customer') }}</option>
                                            <option value="project">{{ __('Project') }}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <input name="number" value="{{ old('number') }}"
                                               class="form-control @if($errors->has('number')) is-invalid @endif"
                                               placeholder="{{ __('Number') }}"/>
                                        <div class="invalid-feedback">
                                            @if($errors->has('number'))
                                                {{ $errors->first('number') }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <input name="searchfrom" value="{{ old('searchfrom') }}"
                                               class="form-control @if($errors->has('searchfrom')) is-invalid @endif"
                                               placeholder="{{ __('From') }}"/>
                                        <div class="invalid-feedback">
                                            @if($errors->has('searchfrom'))
                                                {{ $errors->first('searchfrom') }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <input name="searchto" value="{{ old('searchto') }}"
                                               class="form-control @if($errors->has('searchto')) is-invalid @endif"
                                               placeholder="{{ __('To') }}"/>
                                        <div class="invalid-feedback">
                                            @if($errors->has('searchto'))
                                                {{ $errors->first('searchto') }}
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-4 mb-2">
                                        <select id="customerSearch" name="customer" class="custom-select"
                                                readonly></select>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <select id="projectSearch" name="project" class="custom-select"
                                                readonly></select>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <input name="searchtotal" value="{{ old('searchtotal') }}"
                                               class="form-control @if($errors->has('searchtotal')) is-invalid @endif"
                                               placeholder="{{ __('Total') }}"/>
                                        <div class="invalid-feedback">
                                            @if($errors->has('searchtotal'))
                                                {{ $errors->first('searchtotal') }}
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-3"></div>
                                </div>

                                <div class="form-row  justify-content-between">
                                    <div class="col-md-2 col-sm-12">
                                        <button type="submit" class="btn btn-primary mb-2"
                                                style="width: 100%;">{{ __('Search') }}</button>
                                    </div>
                                    <div class="col-md-2 col-sm-12">
                                        <button type="reset" class="btn btn-danger mb-2"
                                                style="width: 100%;">{{ __('Clear') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{--Results Card--}}
                    @isset($results)
                        <div class="card">
                            <div class="card-header bg-success text-white">
                                <h5 class="float-left">{{ __('Invoices') }}</h5>
                                <div class="float-right">
                                    <button class="float-right btn btn-sm" onclick="collapse(event)">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class=" table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{ __('Number') }}</th>
                                            <th>{{ __('Date') }}</th>
                                            <th>{{ __('From') }}</th>
                                            <th>{{ __('To') }}</th>
                                            <th>{{ __('Total') }}</th>
                                            <th>{{ __('Amount Due') }}</th>
                                            <th class="text-center">{{ __('Project') . ' / ' . __('Customer') }}</th>
                                            <th>{{ __('Items') }}</th>
                                            <th class="d-print-none">{{ __('Invoice Actions') }}</th>
                                            <th>{{ __('Notes') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if($results->count() > 0)
                                            @foreach ($results as $result)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ env('invoices_shortcut') . $result->id }}</td>
                                                    <td>{{ $result->date }}</td>
                                                    <td>{{ $result->from }}</td>
                                                    <td>{{ $result->to }}</td>
                                                    <td>{{ $result->total }}</td>
                                                    <td>{{ $result->due }}</td>
                                                    <td class="text-center">
                                                        @if($result->customer_id != null)
                                                            {{ $result->customer->name }}
                                                        @else
                                                            {{ $result->project->number }}
                                                            ({{ $result->project->customer->name }})
                                                        @endif
                                                    </td>
                                                    <td class="d-print-none">
                                                        <button type="button" class="btn btn-sm btn-outline-primary"
                                                                data-href="{{ route('itemsOfInvoice', $result->id) }}"
                                                                data-toggle="modal"
                                                                data-target="#modal">{{ __('Items') }}</button>
                                                    </td>
                                                    <td>
                                                        <div class="btn-group btn-group-sm">
                                                            <button class="btn btn-dark" onclick="document.location.href='{{ route('invoiceIncomes', $result) }}'">{{ __('Incomes') }}</button>
                                                            <button class="btn btn-primary" onclick="window.open('{{ route('invoice.report', $result) }}'); return false;">
                                                                <i class="fas fa-print"></i>
                                                            </button>
                                                        </div>
                                                    </td>
                                                    <td>{{ $result->notes }}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <td colspan="11" class="text-center">{{ __('No Results') }}</td>
                                        @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endisset
                @endcan
            </div>
        </div>
    </div>

@endsection

@section('scripts')

    <script type="application/javascript">
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                let forms = document.getElementsByClassName('needs-validation');
                let validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>

    <script type="application/javascript">

        let modal = $('#items_modal'),
            body = modal.find('.modal-body'),
            addButton = body.find('.col-12 button');

        function collapse(event) {
            let caller = $(event.target),
                body = caller.parents('.card').find('.card-body');
            body.slideToggle('slow', function () {
                if (body.is(":hidden")) {
                    caller.html('<i class="fas fa-plus"></i>');
                } else {
                    caller.html('<i class="fas fa-minus"></i>');
                }
            });
        }

        function checkType() {
            const value = $('#type').val(),
                customerView = $('.customer'),
                projectView = $('.project');

            if (value == 'customer') {
                customerView.show();
                projectView.hide();
                addButton.show();
                body.find('.item').find('input').attr('disabled', false);
                body.find('.item').show();
                body.find('#projectSelect').html('');
            } else if (value == 'project') {
                customerView.hide();
                projectView.show();
                addButton.hide();
                body.find('.item').find('input').attr('disabled', true);
                body.find('.item').hide();
                body.find('#projectSelect').html('');
            }
        }

        function calc(e) {
            let parent = $(e.target).parents('.item');
            let fee = parent.find('.fee');
            let quantity = parent.find('.quantity');
            let total = parent.find('.total');

            total.val(fee.val() * quantity.val());
        }

        function addItem() {
            const items = document.getElementsByClassName('item');

            const itemNameLabel = document.createElement('label');
            itemNameLabel.setAttribute('for', 'item_name_' + items.length + '_name');
            itemNameLabel.textContent = "{{ __('Item Name') }}";

            const itemNameInput = document.createElement('input');
            itemNameInput.className = 'form-control';
            itemNameInput.id = 'item_name_' + items.length + '_name';
            itemNameInput.setAttribute('name', 'items[' + items.length + '][name]');
            itemNameInput.setAttribute('required', 'required');

            const itemNameDiv = document.createElement('div');
            itemNameDiv.className = 'form-group col-md-3';
            itemNameDiv.append(itemNameLabel);
            itemNameDiv.append(itemNameInput);

            const itemFeeLabel = document.createElement('label');
            itemFeeLabel.setAttribute('for', 'item_fee_' + items.length + '_fee');
            itemFeeLabel.textContent = "{{ __('Item Fee') }}";

            const itemFeeInput = document.createElement('input');
            itemFeeInput.className = 'form-control fee';
            itemFeeInput.id = 'item_fee_' + items.length + '_fee';
            itemFeeInput.setAttribute('name', 'items[' + items.length + '][fee]');
            itemFeeInput.setAttribute('required', 'required');
            itemFeeInput.addEventListener('keyup', calc);

            const itemFeeDiv = document.createElement('div');
            itemFeeDiv.className = 'form-group col-md-3';
            itemFeeDiv.append(itemFeeLabel);
            itemFeeDiv.append(itemFeeInput);

            const itemQuantityLabel = document.createElement('label');
            itemQuantityLabel.setAttribute('for', 'item_quantity_' + items.length + '_quantity');
            itemQuantityLabel.textContent = "{{ __('Item Quantity') }}";

            const itemQuantityInput = document.createElement('input');
            itemQuantityInput.className = 'form-control quantity';
            itemQuantityInput.id = 'item_quantity_' + items.length + '_quantity';
            itemQuantityInput.setAttribute('name', 'items[' + items.length + '][quantity]');
            itemQuantityInput.setAttribute('required', 'required');
            itemQuantityInput.addEventListener('keyup', calc);

            const itemQuantityDiv = document.createElement('div');
            itemQuantityDiv.className = 'form-group col-md-3';
            itemQuantityDiv.append(itemQuantityLabel);
            itemQuantityDiv.append(itemQuantityInput);

            const itemTotalLabel = document.createElement('label');
            itemTotalLabel.setAttribute('for', 'item_total_' + items.length + '_total');
            itemTotalLabel.textContent = "{{ __('Item Total') }}";

            const itemTotalInput = document.createElement('input');
            itemTotalInput.className = 'form-control total';
            itemTotalInput.id = 'item_total_' + items.length + '_total';
            itemTotalInput.setAttribute('name', 'items[' + items.length + '][total]');
            itemTotalInput.setAttribute('readonly', 'readonly');

            const itemTotalDiv = document.createElement('div');
            itemTotalDiv.className = 'form-group col-md-3';
            itemTotalDiv.append(itemTotalLabel);
            itemTotalDiv.append(itemTotalInput);

            const item = document.createElement('div');
            item.className = 'form-row item';
            item.append(itemNameDiv);
            item.append(itemFeeDiv);
            item.append(itemQuantityDiv);
            item.append(itemTotalDiv);

            const container = document.getElementById('items-list');
            container.append(item);
        }

        $(document).ready(function () {

            checkType();

            $('#customerAdd').select2({
                ajax: {
                    url: '{{ route('customersListJson') }}',
                    dataType: 'json',
                    processResults: function (data) {
                        data.push({name: "Other", id: 1});
                        return {
                            results: $.map(data,
                                function (item) {
                                    return {
                                        text: item.name,
                                        id: item.id
                                    };
                                })
                        };
                    },
                    data: function (params) {
                        let query = {
                            search: params.term,
                        };

                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    },
                    cache: true
                },
                placeholder: '{{ __('Select Customer') }}'
            });

            $('#project').select2({
                ajax: {
                    url: '{{ route('projectsListJson') }}',
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: $.map(data,
                                function (item) {
                                    if (item.status) {
                                        return {
                                            text: item.number + " (" + item.customer.name + ")",
                                            id: item.id
                                        }
                                    }
                                })
                        };
                    },
                    data: function (params) {
                        let query = {
                            search: params.term,
                        };

                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    },
                    cache: true
                },
                placeholder: '{{ __('Select Project') }}',
                disabled: false
            });

            $('#project').on('select2:select', function (e) {
                let id = e.params.data.id,
                    url = "{{ route('itemsOfProjectJson', ':id') }}".replace(":id", id);
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function (data) {
                        let html = '';
                        let sum = 0,
                            quant = 0;

                        $.each(data, function (index, item) {
                            html += '<div class="form-row item">';
                            html += '<div class="form-group col-md-3">';
                            html += '<label for="item_name_0_name">{{ __("Item Name") }}</label>';
                            html += '<input id="item_name_0_name" class="form-control" type="text" name="items[0][name]" value="' + item.name + '" readonly/>';
                            html += '</div>';
                            html += '<div class="form-group col-md-3">';
                            html += '<label for="item_name_0_fee">{{ __('Item Fee') }}</label>';
                            html += '<input id="item_name_0_fee" class="form-control fee" type="text" name="items[0][fee]" value="' + item.fee + '" readonly/>';
                            html += '</div>';
                            html += '<div class="form-group col-md-3">';
                            html += '<label for="item_name_0_quantity">{{ __("Item Quantity") }}</label>';
                            html += '<input id="item_name_0_quantity" class="form-control quantity" type="text" name="items[0][quantity]" value="' + item.quantity + '" readonly/>';
                            html += '</div>';
                            html += '<div class="form-group col-md-3">';
                            html += '<label for="item_name_0_total">{{ __("Item Total") }}</label>';
                            html += '<input id="item_name_0_total" class="form-control total" type="text" name="items[0][total]" value="' + (item.fee * item.quantity) + '" readonly/>';
                            html += '</div>';
                            html += '</div>';
                            quant += item.quantity;
                            sum += (item.fee * item.quantity);
                        });

                        body.find('#projectSelect').html(html);

                        $('input[name="total"]').val(sum);
                        $('#total_quantity').val(quant);
                    }
                });
            });

            $('#customerSearch').select2({
                ajax: {
                    url: '{{ route('customersListJson') }}',
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: $.map(data,
                                function (item) {
                                    return {
                                        text: item.name,
                                        id: item.id
                                    }
                                })
                        };
                    },
                    data: function (params) {
                        let query = {
                            search: params.term,
                        };

                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    },
                    cache: true
                },
                placeholder: '{{ __('Select Customer') }}',
                disabled: true
            });

            $('#projectSearch').select2({
                ajax: {
                    url: '{{ route('projectsListJson') }}',
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: $.map(data,
                                function (item) {
                                    return {
                                        text: item.number,
                                        id: item.id
                                    }
                                })
                        };
                    },
                    cache: true
                },
                placeholder: '{{ __('Select Project') }}',
                disabled: true
            });

            $('#type').on('change', function () {
                checkType();
            });

            $('#search').on('change', function () {
                let value = $(this).val();
                if (value == 'project') {
                    $('#customerSearch').select2({
                        ajax: {
                            url: '{{ route('projectsListJson') }}',
                            dataType: 'json',
                            processResults: function (data) {
                                return {
                                    results: $.map(data,
                                        function (item) {
                                            return {
                                                text: item.name,
                                                id: item.id
                                            }
                                        })
                                };
                            },
                            cache: true
                        },
                        placeholder: '{{ __('Select Customer') }}',
                        disabled: true
                    });
                    $('#projectSearch').select2({
                        ajax: {
                            url: '{{ route('projectsListJson') }}',
                            dataType: 'json',
                            processResults: function (data) {
                                return {
                                    results: $.map(data,
                                        function (item) {
                                            return {
                                                text: item.number,
                                                id: item.id
                                            }
                                        })
                                };
                            },
                            data: function (params) {
                                let query = {
                                    search: params.term,
                                };

                                // Query parameters will be ?search=[term]&type=public
                                return query;
                            },
                            cache: true
                        },
                        placeholder: '{{ __('Select Project') }}',
                        disabled: false
                    });
                } else if (value == 'customer') {
                    $('#customerSearch').select2({
                        ajax: {
                            url: '{{ route('customersListJson') }}',
                            dataType: 'json',
                            processResults: function (data) {
                                data.push({name: "Other", id: 1});
                                return {
                                    results: $.map(data,
                                        function (item) {
                                            return {
                                                text: item.name,
                                                id: item.id
                                            }
                                        })
                                };
                            },
                            data: function (params) {
                                let query = {
                                    search: params.term,
                                };

                                // Query parameters will be ?search=[term]&type=public
                                return query;
                            },
                            cache: true
                        },
                        placeholder: '{{ __('Select Customer') }}',
                        disabled: false
                    });
                    $('#projectSearch').select2({
                        ajax: {
                            url: '{{ route('projectsListJson') }}',
                            dataType: 'json',
                            processResults: function (data) {
                                return {
                                    results: $.map(data,
                                        function (item) {
                                            return {
                                                text: item.number,
                                                id: item.id
                                            }
                                        })
                                };
                            },
                            cache: true
                        },
                        placeholder: '{{ __('Select Project') }}',
                        disabled: true
                    });
                } else {
                    $('#customerSearch').select2({
                        ajax: {
                            url: '{{ route('customersListJson') }}',
                            dataType: 'json',
                            processResults: function (data) {
                                return {
                                    results: $.map(data,
                                        function (item) {
                                            return {
                                                text: item.name,
                                                id: item.id
                                            }
                                        })
                                };
                            },
                            cache: true
                        },
                        placeholder: '{{ __('Select Customer') }}',
                        disabled: true
                    });
                    $('#projectSearch').select2({
                        ajax: {
                            url: '{{ route('projectsListJson') }}',
                            dataType: 'json',
                            processResults: function (data) {
                                return {
                                    results: $.map(data,
                                        function (item) {
                                            return {
                                                text: item.number,
                                                id: item.id
                                            }
                                        })
                                };
                            },
                            cache: true
                        },
                        placeholder: '{{ __('Select Project') }}',
                        disabled: true
                    });
                }

            });

            $('#items_modal').on('hide.bs.modal', function () {
                let sum = 0,
                    quant = 0,
                    total = $('.total').not("[disabled]"),
                    quantity = $('.quantity').not("[disabled]");

                total.each(function (index, item) {
                    sum += parseFloat($(item).val());
                });

                quantity.each(function (index, item) {
                    quant += parseFloat($(item).val());
                });

                $('input[name="total"]').val(sum);
                $('#total_quantity').val(quant);
            });

            $('#date_range').daterangepicker({
                opens: 'left',
                showDropdowns: true
            }, function (start, end, label) {
                $('input[name="from"]').val(start.format('MM/DD/YYYY'));
                $('input[name="to"]').val(end.format('MM/DD/YYYY'));
            });
        });

    </script>
@endsection