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

    <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-item-new" class="btn-regular" style="color:red">+ Custom Service Item</a>
                <a id="btn-invoice-edit" class="btn-regular" data-id="{{ $billing->id }}" style="color:red">Persiapan Invoice</a>
                <a class="btn-regular" href="/billing-invoice?billing_id={{ $billing->id }}" style="white-space:nowrap">View Invoice</a>

                <div style="overflow:scroll;margin:3px">
                    <div>
                        <label style="width:130px">Billing ID</label>
                        <span>: {{ $billing->id }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Customer</label>
                        <span>: {{ $billing->name }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Billing Status</label>
                        <span>: {!! $billing->getPaymentStatus() !!}</span>
                    </div>
                    <div>
                        <label style="width:130px">Sub Total</label>
                        <span>: {{ rupiah($billingItems->sum('amount')) }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Discount</label>
                        <span>: Rp. {{ rupiahBasic($billing->discount) }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Pajak</label>
                        <span>: Rp. {{ rupiahBasic($billing->pajak) }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Biaya Transport</label>
                        <span>: Rp. {{ rupiahBasic($billing->transport) }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Tanggal Invoice:</label>
                        <span>: {{ date_format($billing->created_at,'d-m-Y') }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Termin (Hari)</label>
                        <span>: {{ $billing->termin }}</span>
                    </div>
                    <div>
                        <label style="width:130px">Tgl. Jatuh tempo</label>
                        <span>: {{ date('d-m-Y',strtotime($billing->duedate_at)) }}</span>
                        
                    </div>

                    <label style="width:130px">Items</label>
                    <!-- Start of table -->
                    <table id="ar-table">
                        <tr>
                            <th style="width:1%">No.</th>
                            <th>Description</th>
                            <th style="width:1%">Quantity</th>
                            <th style="white-space:nowrap">Harga (Rp.)</th>
                            <th>Action</th>
                        </tr>
                    <tbody>

                    <?
                        $index = 0;
                        foreach($billingItems as $item)
                        {
                            $index++;
                            $id = $item->id;
                    ?>
                            <tr>
                                <td>{{ $index }}</td>
                                <td>{{ $item->description }}</td>
                                <td>{{ $item->quantity }}</td>
                                <td>{{ rupiahBasic($item->amount) }}</td>
                                <td>
                                    <button id="btn-item-edit" data-id="{{ $id }}" style="outline:none;border:none;background:none;margin:3px">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button id="btn-item-delete" data-id="{{ $id }}" style="outline:none;border:none;background:none;margin:3px">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        <? } ?>
                        </tbody>
                    </table>
                            
                </div>
                <!-- End of Table -->                
                
            </div>
        </div>
    </section>
    
    <div id="modal-invoice" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Kelola Invoice</h5></div>
            <form id="frmInvoice">
                <input type="hidden" id="billing_id" name="billing_id">
                
                <div class="form-group">
                    <label>Discount (Rp.):</label>
                    <input class="form-control" id="discount" name="discount" type="text" placeholder="Discount">
                </div>
                <div class="form-group">
                    <label>Pajak (11%) (Rp.): (Belum dapat digunakan)</label>
                    <input class="form-controlx" id="cbx_pajak" name="cbx_pajak" type="checkbox">
                    <input class="form-control" id="pajak" name="pajak" type="text" placeholder="Pajak">
                </div>
                <div class="form-group">
                    <label>Biaya Transport (Rp.):</label>
                    <input class="form-control" id="transport" name="transport" type="text" placeholder="Biaya Transport">
                </div>
                
                <div class="form-group">
                    <label>Termin (hari):</label>
                    <input class="form-control" id="termin" name="termin" type="text" placeholder="Termin">
                </div>
                <div class="form-group">
                    <label>Jatuh Tempo :</label>
                    <input class="form-control" id="duedate" name="duedate" type="date" placeholder="Jatuh tempo">
                </div>
                <div class="form-group">
                    <button id="btn-invoice-post" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>


    <div id="modal-item" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Kelola Item Service</h5></div>
            <form id="frmItem">
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="billing_id" name="billing_id" value="{{ $billing->id }}">

                <div class="form-group">
                    <label>Deskripsi :</label> 
                    <input class="form-control" id="description" name="description" type="text" placeholder="Type description"/>
                </div>
                <div class="form-group">
                    <label>Harga :</label>
                    <input class="form-control" id="amount" name="amount" type="text" placeholder="Harga">
                </div>
                <div class="form-group">
                    <button id="btn-item-post" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    @include('admin/ar-script')
    <script>
        $("#btn-invoice-edit").click(function(e){
            $('#frmInvoice').trigger("reset");
            $("#billing_id").val({{ $billing->id }});
            $("#transport").val({{ $billing->transport }});
            $("#discount").val({{ $billing->discount }});
            $("#pajak").val({{ $billing->pajak }});
            $("#termin").val({{ $billing->termin }});
            
            if({{ $billing->pajak }} > 0){
                $("#cbx_pajak").attr('checked',true);
            }else{
                $("#cbx_pajak").attr('checked',false);
            }

            $("#duedate").val('<?php echo $billing->duedate_at; ?>');
            $("#modal-invoice").modal("show");
        });

        $("#btn-invoice-post").click(function(e){
            e.preventDefault();

            let formData = new FormData($('#frmInvoice')[0]);

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: "billing-item-discount",
                method: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                success: function(response)
                {
                    document.location.reload();
                }
            });
        });
        
        $("#btn-item-new").click(function(e){
            $('#frmItem').trigger("reset");
            $('#id').val('');
            $("#modal-item").modal("show");
        });
        
        $('body').on('click','#btn-item-edit',function(e){
            e.preventDefault();

            let id = $(this).data('id');

            $.ajax({
                url: `billing-item-edit?id=` + id,
                method: "GET",
                success: function(response)
                {
                    $('#id').val(response.data.id);
                    $('#description').val(response.data.description);
                    $('#amount').val(response.data.amount);
                    $('#pajak').val(response.data.pajak);
                    $('#modal-item').modal('show');
                }
            });
        });

        $("#btn-item-post").click(function(e){
            e.preventDefault();
            
            let formData = new FormData($('#frmItem')[0]);
            //let id = $("#id").val();

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

        });

        $('body').on('click','#btn-item-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-items",
                method: "DELETE",
                cache: false,
                data: {'id':id},
                success: function(response)
                {
                    window.location.reload();
                }
            });
        });

        $("#cbx_pajak").click(function(e){
            if($(this).prop('checked')){
                let total = {{ $billingItems->sum('amount') - $billing->discount}};
                let pajak = (0.11 * total);
                $('#pajak').val(pajak);
            }else{
                $('#pajak').val('0');
            }
        });
        
        
    </script>
</x-layout>