@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 id="form" method="post" action="{{ route('inventory.usage.store') }}" class="form-block">
                @csrf

                <div class="row">
                    <div class="col-sm-4 col-md-3">
                        <x-form.date-picker name="dates" label="Tanggal" picker-type="date" :old="old('dates',date('d-m-Y'))" />
                    </div>
                    <div class="col-sm-4 col-md-6">
                        <x-form.input-text name="creator_name" label="Nama Penginput" :old="old('creator_name')" />
                    </div>
                </div>

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

                <div class="table-responsive">
                    <table class="table" id="table-item">
                        <thead>
                            <tr>
                                <th style="width: 250px;">Nama Item</th>
                                <th>Kategori</th>
                                <th>Stok</th>
                                <th style="width: 160px;">Jumlah Terpakai</th>
                                <th style="width: 200px;">Tgl. Dipakai</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-text type="hidden" name="items[id_item][]" class="item-id-item" />
                                        <x-form.input-group-button name="items[item_name][]"
                                            class="item-name btn-choose-item" style="cursor: pointer;background: white;"
                                            btn-label="<i class='mdi mdi-magnify'></i>" btn-class="btn-choose-item px-3"
                                            readonly />
                                    </td>

                                    <td>
                                        <x-form.input-text name="items[item_category][]" class="item-category" readonly />
                                    </td>
                                    <td>
                                        <x-form.input-text name="items[stock][]" class="item-stock" readonly />
                                    </td>
                                    <td>
                                        <x-form.input-mask name="items[qty][]" class="qty" mask="nominal" />
                                    </td>
                                    <td>
                                        <x-form.date-picker name="items[used_at][]" picker-type="date" />
                                    </td>
                                    <td></td>
                                </tr>
                            @else
                                @foreach ($old['id'] as $index => $i)
                                    @php
                                        $qty = empty($old['qty'][$index])
                                            ? 0
                                            : str_replace('.', '', $old['qty'][$index]);
                                    @endphp

                                    <tr>
                                        <td>
                                            <x-form.input-text type="hidden" name="items[id][]" class="item-id"
                                                :old="$i" />
                                            <x-form.input-text type="hidden" name="items[id_item][]" class="item-id-item"
                                                :old="$i" />
                                            <x-form.input-group-button class="item-name btn-choose-item"
                                                style="cursor: pointer;background: white;"
                                                btn-label="<i class='mdi mdi-magnify'></i>" btn-class="btn-choose-item px-3"
                                                :old="@$old['item_name'][$index]" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-text name="items[item_category][]" class="item-category"
                                                :old="@$old['item_category'][$index]" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-text name="items[stock][]" class="item-stock"
                                                :old="@$old['stock'][$index]" readonly />
                                        </td>
                                        <td>
                                            <x-form.input-mask name="items[qty][]" class="qty" mask="nominal"
                                                :old="$qty" />
                                        </td>
                                        <td>
                                            <x-form.date-picker name="items[used_at][]" picker-type="date"
                                                :old="@$old['used_at'][$index]" />
                                        </td>
                                        <td>
                                            @if ($index > 0)
                                                <button type="button" class="btn btn-danger btn-sm btn-delete">
                                                    &nbsp;<i class="mdi mdi-trash-can"></i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                        <tfoot>
                            @if (@$errors->has('qty'))
                            <tr>
                                <td colspan="9">
                                @foreach ($errors->get('qty') as $message)
                                    <p class="text-danger">{{ ucfirst($message) }}</p>
                                @endforeach
                                </td>
                            </tr>
                            @endif
                            <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>

                <x-form.button-submit :cancel-route="route('inventory.handover.index')" />
            </form>
        </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-account-circle text-primary"></i> &nbsp;Pilih Item
                    </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>
                                    <th>SKU</th>
                                    <th>Nama</th>
                                    <th>Kategori</th>
                                    <th>Dimensi</th>
                                    <th>Stok</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 tr_item = ""

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

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

            $("#btn-add-item").click(function() {
                $("#table-item tbody").append('<tr>' +
                    '<td>' +
                    '<input type="hidden" name="items[id][]" class="item-id">' +
                    '<input type="hidden" name="items[id_item][]" class="item-id-item">' +
                    '<div class="input-group">' +
                    '<input type="text" name="items[item_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[item_category][]" class="form-control item-category" placeholder="....." readonly />' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" name="items[stock][]" class="form-control item-stock" placeholder="....." readonly />' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" name="items[qty][]" class="form-control nominal-mask" placeholder="....." />' +
                    '</td>' +
                    '<td>' +
                    '<div class="input-group">' +
                    '<div class="input-group-prepend">' +
                    '<div class="input-group-text">' +
                    '<small><i class="mdi mdi-calendar-today"></i></small>' +
                    '</div>' +
                    '</div>' +
                    '<input type="text" name="items[used_at][]" class="form-control date-picker" placeholder="....." autocomplete="off" readonly="readonly" style="cursor: pointer; background: white;">' +
                    '</div>' +
                    '</td>' +
                    '<td>' +
                    '<button type="button" class="btn btn-danger btn-sm btn-delete">' +
                    '<i class="mdi mdi-trash-can"></i>' +
                    '</button>' +
                    '</td>' +
                    '</tr>')

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

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

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

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

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

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

                        tr_item.find(".item-id").val(response.data.id)
                        tr_item.find(".item-id-item").val(response.data.id_item)
                        tr_item.find(".item-name").val(response.data.name)
                        tr_item.find(".item-category").val(response.data.category)
                        tr_item.find(".item-stock").val(response.data.stock)

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

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

        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: {
                        url: "{{ route('inventory.items.datatable.stock-customer') }}",
                        type: "POST",
                        data: {
                            _token: token,
                            flag: "company"
                        }
                    },
                    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: [{
                            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">- ${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",
                            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'></i>" +
                                    "</button>"

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