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

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

    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-page border-bottom mt-4"
        style="border-bottom-left-radius: 0;border-bottom-right-radius: 0;">
        <a class="navbar-brand d-block d-sm-none" href="#">Menu</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            @php
                $set_waiting = $render == 'waiting' ? ' active' : '';
                $set_history = $render == 'history' ? ' active' : '';
            @endphp
            <ul class="navbar-nav">
                <li class="nav-item{{ $set_waiting }}">
                    <a href="{{ route('order.payment.index', 'waiting') }}" class="nav-link">
                        <i class="mdi mdi-credit-card"></i> &nbsp;Menunggu Pembayaran
                    </a>
                </li>
                <li class="nav-item{{ $set_history }}">
                    <a href="{{ route('order.payment.index', 'history') }}" class="nav-link">
                        <i class="mdi mdi-history"></i> &nbsp;Riwayat
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="card card-navbar">
        <div class="card-body pt-3">
            <x-section-header action="list" :icon="$icon" :label="$label" />

            <div class="table-responsive">
                <table class="table" id="table-work">
                    <thead>
                        <tr>
                            <th>No</th>
                            @if ($render == 'waiting')
                                <th>No. Invoice</th>
                                <th>Tgl. Invoice</th>
                                <th>Termin</th>
                                <th>Pelanggan</th>
                                <th>Jatuh Tempo</th>
                                <th>Total</th>
                            @else
                                <th>No. Kuitansi</th>
                                <th>Tanggal Pembayaran</th>
                                <th>Pelanggan</th>
                                <th>Total</th>
                            @endif

                            <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>
        $(document).ready(function() {
            window.LaravelDataTables = window.LaravelDataTables || {}
            window.LaravelDataTables["table-work"] = $("#table-work").DataTable({
                dom: 'fltpr',
                language: {
                    search: "",
                    searchPlaceholder: "Pencarian...",
                    lengthMenu: "_MENU_ Data"
                },
                ajax: {
                    url: "{{ route('order.payment.datatables') }}",
                    type: "POST",
                    data: {
                        _token: token,
                        render: "{{ $render }}"
                    }
                },
                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: @if ($render == 'waiting')
                    dataWaiting()
                @else
                    dataHistory()
                @endif
            })

            $($.fn.dataTable.tables(true)).css('width', '100%')


        })

        function dataHistory() {
            return [{
                    data: null,
                    class: "align-top",
                    orderable: false,
                    searchable: false,
                    render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                },
                {
                    data: "code",
                    class: "align-top",
                    render: (data, type, row) => row.number
                },
                {
                    data: "code",
                    class: "align-top",
                    render: (data, type, row) => dateFormat(row.payment_date, "{dd} {mmmm} {yyyy}")
                },
                {
                    class: "align-top",
                    render: (data, type, row) => `${htmlEntities(row.invoice.customer.name)}
                    <div class="mt-0">
                        <small>${phoneFormat(row.invoice.customer.phone)}</small>

                    </div>`
                },
                {
                    data: "status",
                    class: "align-top",
                    render: (data, type, row) => moneyFormat(row.total)
                },
                {
                    data: "status",
                    class: "align-top",
                    render: (data, type, row) => row.status_badge
                },
                {
                    class: "align-top text-center",
                    orderable: false,
                    searchable: false,
                    width: "40px",
                    render: (data, type, row) => {
                        let url_view = "{{ route('order.payment.view', -1) }}"
                        url_view = url_view.replace("-1", row.encrypted_id)

                        let url_print = "{{ route('order.payment.receipt', -1) }}"
                        url_print = url_print.replace("-1", row.encrypted_id)

                        let 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
                }
            }
        ];
        }

        function dataWaiting() {
            return [{
                    data: null,
                    class: "align-top",
                    orderable: false,
                    searchable: false,
                    render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                },
                {
                    data: "code",
                    class: "align-top",
                    render: (data, type, row) => row.invoice.number
                },
                {
                    data: "code",
                    class: "align-top",
                    render: (data, type, row) => dateFormat(row.invoice.setdate, "{dd} {mmmm} {yyyy}")
                },
                {
                    class: "align-top",
                    render: (data, type, row) => row.termin
                },
                {
                    class: "align-top",
                    render: (data, type, row) => `${htmlEntities(row.invoice.customer.name)}
                    <div class="mt-0">
                        <small>${phoneFormat(row.invoice.customer.phone)}</small>

                    </div>`
                },
                {
                    data: "code",
                    class: "align-top",
                    render: (data, type, row) => dateFormat(row.duedate, "{dd} {mmmm} {yyyy}")
                },
                {
                    data: "status",
                    class: "align-top",
                    render: (data, type, row) => moneyFormat(row.total)
                },
                {
                    data: "status",
                    class: "align-top",
                    render: (data, type, row) => row.status_badge
                },
                {
                    class: "align-top text-center",
                    orderable: false,
                    searchable: false,
                    width: "40px",
                    render: (data, type, row) => {
                        let url_view = "{{ route('order.payment.view', -1) }}"
                        url_view = url_view.replace("-1", row.encrypted_id)

                        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)

                        return  `
                        <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_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>`


                    }
                }
            ];
        }
    </script>
@endpush