@extends('layouts.main') 
@section('title', 'Add New Invoice')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
      @livewireStyles
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        {{-- <link rel="stylesheet" href="{{ asset('')}}"> --}}
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }

            .swal2-popup .select2{
                display: none!important;
            }
        </style>
    @endpush

    
    <div class="container-fluid">
    	<div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{__('Add new Invoice') }}</h5>
                            <span>{{ __('Create a new invoice')}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{route('dashboard')}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">{{ __('Dashboard')}}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
         <livewire:wire-add-invoice />
    </div>
    <!-- push external js -->
    @push('script')
        @livewireScripts
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
         {{-- <script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') }}"></script> --}}
        <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>

        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                document.body.classList.add("sidebar-mini");
                // Initialize select2
                initializeSelect2();
                
                initializeDatepicker();

                const clearSearchResults = (searchBox)=> {
                    searchBox.toggleClass("d-none");
                    searchBox.html("");
                }
        
                onCustomEvent('keyup', '.search-input', (e)=> {
                    const text = e.target.value;
                    const elemId = e.target.id;
                    const spinner = $(e.target).next();
                    if(text.length > 4){
                        setTimeout(()=> {
                            // Debounce for 1second before searching
                            spinner.toggleClass('d-none');
                            Livewire.emit('search_input',text,elemId);
                        }, 1000)
                    }
                });

                onCustomEvent("blur",".search-input",(e)=> {
                    const searchBox = $(e.target).next().next();
                    const feedBack = $(e.target).next().next().next();
                    if(feedBack){
                        feedBack.remove()
                    }
                   clearSearchResults(searchBox);
                    Livewire.emit('clear_results');
                });

                onCustomEvent('change', "#mda",(e)=> {
                    Livewire.emit('set_mda', e.target.value);
                });
               
                onCustomEvent('change', '#revenuePoints', (e)=> {
                    Livewire.emit('set_revenue_points', e.target.value);
                });
                
                onCustomEvent('change', '#services', (e)=> {
                    Livewire.emit('set_service', e.target.value);
                });

                onCustomEvent('change', '#range', (e)=> {
                    Livewire.emit('set_range', e.target.value);
                });

                onCustomEvent('change', '#customer_id_type', (e)=> {
                    Livewire.emit('update_type', e.target.value);
                })

                onCustomEvent('change', '#corporate-body', (e)=> {
                    $(".is_corporate").toggleClass('d-none');
                    Livewire.emit('set_corporate');
                });

                onCustomEvent('change', '#trantype', (e)=> {
                    Livewire.emit('set_whttype',e.target.value);
                });
                
                onCustomEvent('click','#submit-btn', ()=> {
                    showLoading();
                    Livewire.emit('add_invoice');
                });

                onCustomEvent('change','#paymethod', (e)=> {
                    Livewire.emit('set_payment_method', e.target.value);
                });
                
                onCustomEvent('click', '.list-item', (e)=> {
                    const listItem = e.target;
                    const input = $(listItem).parent().prev().prev();
                    const itemKey = $(e.target).data('key');
                    Livewire.emit('populate_result', itemKey, input.attr('id'));                    
                });

                onCustomEvent('mousedown', '.list-item', (e)=> {
                    // Search input should not lose focus
                    e.preventDefault();
                });
           
                onCustomEvent('change', '#contract_amount', (e)=> {
                   Livewire.emit('calc_wht', e.target.value);
                });

                onCustomEvent('change', '#draft_amount', (e)=> {
                    Livewire.emit('calc_draft', e.target.value)
                });

                onCustomEvent('change', '#desc', (e)=> {
                    Livewire.emit('set_desc', e.target.value)
                });

                onCustomEvent('change', '#propertyAddress', (e)=> {
                    Livewire.emit('set_property_address', e.target.value);
                });

                onCustomEvent('change', '#awardeeID', (e)=> {
                    Livewire.emit('set_awardee', e.target.value);
                })

                onCustomEvent('click', '#set-amount', (e)=> {
                    if ($(e.target).is(':checked')) {
                        $("#amount").attr("readonly", false);
                        $("#amount").attr("min", $("#amount").val());
                    } else {
                        $("#amount").attr("readonly", true);
                        $("#amount").attr("min", 0);
                    }
                })

                onCustomEvent('change', '#amount', (e)=> {
                    Livewire.emit('update_amount', e.target.value);
                })

                Livewire.on('initSelect', (index)=> {
                    initializeSelect2();
                });

                Livewire.on('setResult', (data, element)=> {
                    const spinner = $(`#${element}`).next();
                    const searchBox = spinner.next();
                    const listItems = data.map((el)=> `<li data-key="${el.birs_id}" class="list-item">${el.desc} </li>`);
                    searchBox.html(listItems);
                    spinner.toggleClass('d-none');
                    searchBox.toggleClass('d-none');
                });

                Livewire.on('empty_search_box', (element)=> {
                    const searchBox = $(`#${element}`).next().next();
                    clearSearchResults(searchBox);
                });

                Livewire.on('errorReload', (msg)=> {
                    fireSwalErrorAlert(msg);
                    setTimeout(() => window.location.reload(true), 3000);
                });

                Livewire.on('render_dom_output',updateDom);

                Livewire.on("querySuccess", showAddInvoiceFormFeedback)

                alertSuccessMsg();

                alertErrorMsg();
            });
        </script>
    @endpush
@endsection