@extends(backpack_view('blank'))

@section('content')
    <div class="row justify-content-center mt-5">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mt-1 mb-0">Quotation Revision ({{$quotationItem->revision}})</h4>
                </div>
                <div class="card-body pb-1">
                    <div class="form-group">
                        @forelse($quotationItemList as $key => $item)
                            @php
                                $itemAmount = (int) str_replace('$', '', $item->amount);
                            @endphp
                            @if ($item->tier_level==1)
                                <section id="R-T1" class="box-item">
                                    <div class="row ml-0 mr-0">
                                        <div class="col-9 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="this.parentNode.dataset.replicatedValue = this.value" rows="1" required readonly>{{$item->title}}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 px-1">
                                            <div class="row">
                                                <div class="col-5 pr-1">
                
                                                </div>
                                                <div class="col-7 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)
                                <section id="R-T2" class="box-item">
                                    <div class="row ml-0 mr-0">
                                        <div class="col-9 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="this.parentNode.dataset.replicatedValue = this.value" rows="1" required readonly>{{$item->title}}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 px-1">
                                            <div class="row">
                                                <div class="col-5 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-7 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)
                                <section id="R-T3" class="box-item">
                                    <div class="row ml-0 mr-0">
                                        <div class="col-9 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="this.parentNode.dataset.replicatedValue = this.value" rows="1" required readonly>{{$item->title}}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 px-1">
                                            <div class="row">
                                                <div class="col-5 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-7 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-9 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="this.parentNode.dataset.replicatedValue = this.value" rows="1" required readonly>{{$item->title}}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-3 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>
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="mb-2">
                <a href="{{route('quotation.revision.index', ['id' => $id])}}" class="btn btn-default"><span class="la la-arrow-left"></span> Back</a>
            </div>
        </div>
    </div>
@endsection


@section('after_styles')
    <link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/crud.css').'?v='.config('backpack.base.cachebusting_string') }}">
    <link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/show.css').'?v='.config('backpack.base.cachebusting_string') }}">
    <style type="text/css">
        body {
            counter-reset: esum;
        }
        .numbered {
            position: relative;
            counter-increment: esum;
            padding: 15px;
        }
        .numbered:before {
            position: absolute;
            margin-left: 15px;
            content: counter(esum)".";
            font-size: 20px;
        }
        .numbered .amount {
            display: inline-block;
            float: right;
        }
        .numbered .area {
            display:inline-block; 
            font-size: 18px;
            font-family: 'Source Sans Pro';
        }
        .sow{
            display:inline-block !important; 
            font-size: 22px!important;
        }
    </style>
    <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;
        }
        .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>
@endsection

@section('after_scripts')
    <script src="{{ asset('packages/backpack/crud/js/crud.js').'?v='.config('backpack.base.cachebusting_string') }}"></script>
    <script src="{{ asset('packages/backpack/crud/js/show.js').'?v='.config('backpack.base.cachebusting_string') }}"></script>
@endsection