@extends('adminlte::page')

@section('title', '据付最終確認書明細登録')

@section('content_header')
<h5><label class="title-underbar">据付最終確認書明細登録</label></h5>
@stop

@section('content')
<x-admin.success-flush-message />
<x-admin.error-flush-message />
<x-admin.validation-message />
<div class="row">
    <div class="col-md-12">
        <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
            <div class="card-body">
                <form method="POST" action="{{ route('assemblyconfirmation.admin.store-detail', ['item_id' => $item->id]) }}" class="form-group mt-3" enctype='multipart/form-data' onsubmit="$(this).find('button[type=submit]').prop('disabled', true);">
                    @csrf
                    <input type="hidden" name="assembly_confirmation_id" id="assembly_confirmation_id" value="{{$item->id}}" />
                    <div class="form-group row">
                        <table class="table mt-3 w-75">
                            <thead class="thead-light medium-heading">
                                <tr>
                                    <th class="text-center">項目名<span class='text-danger'>*</span></th>
                                    <th class="text-center">製造番号</th>
                                    <th class="text-center">明細商品選択<span class='text-danger'>*</span></th>
                                </tr>
                            </thead>
                            <tbody class="main-text" id="data-table">
                                @php
                                    $nameList = old('name');
                                    $numList = old('serial_number');
                                    $itemIdList = old('assembly_item_id');
                                    $classIdList = old('assembly_confirmation_class_id');
                                    $flagList = old('required'); // 単独で設定されることがないので$maxIdの判定対象にはしない
                                    $nameListMaxId = empty($nameList) ? 0 : max(array_keys($nameList));
                                    $numListMaxId = empty($numList) ? 0 : max(array_keys($numList));
                                    $itemIdListMaxId = empty($itemIdList) ? 0 : max(array_keys($itemIdList));
                                    $classIdListMaxId = empty($classIdList) ? 0 : max(array_keys($classIdList));
                                    $maxId = max($nameListMaxId, $numListMaxId, $itemIdListMaxId, $classIdListMaxId);
                                    $isInitialDisplay = (empty($nameList) && empty($numLIst) && empty($itemIdList) && empty($classIdList));
                                @endphp
                                @if (!$isInitialDisplay)
                                @foreach (range(0, $maxId) as $idx)
                                    <tr>
                                        <td><input type="text" name="name[{{$idx}}]" id="assembly_item_name_{{ $idx }}" class="form-control main-text" placeholder="項目名を入力してください" value="{{ $nameList[$idx] ?? '' }}"></td>
                                        <td><input type="text" name="serial_number[{{$idx}}]" id="assembly_item_name" class="form-control main-text" placeholder="製造番号を入力してください" value="{{ $numList[$idx] ?? '' }}"></td>
                                        <td>
                                            <button onclick="openHierarchySelection(setUrl(this, {{$idx}}));return false;" class="btn btn-block btn-outline-primary rounded-pill w-50">選択</button>
                                            <input type="hidden" name="assembly_item_id[{{$idx}}]" id="assembly_item_id_{{ $idx }}" value="{{ $itemIdList[$idx] ?? '' }}" />
                                            <input type="hidden" name="required[{{$idx}}]" id="assembly_item_flag_{{ $idx }}" value="{{ $flagList[$idx] ?? '' }}" />
                                            <input type="hidden" name="assembly_confirmation_class_id[{{$idx}}]" id="assembly_confirmation_class_id_{{ $idx }}" value="{{ $classIdList[$idx] ?? '' }}" onchange="openHierarchySelection(setUrl(this, {{$idx}}))" />
                                        </td>
                                    </tr>
                                @endforeach
                                @else
                                @foreach ($details as $idx => $detail)
                                    <tr>
                                        <td><input type="text" name="name[{{$idx}}]" id="assembly_item_name_{{ $idx }}" class="form-control main-text" placeholder="項目名を入力してください" value="{{ old('name') ?? $detail->name }}"></td>
                                        <td><input type="text" name="serial_number[{{$idx}}]" id="assembly_item_name" class="form-control main-text" placeholder="製造番号を入力してください" value="{{ old('serial_number') ?? $detail->serial_number }}"></td>
                                        <td>
                                            <button onclick="openHierarchySelection(setUrl(this, {{$idx}}));return false;" class="btn btn-block btn-outline-primary rounded-pill w-50">選択</button>
                                            <input type="hidden" name="assembly_item_id[{{$idx}}]" id="assembly_item_id_{{ $idx }}" value="{{ old('assembly_item_id') ?? $detail->assembly_item_id }}" />
                                            <input type="hidden" name="required[{{$idx}}]" id="assembly_item_flag_{{ $idx }}" value="{{ $detail->assemblyItem->is_required_serial_number }}" />
                                            <input type="hidden" name="assembly_confirmation_class_id[{{$idx}}]" id="assembly_confirmation_class_id_{{ $idx }}" value="{{ old('assembly_confirmation_class_id') ?? $detail->assembly_confirmation_class_id }}" onchange="openHierarchySelection(setUrl(this, {{$idx}}))" />
                                        </td>
                                    </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="form-group row">
                        <div class="col-3">
                            <i class="fas fa-plus" onclick="addRecord();return false;"></i>
                        </div>
                        <div class="col-3">
                            <i class="fas fa-minus" onclick="del();return false;"></i>
                        </div>
                    </div>

                    <a href="{{ route('assemblyconfirmation.admin.index', ['category' => $item->category]) }}" class="btn btn-secondary btn-lg rounded-pill">キャンセル</a>
                    <button type="submit" class="btn button-go btn-lg rounded-pill">登録する</button>
                </form>
                <input type="hidden" name="max_idx" id="max_idx" value="" />
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
var route = "{{ route('admin.WindowSelect.index', ['table' => 'AssemblyItem']) }}";
var hierarchy_route = "{{ route('admin.WindowSelect.hierarchy', ['table1' => 'AssemblyConfirmationClass', 'table2' => 'AssemblyItem']) }}";
var max_idx = {{ !$isInitialDisplay ? $maxId + 1 : (count($details) ?? 0) }};
document.getElementById('max_idx').value = max_idx
if (max_idx == 0) {
    addRecord();
}
function openSelection(url) {
    window.open(url, "selectChild", "width=500,height=800");
}
function openHierarchySelection(url) {
    window.open(url, "selectChild", "width=500,height=800");
}
function setUrl(element, midx) {
    return hierarchy_route + "?category={{$item->category ?? 'ALL'}}&fiter_id=" + element.value + "&midx=" + midx;
}
function addRecord() {
    var tbl = document.getElementById('data-table');
    let tr = document.createElement("tr");
    var td = document.createElement("td");
    var inpt = document.createElement("input");
    inpt.setAttribute("name", 'name[' + max_idx + ']');
    inpt.setAttribute("type", "text");
    inpt.setAttribute("value", "");
    inpt.setAttribute("placeholder", "項目名を入力してください");
    inpt.setAttribute("id", 'assembly_item_name_' + max_idx);
    inpt.className = "form-control main-text";
    td.appendChild(inpt);
    tr.appendChild(td);
    var td = document.createElement("td");
    var inpt = document.createElement("input");
    inpt.setAttribute("name", 'serial_number[' + max_idx + ']');
    inpt.setAttribute("type", "text");
    inpt.setAttribute("value", "");
    inpt.setAttribute("placeholder", "製造番号を入力してください");
    inpt.className = "form-control main-text";
    td.appendChild(inpt);
    tr.appendChild(td);
    var td = document.createElement("td");
    var inpt = document.createElement("button");
    inpt.setAttribute("name", 'name[' + max_idx + ']');
    inpt.setAttribute("onclick", 'openHierarchySelection(setUrl(this, ' + max_idx + '));return false;');
    inpt.setAttribute("value", "");
    inpt.setAttribute("placeholder", "項目名を入力してください");
    inpt.setAttribute("id", 'assembly_item_name_' + max_idx);
    inpt.textContent = "選択";
    inpt.className = "btn btn-block btn-outline-primary rounded-pill w-50";
    td.appendChild(inpt);
    var inpt = document.createElement("input");
    inpt.setAttribute("name", 'assembly_item_id[' + max_idx + ']');
    inpt.setAttribute("id", 'assembly_item_id_' + max_idx);
    inpt.setAttribute("type", "hidden");
    inpt.setAttribute("value", "");
    td.appendChild(inpt);
    var inpt = document.createElement("input");
    inpt.setAttribute("name", 'required[' + max_idx + ']');
    inpt.setAttribute("id", 'assembly_item_flag_' + max_idx);
    inpt.setAttribute("type", "hidden");
    inpt.setAttribute("value", "");
    td.appendChild(inpt);
    var inpt = document.createElement("input");
    inpt.setAttribute("name", 'assembly_confirmation_class_id[' + max_idx + ']');
    inpt.setAttribute("id", 'assembly_confirmation_class_id_' + max_idx);
    inpt.setAttribute("type", "hidden");
    inpt.setAttribute("value", "");
    inpt.setAttribute("onchange", 'openHierarchySelection(setUrl(this, ' + max_idx + '));console.log("test");return false;');
    td.appendChild(inpt);
    tr.appendChild(td);
    tbl.appendChild(tr);
    console.log(max_idx);
    max_idx++;
}
function del(){
   var tbl = document.getElementById('data-table');
   let rw = tbl.rows.length;
   tbl.deleteRow(rw - 1);
   max_idx--;
}
</script>
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop