@php

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

$templateQuotationItem = \App\Models\TemplateQuotationItem::where('template_quotation_id', $templateQuotation->id)
        ->where('revision', 'like', '%REV%')
        ->orderBy('created_at', 'desc')->first();

$templateQuotationItemLists = \App\Models\TemplateQuotationItemList::where('template_quotation_id', $templateQuotation->id)->where('template_quotation_item_id', $templateQuotationItem->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>
            </div>
            <div class="col text-right">
            </div>
        </div>
    </div>
    <div class="card-body">
        @forelse($templateQuotationItemLists as $key => $item)
            @php
                $itemAmount = (int) str_replace('$', '', $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="{{number_format($itemAmount, 2)}}" 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="{{number_format($itemAmount, 2)}}" 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="{{number_format($itemAmount, 2)}}" readonly/>
                                    </div>
                                </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>