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

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

        <form method="post" action="{{ route('order.work.store.delivery') }}" class="form-block">
            @csrf
            
            <div class="row">
                <div class="col-sm-4 col-md-3">
                    <x-form.date-picker
                        name="setdate"
                        label="Tanggal"
                        picker-type="date"
                        :old="old('setdate')"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <x-form.input-text
                        type="hidden"
                        name="id_customer"
                        id="customer-id"
                        :old="old('id_customer')"
                    />

                    <x-form.input-group-button
                        name="customer_name"
                        label="Pelanggan"
                        id="customer-name"
                        class="btn-choose-customer bg-white"
                        btn-label="<i class='mdi mdi-magnify'></i>"
                        btn-class="btn-choose-customer px-3"
                        style="cursor: pointer;"
                        :old="old('customer_name')"
                        readonly
                    />
                </div>
                <div class="col-sm-6 col-md-4">
                    <x-form.input-text
                        name="via"
                        label="Dikirim Menggunakan"
                        :old="old('via')"
                    />
                </div>
            </div>

            <x-section-form label="Item" icon="mdi mdi-clipboard-list" class="mb-1" />

            <div class="table-responsive">
                <table class="table" id="table-items">
                    <thead>
                        <tr>
                            <th>No. Work Order</th>
                            <th>Jenis Pekerjaan</th>
                            <th>Keterangan</th>
                            <th>Harga Satuan <span class="font-weight-normal">(Rp)</span></th>
                            <th>Belum Dikirim</th>
                            <th>Jumlah Dikirim</th>
                            <th>Total <span class="font-weight-normal">(Rp)</span></th>
                            <th>#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td colspan="8">
                                <a href="javascript:void(0)" id="btn-add-workorder">
                                    <i class="mdi mdi-plus"></i> &nbsp;ADD
                                </a>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <x-form.button-submit :cancel-route="route('order.work.delivery')" />
        </form>
    </div>
</div>

<div class="modal fade" id="modal-customer" tabindex="-1" aria-labelledby="modal-customerLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-customerLabel">
                    <i class="mdi mdi-account-circle text-primary"></i> &nbsp;Pilih Pelanggan
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pt-0">
                <div class="table-responsive">
                    <table class="table" id="table-customer">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama Perusahaan</th>
                                <th>Nama PIC</th>
                                <th>No. HP</th>
                                <th>Alamat</th>
                                <th>#</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-workorder" tabindex="-1" aria-labelledby="modal-workorderLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-workorderLabel">
                    <i class="mdi mdi-account-circle text-primary"></i> Pilih Work Order
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body pt-0">
                <div class="table-responsive">
                    <table class="table" id="table-workorder">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>No. Order</th>
                                <th>Pelanggan</th>
                                <th>Tipe Bahan</th>
                                <th>Total</th>
                                <th>#</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </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>
const error = "@isset($errors->all()[0]) {{ $errors->all()[0] }} @endisset"
let datatable_customer = false
let datatable_workorder = false
let ppn_percent = "{{ $ppn_percent }}"
let items = ""
let id_customer = "{{ old('id_customer') }}"

$(document).ready(function(){
    window.LaravelDataTables = window.LaravelDataTables || {}

    if (error != "")
        setNotiffail(error)

    $(".btn-choose-customer").click(function(){
        $("#modal-customer").modal("show")
    })

    $("#btn-add-workorder").click(function(){
        $("#modal-workorder").modal("show")
    })

    $("#table-customer").on("click", ".btn-choose", function(){
        var formData = {id: $(this).data("id"), _token: token}

        $.ajax({
            type: "POST",
            url: "{{ route('customer.get') }}",
            data: formData,
            dataType: "json",
            success: function(response){
                id_customer = response.data.id
                customer_tax = response.data.flag

                $("#customer-id").val(response.data.id)
                $("#customer-name").val(response.data.name)
                $("#customer-tax").val(response.data.flag)
                $("#modal-customer").modal("hide")

                loadWorkOrder()
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status)
            }
        })
    })

    $("#table-workorder").on("click", ".btn-choose", function(){
        const formData = {id: $(this).data("id"), _token: token}

        $.ajax({
            type: "POST",
            url: "{{ route('order.work.get') }}",
            data: formData,
            dataType: "json",
            success: function(response){
                const items = response.data.items

                items.forEach((i, index) => {
                    const notdelivered = parseInt(i.qty) - parseInt(i.delivered)
                    const total = parseFloat(i.price) * notdelivered

                    $("#table-items tbody").append("<tr>" +
                        "<td>" +
                            "<input type='hidden' name='items[id_workorder][]' value='" + response.data.id + "'>" +
                            response.data.number +
                        "</td>" +
                        "<td>" + i.material + "</td>" +
                        "<td>" + i.descr + "</td>" +
                        "<td>" + moneyFormat(i.price) + "</td>" +
                        "<td>" + moneyFormat(notdelivered) + "</td>" +
                        "<td style='width: 150px;'>" +
                            "<input type='hidden' name='items[index][]' value='" + i.index + "'>" +
                            "<input type='text' name='items[qty][]' class='form-control qty' value='" + notdelivered + "' placeholder='.....' autocomplete='off' data-price='" + i.price + "'>" +
                        "</td>" +
                        "<td style='width: 180px;'>" +
                            "<input type='text' name='items[total][]' class='form-control total' value='" + moneyFormat(total) + "' placeholder='.....' autocomplete='off' readonly>" +
                        "</td>" +
                        "<td>" +
                            "<button type='button' class='btn btn-danger btn-delete btn-sm' data-index='" + i.index + "'>" +
                                "<i class='mdi mdi-trash-can'></i>" +
                            "</button>" +
                        "</td>" +
                    "</tr>")
                })

                $("#modal-workorder").modal("hide")

            },
            error: function (xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status)
            }
        })
    })

    $("#table-items").on("blur", ".qty", function(){
        const qty = parseInt($(this).val())
        const price = parseFloat($(this).data("price"))
        const total = qty * price

        $(this).closest("tr").find(".total").val(moneyFormat(total))
    })

    $("#table-items").on("click", ".btn-delete", function(){
        $(this).closest("tr").remove()
    })

    if (datatable_customer == false) {
        datatable_customer = true

        window.LaravelDataTables["table-customer"] = $("#table-customer").DataTable({
            dom: 'fltpr',
            language: {
                search: "",
                searchPlaceholder: "Pencarian...",
                lengthMenu: "_MENU_ Data"
            },
            ajax:
            {
                url: "{{ route('customer.datatable') }}",
                type: "POST",
                data: {_token: token}
            },
            processing: true,
            serverSide: true,
            deferRender: true,
            ordering: true,
            order: [[ 2, 'asc' ]],
            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
                },
                {
                    data: "name",
                    class: "align-top",
                    render: (data, type, row) => htmlEntities(row.name)
                },
                {
                    data: "name_pic",
                    class: "align-top",
                    render: (data, type, row) => htmlEntities(row.name_pic)
                },
                {
                    class: "align-top",
                    width: "120px",
                    orderable: false,
                    render: (data, type, row) => phoneFormat(row.phone)
                },
                {
                    class: "align-top",
                    orderable: false,
                    render: (data, type, row) => htmlEntities(row.address)
                },
                {
                    class: "align-top",
                    width: "40px",
                    orderable: false,
                    searchable: false,
                    render: (data, type, row) => `<button type="button" class="btn btn-primary btn-xs btn-choose set-tooltip" title="Pilih" data-id="${row.id}">
                            <i class="mdi mdi-check"></i>
                        </button>`
                }
            ]
        })
    }
})

$(document).on('shown.bs.modal', function (e) {
    $($.fn.dataTable.tables(true)).css('width', '100%')
})

function loadWorkOrder()
{
    if (datatable_workorder == false) {
        datatable_workorder = true

        window.LaravelDataTables["table-workorder"] = $("#table-workorder").DataTable({
            dom: 'fltpr',
            language: {
                search: "",
                searchPlaceholder: "Pencarian...",
                lengthMenu: "_MENU_ Data"
            },
            ajax:
            {
                url: "{{ route('order.work.datatable.delivery-order') }}",
                type: "POST",
                data: function(d) {
                    d.customer = id_customer,
                    d._token = token
                }
            },
            processing: true,
            serverSide: true,
            deferRender: true,
            ordering: true,
            order: [[ 2, 'asc' ]],
            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
                },
                {
                    data: "code",
                    class: "align-top",
                    render: (data, type, row) => `<span class="text-primary font-weight-bold">
                            ${htmlEntities(row.number)}
                        </span>
                        <div class="mt-3">
                            <small><b>Tanggal</b></small><br />
                            ${dateFormat(row.setdate, "{dd} {mmmm} {yyyy}")}
                        </div>`
                },
                {
                    class: "align-top",
                    render: (data, type, row) => `${htmlEntities(row.sales.customer.name)}
                        <div class="mt-3">
                            <small><b>No. HP</b></small><br />
                            ${phoneFormat(row.sales.customer.phone)}
                        </div>`
                },
                {
                    class: "align-top",
                    render: (data, type, row) => `${htmlEntities(row.sales.material.name)}
                        <div class="mt-3">
                            <small><b>Keterangan</b></small><br />
                            ${phoneFormat(row.sales.material_descr)}
                        </div>`
                },
                {
                    data: "status",
                    class: "align-top",
                    render: (data, type, row) => `<table class="table-padding">
                            <tr>
                                <td class="border-top-0 pt-0" style="width: 80px;">Sub Total</td>
                                <td class="border-top-0 pt-0 divide">:</td>
                                <td class="border-top-0 pt-0">Rp.</td>
                                <td class="border-top-0 pt-0 text-right">${moneyFormat(row.subtotal)}</td>
                            </tr>
                            <tr>
                                <td>PPN</td>
                                <td class="divide">:</td>
                                <td>Rp.</td>
                                <td class="text-right">${moneyFormat(row.ppn)}</td>
                            </tr>
                            <tr>
                                <td>Total</td>
                                <td class="divide">:</td>
                                <td>Rp.</td>
                                <td class="text-right">${moneyFormat(row.total)}</td>
                            </tr>
                        </table>`
                },
                {
                    class: "align-top",
                    width: "40px",
                    orderable: false,
                    searchable: false,
                    render: (data, type, row) => `<button type="button" class="btn btn-primary btn-xs btn-choose set-tooltip" title="Pilih" data-id="${row.id}">
                            <i class="mdi mdi-check-bold"></i>
                        </button>`
                }
            ]
        })
    } else
        window.LaravelDataTables["table-workorder"].ajax.reload()
}
</script>
@endpush