@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('order.delivery.create')"
        />

        <div class="table-responsive">

            <table class="table" id="table-work">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>No. Pengiriman</th>
                        <th>No. Invoice</th>
                        <th>Pengiriman</th>
                        <th>Pelanggan</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>#</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-upload" tabindex="-1" aria-labelledby="modal-uploadLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-uploadLabel">
                    <i class="mdi mdi-arrow-down-bold-box text-primary"></i> Penerimaan
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>No. Delivery</label>
                            <input type="text" class="form-control number" readonly>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <x-form.date-picker name="date" id="date" label="Tanggal Penerimaan" picker-type="date" :old="old('datetime',date('d-m-Y'))" />
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <x-form.time-picker name="time" id="time" label="Waktu Penerimaan" :old="old('time',date('H:i'))" />
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Nama Penerima</label>
                            <input type="text" id="penerima" class="form-control">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Upload File</label>
                            <input type="file" class="form-control file">
                            <small class="text-muted">Gunakan file Ms. Word, Ms. Excel atau PDF. Ukuran file maks. 10 MB</small>
                        </div>
                    </div>
                </div>





            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm btn-submit">
                    <i class="mdi mdi-upload"></i> &nbsp;UPLOAD
                </button>
                <button type="button" class="btn btn-dark btn-sm" data-dismiss="modal">CANCEL</button>
            </div>
        </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.delivery.datatables') }}",
            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,
                render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
            },
            {
                class: "align-top",
                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.setdate, "{dd} {mmmm} {yyyy}")}
                    </div>
                    `
            },
            {
                class: "align-top",
                render: (data, type, row)  => `<span class="text-primary font-weight-bold">
                        ${htmlEntities(row.invoice?.number)}
                    </span>
                    <div class="mt-3">
                        <small class="font-weight-bold">Tanggal</small><br />
                        ${dateFormat(row?.setdate, "{dd} {mmmm} {yyyy}")}
                    </div>
                    `
            },
            {
                class: "align-top",
                render: (data, type, row)  => row.via_pengiriman
            },

            {
                class: "align-top",
                render: (data, type, row) => `${htmlEntities(row.customer.name)}
                    <div class="mt-3">
                        <small class="font-weight-bold">No. HP</small><br />
                        ${phoneFormat(row.customer.phone)}
                    </div>`
            },
            {
                class: "align-top",
                render: (data, type, row) => moneyFormat(row.total)

            },
            {
                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_print = "{{ route('order.delivery.print', -1) }}"
                    url_print = url_print.replace("-1", row.encrypted_id)
                    let url_view = "{{route('order.delivery.view', -1)}}";
                    url_view = url_view.replace("-1", row.encrypted_id)

                    let html = `<a href='${url_view}' class='btn btn-primary btn-xs text-left set-tooltip' title='Detail'>` +
                            `<i class='mdi mdi-magnify'></i>` +
                        `</a><br>`


                    if (row.status == 0) {
                        let url_delete = "{{ route('order.delivery.destroy', -1) }}"
                        url_delete = url_delete.replace("-1", row.encrypted_id)

                        html += `
                            <button type="button" class="btn btn-danger btn-xs set-tooltip mb-1" title="Batal" onclick="deleteConfirm('${url_delete}', false, 'table-work','Batalkan delivery ini')">
                                <i class="mdi mdi-cancel"></i>
                            </button><br>
                            `
                    }
                    html += `<a href="${url_print}" class="btn btn-default btn-xs text-left set-tooltip mb-1" title="Cetak">
                                <i class="mdi mdi-printer"></i>
                            </a>`

                    return html
                }
            }
        ]
    })

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

    $("#table-work").on("click", ".btn-upload", function(){
        id = $(this).data("id")

        $("#modal-upload .number").val(atob($(this).data("number")))
        $("#modal-upload").modal("show")
    })


    $("#modal-upload .btn-submit").click(function(){
        var btn = $(this)
        var formdata = new FormData()

        formdata.append('id', id);
        formdata.append('_token', token);
        formdata.append('file_document', $("#modal-upload .file")[0].files[0]);
        formdata.append('received', $("#modal-upload #date").val()+ " "+$("#modal-upload #time").val());
        formdata.append('received_by', $("#modal-upload #penerima"));

        btn.removeClass("btn-primary").addClass("btn-default").attr("disabled", true).html("UPLOADING...")

        $.ajax({
            type: "POST",
            url: "{{ route('order.delivery.document') }}",
            data: formdata,
            cache: false,
            processData: false,
            contentType: false,
            success: function(response){
                btn.removeClass("btn-default").addClass("btn-primary").removeAttr("disabled").html('<i class="mdi mdi-upload"></i> &nbsp;UPLOAD')

                if (response.status) {
                    $("#modal-upload").modal("hide")

                    window.LaravelDataTables["table-work"].ajax.reload()
                    setNotifsuccess(response.message, false)
                } else
                    setNotiffail(response.message)
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status)
            }
        })
    })
})
</script>
@endpush