@extends('layouts.backend.index')
@section('title', $label)

@section('content')
    <div class="card">
        <div class="card-body">
            <x-section-header action="list" :icon="$icon" :label="$label" />

            <div class="row mt-3">
                <div class="col-sm-6">
                    <table class="table-padding">
                        <tr>
                            <td>No. Invoice</td>
                            <td class="divide">:</td>
                            <td>{{ $invoice->number }}</td>
                        </tr>
                        <tr>
                            <td>Tanggal</td>
                            <td class="divide">:</td>
                            <td>{{ Common::dateFormat($invoice->setdate, 'dd mmmm yyyy') }}</td>
                        </tr>
                        <tr>
                            <td>Nama Pelanggan</td>
                            <td class="divide">:</td>
                            <td>{{ @$invoice->customer->name }}</td>
                        </tr>
                        <tr>
                            <td>Status</td>
                            <td class="divide">:</td>
                            <td>{!! @$invoice->status_badge !!}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-sm-6">
                    <table class="table-padding">
                        <tr>
                            <td>Total Biaya</td>
                            <td class="divide">:</td>
                            <td>{{ 'Rp. ' . number_format($invoice->total, 0, '', '.') }}</td>
                        </tr>
                        <tr>
                            <td>Total Dibayar</td>
                            <td class="divide">:</td>
                            <td>{{ 'Rp. ' . number_format($invoice->total_sudah_dibayar, 0, '', '.') }}</td>
                        </tr>
                        <tr>
                            <td>Total Sisa</td>
                            <td class="divide">:</td>
                            <td>{{ 'Rp. ' . number_format($invoice->total_sisa_bayar, 0, '', '.') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <hr />


            <hr class="mb-0" />

            <div class="table-responsive">
                <table class="table" id="table-invoice">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Termin</th>
                            <th>No. Kwitansi</th>
                            <th>Tgl. Jatuh Tempo</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript">
    </script>
    <script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"
        type="text/javascript"></script>

        <script>
            var invoice = "{{ $invoice->id }}"

            $(document).ready(function() {
                window.LaravelDataTables = window.LaravelDataTables || {}
                window.LaravelDataTables["table-invoice"] = $("#table-invoice").DataTable({
                    dom: 'fltpr',
                    language: {
                        search: "",
                        searchPlaceholder: "Pencarian...",
                        lengthMenu: "_MENU_ Data"
                    },
                    ajax:
                    {
                        url: "{{ route('order.invoice.detail.datatables') }}",
                        type: "POST",
                        data: {invoice: invoice, _token: token}
                    },
                    processing: true,
                    serverSide: true,
                    deferRender: true,
                    ordering: false,
                    aLengthMenu: [[10, 25, 50, 100],[10, 25, 50, 100]],
                    drawCallback: function() {
                        $(".set-tooltip").tooltip({
                            container: "body"
                        })
                    },
                    columns: [
                        {
                            data: null,
                            class: "align-top",
                            orderable: false,
                            searchable: false,
                            width: "50px",
                            render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                        },
                        {
                            class: "align-top",
                            width: "80px",
                            render: (data, type, row) => moneyFormat(row.termin)
                        },
                        {
                            class: "align-top",
                            render: (data, type, row) => row.number
                        },
                        {
                            class: "align-top",
                            render: (data, type, row) => dateFormat(row.duedate, '{dd} {mmmm} {yyyy}')
                        },
                        {
                            class: "align-top",
                            render: (data, type, row) => `Rp. ${moneyFormat(row.total)}`
                        },
                        {
                            class: "align-top",
                            width: "180px",
                            render: (data, type, row) => row.status_badge
                        },
                        {
                            class: "align-top text-center",
                            width: "70px",
                            searchable: false,
                            render: (data, type, row) => {
                                let html = ""

                                if (row.status == 0) {
                                    let url_payment = "{{ route('order.payment.form', -1) }}"
                                    let url_print = "{{ route('order.payment.print', -1) }}"

                                    url_payment = url_payment.replace("-1", row.encrypted_id)
                                    url_print = url_print.replace("-1", row.encrypted_id)

                                    html = `<a href="${url_payment}" class="btn btn-success btn-xs set-tooltip mr-1" title="Bayar">
                                            <i class='mdi mdi-check-bold'></i>
                                        </a>
                                        <a href="${url_print}" class="btn btn-default btn-xs set-tooltip" title="Cetak Invoice">
                                            <i class='mdi mdi-printer'></i>
                                        </a>`
                                } else {
                                    let url_view = "{{ route('order.payment.view', -1) }}"
                                    let url_print = "{{ route('order.payment.receipt', -1) }}"
                                    url_print = url_print.replace("-1", row.encrypted_id)
                                    url_view = url_view.replace("-1", row.encrypted_id)

                                    html = `<a href="${url_view}" class="btn btn-info btn-xs set-tooltip mr-1" title="Lihat">
                                            <i class='mdi mdi-eye-outline'></i>
                                        </a>
                                        <a href="${url_print}" class="btn btn-default btn-xs set-tooltip" title="Cetak Kwitansi">
                                            <i class='mdi mdi-printer'></i>
                                        </a>`
                                }

                                return html
                            }
                        }
                    ]
                })

                $($.fn.dataTable.tables(true)).css('width', '100%')
            })
            </script>
@endpush