<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">

                <div style="overflow:scroll;margin:3px">
                    @if(isset($billings))
                        <table id="ar-table" style="margin-bottom:5px">
                            <thead>
                                <tr>
                                    <th>ID.</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>{{ 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="/billing-items?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) !!}
                        <!--{!! $billings->links() !!}-->
                    @endif
                </div>
            </div>
        </div>
    </section>
    
    <x-payment_status_form/>

@include('admin/ar-script')

    <script>
        $('body').on('click','#btn-update-status',function(e){
            $('#modal-update-status').modal('show');
            $("#id").val($(this).data('id'));
        });
        
        $('#btn-store').click(function(e){
            e.preventDefault();
            
            let formData = new FormData(document.querySelector('#form-billing-status'));
            let selectedStatus = formData.get('payment_status');
            if(selectedStatus == "null"){
                alert("Anda belum memilih status pembayaran");
                return;
            }

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "billing-approve",
                method: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response)
                {
                    document.location.reload();
                }
            });
        });

        $('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: "billing-delete",
                method: "POST",
                cache: false,
                data: {'id':id},
                success: function(response)
                {
                    document.location.reload();
                }
            });

        });
         
    </script>
    
</x-layout>