@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('purchasing.request.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')"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <x-form.input-text
                        name="submitter_name"
                        label="Nama Pengaju"
                        :old="old('submitter_name')"
                    />
                </div>
                <div class="col-sm-6">
                    <x-form.input-text
                        type="hidden"
                        name="id_supplier"
                        id="supplier-id"
                        :old="old('id_supplier')"
                    />
                    <x-form.input-group-button
                        name="supplier_name"
                        label="Supplier"
                        id="supplier-name"
                        class="btn-choose-supplier"
                        style="cursor: pointer;background: white;"
                        btn-label="<i class='mdi mdi-magnify'></i>"
                        btn-class="btn-choose-supplier px-3"
                        :old="old('supplier_name')"
                        readonly
                    />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <x-form.text-area
                        name="needs"
                        label="Kebutuhan"
                        :old="old('needs')"
                        :optional="true"
                    />
                </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 style="width: 150px;">Kategori</th>
                            <th style="width: 110px;">Jumlah</th>
                            <th style="width: 160px;">Harga Satuan</th>
                            <th style="width: 160px;">Total</th>
                            <th style="width: 80px;">#</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                        $old = old('items', []);
                        $total = 0;
                        @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[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[type][]" class="item-type" readonly />
                                </td>
                                <td>
                                    <x-form.input-mask name="items[qty][]" class="qty" mask="nominal" />
                                </td>
                                <td>
                                    <x-form.input-mask name="items[price][]" class="price" mask="nominal" />
                                </td>
                                <td>
                                    <x-form.input-mask name="items[total][]" class="total" mask="nominal" readonly />
                                </td>
                                <td></td>
                            </tr>
                        @else
                            @foreach ($old['id'] as $index => $i)
                                @php
                                $qty = (empty($old['qty'][$index])) ? 0 : str_replace('.', '', $old['qty'][$index]);
                                $price = (empty($old['price'][$index])) ? 0 : str_replace('.', '', $old['price'][$index]);
                                $total_item = $qty * $price;
                                $total += $total_item
                                @endphp

                                <tr>
                                    <td>
                                        <x-form.input-text
                                            type="hidden"
                                            name="items[id][]"
                                            class="item-id"
                                            :old="$i"
                                        />
                                        <x-form.input-group-button
                                            name="items[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"
                                            :old="$old['name'][$index]"
                                            readonly
                                        />
                                    </td>
                                    <td>
                                        <x-form.input-text
                                            name="items[type][]"
                                            class="item-type"
                                            :old="$old['type'][$index]"
                                            readonly
                                        />
                                    </td>
                                    <td>
                                        <x-form.input-mask
                                            name="items[qty][]"
                                            class="qty"
                                            mask="nominal"
                                            :old="$qty"
                                        />
                                    </td>
                                    <td>
                                        <x-form.input-mask
                                            name="items[price][]"
                                            class="price"
                                            mask="nominal"
                                            :old="$price"
                                        />
                                    </td>
                                    <td>
                                        <x-form.input-mask
                                            name="items[total][]"
                                            class="total"
                                            mask="nominal"
                                            :old="$total_item"
                                        />
                                    </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>
                        <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>

            <table class="table-padding">
                <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>

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

<div class="modal fade" id="modal-supplier" tabindex="-1" aria-labelledby="modal-supplierLabel" 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-supplierLabel">
                    <i class="mdi mdi-account-circle text-primary"></i> &nbsp;Pilih Supplier
                </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-supplier">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</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;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>Nama</th>
                                <th>Kategori</th>
                                <th>Satuan</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/input-mask/inputmask.js') }}"></script>
<script src="{{ asset('vendor/input-mask/jquery.inputmask.js') }}"></script>
<script src="{{ asset('vendor/input-mask/inputmask.numeric.extensions.js') }}"></script>
<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_supplier = false
let tr_item = ""
let subtotal = "{{ $total }}"

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

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

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

    $("#btn-add-item").click(function(){
        $("#table-item tbody").append(`<tr>
                <td>
                    <input type="hidden" name="items[id][]" class="item-id">
                    <div class="input-group">
                        <input type="text" name="items[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[type][]" class="form-control item-type" placeholder="....." readonly />
                </td>
                <td><input type="text" name="items[qty][]" class="form-control qty nominal-mask" placeholder="....." /></td>
                <td><input type="text" name="items[price][]" class="form-control price nominal-mask" placeholder="....." /></td>
                <td><input type="text" name="items[total][]" 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>`)

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

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

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

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

        setTotalItem()
    })

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

        setTotalItem()
    })

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

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

        $.ajax({
            type: "POST",
            url: "{{ route('supplier.get') }}",
            data: formData,
            dataType: "json",
            success: function(response){
                $("#supplier-id").val(response.data.id)
                $("#supplier-name").val(response.data.name)
                $("#modal-supplier").modal("hide")
            },
            error: function (xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status)
            }
        })
    })

    $("#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') }}",
            data: formData,
            dataType: "json",
            success: function(response){
                tr_item.find(".item-id").val(response.data.id)
                tr_item.find(".item-name").val(response.data.name)
                tr_item.find(".item-type").val(response.data.category)

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

    if (datatable_supplier == false) {
        datatable_supplier = true

        window.LaravelDataTables["table-supplier"] = $("#table-supplier").DataTable({
            dom: 'fltpr',
            language: {
                search: "",
                searchPlaceholder: "Pencarian...",
                lengthMenu: "_MENU_ Data"
            },
            ajax:
            {
                url: "{{ route('supplier.datatable') }}",
                type: "POST",
                data: {_token: token}
            },
            processing: true,
            serverSide: true,
            deferRender: true,
            ordering: true,
            order: [[ 1, '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??"")
                },
                {
                    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 setTotalItem()
{
    var price = tr.find(".price").val()
    var qty = tr.find(".qty").val()
    var total = tr.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.find(".total").val(total_item)
    $("#total").html(moneyFormat(subtotal))
}

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') }}",
                type: "POST",
                data: {_token: token,purchasing:true}
            },
            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.name)
                },

                {
                    class: "align-top",
                    orderable: false,
                    render: (data, type, row) => htmlEntities(row.category.name)
                },
                {
                    class: "align-top",
                    orderable: false,
                    render: (data, type, row) => htmlEntities(row.uomData?.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
                    }
                }
            ]
        })
    } else
        window.LaravelDataTables["table-item-choose"].ajax.reload()
}
</script>
@endpush