@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" :create-route="route('purchasing.order.create')" />
        <div class="table-responsive">
            <table class="table" id="table-order">
                <thead>
                    <tr>

                        <th>No</th>
                        <th>No. PO</th>
                        <th>Nama Pengaju</th>
                        <th>Nama Supplier</th>
                        <th>Total</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>
$(document).ready(function() {
    window.LaravelDataTables = window.LaravelDataTables || {}
    window.LaravelDataTables["table-order"] = $("#table-order").DataTable({
        dom: 'fltpr',
        language: {
            search: "",
            searchPlaceholder: "Pencarian...",
            lengthMenu: "_MENU_ Data"
        },
        ajax:
        {
            url: "{{ route('purchasing.order.datatable') }}",
            type: "POST",
            data: {_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
            },
            {
                data: "number",
                class: "align-top",
                width: "120px",
                render: (data, type, row)  => `<span class="text-primary font-weight-bold">
                        ${htmlEntities(row.number)}
                    </span>
                    <div class="mt-3">
                        <small class="font-weight-bold">Tanggal</small><br />
                        ${dateFormat(row.dates, "{dd} {mmmm} {yyyy}")}
                    </div>`
            },
            {
                class: "align-top",
                render: (data, type, row)  => `${htmlEntities(row.submitter_name)}
                    <div class="mt-3">
                        <small class="font-weight-bold">Kebutuhan</small><br />
                        ${htmlEntities(row.needs)}
                    </div>`
            },
            {
                class: "align-top",
                render: (data, type, row)  => `${htmlEntities(row.supplier.name)}
                    <div class="mt-3">
                        <small class="font-weight-bold">No. HP</small><br />
                        ${phoneFormat(row.supplier.phone)}
                    </div>`
            },
            {
                class: "align-top",
                render: (data, type, row) => {
                    let no = 1
                    let html = `<table style="width: 100%;">
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Jenis</th>
                            <th class="text-center">Jumlah</th>
                            <th class="text-right">Harga</th>
                            <th class="text-right">Total</th>
                        </tr>`

                    row.items.forEach((i) => {
                        html += `<tr>
                            <td>${no}</td>
                            <td>${i.name}</td>
                            <td>${i.type}</td>
                            <td class="text-center">${moneyFormat(i.qty)}</td>
                            <td class="text-right">${moneyFormat(i.price)}</td>
                            <td class="text-right">${moneyFormat(i.total)}</td>
                        </tr>`

                        no++
                    })

                    html += `</table>`

                    return html
                }
            },
            {
                class: "align-top text-center",
                orderable: false,
                searchable: false,
                width: "40px",
                render: (data, type, row) => {
                    let url_verify = "{{ route('purchasing.order.verify', -1) }}"
                    url_verify = url_verify.replace("-1", row.encrypted_id)

                    return `<a href="${url_verify}" class="btn btn-success btn-xs set-tooltip mb-1" title="Verifikasi">
                            <i class="mdi mdi-check"></i>
                        </a>`
                }
            }
        ]
    })

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