@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title" style="padding: 11px">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("production-orders")}}</h1>
            <p>{{__("production-formula")}}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.production-orders.index")}}">{{__("production-orders")}}</a>
            </li>
            <li class="breadcrumb-item"><a href="#">{{__("analysis")}}</a></li>
        </ul>
    </div>
@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="tile" style="padding: 5px 5px 5px 5px">
                <div class="tile-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text"
                                           name="number" id="number"
                                           value="{{$order['number']}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 1px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                    class="col-form-label"><b>{{__("date")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control"
                                           style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 13px"
                                           type="text" name="date" value="{{$order['date']}}" id="date" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("store")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text" value="{{$order['store']}}" readonly>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                    class="col-form-label"><b>{{__("client-name")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text" value="{{$order['client']}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("status")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text" value="{{$order['status']}}" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                    class="col-form-label"><b>{{__("production-line")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text" value="{{$order['production_line']}}" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group row" style="margin-bottom: 2px">
                                <label
                                    style="font-size: 13px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                    class="col-form-label"><b>{{__("sales-order-number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px"
                                           type="text" value="{{$order['sales_order_number']}}" readonly>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="tile">
                                @if($order["is_analyzed"] == 0)
                                    <div class="form-group" style="float: right">
                                        <div class="checkbox-correct size-1 check-box">
                                            <input type="checkbox" id="cancelBookings">
                                        </div>
                                        <label class="control-label">{{__("cancel-all-booked-quantity")}}</label>
                                    </div>
                                @endif
                                <div class="tile-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-bordered text-center" style="width: 100%">
                                            <thead style="font-size: 12px">
                                            <tr>
                                                <th style="width: 1%; vertical-align: middle">#</th>
                                                <th style="width: 6%; vertical-align: middle">{{__("Item Image")}}</th>
                                                <th style="width: 6%; vertical-align: middle">{{__("item")}}</th>
                                                <th style="width: 3%; vertical-align: middle">{{__("quantity")}}</th>
                                                <th style="width: 3%; vertical-align: middle">{{__("quantity-in-stock")}}</th>
                                                <th style="width: 3%; vertical-align: middle">{{__("reserved-quantity")}}</th>
                                                <th style="width: 1%; vertical-align: middle">{{__("book-quantity")}}</th>
                                                <th style="width: 1%; vertical-align: middle">{{__("purchase-quantity")}}</th>
                                                <th style="width: 1%; vertical-align: middle">{{__("unit-price")}}</th>
                                                <th style="width: 5%; vertical-align: middle">{{__('notes')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody id="data" style="font-size: 12px">
                                                                                        @foreach($items as $item)
                                                <tr>
                                                    <td>{{++$serial_number}}</td>
                                                    <td>
{{--                                                        <img height="50" width="50" src="{{$item->item->getFirstMediaFile("Items")->url}}" />--}}
                                                    </td>
                                                    @if($isExists == 1)
                                                        <input type="hidden" id="id{{$serial_number}}"
                                                               value="{{$item->id}}">
                                                    @endif
                                                    <td>{{$item->item_name}} <input type="hidden"
                                                                                    id="item{{$serial_number}}"
                                                                                    value="{{$item->item_id}}">
                                                        <input type="hidden"
                                                               id="itemName{{$serial_number}}"
                                                               value="{{$item->item_name}}">
                                                    </td>
                                                    <td>
                                                        <div class="row">
                                                            <div class="col-lg-10" style="padding: 0 5px 0 10px; margin: 0">
                                                                <input class="form-control" type="number" value="{{$item->quantity}}" id="qty{{$serial_number}}"  style="font-size: 12px; height: 30px" readonly>
                                                            </div>
                                                            @if($item->count > 1)
                                                                <i class="fas fa-info-circle"
                                                                   style="cursor: pointer; margin-top: 10px; color: orange"
                                                                   onclick="showDetails(this, {{$item->items_details}}, {{$item->quantity}})"
                                                                   data-item-name="{{$item->item_name}}"></i>
                                                            @endif
                                                        </div>
                                                    </td>
                                                    @if($item->count > 1)

                                                        <!-- Details Modal -->
                                                        <div class="modal fade" id="detailsModal" tabindex="-1"
                                                             role="dialog" aria-labelledby="detailsModalLabel"
                                                             aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title">{{__('details')}}</h5>
                                                                        <button type="button" class="close"
                                                                                data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <p id="subItem"
                                                                       style="font-weight: bold;margin: 10px 0 0 20px; padding: 0"></p>
                                                                    <p id="subQty"
                                                                       style="font-weight: bold; margin: 10px 0 0 20px; padding: 0"></p>
                                                                    <div class="modal-body">
                                                                        <div id="appendedData">

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    <td><input class="form-control" type="number" value="{{$item->available_quantity_in_stock}}" id="availableQty{{$serial_number}}"  style="font-size: 12px; height: 30px" readonly></td>
                                                    <td><input class="form-control" type="number" value="{{$item->reserved_quantity_in_stock}}" id="reservedQty{{$serial_number}}"  style="font-size: 12px; height: 30px" readonly></td>
                                                    @if($isExists == 0)
                                                        <td>
                                                            <input class="form-control" type="number" onfocusout="checkBookedQty({{$serial_number}})"
                                                                   id="bookQty{{$serial_number}}"
                                                                   style="font-size: 12px; height: 30px"
                                                                   value="{{$item->qty_to_book}}"  @if($order["is_analyzed"] == 1) readonly @endif>
                                                            <div id="bookQtyMsg{{$serial_number}}" class="emsg" style="color: red; display: none"></div>
                                                        </td>
                                                        <td>
                                                            <input class="form-control" type="number" onfocusout="checkPurchasedQty({{$serial_number}})"
                                                                   id="purchasedQty{{$serial_number}}"
                                                                   style="font-size: 12px;height: 30px"
                                                                   value="{{$item->qty_to_produce}}" @if($order["is_analyzed"] == 1) readonly @endif>
                                                            <div id="purchasedQtyMsg{{$serial_number}}" class="emsg" style="color: red; display: none"></div>
                                                        </td>
                                                    @elseif($isExists == 1)
                                                        <td>
                                                            <input class="form-control" type="number" onfocusout="checkBookedQty({{$serial_number}})"
                                                                   id="bookQty{{$serial_number}}"
                                                                   style="font-size: 12px; height: 30px"
                                                                   value="{{$item->booked_quantity}}" @if($order["is_analyzed"] == 1) readonly @endif>
                                                            <div id="bookQtyMsg{{$serial_number}}" class="emsg" style="color: red; display: none"></div>
                                                        </td>
                                                        <td>
                                                            <input class="form-control" type="number" onfocusout="checkPurchasedQty({{$serial_number}})"
                                                                   id="purchasedQty{{$serial_number}}"
                                                                   style="font-size: 12px;height: 30px"
                                                                   value="{{$item->purchased_quantity}}" @if($order["is_analyzed"] == 1) readonly @endif>
                                                            <div id="purchasedQtyMsg{{$serial_number}}" class="emsg" style="color: red; display: none"></div>
                                                        </td>
                                                    @endif
                                                    <td><input class="form-control" type="number" value="{{$item->available_quantity_in_stock}}" id="unitPrice{{$serial_number}}"  style="font-size: 12px; height: 30px" readonly></td>
                                                    <td style=" margin: 0">
                                                        <input class="form-control" type="text"
                                                               style="font-size: 12px;height: 30px"
                                                               id="notes{{$serial_number}}" @if($order["is_analyzed"] == 1) readonly @endif>
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    @if($order["is_analyzed"] == 0)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group" style="text-align: center">
                                    <button class="btn btn-primary" id="btn" type="button"
                                            style="padding: 4px; margin: 0 10px 0 10px" onclick="submitForm('save')"><i
                                            class="fa fa-fw fa-lg fa-check-circle" style="font-size: 14px"></i><i
                                            class="loading-icon fa-lg fas fa-spinner fa-spin saveHide"
                                            style="display: none"></i><span id="textSpan"
                                                                            style="font-size: 14px">{{__("save")}}</span>
                                    </button>
                                    <button class="btn btn-primary" id="saveAndCreateVouchersBtn"
                                            onclick="submitForm('saveAndCreateVouchers')" type="button"
                                            style="padding: 4px; margin: 0 10px 0 10px"><i
                                            class="fa fa-fw fa-lg fa-check-circle" style="font-size: 14px"></i><i
                                            class="loading-icon fa-lg fas fa-spinner fa-spin hide"
                                            style="display: none"></i><span id="saveAndCreateVouchersTextSpan"
                                                                            style="font-size: 14px">{{__("save-and-create-vouchers")}}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection
@section("scripts")
    <script type="text/javascript">
        let noOfRows = $('.table tbody tr').length;

        function showDetails(select, items, qty) {
            let item_name = $(select).attr('data-item-name');
            $('#appendedData').empty();
            $.each(items, function (index, value) {
                $('#appendedData').append(`
              <div class="row">
                   <div class="col-lg-8">
                       <div class="form-group row" style="margin-bottom: 1px">
                           <label
                               style="font-size: 12px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 27%;"
                                class="col-form-label"><b>{{__("main-item")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control" style="padding: 3px;font-size: 12px"
                                       type="text"
                                       name="number" id="number"
                                       value="` + value.main_item + `" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group row" style="margin-bottom: 1px">
                            <label
                                style="font-size: 12px; @if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif width: 30%;"
                                class="col-form-label"><b>{{__("quantity")}}</b></label>
                            <div class="col-sm-8">
                                <input class="form-control"
                                       style="@if(app()->getLocale() == 'ar') text-align: right @endif; padding: 3px; font-size: 12px"
                                       type="text" name="date" value="` + value.total_quantity + `" id="date" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                `);
                $("#subItem").html("Sub Item : " + item_name);
                $("#subQty").html("Qty : " + qty);
            });
            $("#detailsModal").modal('show');
        }

        $('#cancelBookings').change(function () {
            if ($(this).is(':checked')) {
                swal({
                    title: '{{__("cancel-all-bookings")}}',
                    text: '{{__("are-you-sure-you-want-to-cancel-all-bookings?")}}',
                    icon: "warning",
                    buttons: ['{{__("no")}}', '{{__("yes")}}'],
                    dangerMode: true,
                }).then((willCancel) => {
                    if (willCancel) {
                        for (var i = 1; i <= noOfRows; i++) {
                            let qty = $("#qty" + i).val()
                            $("#purchasedQty" + i).val(qty)
                            $("#bookQty" + i).val(0);
                        }
                    }
                });
            } else {
                window.location.reload();
            }
        });

        function checkBookedQty(rowNo) {
            let stockQty = $("#availableQty" + rowNo).val();
            let reservedQty = $("#reservedQty" + rowNo).val();
            let error = document.getElementById("bookQtyMsg" + rowNo);
            if(parseFloat($("#bookQty" + rowNo).val()) > parseFloat($("#qty" + rowNo).val())){
                $("#bookQtyMsg" + rowNo).css({'display': ''});
                error.innerHTML = '{{__("qty-error-msg")}}';
                $("#bookQty" + rowNo).val("");
            }else if (parseFloat($("#bookQty" + rowNo).val()) > parseFloat(stockQty - reservedQty)) {
                $("#bookQtyMsg" + rowNo).css({'display': ''});
                error.innerHTML = '{{__("booked-stock-qty-error-msg")}}';
                $("#bookQty" + rowNo).val("");
            }
            else{
                error.innerHTML = "";
                $("#bookQtyMsg" + rowNo).css({'display': 'none'});
            }
        }

        function checkPurchasedQty(rowNo) {
            let error = document.getElementById("purchasedQtyMsg" + rowNo);
            if(parseFloat($("#purchasedQty" + rowNo).val()) > parseFloat($("#qty" + rowNo).val())){
                $("#purchasedQtyMsg" + rowNo).css({'display': ''});
                error.innerHTML = '{{__("qty-error-msg")}}';
                $("#purchasedQty" + rowNo).val("");
            } else{
                error.innerHTML = "";
                $("#purchasedQtyMsg" + rowNo).css({'display': 'none'});
            }
        }

        function submitForm(type) {
            var baseUrl = window.location.origin;
            var completed = 1;
            if (type === "saveAndCreateVouchers") {
                var purchasedDataArray = [];
                var bookedDataArray = [];
                var dataArr = [];
                for (var i = 1; i <= noOfRows; i++) {
                    if ($("#bookQty" + i).val() === "")
                        $("#bookQty" + i).val(0);
                    if ($("#purchasedQty" + i).val() === "")
                        $("#purchasedQty" + i).val(0);
                    if (parseFloat($("#bookQty" + i).val()) + parseFloat($("#purchasedQty" + i).val()) !== parseFloat($("#qty" + i).val())) {
                        completed = 0;
                        swal({
                            icon: 'error',
                            title: '{{__('error')}}',
                            text: '{{__('cover-qty-msg')}}' + $("#itemName" + i).val()
                        });
                        break;
                    }
                    if ($("#purchasedQty" + i).val() > 0) {
                        const dataObj = {
                            item_id: $("#item" + i).val(),
                            quantity: $("#purchasedQty" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        purchasedDataArray.push(dataObj);
                    }
                }
                if(completed === 1){
                    for (var j = 1; j <= noOfRows; j++) {
                        if ($("#bookQty" + j).val() > 0) {
                            const dataObj = {
                                item_id: $("#item" + j).val(),
                                quantity: $("#bookQty" + j).val(),
                                notes: $("#notes" + j).val(),
                            };
                            bookedDataArray.push(dataObj);
                        }

                        if ({{$isExists}}) {
                            const dataObject = {
                                id: $("#id" + j).val(),
                                item_id: $("#item" + j).val(),
                                quantity: $("#qty" + j).val(),
                                booked_quantity: $("#bookQty" + j).val(),
                                purchased_quantity: $("#purchasedQty" + j).val(),
                                notes: $("#notes" + j).val(),
                            };
                            dataArr.push(dataObject);
                        }else{
                            const dataObject = {
                                item_id: $("#item" + j).val(),
                                quantity: $("#qty" + j).val(),
                                booked_quantity: $("#bookQty" + j).val(),
                                purchased_quantity: $("#purchasedQty" + j).val(),
                                notes: $("#notes" + j).val(),
                            };
                            dataArr.push(dataObject);
                        }
                    }
                }
                if ((purchasedDataArray.length > 0 || bookedDataArray.length > 0) && completed === 1) {
                    $(".hide").css({'display': ''});
                    $(".fa-check-circle")[1].style.display = "none";
                    $("#saveAndCreateVouchersBtn").attr("disabled", true);
                    $("#btn").attr("disabled", true);
                    $("#saveAndCreateVouchersTextSpan").html("{{__("saving")}}");
                    var formData = new FormData();
                    formData.append("sales_order_id", {{$order['sales_order_id']}});
                    formData.append("order_id", {{$order['id']}});
                    formData.append("is_manual", 0);
                    formData.append("is_exists", {{$isExists}});
                    formData.append("items", JSON.stringify(dataArr));
                    if (purchasedDataArray.length > 0)
                        formData.append("purchasedItems", JSON.stringify(purchasedDataArray));
                    if (bookedDataArray.length > 0)
                        formData.append("bookedItems", JSON.stringify(bookedDataArray));
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + "/en/ajax/production-orders/production-formula-analysis",
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (response) {
                            //  response = JSON.parse(response);
                            if (response["status"] === 200) {
                                swal({
                                    title: "Added Successfully",
                                    text: response["message"],
                                    icon: "success",
                                }).then(function () {
                                    window.location.href = '{{route("admin.production-orders.index")}}';
                                })

                            } else if (response["status"] === 201) {
                                swal({
                                    icon: 'error',
                                    title: '{{__('error')}}',
                                    text: response["message"]
                                })
                            }
                        },
                        error: function (response) {

                        }
                    });
                }
            } else {
                var dataArray = [];
                if ({{$isExists}}) {
                    for (var i = 1; i <= noOfRows; i++) {
                        if($("#bookQty" + i).val() === "")
                            $("#bookQty" + i).val(0);
                        if($("#purchasedQty" + i).val() === "")
                            $("#purchasedQty" + i).val(0);
                        if (parseFloat($("#bookQty" + i).val()) + parseFloat($("#purchasedQty" + i).val()) !== parseFloat($("#qty" + i).val())) {
                            completed = 0;
                            swal({
                                icon: 'error',
                                title: '{{__('error')}}',
                                text: '{{__('cover-qty-msg')}}' + $("#itemName" + i).val()
                            });
                            break;
                        }
                        const dataObj = {
                            id: $("#id" + i).val(),
                            item_id: $("#item" + i).val(),
                            quantity: $("#qty" + i).val(),
                            booked_quantity: $("#bookQty" + i).val(),
                            purchased_quantity: $("#purchasedQty" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                } else {
                    for (var i = 1; i <= noOfRows; i++) {
                        if($("#bookQty" + i).val() === "")
                            $("#bookQty" + i).val(0);
                        if($("#purchasedQty" + i).val() === "")
                            $("#purchasedQty" + i).val(0);
                        if (parseFloat($("#bookQty" + i).val()) + parseFloat($("#purchasedQty" + i).val()) !== parseFloat($("#qty" + i).val())) {
                            completed = 0;
                            swal({
                                icon: 'error',
                                title: '{{__('error')}}',
                                text: '{{__('cover-qty-msg')}}' + $("#itemName" + i).val()
                            });
                            break;
                        }
                        const dataObj = {
                            item_id: $("#item" + i).val(),
                            quantity: $("#qty" + i).val(),
                            booked_quantity: $("#bookQty" + i).val(),
                            purchased_quantity: $("#purchasedQty" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
                if(completed == 1){
                    $(".saveHide").css({'display': ''});
                    $(".fa-check-circle")[0].style.display = "none";
                    $("#btn").attr("disabled", true);
                    $("#saveAndCreateVouchersBtn").attr("disabled", true);
                    $("#textSpan").html("{{__("saving")}}");
                    var formData = new FormData();
                    formData.append("sales_order_id", {{$order['sales_order_id']}});
                    formData.append("order_id", {{$order['id']}})
                    formData.append("is_exists", {{$isExists}});
                    formData.append("items", JSON.stringify(dataArray));
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: baseUrl + "/en/ajax/production-orders/production-formula-analysis",
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (response) {
                            //  response = JSON.parse(response);
                            if (response["status"] === 200) {
                                swal({
                                    title: "Added Successfully",
                                    text: response["message"],
                                    icon: "success",
                                }).then(function () {
                                    window.location.href = '{{route("admin.production-orders.index")}}';
                                })

                            } else if (response["status"] === 201) {
                                swal({
                                    icon: 'error',
                                    title: '{{__('error')}}',
                                    text: response["message"]
                                })
                            }
                        },
                        error: function (response) {

                        }
                    });
                }
            }
        }
    </script>

@endsection