<link rel="stylesheet" href="assets/vendors/themify-icons/css/themify-icons.css">
<style>
    .name-list {
        background-color:#cfcfcf;
        margin:3px;
        padding:3px;
        overflow:scroll;
    }
    
    .name-list:hover{
        background-color:gray;
        cursor:pointer;
    }

.search-container {
  position: relative;
  display: flex; /* Or use other display properties for alignment */
  align-items: center;
  /* Add other styling for the container if needed */
}

.search-input {
  width: 100%;
  padding: 10px;
  padding-right: 40px; /* Adjust based on icon size and desired spacing */
  /* Add other styling for the input field */
}

.search-icon {
  position: absolute;
  right: 10px; /* Position the icon to the right */
  /* Or use 'left' for positioning on the left */
  color: #888; /* Icon color */
  cursor: pointer;
}

input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

</style>
<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/header_admin')
    @include('admin/ar-css')
    @include('admin/ar-php-script')

    <section id="dashboard" class="ar-dashboard-height">
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>

            <div id="ar-dashboard-content">
                <a id="btn-add-custom-billing" class="btn-regular">+ New Custom Invoice</a>

                <div style="overflow:scroll;margin:3px">
                    @if(isset($billings))
                        <table id="ar-table">
                            <thead>
                                <tr>
                                    <th>ID.</th>
                                    <th>Invoice #</th>
                                    <th>Invoice Date</th>
                                    <th>Customer</th>
                                    <th>Termin (hari)</th>
                                    <th>Jatuh Tempo</th>
                                    <th>Status</th>
                                    <th style="width:1%">Action</th>
                                </tr>
                            </thead>

                            <tbody>

                                @foreach($billings as $billing)

                                    @php $id = $billing->id @endphp

                                    <tr>
                                        <td style="width:1%">{{ $id }}</td>
                                        <td>{{ $billing->inv_number }}</td>
                                        <td>{{ date('d-m-Y',strtotime($billing->created_at)) }}</td>
                                        <td>{{ $billing->name }}</td>
                                        <td>{{ $billing->termin }}</td>
                                        <td>{{ $billing->duedate_at }}</td>
                                        <td>{!! $billing->getPaymentStatus() !!}</td>
                                        <td>
                                            <div style="white-space:nowrap">
                                                <button id="btn-delete" data-id="{{ $id }}" style="outline:none;border:none;background:none;margin:3px">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                                <a id="btn-update-status" data-id="{{ $id }}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                    <i class="fa fa-pencil"></i>
                                                </a>
                                                <a href="/custom-billing-invoice?billing_id=<?=$id?>" style="cursor:pointer;margin-left:10px;color:#000000">
                                                    <i class="fa fa-arrow-right"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {!! createPageNavigator($billings) !!}
                    @endif
                </div>
            </div>
        </div>
    </section>
    
    <x-payment_status_form/>
    
    <div id="frm-add-custom-billing" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Custom Invoice</h5></div>
            <form id="frm-customer-select">
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="cust_id" name="cust_id">
                
                <!--
                <div class="form-group">
                    <label>Customer:</label>
                    <select id="cust-select" class="form-control" name="cust_id">
                        <option value="null" selected>Pilih Customer</option>
                        @foreach($customers as $customer)
                            <option value="{{$customer->id}}">{{$customer->name}}</option>
                        @endforeach
                    </select>
                </div>
                -->
                
                <!--div class="form-group" style="position:relative">
                    <label>Customer:</label>
                    <label id="show-searchview" class="form-control" style="cursor:pointer"><i class="ti-search pr-1"></i> Customer</label>
                    <div style="position:absolute">
                        <input id="search-name" class="form-control search" type="text" placeholder="Nama Customer" autocomplete="off">
                        <div id="result" style="background-color:#fff;overflow:scroll;max-height:200px"></div>
                    </div>
                </div-->
                
                <!--div class="form-group">
                    <label>Customer:</label>
                    <div style="position:relative;display:flex;align-items:center">
                        <input type="text" placeholder="Search..." class="form-control">
                        <i class="ti-search" style="position:absolute;right:10px"></i>
                    </div>
                </div-->
                
                <div class="form-group">
                    <label>Customer</label>
                    <div style="display:flex;position:relative;align-items:center">
                        <input id="search-name" class="form-control search" style="padding-left:30px" type="search" placeholder="Customer Name" autocomplete="off">
                        <i id="icon-customer-search" class="ti-search" style="position:absolute;left:10"></i>
                    </div>
                    <div id="result" style="background-color:#fff;overflow:scroll;max-height:200px;position:absolute"></div>
                </div>

                <div class="form-group">
                    <label>Invoice Number</label>
                    <input class="form-control" type="text" name="inv_number" placeholder="Input Invoice Number">
                </div>

                <div class="form-group">
                    <label>Reference</label>
                    <input class="form-control" type="text" name="reference" placeholder="Input Reference Number">
                </div>
                
                <div class="form-group">
                    <button id="btn-store-invoice" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>        
    </div>
    

@include('admin/ar-script')

    <script>

        $('body').on('click','#btn-add-custom-billing',function(e){
            $('#frm-add-custom-billing').modal('show');
        });

        $('#btn-store-invoice').click(function(e){
            e.preventDefault();

            let formData = new FormData(document.querySelector('#frm-customer-select'));
            
            let custId = formData.get('cust_id');
            if(custId == "null"){
                alert("Anda belum memilih customer");
                return;
            }

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "custom-billing",
                method: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response)
                {
                    $('#frm-add-custom-billing').modal('hide');
                    window.location.href ="/custom-billing-invoice?billing_id=" + response.id;
                }
            });

        });

    
        /*    
        $('body').on('click','#btn-update-status',function(e){
            $('#modal-update-status').modal('show');
            $("#id").val($(this).data('id'));
        });
        */
        
        $("#show-searchview").click(function(e){
            //$(this).hide();
            $("#search-name").toggle();
            $("#search-name").focus();
        });

        $('body').on('click','#btn-delete',function(e){
            e.preventDefault();

            let id = $(this).data('id');
            if(!confirm('Data akan di hapus dan tidak dapat dikembalikan. Lanjutkan?')){
                return;
            }
            
            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "custom-billing-delete",
                method: "POST",
                cache: false,
                data: {'id':id},
                success: function(response)
                {
                    document.location.reload();
                }
            });

        });

        $(".search").keyup(function()
        {
            var search = $(this).val();
            $("#result").html('');                    

            if(search != '')
            {
                $.ajax({
                    headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                    },
                    type: "GET",
                    url: "custom-livesearch?q=" + search,
                    cache: false,
                    success: function(response)
                    {
                        let nama = '<div style="border:thin solid #ccc">';
                        response.data.forEach((element) =>{
                            nama += ('<div id="' + element.id + '" class="name-list">' + element.name + '</div>');
                        });
                        nama += '</div>';

                        $("#result").html(nama).show();
                    }
                });
            }
            
            return false;
            
        });
        
        

        $("#result").on("click",function(e){
            var id = $(e.target).attr('id');
            var name = $(e.target).text();

            $('#cust_id').val(id);
            //$('#show-searchview').show();
            //$('#show-searchview').html(name);
            //$('#search-name').hide();
            $('#search-name').val(name);
            
        });

        $(document).on("click", function(e) { 
            var $clicked = $(e.target);
            if (! $clicked.hasClass("search")){
                $("#result").fadeOut(); 
            }
        });

        $('#search').click(function(){
            $("#result").fadeIn();
        });
        
    </script>
    
</x-layout>