@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. Order</td>
                        <td class="divide">:</td>
                        <td>{{ $workorder->number }}</td>
                    </tr>
                    <tr>
                        <td>Tanggal</td>
                        <td class="divide">:</td>
                        <td>{{ Common::dateFormat($workorder->setdate, 'dd mmmm yyyy') }}</td>
                    </tr>
                    <tr>
                        <td>Nama Pelanggan</td>
                        <td class="divide">:</td>
                        <td>{{ $workorder->sales->customer->name }}</td>
                    </tr>
                    <tr>
                        <td>Total Biaya</td>
                        <td class="divide">:</td>
                        <td>{{ 'Rp. ' . number_format($workorder->total, 0, '', '.') }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-6">
                <table class="table-padding">
                    <tr>
                        <td>Tipe Bahan</td>
                        <td class="divide">:</td>
                        <td>{{ $workorder->sales->material->name }}</td>
                    </tr>
                    <tr>
                        <td>Keterangan</td>
                        <td class="divide">:</td>
                        <td></td>
                    </tr>
                </table>

                {{ $workorder->sales->material_descr }}
            </div>
        </div>
        <hr class="mb-0" />

        <div class="table-responsive">
            <table class="table" id="table-invoice">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Termin</th>
                        <th>No. Invoice</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 workorder = "{{ $workorder->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.work.datatable.invoice') }}",
            type: "POST",
            data: {workorder: workorder, _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) => setStatus('workorder_invoice', row.status)
            },
            {
                class: "align-top text-center",
                width: "70px",
                searchable: false,
                render: (data, type, row) => {
                    let html = ""

                    if (row.status == 0) {
                        let url_payment = "{{ route('order.work.create.payment', 0) }}"
                        let url_print = "{{ route('order.work.print.invoice', 0) }}"

                        url_payment = url_payment.replace("0", row.encrypted_id)
                        url_print = url_print.replace("0", 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_print = "{{ route('order.work.print.receipt', 0) }}"
                        url_print = url_print.replace("0", row.encrypted_id)

                        html = `<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