@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.sales.store') }}" class="form-block">
                @csrf

                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <x-form.date-picker name="setdate" label="Tanggal" picker-type="date" :old="old('setdate', date('d-m-Y'))" />
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <x-form.input-text type="hidden" name="id_quotation" id="quotation-id" :old="old('id_quotation')" />

                        <x-form.input-group-button name="quotation_number" label="Quotation" id="quotation-number"
                            class="btn-choose-quotation bg-white" btn-label="<i class='mdi mdi-magnify'></i>"
                            btn-class="btn-choose-quotation" style="cursor: pointer;" :old="old('quotation_number')" optional
                            readonly />
                    </div>
                    <div class="col-sm-12 col-md-4">
                        <x-form.input-text type="hidden" name="id_customer" id="customer-id" :old="old('id_customer')" />
                        <x-form.input-text type="hidden" name="customer_tax" id="customer-tax" :old="old('customer_tax', 2)" />
                        <x-form.input-text type="hidden" name="customer_pph" id="customer-pph" :old="old('customer_pph', 0)" />

                        <x-form.input-group-button name="customer_name" label="Nama Pelanggan" id="customer-name"
                            class="btn-choose-customer bg-white" btn-label="<i class='mdi mdi-magnify'></i>"
                            btn-class="btn-choose-customer" style="cursor: pointer;" :old="old('customer_name')" readonly />
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <x-form.input-text name="description" label="Keterangan" :old="old('description')" />
                    </div>
                </div>
                @php
                    $old = old('work', []);
                    $subtotal = 0;
                    $ppn = 0;
                    $pph = 0;
                    $total = 0;
                @endphp
                @if (Auth::user()->entity->is_barang)
                    <x-section-form label="Item" icon="mdi mdi-cube" class="mt-4 mb-1" />
                @else
                    <x-section-form label="Jasa" icon="mdi mdi-cube" class="mt-4 mb-1" />
                @endif

                <div class="table-responsive">
                    <table class="table" id="table-item">
                        <thead>
                            <tr>
                                @if (Auth::user()->entity->is_barang)
                                    <th>Nama Item</th>
                                    <th>Stok</th>
                                @else
                                    <th>Nama Jasa</th>
                                @endif
                                <th>Harga Satuan <span class="mdi mdi-information text-info set-tooltip"
                                        title="Harga sebelum pajak (Harga Dasar)"></span></th>
                                <th>Jumlah</th>
                                <th>Total</th>
                                <th style="width: 80px;">#</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $old = old('items', []);
                            @endphp

                            @if (empty($old))
                                <tr>
                                    <td>
                                        <x-form.input-text type="hidden" name="items[id][]" class="item-id" />
                                        <x-form.input-group-button name="items[material][]"
                                            class="item-name btn-choose-item" style="cursor: pointer;background: white;"
                                            btn-label="<i class='mdi mdi-magnify'></i>" btn-class="btn-choose-item"
                                            readonly />
                                    </td>
                                    @if (Auth::user()->entity->is_barang)
                                        <td>
                                            <x-form.input-mask mask="nominal" name="items[stock][]"
                                                class="item-stock nominal" readonly />
                                        </td>
                                    @endif
                                    <td>
                                        <x-form.input-mask mask="nominal" name="items[price][]"
                                            class="item-price nominal" />
                                    </td>
                                    <td>
                                        <x-form.input-mask name="items[qty][]" mask="nominal" class="qty" />
                                    </td>
                                    <td>
                                        <x-form.input-mask class="total" mask="nominal" readonly />
                                    </td>
                                    <td></td>
                                </tr>
                            @else
                                @foreach ($old['id'] as $index => $i)
                                    @php
                                        $price = empty($old['price'][$index])
                                            ? 0
                                            : str_replace('.', '', $old['price'][$index]);
                                        $qty = empty($old['qty'][$index])
                                            ? 0
                                            : str_replace('.', '', $old['qty'][$index]);

                                        $total_work = $price * $qty;
                                        $subtotal += $total_work;
                                    @endphp
                                    <tr>
                                        <td>
                                            <x-form.input-text type="hidden" name="items[id][]" class="item-id"
                                                :old="$i" />
                                            <x-form.input-group-button name="items[material][]"
                                                class="item-name btn-choose-item" style="cursor: pointer;background: white;"
                                                btn-label="<i class='mdi mdi-magnify'></i>" btn-class="btn-choose-item"
                                                :old="$old['material'][$index]" readonly />
                                        </td>
                                        @if (Auth::user()->entity->is_barang)
                                            <td>
                                                <x-form.input-mask name="items[stock][]" class="item-stock nominal"
                                                    :old="$old['stock'][$index]" mask="nominal" readonly />
                                            </td>
                                        @endif
                                        <td>
                                            <x-form.input-mask name="items[price][]" class="item-price" mask="nominal"
                                                :old="$old['price'][$index]" />
                                        </td>
                                        <td>
                                            <x-form.input-mask name="items[qty][]" class="qty" mask="nominal"
                                                mask="nominal" :old="$old['qty'][$index]" />
                                        </td>
                                        <td>
                                            @if ($index > 0)
                                                <button type="button" class="btn btn-danger btn-sm btn-delete">
                                                    <i class="mdi mdi-trash-can"></i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                @php
                                    if (old('ppn-checked') == 'ppn') {
                                        $ppn = ($subtotal * $ppn_percent) / 100;
                                    }
                                    if (old('pph-checked') == 'pph') {
                                        $pph = ($subtotal * $pph_percent) / 100;
                                    }

                                    $ppn = round($ppn);
                                    $pph = round($pph);

                                    $total = $subtotal + $ppn - $pph;
                                @endphp
                            @endif
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="9">
                                    <a href="javascript:void(0)" id="btn-add-item">
                                        <i class="mdi mdi-plus"></i> ADD
                                    </a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <hr>

                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div id="tax-section" style="display: none">
                            <x-form.checkbox label="PPN" id='ppn-checked' value='ppn' name='ppn-checked'
                                class="tax-checked" data-input="#ppn-input" :old="old('ppn-checked')" />
                            <x-form.input-group-mask class="tax-input" style="text-align: right" :addon_position="'right'"
                                :addon="'%'" name="ppn_percent" id="ppn-input" mask="nominal" :old="old('ppn_percent')" />
                            <x-form.checkbox label="PPH" id='pph-checked' value='pph' class="tax-checked"
                                name='pph-checked' data-input="#pph-input" :old="old('pph-checked')" />
                            <x-form.input-group-mask class="tax-input" style="text-align: right" :addon_position="'right'"
                                :addon="'%'" name="pph_percent" id="pph-input" mask="nominal" :old="old('pph_percent')" />
                        </div>

                    </div>
                    <div class="col-md-4 offset-md-4 col-sm-12">
                        <table class="table-padding">
                            <tr>
                                <td>Sub Total</td>
                                <td class="divide">:</td>
                                <td>Rp</td>
                                <td class="text-right" style="min-width: 90px;" id="subtotal">
                                    {{ number_format($subtotal, 0, '', '.') }}</td>
                            </tr>
                            <tr>
                                <td>PPN</td>
                                <td class="divide">:</td>
                                <td>Rp</td>
                                <td class="text-right" id="ppn">{{ number_format($ppn, 0, '', '.') }}</td>
                            </tr>
                            <tr>
                                <td>PPH</td>
                                <td class="divide">:</td>
                                <td>Rp</td>
                                <td class="text-right" id="pph">{{ number_format($pph, 0, '', '.') }}</td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <hr class="mt-0 mb-0">
                                </td>
                            </tr>
                            <tr>
                                <td>Total</td>
                                <td class="divide">:</td>
                                <td>Rp</td>
                                <td class="text-right" style="min-width: 90px;" id="total">
                                    {{ number_format($total, 0, '', '.') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>

                @if (Auth::user()->entity->is_jasa)
                    <x-section-form
                        label="Karyawan"
                        icon="mdi mdi-account-circle"
                        class="mt-4"
                        optional
                    />
                    <div class="mt-3 mb-2">
                        Tambah karyawan untuk menentukan siapa yang akan mengerjakannya. Maks. 4 Orang
                    </div>

                    @if (@$errors->has('employee_id'))
                        <div class="alert alert-danger">
                            @foreach ($errors->get('employee_id') as $message)
                                <div class="mb-1"><i class="mdi mdi-alert-circle"></i> &nbsp;{{ ucfirst($message) }}</div>
                            @endforeach
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table" id="table-employee">
                            <thead>
                                <tr>
                                    <th>Nama</th>
                                    <th>NIP</th>
                                    <th>Jabatan</th>
                                    <th style="width: 80px;">#</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                $old = old('employee');
                                $count_employee = 0;
                                @endphp

                                @if (!empty($old))
                                    @foreach ($old['id'] as $index => $i)
                                        <tr>
                                            <td>
                                                <x-form.input-text
                                                    type="hidden"
                                                    name="employee[id][]"
                                                    class="id"
                                                    :old="$i"
                                                />
                                                <x-form.input-group-button
                                                    name="employee[name][]"
                                                    class="name btn-choose"
                                                    btn-class="btn-choose"
                                                    btn-label="<i class='mdi mdi-magnify'></i>"
                                                    style="cursor: pointer;background: white;"
                                                    :old="$old['name'][$index]"
                                                    readonly
                                                />
                                            </td>
                                            <td>
                                                <x-form.input-text
                                                    name="employee[nip][]"
                                                    class="nip"
                                                    :old="$old['nip'][$index]"
                                                    readonly
                                                />
                                            </td>
                                            <td>
                                                <x-form.input-text
                                                    name="employee[position][]"
                                                    class="position"
                                                    :old="$old['position'][$index]"
                                                    readonly
                                                />
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm btn-delete">
                                                    <i class="mdi mdi-trash-can"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @php
                                        $count_employee++;
                                        @endphp
                                    @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="9">
                                        <a href="javascript:void(0)" id="btn-add-employee">
                                            <i class="mdi mdi-plus"></i> ADD
                                        </a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @endif

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

    <div class="modal fade" id="modal-quotation" tabindex="-1" aria-labelledby="modal-quotationLabel"
        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-quotationLabel">
                        <i class="mdi mdi-comment-quote text-primary"></i> &nbsp;Pilih Quotation
                    </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-quotation">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>No. Quotation</th>
                                    <th>Pelanggan</th>
                                    <th>Total</th>
                                    <th>#</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </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-item" tabindex="-1" aria-labelledby="modal-itemLabel" 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-itemLabel">
                        <i class="mdi mdi-package text-primary"></i> &nbsp;
                        @if (Auth::user()->entity->is_barang)
                        Pilih Item
                        @else
                        Pilih Jasa
                        @endif
                    </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-item-choose">
                            <thead>
                                <tr>
                                    <th>No</th>

                                    @if (Auth::user()->entity->is_barang)
                                        <th>SKU</th>
                                    @endif

                                    <th>{{ (Auth::user()->entity->is_barang) ? 'Item' : 'Nama Jasa' }}</th>
                                    <th>Kategori</th>

                                    @if (Auth::user()->entity->is_barang)
                                        <th>Dimensi</th>
                                        <th>Stok</th>
                                        <th>Harga Satuan</th>
                                    @endif

                                    <th>#</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-employee" tabindex="-1" aria-labelledby="modal-employeeLabel"
        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-employeeLabel">
                        <i class="mdi mdi-account-circle text-primary"></i> &nbsp;Pilih Karyawan
                    </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-employee-list">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>NIP</th>
                                    <th>Nama</th>
                                    <th>Jabatan</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>
let datatable_quotation = false
let datatable_customer = false
let datatable_employee = false
let customer_tax = "{{ old('customer_tax', 2) }}"
let customer_pph = "{{ old('customer_pph', 0) }}"
let id_quotation = "{{ old('id_quotation') }}"
let id_customer = "{{ old('id_customer') }}"
let subtotal = parseFloat("{{ $subtotal }}")
let ppn_percent = "{{ $ppn_percent }}"
let pph_percent = "{{ $pph_percent }}"
let tr_item = ""
let tr_employee = ""
let count_employee = parseInt("{{ @$count_employee }}")

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

    @if (old('id_customer'))
        $("#tax-section").show();
    @endif

    @if (old('pph-checked') != 'pph')
        $("#pph-input").val(0);
        $("#pph-input").attr('readonly', true);
    @endif

    @if (old('ppn-checked') != 'ppn')
        $("#ppn-input").val(0);
        $("#ppn-input").attr('readonly', true);
    @endif

    $(".nominal-mask").inputmask({
        alias: "nominal"
    })
    $(".handphone-mask").inputmask({
        alias: "handphone"
    })

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

    $(".btn-choose-customer").click(function() {
        if (id_quotation != "")
            return false

        $("#modal-customer").modal("show")
    })

    $("#btn-add-item").click(function() {
        @if (Auth::user()->entity->is_barang)
            $("#table-item tbody").append('<tr>' +
                '<td>' +
                '<input type="hidden" name="items[id][]" class="item-id">' +
                '<div class="input-group">' +
                '<input type="text" name="items[material][]" class="form-control item-name btn-choose-item" placeholder="....." style="cursor: pointer;background: white;" readonly /> ' +
                '<div class="input-group-append">' +
                '<button type="button" class="btn btn-default btn-choose-item">' +
                '<i class="mdi mdi-magnify"></i>' +
                '</button>' +
                '</div>' +
                '</div>' +
                '</td>' +
                "<td>" +
                "<input type='text' name='items[stock][]' class='form-control item-stock' readonly placeholder='.....' autocomplete='off'>" +
                "</td>" +
                "<td>" +
                "<input type='text' name='items[price][]' class='form-control price nominal-mask item-price' placeholder='.....' autocomplete='off'>" +
                "</td>" +
                '<td>' +
                '<input type="text" name="items[qty][]" class="form-control nominal-mask qty" placeholder="....." />' +
                '</td>' +
                "<td>" +
                "<input type='text' class='form-control total nominal-mask' placeholder='.....' readonly>" +
                "</td>" +
                '<td>' +
                '<button type="button" class="btn btn-danger btn-sm btn-delete">' +
                '<i class="mdi mdi-trash-can"></i>' +
                '</button>' +
                '</td>' +
                '</tr>')
        @else
            $("#table-item tbody").append('<tr>' +
                '<td>' +
                '<input type="hidden" name="items[id][]" class="item-id">' +
                '<div class="input-group">' +
                '<input type="text" name="items[material][]" class="form-control item-name btn-choose-item" placeholder="....." style="cursor: pointer;background: white;" readonly /> ' +
                '<div class="input-group-append">' +
                '<button type="button" class="btn btn-default btn-choose-item px-3">' +
                '<i class="mdi mdi-magnify"></i>' +
                '</button>' +
                '</div>' +
                '</div>' +
                '</td>' +
                "<td>" +
                "<input type='text' name='items[price][]' class='form-control price nominal-mask item-price' placeholder='.....' autocomplete='off'>" +
                "</td>" +
                '<td>' +
                '<input type="text" name="items[qty][]" class="form-control nominal-mask qty" placeholder="....." />' +
                '</td>' +
                "<td>" +
                "<input type='text' class='form-control total nominal-mask' placeholder='.....' readonly>" +
                "</td>" +
                '<td>' +
                '<button type="button" class="btn btn-danger btn-sm btn-delete">' +
                '<i class="mdi mdi-trash-can"></i>' +
                '</button>' +
                '</td>' +
                '</tr>')
        @endif


        $(".nominal-mask").inputmask({
            alias: "nominal"
        })
    })

    $("#table-item").on("blur", ".item-price", function() {
        tr_item = $(this).closest("tr")

        setTotalWork()
        setTotal()
    })

    $("#table-item").on("blur", ".qty", function() {
        tr_item = $(this).closest("tr")
        setTotalWork()
        setTotal()
    })

    $(".tax-input").on('blur', function() {
        setTotal();
    })

    $(".tax-checked").on('change', function() {
        let data = $(this).data();
        if ($(this).is(':checked')) {
            $(data.input).attr('readonly', false);
            if (data.input == "#ppn-input") {
                $(data.input).val(ppn_percent);
            } else {
                $(data.input).val(pph_percent);
            }

        } else {
            $(data.input).attr('readonly', true);
            $(data.input).val(0);
        }
        setTotal();
    })

    $("#table-item").on("click", ".btn-delete", function() {
        let total = $(this).closest("tr").find(".total").val()
        total = (total == "") ? 0 : total.replace(/\./g, "")

        subtotal -= parseFloat(total)
        $(this).closest("tr").remove()
        setTotal()
    })

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

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

                $("#table-item tbody").empty()

                response.data.items.forEach((i, index) => {
                    subtotal += parseFloat(i["total"])

                    @if (Auth::user()->entity->is_barang)
                        $("#table-item tbody").append('<tr>' +
                            '<td>' +
                            '<input type="hidden" name="items[id][]" value="' +
                            i['id'] + '" class="item-id">' +
                            '<div class="input-group">' +
                            '<input type="text" name="items[material][]" value="' +
                            i['name'] +
                            '" class="form-control item-name btn-choose-item" placeholder="....." style="cursor: pointer;background: white;" readonly /> ' +
                            '<div class="input-group-append">' +
                            '<button type="button" class="btn btn-default btn-choose-item px-3">' +
                            '<i class="mdi mdi-magnify"></i>' +
                            '</button>' +
                            '</div>' +
                            '</div>' +
                            '</td>' +
                            "<td>" +
                            "<input type='text' name='items[stock][]' value='" +
                            i['stock'] +
                            "' class='form-control item-stock' readonly placeholder='.....' autocomplete='off'>" +
                            "</td>" +
                            "<td>" +
                            "<input type='text' name='items[price][]' value='" +
                            i['price'] +
                            "' readonly class='form-control price nominal-mask item-price' placeholder='.....' autocomplete='off'>" +
                            "</td>" +
                            '<td>' +
                            '<input type="text" name="items[qty][]" value="' +
                            i['qty'] +
                            '" class="form-control nominal-mask qty" placeholder="....." />' +
                            '</td>' +
                            "<td>" +
                            "<input type='text' class='form-control total nominal-mask' value='" +
                            i['total'] + "' placeholder='.....' readonly>" +
                            "</td>" +
                            '<td>' +
                            '<button type="button" class="btn btn-danger btn-sm btn-delete">' +
                            '<i class="mdi mdi-trash-can"></i>' +
                            '</button>' +
                            '</td>' +
                            '</tr>')
                    @else
                        $("#table-item tbody").append('<tr>' +
                            '<td>' +
                            '<input type="hidden" name="items[id][]" value="' +
                            i['id'] + '" class="item-id">' +
                            '<div class="input-group">' +
                            '<input type="text" name="items[material][]" value="' +
                            i['name'] +
                            '" class="form-control item-name btn-choose-item" placeholder="....." style="cursor: pointer;background: white;" readonly /> ' +
                            '<div class="input-group-append">' +
                            '<button type="button" class="btn btn-default btn-choose-item px-3">' +
                            '<i class="mdi mdi-magnify"></i>' +
                            '</button>' +
                            '</div>' +
                            '</div>' +
                            '</td>' +
                            "<td>" +
                            "<input type='text' name='items[price][]' value='" +
                            i['price'] +
                            "' readonly class='form-control price nominal-mask item-price' placeholder='.....' autocomplete='off'>" +
                            "</td>" +
                            '<td>' +
                            '<input type="text" name="items[qty][]" value="' +
                            i['qty'] +
                            '" class="form-control nominal-mask qty" placeholder="....." />' +
                            '</td>' +
                            "<td>" +
                            "<input type='text' class='form-control total nominal-mask' value='" +
                            i['total'] + "' placeholder='.....' readonly>" +
                            "</td>" +
                            '<td>' +
                            '<button type="button" class="btn btn-danger btn-sm btn-delete">' +
                            '<i class="mdi mdi-trash-can"></i>' +
                            '</button>' +
                            '</td>' +
                            '</tr>')
                    @endif

                })

                $(".nominal-mask").inputmask({
                    alias: "nominal"
                })
                $("#quotation-id").val(response.data.id)
                $("#quotation-number").val(response.data.number)
                $("#customer-id").val(response.data.customer.id)
                $("#customer-name").val(response.data.customer.name).removeClass(
                    "bg-white").css({
                    "cursor": "default"
                })
                $("#customer-pic").val(response.data.customer.name_pic)
                $("#customer-phone").val(response.data.customer.phone)
                $("#customer-tax").val(response.data.customer.flag)
                $("#customer-pph").val(response.data.customer.pph)
                $("#modal-quotation").modal("hide")

                initTaxSelection(response.data);
                // setSelect2()
                setTotal()
            },
            error: function(xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status)
            }
        })
    })

    $("#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_pph = response.data.pph

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

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

    $("#table-item").on("click", ".btn-choose-item", function() {
        tr_item = $(this).closest("tr")

        $("#modal-item").modal("show")
        loadTableItem()
    })

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

        $.ajax({
            type: "POST",
            @if (Auth::user()->entity->is_barang)
                url: "{{ route('inventory.items.get.stock') }}",
            @else
                url: "{{ route('inventory.services.get.stock') }}",
            @endif
            data: formData,
            dataType: "json",
            success: function(response) {
                @if (Auth::user()->entity->is_barang)
                    tr_item.find(".item-id").val(response.data.id)
                    tr_item.find(".item-name").val(response.data.name)
                    tr_item.find(".item-stock").val(response.data.stock)
                    tr_item.find(".item-price").val(response.data.price)
                @else
                    tr_item.find(".item-id").val(response.data.id)
                    tr_item.find(".item-name").val(response.data.name)
                    tr_item.find(".item-price").val(response.data.price)
                @endif


                $("#modal-item").modal("hide")
            },
            error: function(xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status)
            }
        })
    })

    $("#btn-add-employee").click(function() {
        if (count_employee == 4)
            return false

        $("#table-employee tbody").append(`<tr>
            <td>
                <x-form.input-text
                    type="hidden"
                    name="employee[id][]"
                    class="id"
                />
                <x-form.input-group-button
                    name="employee[name][]"
                    class="name btn-choose"
                    btn-class="btn-choose"
                    btn-label="<i class='mdi mdi-magnify'></i>"
                    style="cursor: pointer;background: white;"
                    readonly
                />
            </td>
            <td>
                <x-form.input-text
                    name="employee[nip][]"
                    class="nip"
                    readonly
                />
            </td>
            <td>
                <x-form.input-text
                    name="employee[position][]"
                    class="position"
                    readonly
                />
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm btn-delete">
                    <i class="mdi mdi-trash-can"></i>
                </button>
            </td>
        </tr>`)

        count_employee++
    })

    $("#table-employee").on("click", ".btn-choose", function() {
        tr_employee = $(this).closest("tr")

        $("#modal-employee").modal("show")
    })

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

    $("#table-employee-list").on("click", ".btn-choose", function() {
        tr_employee.find(".id").val($(this).data("id"))
        tr_employee.find(".name").val(atob($(this).data("name")))
        tr_employee.find(".nip").val(atob($(this).data("nip")))
        tr_employee.find(".position").val(atob($(this).data("position")))

        $("#modal-employee").modal("hide")
    })

    if (datatable_quotation == false) {
        datatable_quotation = true

        window.LaravelDataTables["table-quotation"] = $("#table-quotation").DataTable({
            dom: 'fltpr',
            language: {
                search: "",
                searchPlaceholder: "Pencarian...",
                lengthMenu: "_MENU_ Data"
            },
            ajax: {
                url: "{{ route('order.quotation.datatable.sales') }}",
                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: "number",
                    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.start_date, "{dd} {mmm} {yyyy}")} -
                            ${dateFormat(row.end_date, "{dd} {mmm} {yyyy}")}
                        </div>`
                },
                {
                    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>`
                },

                {
                    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>PPH</td>
                            <td class="divide">:</td>
                            <td>Rp.</td>
                            <td class="text-right">${moneyFormat(row.pph)}</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>`
                }
            ]
        })
    }

    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-bold"></i>
                </button>`
                }
            ]
        })
    }

    if (datatable_employee == false) {
        datatable_employee = true

        window.LaravelDataTables["table-employee-list"] = $("#table-employee-list").DataTable({
            dom: 'fltpr',
            language: {
                search: "",
                searchPlaceholder: "Pencarian...",
                lengthMenu: "_MENU_ Data"
            },
            ajax: {
                url: "{{ route('employee.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: "sk",
                    class: "align-top",
                    render: (data, type, row) => (row.nip == null) ? "-" : htmlEntities(row.nip)
                },

                {
                    data: "name",
                    class: "align-top",
                    render: (data, type, row) => htmlEntities(row.name)
                },
                {
                    data: "position",
                    class: "align-top",
                    render: (data, type, row) => htmlEntities(row.position)
                },
                {
                    class: "align-top",
                    width: "40px",
                    orderable: false,
                    searchable: false,
                    render: (data, type, row) => {
                        const nip = (row.nip == null) ? "-" : row.nip
                        const position = (row.position == "") ? "-" : row.position

                        return `<button type="button" class="btn btn-primary btn-xs btn-choose set-tooltip" title="Pilih" data-id="${row.id}" data-nip="${btoa(nip)}" data-name="${btoa(row.name)}" data-position="${btoa(position)}">
                            <i class="mdi mdi-check-bold"></i>
                        </button>`
                    }
                }
            ]
        })
    }
})

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

function setTotalWork() {
    var price = tr_item.find(".item-price").val()
    var qty = tr_item.find(".qty").val()
    var total = tr_item.find(".total").val()

    price = (price == "") ? 0 : price.replace(/\./g, "")
    qty = (qty == "") ? 0 : qty.replace(/\./g, "")
    total = (total == "") ? 0 : total.replace(/\./g, "")

    var total_item = parseFloat(price) * parseFloat(qty)
    subtotal = parseFloat(subtotal) - total + total_item

    tr_item.find(".total").val(total_item)
}

function setTotal() {
    subtotal = parseFloat(subtotal)
    let ppn = $("#ppn-input").val();
    ppn = ppn.replace(/\./g, "")

    let pph = $("#pph-input").val();
    pph = pph.replace(/\./g, "")

    ppn = (subtotal * parseFloat(ppn)) / 100
    pph = (subtotal * parseFloat(pph)) / 100

    ppn = Math.round(ppn);
    pph = Math.round(pph);

    var total = subtotal + ppn - pph

    $("#subtotal").html(moneyFormat(subtotal))
    $("#ppn").html(moneyFormat(ppn))
    $("#pph").html(moneyFormat(pph))
    $("#total").html(moneyFormat(total))
}

function initTax() {
    $("#tax-section").show();

    if (customer_tax == 2) {
        $("#ppn-checked").attr('checked', true);
        $("#ppn-input").attr('readonly', false);
        $("#ppn-input").val(ppn_percent);
    } else {
        $("#ppn-checked").attr('checked', false);
        $("#ppn-input").attr('readonly', true);
        $("#ppn-input").val(0);
    }

    if (customer_pph == 1) {
        $("#pph-checked").attr('checked', true);
        $("#pph-input").attr('readonly', false);
        $("#pph-input").val(pph_percent);
    } else {
        $("#pph-checked").attr('checked', false);
        $("#pph-input").attr('readonly', true);
        $("#pph-input").val(0);
    }
}

function initTaxSelection(response) {
    $("#tax-section").show();

    $("#pph-input").attr('readonly', true);
    $("#pph-input").val(response.pph);
    $("#ppn-input").attr('readonly', true);
    $("#ppn-input").val(response.ppn);
    $("#ppn-checked").attr('disabled', true);
    $("#pph-checked").attr('disabled', true);
    if (response.ppn == 0) {
        $("#ppn-checked").attr('checked', false);
    } else {
        $("#ppn-checked").attr('checked', true);
    }

    if (response.pph == 0) {
        $("#pph-checked").attr('checked', false);
    } else {
        $("#pph-checked").attr('checked', true);
    }
}


function loadTableItem() {
    if (window.LaravelDataTables["table-item-choose"] == undefined) {
        window.LaravelDataTables["table-item-choose"] = $("#table-item-choose").DataTable({
            dom: 'fltpr',
            language: {
                search: "",
                searchPlaceholder: "Pencarian...",
                lengthMenu: "_MENU_ Data"
            },
            ajax: {
                @if (Auth::user()->entity->is_barang)
                    url: "{{ route('inventory.items.datatable.stock-customer') }}",
                @else
                    url: "{{ route('inventory.services.datatable.stock-customer') }}",
                @endif
                type: "POST",
                data: function(d) {
                    d.customer = id_customer,
                        d._token = token
                }
            },
            processing: true,
            serverSide: true,
            deferRender: true,
            ordering: false,
            aLengthMenu: [
                [5, 10, 25, 50, 100],
                [5, 10, 25, 50, 100]
            ],
            drawCallback: function() {
                $(".set-tooltip").tooltip({
                    container: "body"
                })
            },
            columns: [
                @if (Auth::user()->entity->is_barang)
                    {
                        class: "align-top",
                        searchable: false,
                        render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => htmlEntities(row.sku)
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => htmlEntities(row.item.name)
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => htmlEntities(row.item.category?.name)
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => {
                            if (row.dimension.length == 0)
                                return "-"
                            else {
                                let html = '<table class="table-padding">'

                                row.dimension.forEach((d) => {
                                    html += `<tr>
                                        <td style="border-top: 0;" class="pt-0 pl-0">${d.name}</td>
                                        <td style="border-top: 0;" class="pt-0 px-0 divide">:</td>
                                        <td style="border-top: 0;" class="pt-0">${d.value}</td>
                                    </tr>`
                                })

                                html += '</table>';

                                return html
                            }
                        }
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) =>
                            `${moneyFormat(row.stock)} ${htmlEntities(row.item?.uom_data?.name??"")}`
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => `${moneyFormat(row.price)}`
                    }, {
                        class: "align-top",
                        width: "40px",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            var html =
                                "<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>"

                            return html
                        }
                    }
                @else
                    {
                        class: "align-top",
                        searchable: false,
                        render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => htmlEntities(row.item.name)
                    }, {
                        class: "align-top",
                        orderable: false,
                        render: (data, type, row) => htmlEntities(row.item.category?.name)
                    }, {
                        class: "align-top",
                        width: "40px",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            var html =
                                "<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>"

                            return html
                        }
                    }
                @endif
            ]
        })
    } else
        window.LaravelDataTables["table-item-choose"].ajax.reload()
}
</script>
@endpush