@php

    $invoice = \App\Models\Invoice::find(request()->route('id'));

    $invoiceItem = \App\Models\InvoiceItem::where('invoice_id', $invoice->id)
        ->where('revision', 'like', '%REV%')
        ->orderBy('created_at', 'desc')
        ->first();

    $invoiceItemLists = \App\Models\InvoiceItemList::where('invoice_id', $invoice->id)
        ->where('invoice_item_id', $invoiceItem->id)
        ->orderBy('id', 'asc')
        ->get();

    $isTotal = true;
    $totalAmount = 0;
@endphp

<div class="card mt-4">
    <div class="card-header">
        <div class="row">
            <div class="col">
                <h4 class="mt-1 mb-0 text-capitalize d-inline-block">Requirement Item</h4>
                @php
                    if ($invoice->status != 'draft') {
                        echo '<h5 class="mb-0 d-inline-block ml-1">(' . $invoiceItem->revision . ')</h5>';
                    }
                @endphp
            </div>
            <div class="col text-right">
                @php
                    if ($invoice->status != 'draft') {
                        echo '<a href="' .
                            route('invoice.revision.index', ['id' => $invoice->id]) .
                            '" class="btn btn-success btn-sm">Show All Revision</a>';
                    }
                @endphp
            </div>
        </div>
    </div>
    <div class="card-body">
        @forelse($invoiceItemLists as $key => $item)
            @php
                $itemAmount = $item->amount;
            @endphp
            @if ($item->tier_level == 1 && $item->is_area != true)
                @php
                    $totalAmount += $itemAmount;
                @endphp
                <section id="R-T1" class="box-item">
                    <div class="row ml-0 mr-0">
                        <div class="col-8 px-1">
                            <div class="margin-tier-1">
                                <div class="form-group mb-0">
                                    <div class="grow-wrap">
                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-1"
                                            onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1"
                                            data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required readonly>{{ $item->title }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 px-1">
                            <div class="row">
                                <div class="col-6 pr-1">

                                </div>
                                <div class="col-6 pl-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0"
                                                style="background: transparent;border: 0px;">Amount</span>
                                        </div>
                                        <input name="amount[]" class="form-control item-scope-amount"
                                            value="{{ sprintf('%.2f', $itemAmount) }}" readonly />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @elseif($item->tier_level == 2 && $item->is_area != true)
                <section id="R-T2" class="box-item">
                    <div class="row ml-0 mr-0">
                        <div class="col-8 px-1">
                            <div class="margin-tier-2">
                                <div class="form-group mb-0">
                                    <div class="grow-wrap">
                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-2"
                                            onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1"
                                            data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required readonly>{{ $item->title }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 px-1">
                            <div class="row">
                                <div class="col-6 pr-1">
                                    @if ($item->quantity != null)
                                        {{-- <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text font-size-13px pl-0" style="background: transparent;border: 0px;">QTY</span>
                                            </div>
                                            <input name="quantity[]" class="form-control" value="{{$item->quantity}}" type="number" readonly/>
                                        </div> --}}
                                    @endif
                                </div>
                                <div class="col-6 pl-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0"
                                                style="background: transparent;border: 0px;">Amount</span>
                                        </div>
                                        <input name="amount[]" class="form-control item-scope-amount"
                                            value="{{ sprintf('%.2f', $itemAmount) }}" readonly />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @elseif($item->tier_level == 3 && $item->is_area != true)
                <section id="R-T3" class="box-item">
                    <div class="row ml-0 mr-0">
                        <div class="col-8 px-1">
                            <div class="margin-tier-3">
                                <div class="form-group mb-0">
                                    <div class="grow-wrap">
                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-3"
                                            onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1"
                                            data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required readonly>{{ $item->title }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 px-1">
                            <div class="row">
                                <div class="col-6 pr-1">
                                    @if ($item->quantity != null)
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text font-size-13px pl-0"
                                                    style="background: transparent;border: 0px;">QTY</span>
                                            </div>
                                            <input name="quantity[]" class="form-control"
                                                value="{{ $item->quantity }} {{ $item->uom ?? $item->uom }}"
                                                type="text" readonly />
                                        </div>
                                    @endif
                                </div>
                                <div class="col-6 pl-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text font-size-13px pl-0"
                                                style="background: transparent;border: 0px;">Amount</span>
                                        </div>
                                        <input name="amount[]" class="form-control item-scope-amount"
                                            value="{{ sprintf('%.2f', $itemAmount) }}" readonly />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @elseIf($item->is_area == true && empty($item->title))
                <section id="R-T4" class="box-item">
                    <div class="row ml-0 mr-0">
                        <div class="col-10 px-1">
                            <div class="row">
                                <div class="col-12 pr-1">
                                    <span class="input-group-text font-size-13px pl-0 mt-2 text-uppercase"
                                        style="background: transparent;border: 0px;">THIS IS BLANK SPACE SECTION</span>
                                    <input type="hidden" name="title[]"
                                        onInput="this.parentNode.dataset.replicatedValue = this.value">
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @else
                <section id="R-T4" class="box-item">
                    <div class="row ml-0 mr-0">
                        <div class="col-8 px-1">
                            <div class="margin-tier-area">
                                <div class="form-group mb-0">
                                    <div class="grow-wrap">
                                        <textarea name="title[]" id="autoresizing" class="form-control input-tier-area"
                                            onInput="return setTextAreaHeightAuto(this.parentNode, this.value)" rows="1"
                                            data-onload="setTextAreaHeightAuto(this.parentNode, this.value)" required readonly>{{ $item->title }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 px-1">
                            <div class="row">
                                <div class="col-12 pr-1">
                                    <span class="input-group-text font-size-13px pl-0 mt-2 text-uppercase"
                                        style="background: transparent;border: 0px;">This is Area section</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @empty
            <div class="alert alert-warning mb-0">
                <h4 class="alert-heading border-bottom pb-2">Item Not Found!</h4>
                On this revision, No items entered
            </div>
            @php
                $isTotal = false;
            @endphp
        @endforelse
        @if ($isTotal)
            <section id="R-TOTAL" class="box-item bg-light p-2 mt-4">
                <div class="row ml-0 mr-0">
                    <div class="col-8 px-1">
                    </div>
                    <div class="col-4 px-1">
                        <div class="row">
                            <div>

                            </div>
                            <div class="col-12 pl-1">
                                <div class="input-group">
                                    <div class="input-group-prepend text-uppercase">
                                        <span class="input-group-text font-size-15px pl-0"
                                            style="background: transparent;border: 0px;">Total</span>
                                    </div>
                                    <input class="form-control" value="{{ number_format($totalAmount, 2) }}"
                                        readonly="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    </div>
</div>

<script>
    function setTextAreaHeightAuto(parent, item, target = false) {
        var element = parent.getElementsByTagName("textarea");
        if (element[0].attributes.style !== undefined) {
            element[0].removeAttribute("style");
        }

        if (target) {
            let button = document.querySelectorAll(`button[data-target="${target}"]`);
            if (element[0].value === null || element[0].value.match(/^ *$/) !== null) {
                button[0].removeAttribute("class", "btn-success");
                button[0].setAttribute("class", "btn btn-sm btn-dark");
            } else {
                button[0].removeAttribute("class", "btn-success");
                button[0].setAttribute("class", "btn btn-sm btn-success");
            }
        }

        return parent.dataset.replicatedValue = item;
    }

    function setTextAreaHeight() {
        (function() {
            $('[data-onload]').each(function(e) {
                eval($(this).data('onload'));
            });
        })();
    }
    $(document).ready(function() {
        setTextAreaHeight();
    });
</script>

<style type="text/css">
    .box-item {
        border: 1px solid rgb(221, 221, 221);
        background: rgb(238, 238, 238);
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .requirement-table section:last-child {
        margin-bottom: 20px;
    }

    .margin-tier-3 .grow-wrap {
        font-size: 14px;
    }

    .grow-wrap {
        display: grid;
    }

    .grow-wrap::after {
        content: attr(data-replicated-value) " ";
        white-space: pre-wrap;
        visibility: hidden;
    }

    .grow-wrap>textarea {
        resize: none;
        overflow: hidden;
    }

    .grow-wrap>textarea,
    .grow-wrap::after {
        padding: 0.5rem;
        font: inherit;
        grid-area: 1 / 1 / 2 / 2;
    }

    .label-children {
        font-weight: 400 !important;
    }

    .input-tier-1 {
        font-weight: bold !important;
        font-size: 16px !important;
        color: #000000;
    }

    .input-tier-2 {
        font-size: 16px !important;
        color: #000000;
    }

    .input-tier-3 {
        color: grey;
        font-size: 14px !important;
    }

    .input-tier-area {
        font-weight: bold !important;
        font-size: 15px !important;
        color: #000000;
    }

    .margin-tier-1 {}

    .margin-tier-2 {
        margin-left: 25px !important;
    }

    .margin-tier-3 {
        margin-left: 50px !important;
    }

    .margin-tier-area {
        margin-left: 25px !important;
    }

    .font-size-13px {
        font-size: 13px !important;
    }

    hr {
        margin-top: 0.7em;
        margin-bottom: 0.7rem;
    }
</style>