@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">Variation Order Revision ({{ $variationOrderItem->revision }})</h4>
                </div>
                <div class="card-body row">
                    <div class="form-group col-sm-12">
                        <label>VO Id</label>
                        <input type="text" value="{{ $variationOrderItem->running_no }}" readonly="readonly"
                            disabled="disabled" class="form-control">
                    </div>
                    <div class="form-group col-md-6 disabled" element="div">
                        <label>Project</label>
                        <input type="text"
                            value="{{ !empty($variationOrderItem->project) ? $variationOrderItem->project->name : '' }}"
                            readonly="readonly" disabled="disabled" class="form-control">
                    </div>
                    <div class="form-group col-md-4" element="div">
                        <label>Company</label>
                        <input type="text"
                            value="{{ !empty($variationOrderItem->company) ? $variationOrderItem->company->name : '' }}"
                            readonly="readonly" disabled="disabled" class="form-control">
                    </div>
                    <div class="form-group col-md-2" element="div">
                        <label>Date</label>
                        <input type="text" value="{{ date('d-m-Y', strtotime($variationOrderItem->date)) }}"
                            readonly="readonly" disabled="disabled" class="form-control">
                    </div>
                    <div class="form-group col-md-3 required">
                        <label>Client name</label>
                        <input type="text" value="{{ $variationOrderItem->client_name }}" required="required"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <div class="form-group col-md-3" element="div">
                        <label>Phone code</label>
                        <input type="text" value="{{ $variationOrderItem->country_code }}" required="required"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>

                    <div class="form-group col-md-3 required" element="div"> <label>Phone number</label>
                        <input type="text" value="{{ $variationOrderItem->client_contact }}" required="required"
                            class="form-control" readonly="readonly" disabled="disabled">

                    </div>

                    <div class="form-group col-md-3" element="div"> <label>Client IC</label>
                        <input type="text" value="{{ $variationOrderItem->ic }}" required="required" class="form-control"
                            readonly="readonly" disabled="disabled">
                    </div>
                    <!-- textarea -->
                    <div class="form-group col-md-6 mb-4" element="div"> <label>Client email</label>
                        <textarea id="client-email" class="form-control" readonly="readonly" disabled="disabled">{{ $variationOrderItem->client_email }}</textarea>
                    </div>

                    <!-- view field -->
                    <div class="form-group col-md-12 mb-0" element="div"> <label class="mb-0">Address</label></div>

                    <!-- text input -->
                    <div class="form-group col-md-3" element="div"> <label></label>
                        <input type="text" value="{{ $variationOrderItem->block_no }}" required="required"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <div class="form-group col-md-3 mb-0" element="div"> <label></label>
                        <input type="text" value="{{ $variationOrderItem->road_no }}" required="required"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <div class="form-group col-md-6 mb-0" element="div"> <label></label>
                        <input type="text" value="{{ $variationOrderItem->road_name }}" class="form-control"
                            readonly="readonly" disabled="disabled">
                    </div>

                    <!-- text input -->
                    <div class="form-group col-md-6" element="div"> <label></label>
                        <input type="text" value="{{ $variationOrderItem->residence }}" id="residence"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <div class="form-group col-md-3" element="div">
                        <label></label>
                        <input type="text" value="{{ $variationOrderItem->country_name }}" id="residence"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <!-- text input -->
                    <div class="form-group col-md-3 d-block" element="div"> <label></label>
                        <input type="text" value="{{ $variationOrderItem->postal_code }}" id="postal-code"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <!-- text input -->
                    <div class="form-group col-md-3 mt-3" element="div"> <label>Discount</label>

                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">$</span></div> <input
                                type="text" value="{{ $variationOrderItem->discount }}" class="form-control"
                                readonly="readonly" disabled="disabled">
                        </div>
                    </div>


                    <div class="form-group col-md-6 mt-3" element="div">
                        <label>Payment Term</label>
                        <input type="text"
                            value="{{ !empty($variationOrderItem->paymentTerms) ? $variationOrderItem->paymentTerms->name : '' }}"
                            class="form-control" readonly="readonly" disabled="disabled">
                    </div>
                    <div class="form-group col-md-3 mt-3" element="div">
                        <label>GST %</label>
                        <input type="text" value="{{ $variationOrderItem->gst }}" class="form-control"
                            readonly="readonly" disabled="disabled">
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mt-1 mb-0">Requirement</h4>
                </div>
                <div class="card-body pb-1">
                    <div class="form-group">
                        @forelse($variationOrderItemList as $key => $item)
                            @php
                                $itemAmount = (int) str_replace('$', '', $item->amount);
                            @endphp
                            @if ($item->tier_level == 1)
                                <section id="R-T1" class="box-item bg-tier-one">
                                    <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 bg-tier-two">
                                    <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 bg-tier-three">
                                    <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('variation-order.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