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

            <div class="row">
                <div class="col-sm-4 col-md-3 form-default">
                    <x-form.input-text
                        name="sku"
                        label="SKU"
                        :old="old('sku')"
                    />
                </div>
                <div class="col-sm-8 col-md-6">
                    <x-form.input-text
                        name="name"
                        label="Nama"
                        :old="old('name')"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 col-md-3">
                    <x-form.select
                        name="id_category"
                        label="Kategori"
                        :option="$option['category']"
                        :old="old('id_category')"
                    />
                </div>
                <div class="col-sm-4 col-md-3">
                    <x-form.select
                        name="uom"
                        label="Satuan"
                        :option="$option['uom']"
                        :old="old('uom')"
                    />
                </div>
                <div class="col-sm-4 col-md-3 form-default">
                    <x-form.input-group-mask
                        name="price"
                        label="Harga Satuan"
                        mask="nominal"
                        addon="Rp"
                        :old="old('price')"
                    />
                </div>
                <div class="col-sm-4 col-md-3 form-default">
                    <x-form.input-mask
                        name="stock"
                        label="Stok"
                        mask="nominal"
                        :old="old('stock')"
                    />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 col-md-3">
                    <x-form.input-mask
                        name="qty_min"
                        label="Minimal Stok"
                        mask="nominal"
                        :old="old('qty_min')"
                    />
                </div>
                <div class="col-sm-4 col-md-3">
                    <x-form.input-mask
                        name="qty_max"
                        label="Maksimal Stok"
                        mask="nominal"
                        :old="old('qty_max')"
                    />
                </div>
                <div class="col-sm-6 col-md-4">
                    <x-form.radio
                        name="status"
                        label="Status"
                        :option="$option['status']"
                        :old="old('status')"
                    />
                </div>
            </div>

            <x-section-form
                label="Dimensi"
                icon="mdi mdi-ballot"
                class="mt-4"
            />

            <div class="mt-3 mb-2">
                Tambah dimensi untuk menentukan harga per dimensi/varian barang. Maksimal 2 Dimensi. Abaikan jika tidak ada.
            </div>

            @php
            $dimension_input = ['dimension_name', 'dimension_list', 'sku', 'stock', 'price'];
            $alert = false;
            @endphp

            @foreach ($dimension_input as $di)
                @if (@$errors->has($di))
                    @if ($alert === false)
                        <div class="alert alert-danger">
                    @endif

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

            <div class="mb-3">
                <a href="javascript:void(0)" id="btn-add-dimension">
                    <i class="mdi mdi-plus"></i> ADD DIMENSI
                </a>
            </div>

            <div id="dimension">
                @php
                $old = old('dimensions');
                @endphp

                @if (!empty($old))
                    @foreach ($old['name'] as $index => $name)
                        @php
                        $options = [];

                        if (!empty(@$old['list'][$index])) {
                            foreach ($old['list'][$index] as $l)
                                $options[$l] = $l;
                        }
                        @endphp
                        <div class="mb-3 dimension-item dimension-{{ $index }}">
                            Dimensi <span class="dimension-no">{{ $index }}</span>
                            <div class="row">
                                <div class="col-sm-4">
                                    <x-form.input-text
                                        name="dimensions[name][{{ $index }}]"
                                        class="name"
                                        :old="$name"
                                        :data-no="$index"
                                    />
                                </div>
                                <div class="col-sm-6 col-md-7">
                                    <x-form.select
                                        name="dimensions[list][{{ $index }}][]"
                                        :option="$options"
                                        data-placeholder="Input varian dimensi..."
                                        multiple
                                        tags
                                    />
                                </div>
                                <div class="col-sm-2 col-md-1 text-center">
                                    <div class="d-none d-sm-block" style="margin-top: 13px;"></div>
                                    <a href="javascript:void(0)" class="btn-delete text-danger"><i class="mdi mdi-trash-can mdi-24px"></i></a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            <div id="table-dimension" class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="dimension-1">.....</th>
                            <th>SKU</th>
                            <th>Harga</th>
                            <th>Stok</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                        $old_list = old('dimension_list');
                        @endphp
                    </tbody>
                </table>
            </div>

            <x-section-form
                label="Spesifikasi"
                icon="mdi mdi-ballot"
                class="mt-5"
            />

            <div class="mt-3 mb-2">
                Tambah spesifikasi untuk menentukan detail per item. Abaikan jika tidak ada.
            </div>

            @if (@$errors->has('specification_name') or @$errors->has('specification_value'))
                <div class="alert alert-danger">
                    @foreach ($errors->get('specification_name') as $message)
                        <div class="mb-1"><i class="mdi mdi-alert-circle"></i> &nbsp;{{ ucfirst($message) }}</div>
                    @endforeach
                    @foreach ($errors->get('specification_value') 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-specification">
                    <thead>
                        <tr>
                            <th style="width: 300px;">Nama</th>
                            <th>Value</th>
                            <th class="text-center" style="width: 50px;">#</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">
                                <a href="javascript:void(0)" id="btn-add-specification">
                                    <i class="mdi mdi-plus"></i> ADD SPESIFIKASI
                                </a>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <x-form.button-submit :cancel-route="route('inventory.items.index')" />
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
let dimension_count = 0

$(document).ready(function() {
    @if (!empty($old))
        @foreach ($old['name'] as $index => $name)
            @if (!empty(@$old['list'][$index]))
                $("#dimension .dimension-{{ $index }} select").val(JSON.parse('{!! json_encode($old['list'][$index]) !!}')).trigger("change")
            @endif
        @endforeach
    @endif

    $("#table-dimension").hide()
    $(".nominal-mask").inputmask({ alias: "nominal" })

    $("#btn-add-dimension").click(function() {
        dimension_count++

        if (dimension_count > 2)
            return false

        $(".form-default").hide()
        $("#table-dimension").show()
        $("#dimension").append(`<div class="mb-3 dimension-item dimension-${dimension_count}">
                Dimensi <span class="dimension-no">${dimension_count}</span>
                <div class="row">
                    <div class="col-sm-4">
                        <x-form.input-text
                            name="dimensions[name][${dimension_count}]"
                            class="name"
                            data-no="${dimension_count}"
                        />
                    </div>
                    <div class="col-sm-6 col-md-7">
                        <x-form.select
                            name="dimensions[list][${dimension_count}][]"
                            data-placeholder="Input varian dimensi..."
                            multiple
                            tags
                        />
                    </div>
                    <div class="col-sm-2 col-md-1 text-center">
                        <div class="d-none d-sm-block" style="margin-top: 13px;"></div>
                        <a href="javascript:void(0)" class="btn-delete text-danger"><i class="mdi mdi-trash-can mdi-24px"></i></a>
                    </div>
                </div>
            </div>`)

        if (dimension_count == 2)
            $("#table-dimension .dimension-1").after('<th class="dimension-2">.....</th>')

        setSelect2Tags()
    })

    $("#dimension").on("click", ".btn-delete", function() {
        $(this).closest(".dimension-item").remove()
        dimension_count--

        if (dimension_count == 1)
            $("#dimension .dimension-no").html(1)

        if (dimension_count == 0)
            $(".form-default").show()

        $("#table-dimension tbody").html("")
    })

    $("#dimension").on("blur", ".name", function() {
        $(`#table-dimension .dimension-${$(this).data("no")}`).html($(this).val())
    })

    $("#dimension").on("change", "select", function() {
        $("#table-dimension tbody").html("")

        if (dimension_count == 1) {
            const list1 = $("#dimension .dimension-1 select").val()

            list1.forEach((i) => {
                $("#table-dimension tbody").append(`<tr>
                    <td>${i}</td>
                    <td>
                        <x-form.input-text
                            type="hidden"
                            name="dimension_list[d1][]"
                            old="${i}"
                        />
                        <x-form.input-text
                            name="dimension_list[sku][]"
                        />
                    </td>
                    <td>
                        <x-form.input-group-mask
                            name="dimension_list[price][]"
                            mask="nominal"
                            addon="Rp"
                        />
                    </td>
                    <td>
                        <x-form.input-mask
                            name="dimension_list[stock][]"
                            mask="nominal"
                        />
                    </td>
                </tr>`)
            })
        } else {
            const list1 = $("#dimension .dimension-1 select").val()
            const list2 = $("#dimension .dimension-2 select").val()

            list1.forEach((i) => {
                list2.forEach((i2) => {
                    $("#table-dimension tbody").append(`<tr>
                        <td>${i}</td>
                        <td>${i2}</td>
                        <td>
                            <x-form.input-text
                                type="hidden"
                                name="dimension_list[d1][]"
                                old="${i}"
                            />
                            <x-form.input-text
                                type="hidden"
                                name="dimension_list[d2][]"
                                old="${i2}"
                            />
                            <x-form.input-text
                                name="dimension_list[sku][]"
                            />
                        </td>
                        <td>
                            <x-form.input-group-mask
                                name="dimension_list[price][]"
                                mask="nominal"
                                addon="Rp"
                            />
                        </td>
                        <td>
                            <x-form.input-mask
                                name="dimension_list[stock][]"
                                mask="nominal"
                            />
                        </td>
                    </tr>`)
                })
            })
        }
    })

    $("#btn-add-specification").click(function() {
        $("#table-specification tbody").append(`<tr>
            <td>
                <x-form.input-text
                    name="specification[name][]"
                />
            </td>
            <td>
                <x-form.input-text
                    name="specification[value][]"
                />
            </td>
            <td class="text-center">
                <a href="javascript:void(0)" class="btn-delete text-danger"><i class="mdi mdi-trash-can mdi-24px"></i></a>
            </td>
        </tr>`)
    })

    $("#table-specification").on("click", ".btn-delete", function() {
        $(this).closest("tr").remove()
    })
})
</script>
@endpush