@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">
    @if(Gate::forUser(\Auth::user())->allows('employeeOperation', 'repair-requests|2'))
    <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">
                <div class="col-md-2">
                    <button id="addButton" class="btn btn-block btn-outline-primary btn-lg rounded-pill">行追加</button>
                </div>
                <form method="POST" action="{{ route('smartsupport.admin.estimates.create', ['repairRequestId' => $repairRequest->id]) }}" class="form-group mt-3" onsubmit="$(this).find('button[type=submit]').prop('disabled', true);">
                    @csrf
                    <div class="form-group row">
                        <label for="internal_name" class="col-sm-2 col-form-label medium-heading">合計金額</label>
                        <div class="col-sm-4">
                            <input type="hidden" name="total_price" id="total_price" value="" />
                            <div id="total_price_disp"> - </div>
                        </div>
                    </div>
                        <table class="table">
                        <thead class="thead-light medium-heading">
                            <tr>
                                <th class="text-center">＃</th>
                                <th class="text-center">内容</th>
                                <th class="text-center">金額</th>
                                <th class="text-center">修理理由</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody class="main-text">
                        </tbody>
                    </table>
                    <a href="{{ route('smartsupport.admin.repairRequests.show', ['id' => $repairRequest->id ]) }}" class="btn btn-secondary btn-lg rounded-pill">キャンセル</a>
                    <button type="submit" class="btn button-go btn-lg rounded-pill">登録する</button>
                </form>
            </div>
        </div>
    </div>
    @endif
</div>
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
<script>
    const table = document.querySelector('table tbody');
    const addButton = document.getElementById('addButton');

    addButton.addEventListener('click', () => {
        const row = table.insertRow();
        const cells = row.insertCell();
        cells.textContent = table.rows.length; // 連番

        const contentCell = row.insertCell();
        const contentInput = document.createElement('input');
        contentInput.type = 'text';
        contentInput.name = 'content[]';
        contentInput.className = 'form-control';
        contentInput.setAttribute('required', '');
        contentCell.appendChild(contentInput);

        const amountCell = row.insertCell();
        const amountInput = document.createElement('input');
        amountInput.type = 'number';
        amountInput.name = 'estimated_price[]';
        amountInput.className = 'form-control';
        amountInput.id = 'estimated_price' + cells.textContent;
        amountInput.setAttribute('required', '');
        amountInput.min = 0;
        amountInput.addEventListener('input', calculateTotalAmount);
        amountCell.appendChild(amountInput);

        const reasonCell = row.insertCell();
        const reasonInput = document.createElement('input');
        reasonInput.type = 'text';
        reasonInput.className = 'form-control';
        reasonInput.name = 'reason_for_repair[]';
        reasonInput.setAttribute('required', '');
        reasonCell.appendChild(reasonInput);


        const operationCell = row.insertCell();
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '削除';
        deleteButton.className = 'btn button-back btn-lg rounded-pill';
        deleteButton.addEventListener('click', function (event) {
            event.preventDefault();
            row.remove();
            CalculateTotalAmount();
        });
        operationCell.appendChild(deleteButton);

        const requireInput = document.createElement('input');
        requireInput.type = 'hidden';
        requireInput.className = 'form-control';
        requireInput.name = 'is_required[]';
        requireInput.value = 1;
        operationCell.appendChild(requireInput);
    });
    function calculateTotalAmount() {
      const amountInputs = document.querySelectorAll('input[name="estimated_price[]"]');
      let total = 0;
      for (const input of amountInputs) {
        const amount = parseFloat(input.value) || 0;
        total += amount;
      }
      document.getElementById('total_price_disp').textContent = total.toLocaleString('en-US') + '円';
      document.getElementById('total_price').value = total;
    }
</script>
@stop