@extends('pages.admin.layout')

@section('content')
    <style>
        .customerInformation, .newCustomer, .deliveryAddress {
            display: block;
            border: 1px solid #333;
            padding: 10px;
            margin-top: 19px !important;
            position: relative;
            font-size: 13pt;
        }

        .customerInformation.hide, .newCustomer.hide {
            display: none;
        }

        .totalCost {
            font-size: 17pt;
        }

        .totalCost span {
            display: block;
            margin-top: 12px;
        }

        .totalCost strong {
            font-size: 24pt;
            color: #009004;
        }
    </style>
    <!-- End breadcrumb-->
    <section class="account mt-5 pt-5 mb-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2>
                        Create Order <strong>(For Customer)</strong></h2>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <table class="d-none">
                        <tr class="d-none insertRow">
                            <td width="20%">
                                <select name="Delivery[deliveryId][supplierId]" id=""
                                        class="form-control select2 supplierSelect">
                                    <option value="">Loading</option>
                                </select>
                            </td>
                            <td width="20%">
                                <select name="Delivery[deliveryId][productId]" id=""
                                        class="form-control select2 productSelect">
                                    <option value="">Loading</option>
                                </select>
                            </td>
                            <td width="20%">
                                <select name="Delivery[deliveryId][productItemId]" id=""
                                        class="form-control select2 productItemSelect">
                                    <option value="">Loading</option>
                                </select>
                            </td>
                            <td width="10%" class="optionFields">
                            <span class="badge badge-success badge-xl priceBadge">&pound;<span
                                        class="price"></span></span>
                                <div class="active"></div>
                                <div class="stock"></div>
                            </td>
                            <td width="10%"><input type="number" class="form-control" id=""
                                                   name="Delivery[deliveryId][stockLevel]" min="1" max="99999"
                                                   value="1">
                            </td>
                            <td width="10%"><span class="badge badge-info badge-xl totalBadge">&pound;<span
                                            class="totalPriceItem"></span></span>
                            </td>
                            <td>
                                <a href="javascript:void(0)" class="btn btn-danger removeRow"><i
                                            class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                    </table>

                    <!-- Main content -->
                    <section class="content">
                        <div class="box">

                            <!-- /.box-header -->
                            <div class="box-body">


                                @if(isset($success) && $success !== FALSE)
                                    <div class="col-sm-12 p-t-20">
                                        <div class="alert alert-success" role="alert">
                                            <h4>{!! $success !!}</h4>
                                        </div>
                                    </div>
                                @endif

                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        @foreach ($errors->all() as $error)
                                            <h4>{{ $error }}</h4>
                                        @endforeach
                                    </div>
                                @endif
                                <form role="form" enctype="multipart/form-data" method="post" id="formDetails"
                                      action="{{ route('admin.stockmanagement.store') }}" autocomplete="nope">
                                    {{ method_field('POST') }}
                                    @csrf
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header bg-success">
                                                    <h3 class="mb-0 text-white">Shopping Card</h3>
                                                </div>
                                                <div class="card-body">

                                                    <table id="categoryTable" class="table table-bordered table-hover">
                                                        <thead>
                                                        <tr>
                                                            <th>Supplier</th>
                                                            <th>Product</th>
                                                            <th>Product Option</th>
                                                            <th>Options</th>
                                                            <th>Qty</th>
                                                            <th>Total</th>
                                                            <th></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        </tbody>
                                                    </table>
                                                    <div class="row">

                                                        <div class="col-md-12 text-center">
                                                            <a href="javascript:void(0)" onclick="addRow()"
                                                               class="btn btn-xs btn-info"><i
                                                                        class="fa fa-plus"></i> Add Product</a>
                                                            <br>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-4">

                                            <div class="deliveryDetails card">
                                                <div class="card-header bg-info"><h3 class="mb-0 text-white">
                                                        Customer</h3>
                                                </div>
                                                <div class="card-body">
                                                    <h4 for="deliveryTitle">Existing Customer?</h4>
                                                    <select name="loadCustomer" id="loadCustomer"
                                                            class="form-control select2 productSelect">
                                                        <option value="">Loading</option>
                                                    </select>

                                                    <div class="customerInformation mt-1 hide">
                                                        <div class="row">
                                                            <div class="col-12"><i class="fa fa-user mr-5"></i><span
                                                                        class="cusName"></span></div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12"><i class="fa fa-phone mr-5"></i><span
                                                                        class="cusTelephone"></span></div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12"><i class="fa fa-envelope mr-5"></i><span
                                                                        class="cusEmail"></span></div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12"><i class="fa fa-clock-o mr-5"></i><span
                                                                        class="cusDate"></span></div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12"><i
                                                                        class="fa fa-map-marker mr-5"></i><span
                                                                        class="cusAddress"></span></div>
                                                        </div>
                                                    </div>

                                                    <div class="newCustomer">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <h4>Create New Customer</h4>
                                                            </div>

                                                            <div class="col-6">

                                                                <label for="firstname">First Name</label>
                                                                <input class="no-round-input form-control"
                                                                       type="text" name="firstname" id="firstname"
                                                                       autofocus>

                                                            </div>
                                                            <div class="col-6">

                                                                <label for="lastname">Last Name</label>
                                                                <input class="no-round-input form-control"
                                                                       type="text" id="lastname" name="lastname">


                                                            </div>
                                                            <div class="col-12">

                                                                <label for="email">Email Address</label>
                                                                <input class="no-round-input form-control" id="email"
                                                                       type="email" name="email">

                                                            </div>
                                                            <div class="col-12">

                                                                <label for="mobile">Mobile number</label>
                                                                <input class="no-round-input form-control"
                                                                       id="mobile" autocomplete="mobile" type="tel"
                                                                       name="mobile">

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-4">

                                            <div class="deliveryDetails card">
                                                <div class="card-header bg-info"><h3 class="mb-0 text-white">
                                                        Delivery</h3>
                                                </div>
                                                <div class="card-body">

                                                    <div class="col-12">
                                                        <div class="custom-control custom-radio mb-5">
                                                            <input class="custom-control-input" type="radio"
                                                                   name="deliveryType" id="delivery"
                                                                   value="delivery"
                                                                   checked>
                                                            <label class="custom-control-label"
                                                                   for="delivery">Delivery</label>
                                                        </div>
                                                        <div class="custom-control custom-radio mb-5">
                                                            <input class="custom-control-input" type="radio"
                                                                   name="deliveryType" id="eco"
                                                                   value="eco">
                                                            <label class="custom-control-label" for="eco">Collect:
                                                                Eco</label>
                                                        </div>
                                                        <div class="custom-control custom-radio mb-5">
                                                            <input class="custom-control-input" type="radio"
                                                                   name="deliveryType" id="waterloo"
                                                                   value="waterloo">
                                                            <label class="custom-control-label" for="waterloo">Collect:
                                                                Waterloo</label>
                                                        </div>
                                                    </div>
                                                    <div class="deliveryAddress">
                                                        <h4>Delivery Address</h4>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <label for="line1">Line 1</label>
                                                                <input class="no-round-input form-control"
                                                                       id="line1" autocomplete="line1" type="text"
                                                                       name="line1">
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="line2">Line 2</label>
                                                                <input class="no-round-input form-control"
                                                                       id="line2" autocomplete="line1" type="text"
                                                                       name="line2">
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="city">City</label>
                                                                <input class="no-round-input form-control"
                                                                       id="city" autocomplete="line1" type="text"
                                                                       name="city">
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="postcode">Postcode</label>
                                                                <input class="no-round-input form-control"
                                                                       id="postcode" autocomplete="postcode" type="text"
                                                                       name="postcode">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="deliveryDetails card mt-2">
                                                <div class="card-header bg-info"><h3 class="mb-0 text-white">
                                                        Christmas</h3>
                                                </div>
                                                <div class="card-body">
                                                    <div class="isChristmasDetails">
                                                        <h4>Is Christmas Order?</h4>
                                                        <div class="custom-control custom-radio mb-5">
                                                            <input class="custom-control-input" type="radio"
                                                                   name="IsChristmas" id="IsChristmas1"
                                                                   value="no"
                                                                   checked>
                                                            <label class="custom-control-label"
                                                                   for="IsChristmas1">No</label>
                                                        </div>
                                                        <div class="custom-control custom-radio mb-5">
                                                            <input class="custom-control-input" type="radio"
                                                                   name="IsChristmas" id="IsChristmas2"
                                                                   value="Yes">
                                                            <label class="custom-control-label"
                                                                   for="IsChristmas2">Yes</label>
                                                        </div>
                                                        <div class="isChristmasCollection">
                                                            <br>
                                                            <h4>Collection Time</h4>
                                                            <select name="collectionTime" id="collectionTime"
                                                                    class="form-control pull-left">
                                                                <option value="null">
                                                            
                                                        
                                                        Delivery on: Monday 23rd  of December
                                                    </option>
                            <option value="31">Collection on: Saturday 21st of December</option>
                            <option value="32">Collection on: Sunday 22nd of December</option>
                            <option value="33">Collection on: Monday 23rd of December</option>
                                                            </select>
                                                        </div>

                                                    </div>

                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-4">

                                            <div class="deliveryDetails card">
                                                <div class="card-header bg-info"><h3 class="mb-0 text-white">
                                                        Pricing</h3>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-12 mb-4">
                                                            <label for="subTotal">Week</label>
                                                            @php
                                                                $now = \Carbon\Carbon::now();
                                                                if($now->format('l') !== "Tuesday")
                                                                $now = \Carbon\Carbon::parse('next tuesday');
                                                                $currentWeek = App\OrderAvailablity::where("week_year",
                                                                ($now->weekOfYear).$now->year)->first();

                                                                if( ($now->weekOfYear-1).$now->year != '02022') {
                                                                     $prevWeek = App\OrderAvailablity::where("week_year",
                                                                ($now->weekOfYear-1).$now->year)->first();
                                                                } else {
                                                                     $prevWeek = App\OrderAvailablity::where("week_year",
                                                                '522021')->first();
                                                                }


                                                            @endphp
                                                            <select name="weekID" id="weekID"
                                                                    class="form-control pull-left">
                                                                <option value="{{$currentWeek->id}}" selected>
                                                                    {{str_replace("Delivery/Collection on",
                                                                    "Delivery: ", $currentWeek->title)}}
                                                                </option>
                                                                @foreach(App\OrderAvailablity::where("id", "!=",
                                                                $currentWeek->id)->where("end_date",">=",
                                                                $prevWeek->end_date)->orderBy("end_date", "desc")->get()
                                                                as $week)
                                                                    <option value="{{$week->id}}">
                                                                        {{str_replace("Delivery/Collection on", "Delivery: ",
                                                                        $week->title)}}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <input type="hidden" id="originaldeliveryCost"
                                                               name="originaldeliveryCost" value="0">
                                                        <input type="hidden" id="originalsubTotal"
                                                               name="originalsubTotal"
                                                               value="0">
                                                        <div class="col-12 mb-4">
                                                            <label for="subTotal">Sub Total</label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control"
                                                                       id="subTotal"
                                                                       name="subTotal"
                                                                       placeholder="Sub-total">
                                                                <div class="input-group-append">
                                                                    <button type="button"
                                                                            class="btn btn-secondary loadSubTotalCost">
                                                                        RESET
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 mb-4">
                                                            <label for="deliveryCost">Delivery Cost</label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control"
                                                                       id="deliveryCost"
                                                                       name="deliveryCost"
                                                                       placeholder="Delivery">
                                                                <div class="input-group-append">
                                                                    <button type="button"
                                                                            class="btn btn-secondary loadDeliveryCost">
                                                                        RESET
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 mb-4 d-none payToday">
                                                            <label for="deliveryCost">Pay Today (ie Deposit)</label>
                                                            <div class="input-group">
                                                                <input type="text" class="form-control"
                                                                       id="payToday"
                                                                       name="payToday"
                                                                       placeholder="0.00">
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="totalCost">
                                                                <span>Total</span>
                                                                <strong>&pound;<i class="totalBasketCost"></i></strong>
                                                            </div>
                                                        </div>
                                                        @php
                                                            $orderArea = Request::query('orderArea') ?? FALSE;
                                                        @endphp
                                                        <div class="col-12 mb-3">
                                                            <label for="orderArea">Order belongs to:</label>
                                                            <select name="orderArea" id="orderArea"
                                                                    class="form-control form-control-lg">
                                                                <option value="Edible16" @if($orderArea==
                                                            'Edible16') selected="selected" @endif>Area:
                                                                    Edible16
                                                                </option>
                                                                <option value="Waterloo" @if($orderArea==
                                                            'Waterloo') selected="selected" @endif>Area: Waterloo
                                                                    Cottage
                                                                </option>
                                                                <option value="Pearmans" @if($orderArea==
                                                            'Pearmans') selected="selected" @endif>Area:
                                                                    Pearmans
                                                                </option>
                                                            </select>
                                                        </div>
                                                        <div class="col-12">
                                                            <button class="btn btn-success btn-lg submitOrder btn-block">
                                                                Submit Order
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </section>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script>

        var debounce = function (func, wait, immediate) {
            var timeout;
            return function () {
                var context = this, args = arguments;
                var later = function () {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        };

        $(function () {
            'use strict'

            $(document).ready(function () {
                addRow();


                $(".loadSubTotalCost").on("click", function (e) {
                    e.preventDefault();
                    $("#subTotal").val("-1");
                    loadSubTotalCost();

                })

                $(document).on("keyup", "#subTotal", debounce((e) => {
                    loadSubTotalCost();
                }, 500))
                $(document).on("keyup", "#deliveryCost", debounce((e) => {
                    loadSubTotalCost();
                }, 500))

                $(".loadDeliveryCost").on("click", function (e) {
                    e.preventDefault();
                    $("#deliveryCost").val("-1");
                    loadSubTotalCost();

                })

                $(".submitOrder").on("click", function (e) {
                    e.preventDefault();
                    createOrder();

                })


                $("#loadCustomer").on("select2:select", (e) => {
                    let user = e.params.data;
                    $.ajax({
                        method: "GET",
                        url: "/admin/loadCustomer/" + user.id,
                    }).then((res) => {
                        $(".cusEmail").text(res.Email)
                        $(".cusTelephone").text(res.Telephone)
                        $(".cusName").text(res.Name)
                        $(".cusDate").text(res.OrderDate)
                        $(".cusAddress").text(res.Address)
                        $(".customerInformation").removeClass("hide");
                        $(".newCustomer").addClass("hide");
                        if (res.LastOrder !== null) {
                            $("#line1").val(res.LastOrder.DeliveryAddressLine1)
                            $("#line2").val(res.LastOrder.DeliveryAddressLine2)
                            $("#city").val(res.LastOrder.DeliveryCity)
                            $("#postcode").val(res.LastOrder.DeliveryPostcode)
                        }
                    })
                })

                $('#loadCustomer').select2({
                    placeholder: 'Search for an existing customer',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadCustomers',
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.name + ' ' + obj.surname + ' (' + obj.telephone + ')'; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });
                        $(".isChristmasCollection").fadeOut();

                $(document).on("change", ".custom-control-input[name='deliveryType']", (data) => {
                    console.log($(data.target).val());
                    if ($(data.target).val() == "eco" || $(data.target).val() == "waterloo") {
                        $(".deliveryAddress").fadeOut();
                        $(".isChristmasCollection").fadeIn();
                    } else {
                        $(".deliveryAddress").fadeIn();
                        $(".isChristmasCollection").fadeOut();
                    }
                    loadSubTotalCost();
                })
             $(document).on("change", ".custom-control-input[name='IsChristmas']", (data) => {
                    console.log($(data.target).val());
                    if ($(data.target).val() == "Yes") {
                        $("#weekID").val(469)
                        $(".payToday").removeClass("d-none");
                    } else {
                        $(".payToday").addClass("d-none");
                        $(".isChristmasCollection").fadeOut();
                    }
                    loadSubTotalCost();
                })



                $('form, input').each(function () {
                    $(this).attr('autocomplete', 'si_fuck_off_this_autocomplete');
                });

                $(document).on("click", ".removeRow", function (e) {
                    var tab = $("#categoryTable tr");
                    if (tab.length > 2) {
                        $(this).parent().parent().remove()
                    } else {
                        swal({
                            icon: 'error',
                            title: "You cannot delete the last row"
                        });
                    }
                    removeRow();
                })

            });
        });

        var count = 0;

        let createOrder = function () {
            var form = $('#formDetails');

            $.ajax({
                type: "POST",
                url: "/admin/orders/createNewOrder",
                data: form.serialize(),
                success: function (response) {
                    swal("Order created", "Redirecting you to your order - 2 seconds", "success")
                    setTimeout((e) => {
                        window.location.href = '/admin/orders/' + response + '/edit';
                    }, 3000);
                },
                error: function (err) {
                    swal("Error creating your order", err.responseText, "error")
                }
            });

        }

        let loadSubTotalCost = function () {
            var form = $('#formDetails');

            $.ajax({
                type: "POST",
                url: "/admin/orders/calculateCosts",
                data: form.serialize(),
                success: function (response) {
                    $("#subTotal").attr("original-price", response.Original.total).val(response.SubTotalBasket)
                    $("#deliveryCost").attr("original-price", response.Original.delivery).val(response.DeliveryCosts)
                    $(".totalBasketCost").text(response.TotalCost);
                    $("#originalsubTotal").val(response.Original.total);
                    $("#originaldeliveryCost").val(response.Original.delivery);
                }
            });
        }

        function addRow() {
            var x = document.getElementById("categoryTable");  //get the table
            var node = $(".insertRow")[0].cloneNode(true);    //clone the previous node or row
            node.setAttribute("class", 'newTable');
            node.id = 'newproduct_' + count;

            node.children[0].children[0].setAttribute("name", node.children[0].children[0].name.replace("deliveryId", count));
            node.children[0].children[0].id = 'supplier_' + count;


            node.children[1].children[0].setAttribute("name", node.children[1].children[0].name.replace("deliveryId", count));
            node.children[1].children[0].id = 'product_' + count;

            node.children[2].children[0].setAttribute("name", node.children[2].children[0].name.replace("deliveryId", count));
            node.children[2].children[0].id = 'productItem_' + count;


            node.children[4].children[0].setAttribute("name", node.children[4].children[0].name.replace("deliveryId", count));
            node.children[4].children[0].id = 'stockLevel_' + count;

            loadInputs(count)
            count++;
            x.appendChild(node);   //add the node or row to the table


        }

        function loadInputs(id) {

            let product = false;

            window.setTimeout(function() {
                console.log(id);

                $('#supplier_' + id).select2({
                    placeholder: 'Search for a supplier',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadSuppliers',
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.text || obj.name; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });

                $("#supplier_" + id).on("select2:select", (e) => {
                    console.log(e);
                    $('#product_' + id).val(null).trigger('change');
                    $('#product_' + id).select2("open");
                    $('#productItem_' + id).val(null).trigger('change');
                })

                $('#product_' + id).select2({
                    placeholder: 'Search for a product',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadProducts',
                        data: (params) => {
                            var supplierId = $("#supplier_" + id).val();
                            var query = {
                                term: params.term,
                                supplierId: supplierId
                            }
                            return query;
                        },
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.text || obj.name; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });

                $("#product_" + id).on("select2:select", (e) => {
                    product = e.params.data;
                    console.log(e);
                    $('#productItem_' + id).select2("open");
                })


                $('#productItem_' + id).select2({
                    placeholder: 'Search for a product option',
                    ajax: {
                        type: 'GET',
                        url: '/admin/loadProductItems',
                        data: (params) => {
                            var supplierId = $("#product_" + id).val();
                            var query = {
                                term: params.term,
                                productId: supplierId
                            }
                            return query;
                        },
                        processResults: function (data) {
                            // Tranforms the top-level key of the response object from 'items' to 'results'
                            return {
                                results: $.map(data, function (obj) {
                                    obj.text = obj.text || obj.name; // replace name with the property used for the text

                                    return obj;
                                })
                            };
                        }
                    }
                });

                $('#productItem_' + id).on("select2:select", (e) => {
                    let item = e.params.data;
                    console.log(product);
                    $(e.target).parent().parent().find(".optionFields").children(".active").text((product.active && item.active) ? 'Active' : 'Not for Sale');

                    if (item.stock == "" || item.stock == null) {
                        item.stock = 'Unlimited';
                    }
                    let price = (item.price) ? item.price : product.price;
                    $(e.target).parent().parent().find(".optionFields").children(".stock").text((product.active && item.active) ? "Stock: " + item.stock : '');
                    $(e.target).parent().parent().find(".optionFields").children(".priceBadge").children(".price").text(parseFloat(price).toFixed(2));
                    $(e.target).parent().parent().find(".totalPriceItem").text(parseFloat(price).toFixed(2));

                    loadSubTotalCost();
                })

                $(document).on("change", "#stockLevel_" + id, (e) => {
                    let pricePer = parseFloat($(e.target).parent().parent().find(".priceBadge .price").text());
                    let total = parseFloat(pricePer * $(e.target).val()).toFixed(2)
                    console.log(pricePer, total);
                    $(e.target).parent().parent().find(".totalPriceItem").text(parseFloat(total).toFixed(2));

                    loadSubTotalCost();
                })


            }, 200);
        }

        function removeRow() {
            console.log($(this));
            loadSubTotalCost();
        }
    </script>
@append