@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>{{__("sales-orders")}}</h1>
        <p>{{__("all-sales-orders")}}</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.sales-orders.index")}}">{{__("sales-orders")}}</a>
        </li>
        <li class="breadcrumb-item"><a href="#">{{__("edit")}}</a></li>
    </ul>
</div>
@endsection
@section("content")
<h1 style="color: #053474">{{__("first-step")}}</h1>

<form id="main_form" method="post">
    @csrf
    <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="{{$voucher['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="{{$voucher['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 required"><b>{{__("classification")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="classification" id="classification" class="form-control">
                                        <option></option>
                                        @foreach($classifications as $classification)
                                        <option value="{{$classification->id}}" @if ($voucher['classification_id']==$classification->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$classification->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                </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 required"><b>{{__("client-name")}}</b></label>
                                <div class="col-sm-8">
                                    <div id="clientDiv">
                                        <select name="client" id="client" class="form-control">
                                            <option></option>
                                            @foreach($clients as $client)
                                            <option value="{{$client->id}}" @if ($voucher['client_id']==$client->id)
                                                {{'selected="selected"'}}
                                                @endif>{{$client->en_name}}
                                            </option>
                                            @endforeach

                                        </select>
                                        <a onclick="openClientWindow()"><i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 20px; color: green; cursor: pointer; padding-left: 10px"></i></a>
                                    </div>
                                </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 required"><b>{{__("representative-name")}}</b></label>
                                <div class="col-sm-8" id="representativeDiv">
                                    <select name="representative" id="representative" class="form-control">
                                        <option></option>
                                        @foreach($representatives as $representative)
                                        <option value="{{$representative->id}}" @if ($voucher['representative_id']==$representative->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$representative->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                    <a onclick="openRepresentativeWindow()"><i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 20px; color: green; cursor: pointer; padding-left: 10px"></i></a>
                                </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>{{__("purchase-order-number")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" style="padding: 3px;font-size: 13px" type="text" value="{{$voucher['purchase_order_number']}}" name="purchaseOrderNumber" id="purchaseOrderNumber" placeholder="{{__("enter-purchase-order-number")}}">
                                </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 required"><b>{{__("store")}}</b></label>
                                <div class="col-sm-8">
                                    <select name="store" id="store" class="form-control">
                                        <option></option>
                                        @foreach($stores as $store)
                                        <option value="{{$store->id}}" @if ($voucher['store_id']==$store->id)
                                            {{'selected="selected"'}}
                                            @endif>{{$store->name}}
                                        </option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="scrollable-table">
                                <table class="table table-hover table-bordered table-fix-head" style="margin-bottom: 5px">
                                    <thead style="font-size: 12px; line-height: 2px">
                                        <tr>
                                            <th style="width: 1%">#</th>
                                            <th style="width: 7%">{{__('code')}}<span class="required"></span></th>
                                            <th style="width: 20%">{{__('item')}}<span class="required"></span></th>
                                            <th style="width: 3%">{{__('unit')}}</th>
                                            <th style="width: 2%">{{__('quantity')}}<span class="required"></span></th>
                                            <th style="width: 4%">{{__('unit-price')}}<span class="required"></span>
                                            </th>
                                            <th style="width: 2%">{{__('total')}}</th>
                                            <th style="width: 12%">{{__('notes')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody" style="font-size: 12px">
                                                                                @foreach($voucherItems as $voucherItem)
                                        <tr id="trControl{{++$serial_number}}">
                                            <input type="hidden" value="{{$voucherItem->id}}" id="id{{$serial_number}}">
                                            <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">{{$serial_number}}
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <select disabled class="form-control" id="code{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($items as $item)
                                                    <option @if($item->id == $voucherItem->item_id) selected @endif value="{{$item->id}}">{{$item->getItemCode() }}</option>
                                                    @endforeach
                                                </select>
                                                <div class="input-error" id="codeError{{$serial_number}}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <select disabled class="form-control" id="item{{$serial_number}}" required>
                                                    <option></option>
                                                    @foreach($items as $item)
                                                    <option {{selected("name", $voucherItem->item->name,$item)}} value="{{$item->id}}">{{$item->name}}</option>
                                                    @endforeach
                                                </select>
                                                <a onclick="openItemWindow()"><i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 15px; color: green; cursor: pointer"></i></a>
                                                <div class="input-error" id="itemError{{$serial_number}}" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                            <select id="unit{{$serial_number}}" class="form-control" required>
                                                    <option value="{{ $voucherItem->item->unit->id }}">{{ $voucherItem->item->unit->unit_name }}</option>
                                                    @foreach($units as $unit)
                                                        @if($voucherItem->item_id === $unit->item_id)
                                                        <option value="{{ $unit->unit->id }}" {{ $voucherItem->entered_unit_id == $unit->unit_id ? 'selected' : '' }}>{{ $unit->unit->unit_name }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="number" style="padding: 3px;font-size: 13px" onchange="updateTotalPrice({{$serial_number}})" id="quantity{{$serial_number}}" value="{{$voucherItem->converted_quantity}}" min="0" required>
                                                <div class="input-error" id="quantityError{{$serial_number}}" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <div class="input-group flex-nowrap">
                                                    <input class="form-control" type="number" style="padding: 3px 0 3px 3px; font-size: 13px; @if(app()->getLocale() == 'ar') border-top-left-radius: 0;border-bottom-left-radius: 0; border-left: 0; @else border-top-right-radius: 0;border-bottom-right-radius: 0; border-right: 0; @endif;" onchange="updateTotalPrice({{$serial_number}})" id="price{{$serial_number}}" value="{{$voucherItem->price}}" min="0" required>
                                                    <span class="input-group-text" style="padding: 0 3px 0 3px; margin: 0; font-size: 13px;   @if(app()->getLocale() == 'ar') border-top-right-radius: 0;border-bottom-right-radius: 0; @else border-top-left-radius: 0;border-bottom-left-radius: 0; @endif">{{__('sar')}}</span>
                                                </div>
                                                <div class="input-error" id="priceError{{$serial_number}}" style="padding-top: 10px;display: none; font-size: 13px"></div>
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="number" id="total{{$serial_number}}" value="{{$voucherItem->quantity * $voucherItem->price}}" style="padding: 3px;font-size: 13px">
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="text" style="padding: 3px;font-size: 13px" id="notes{{$serial_number}}" value="{{$voucherItem->notes}}" required>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <a id="addBtn"><i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 18px; color: green; cursor: pointer" onclick="addRow()"></i></a>
                            </div>
                        </div>
                    </div>
                    <hr style="padding: 0 0 2px 0; margin: 5px 0 0 0">
                    <div class="row" style="padding-top: 5px">
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label style="@if(app()->getLocale() == 'ar') padding-right: 20px; @else padding-left: 20px; @endif; font-size: 13px" for="staticEmail" class="col-form-label"><b>{{__("notes")}}</b></label>
                                <div class="col-sm-10">
                                    <textarea style="height: 30px; font-size: 13px; padding: 3px" class="form-control" type="text" name="notes" id="notes" placeholder="{{__("enter-notes")}}">{{$voucher['notes']}}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group row">
                                <label for="staticEmail" class="col-form-label" style="font-size: 13px"><b>{{__("total-qty")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number" name="total_amount" id="total_amount" value="{{$voucher['total_quantity']}}" readonly style="width: 80%; padding: 3px; font-size: 13px">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group row">
                                <label for="staticEmail" class="col-form-label" style="font-size: 13px"><b>{{__("total-amount")}}</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number" name="total_price" id="total_price" readonly style="width: 80%; padding: 3px; font-size: 13px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6">
                            <div class="form-group row">
                                <label for="staticEmail" class="col-form-label" style="font-size: 13px"><b>{{ __('Total Price After Add Tax Value') }} ({{ ($tax * 100) . '%' }})</b></label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number" name="total_price_tax" id="total_price_tax" value="{{$voucher['total_price']}}" readonly style="width: 85%; padding: 3px; font-size: 13px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="submitFormDiv">
                        <div class="col-md-12" id="submitForm">
                            <div class="form-group" style="text-align: center">
                                <button class="btn btn-primary" id="btn" onclick="submitForm('save')" 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="textSpan" style="font-size: 14px">{{__("Next ")}} <sub>{{__("update-processing")}}</sub></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<form class="deleteForm" method="post" style="display: none" data-swal-title="{{__("delete-document")}}" data-swal-text="{{__("are-you-sure-to-delete-this-document?")}}" data-yes="{{__("yes")}}" data-no="{{__("no")}}" data-success-msg="{{__("the-document-deleted-successfully")}}">
    @csrf
    @method("delete")
</form>
@endsection


@section("scripts")
    <!-- Google analytics script-->
    <script type="text/javascript">
        let noOfRows = $('.table tbody tr').length;
        var baseUrl = window.location.origin;
        var filesArray = [];
        var itemsArray = [];
        filesArray.length = $('.file').length;
        var imagesObj = {};
        for(var i=1; i<=noOfRows; i++){
            if($('#gallery'+i+' '+'.img').length > 0) {
                var imgArr = [];
                for (var j = 0; j < $('#gallery' + i + ' ' + '.img').length; j++) {
                    imgArr.push($('#gallery' + i + ' ' + '.img img')[j].src)
                }
                imagesObj[i] = imgArr;
            }
            $("#unit" + i).select2({
                placeholder: "{{__('select-unit')}}",
                width: "100%",
            });
        }

        function openClientWindow() {
            window.open("{{route("admin.clients.create")}}", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=200,width=1000,height=600");
        }

        function openRepresentativeWindow() {
            window.open("{{route("admin.representatives.create")}}", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=200,width=1000,height=600");
        }
        function openItemWindow() {
            window.open("{{route("admin.items.create")}}", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=200,width=1000,height=600");
        }
        
        for(var i=1; i<=noOfRows; i++){
            $("#code"+i).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item"+i).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
        }

        $("#client").select2({
            placeholder: "{{__('select-client-name')}}",
            width: "90%",
        });
        $("#classification").select2({
            placeholder: "{{__('select-classification')}}",
            width: "100%",
        });
        $("#representative").select2({
            placeholder: "{{__('select-representative-name')}}",
            width: "90%",
        });
        $("#store").select2({
            placeholder: "{{__('select-store')}}",
            width: "100%",
        });

    var appenddata1 = "";
    var appenddata2 = "";
    window.onload = function () {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + "/en/ajax/items/get-all-items",
                type: 'get',
                success: function(response){
                    itemsArray = response["items"];
                    callFlag = 1;
                    for(var i=1; i<=noOfRows; i++){
                        var codeVal = $("#code" + i).val();
                        var nameVal = $("#item" + i).val();
                        for (var j = 0; j < itemsArray.length; j++) {
                            appenddata1 += "<option value = '" + itemsArray[j].id+"'>" + itemsArray[j].name + " </option>";
                            appenddata2 += "<option value = '" + itemsArray[j].id+"'>" + itemsArray[j].code + " </option>";
                        }
                        $("#item"+i).empty().append(appenddata1);
                        $("#code"+i).empty().append(appenddata2);
                        $("#item" + i + " option[value='" + codeVal + "']").attr("selected", "selected");
                        $("#code" + i + " option[value='" + nameVal + "']").attr("selected", "selected");
                        $("#code"+i).select2({
                            placeholder: "{{__('select-code')}}",
                            width: "100%",
                        });
                        $("#item"+i).select2({
                            placeholder: "{{__('select-item')}}",
                            width: "93%",
                        });
                        $("#deliveryType" + i).select2({
                            placeholder: "{{__('select-delivery-type')}}",
                            width: "100%",
                        });
                        $("#ItemStatus" + i).select2({
                            placeholder: "{{__('select-status')}}",
                            width: "100%",
                        });
                    }
                },
            });
    }

    function getItemName(rowNo) {
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "get",
            dataType: 'json',
            url: baseUrl + "/en/ajax/items/get-item-unit/" + $("#code" + rowNo).val(),
            success: function(response) {
                if (response["status"] === 200) {
                    $("#main_unit").text(`(${response[0]})`).css("color", "red");
                    if (response.status === 200) {
                        options = '';
                        for (var i = 0; i < response.data.length; i++) {
                            options += '<option value="' + response.data[i].id + '">' + response.data[i].unit_name + '</option>';
                        }
                        $("#unit" + rowNo).append(options);
                    }
                }
            }
        });

        // Update dropdown options
        $('#item' + rowNo).empty()
            var appenddata1 = "";
            for (var i = 0; i < itemsArray.length; i++) {
            appenddata1 += "<option value = '" + itemsArray[i].id+"'>" + itemsArray[i].name + " </option>";
            }
            $("#item"+rowNo).append(appenddata1);
        var codeVal = $("#code" + rowNo).val();
        $("#item" + rowNo + " option[value='" + codeVal + "']").attr("selected", "selected");
        $("#quantity" + rowNo).removeAttr("readonly");
        $("#price" + rowNo).removeAttr("readonly");
        $("#deliveryType" + rowNo).removeAttr("disabled");
        $("#notes" + rowNo).removeAttr("readonly");
        $("#uploadBtn" + rowNo).removeAttr("disabled");
        $("#images" + rowNo).removeAttr("disabled");
    }

    function getItemCode(rowNo) {
        $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "get",
                dataType: 'json',
                url: baseUrl + "/en/ajax/items/get-item-unit/" + $("#item" + rowNo).val(),
                success: function (response) {
                    if (response["status"] === 200) {
                    $("#main_unit").text(`(${response[0]})`).css("color", "red");
                    if (response.status === 200) {
                        options = '';
                        for (var i = 0; i < response.data.length; i++) {
                            options += '<option value="' + response.data[i].id + '">' + response.data[i].unit_name + '</option>';
                        }
                        $("#unit" + rowNo).append(options);
                    }
                }
                }
            })
            $('#code' + rowNo).empty();
            var appenddata1 = "";
            for (var i = 0; i < itemsArray.length; i++) {
                appenddata1 += "<option value = '" + itemsArray[i].id+"'>" + itemsArray[i].code + " </option>";
            }
            $("#code"+rowNo).append(appenddata1);
            var nameVal = $("#item" + rowNo).val();
            $("#code" + rowNo + " option[value='" + nameVal + "']").attr("selected", "selected");
            $("#quantity" + rowNo).removeAttr("readonly");
            $("#price" + rowNo).removeAttr("readonly");
            $("#deliveryType" + rowNo).removeAttr("disabled");
            $("#notes" + rowNo).removeAttr("readonly");
            $("#uploadBtn" + rowNo).removeAttr("disabled");
            $("#images" + rowNo).removeAttr("disabled");
    }

    function addRow() {
            if ($("#item" + noOfRows).val() === "" || $("#code" + noOfRows).val() === "" || $("#unit" + noOfRows).val() === "" || $("#quantity" + noOfRows).val() === "" || $("#price" + noOfRows).val() === "" || $("#price" + noOfRows).val() === "0.00") {
                swal({
                    icon: 'error',
                    title: "{{__('error')}}",
                    text: "{{__('table-error-msg')}}"
                })
            } else {
                noOfRows++;
                $('#tableBody').append(`
                    <tr id="trControl${noOfRows}">
                        <input type="hidden" value="0" id="id${noOfRows}">
                        <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">${noOfRows}
                            <span style="padding: 0; margin: 0; display: block; line-height: 2px" class="control-link remove">
                                <i style="font-size: 12px" class="far fa-trash-alt"></i>
                            </span>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <select onchange="getItemName(${noOfRows})" class="form-control" id="code${noOfRows}" required>
                                <option></option>
                                ${appenddata2}
                            </select>
                            <div class="input-error" id="codeError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <select onchange="getItemCode(${noOfRows})" class="form-control" id="item${noOfRows}" required>
                                <option></option>
                                ${appenddata1}
                            </select>
                            <a onclick="openItemWindow()">
                                <i class="fa fa-fw fa-lg fa-plus-circle" style="font-size: 15px; color: green; cursor: pointer"></i>
                            </a>
                            <div class="input-error" id="itemError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <select  id="unit` + noOfRows + `" class="form-control" required>
                            </select>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <input class="form-control" type="number" id="quantity${noOfRows}" onchange="updateTotalPrice(${noOfRows})" min="0" required readonly style="padding: 3px; font-size: 13px">
                            <div class="input-error" id="quantityError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <div class="input-group flex-nowrap">
                                <input class="form-control" type="number" style="padding: 3px 0 3px 3px; font-size: 13px;
                                @if(app()->getLocale() == 'ar')
                                border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0;
                                @else
                                border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
                                @endif"
                                onchange="updateTotalPrice(${noOfRows})" id="price${noOfRows}" min="0" required readonly>
                                <span class="input-group-text" style="padding: 0 3px 0 3px; margin: 0; font-size: 13px;
                                @if(app()->getLocale() == 'ar')
                                border-top-right-radius: 0; border-bottom-right-radius: 0;
                                @else
                                border-top-left-radius: 0; border-bottom-left-radius: 0;
                                @endif">
                                    {{__('sar')}}
                                </span>
                            </div>
                            <div class="input-error" id="priceError${noOfRows}" style="padding-top: 10px; display: none; font-size: 13px"></div>
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <input class="form-control" type="number" id="total${noOfRows}" value="0" readonly style="padding: 3px; font-size: 13px">
                        </td>
                        <td style="padding: 5px 5px 5px 5px; margin: 0">
                            <input class="form-control" type="text" id="notes${noOfRows}" required readonly style="padding: 3px; font-size: 13px">
                        </td>
                    </tr>
                `);
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
                $("#unit" + noOfRows).select2({
                placeholder: "{{__('select-unit')}}",
                width: "100%",
                });
            }
    }

    function checkUpload(e) {
        var fileInput = document.getElementById('files');
        var files = fileInput.files;
    
        if (files.length !== 0) {
        $(".pdf-files").css("display", "");
        
        if ($(".file").length == 0) {
            for (var i = 0; i < files.length; i++) {
                filesArray.push(document.getElementById("files").files[i]);
                var urls = URL.createObjectURL(e.target.files[i]);
                var fileName = e.target.files[i].name;
                var fileNameWithotExt = fileName.split('.').slice(0, -1).join('.');
                
                if (fileNameWithotExt.length > 20) {
                    fileName = fileNameWithotExt.slice(0, 20) + "." + fileName.split('.').pop();
                }
                
                $(".pdf-files").append(`
                    <div class="file">
                        <span class="file-number" style="font-size: 12px; margin-left: 5px">` + (i + 1) + `</span> -
                        <span style="margin-right: 10px" class="control-link remove" onclick="removeFile(this, ` + i + `)">
                            <i style="font-size: 14px" class="far fa-trash-alt"></i>
                        </span>
                        <a target="_blank" href="` + urls + `">
                            <span style="font-size: 12px; padding: 5px" class="field-view">` + fileName + `</span>
                        </a>
                    </div>
                `);
            }
        } else {
            for (var i = 0; i < files.length; i++) {
                filesArray.push(document.getElementById("files").files[i]);
                var urls = URL.createObjectURL(e.target.files[i]);
                var fileName = e.target.files[i].name;
                var fileNameWithotExt = fileName.split('.').slice(0, -1).join('.');
                
                if (fileNameWithotExt.length > 20) {
                    fileName = fileNameWithotExt.slice(0, 20) + "." + fileName.split('.').pop();
                }
                
                var fileNo = $(".file").length;
                
                $(".pdf-files").append(`
                    <div class="file">
                        <span class="file-number" style="font-size: 12px; margin-left: 5px">` + (fileNo + 1) + `</span> -
                        <span style="margin-right: 10px" class="control-link remove" onclick="removeFile(this, ` + fileNo + `)">
                            <i style="font-size: 14px" class="far fa-trash-alt"></i>
                        </span>
                        <a target="_blank" href="` + urls + `">
                            <span style="font-size: 12px; padding: 5px" class="field-view">` + fileName + `</span>
                        </a>
                    </div>
                `);
                
                fileNo++;
            }
        }
    }
    }

    function removeFile(element, index) {
            swal({
                title: '{{__("delete-document")}}',
                text: '{{__("are-you-sure-to-delete-this-document?")}}',
                icon: "warning",
                buttons: ['{{__("no")}}', '{{__("yes")}}'],
                dangerMode: true,
            }).then((willDelete) => {
                if (willDelete) {
                    $(element).parent(".file").remove();
                    filesArray.splice(index, 1);
                    if ($(".file").length === 0)
                        $(".pdf-files").css("display", "none");
                    else {
                        for (var i = 0; i < $(".file").length; i++) {
                            $(".file .file-number")[i].innerHTML = i+1;
                        }
                    }
                    swal('{{__("the-document-deleted-successfully")}}', {
                        icon: "success",
                    });
                }
            });
    }

    function uploadImages(e, rowNo) {
        var checkIfExist = rowNo in imagesObj;
        var imagesArray = [];
        var fileInput = document.getElementById('images' + rowNo);
        var files = fileInput.files;    
    
        if (files.length !== 0) {
            $("#gallery" + rowNo).css("display", "");
            
            for (var i = 0; i < files.length; i++) {
                imagesArray.push(document.getElementById("images" + rowNo).files[i]);
                var urls = URL.createObjectURL(e.target.files[i]);
                
                $("#gallery" + rowNo).append(`
                    <span class="img">
                        <img height="50px" width="50px" src="` + urls + `">
                        <span class="control-link" onclick="removeImageFile(0, this, ` + i + `, ` + rowNo + `)">
                            <i style="color: #ca0900" class="far fa-trash-alt"></i>
                        </span>
                    </span>
                `);
            }
            
            if (checkIfExist) {
                for (var j = 0; j < imagesArray.length; j++) {
                    imagesObj[rowNo].push(imagesArray[j]);
                }
            } else {
                imagesObj[rowNo] = imagesArray;
            }
        }
    }

    function removeImageFile(id, element, index, rowNo) {
    swal({
        title: '{{__("delete-image")}}',
        text: '{{__("are-you-sure-to-delete-this-image?")}}',
        icon: "warning",
        buttons: ['{{__("no")}}', '{{__("yes")}}'],
        dangerMode: true,
    }).then((willDelete) => {
        if (willDelete) {
            if (id !== 0) {
                $.ajax({
                    type: "delete",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/sales-orders/delete-image/" + id,
                    success: function(response) {
                        //  response = JSON.parse(response);
                        if (response["status"] === 200) {
                            swal({
                                title: "Deleted Successfully",
                                text: response["message"],
                                icon: "success",
                            });
                        }
                    },
                    error: function(response) {

                    }
                });
            }
            $(element).parent(".img").remove();
            imagesObj[rowNo].splice(index, 1);
            
            if ($('#gallery' + rowNo + ' ' + '.img').length === 0) {
                $("#gallery" + rowNo).css("display", "none");
            } else {
                $("#gallery" + rowNo).empty();
                
                for (var i = 0; i < imagesObj[rowNo].length; i++) {
                    if (typeof imagesObj[rowNo][i] !== "string") {
                        var urls = URL.createObjectURL(imagesObj[rowNo][i]);
                        var string = imagesObj[rowNo][i].replace(baseUrl + "/uploads/Voucher-Details/", '');
                        var imgId = string.split("/")[0];
                    } else {
                        var urls = imagesObj[rowNo][i];
                        var imgId = 0;
                    }
                    
                    $("#gallery" + rowNo).append(`
                        <span class="img">
                            <img height="50px" width="50px" src="` + urls + `">
                            <span class="control-link" onclick="removeImageFile(` + imgId + `, this, ` + i + `, ` + rowNo + `)">
                                <i style="color: #ca0900" class="far fa-trash-alt"></i>
                            </span>
                        </span>
                    `);
                }
            }
            
            swal('{{__("the-image-deleted-successfully")}}', {
                icon: "success",
            });
        }
    });
}

        function submitForm(action) {
            var totalPrice  = parseFloat($("#total_price").val());
            var tax = parseFloat($("#total_price").val() * {{$tax}});
            var result = totalPrice + tax;
            $("#classificationError").css("display", "none")
            $("#clientError").css("display", "none")
            $("#representativeError").css("display", "none")
            $("#storeError").css("display", "none")
            $("#classificationError").html("");
            $("#select2-classification-container").css("border", "")
            $("#clientError").html("");
            $("#select2-client-container").css("border", "")
            $("#representativeError").html("");
            $("#select2-representative-container").css("border", "")
            $("#storeError").html("");
            $("#select2-store-container").css("border", "")
            var dataArray = [];
            var formData = new FormData();
            var completed = 1;
            if ($("#classification").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-classification')}}'
                })
                completed = 0;
                $("#classificationError").css("display", "")
                $("#classificationError").html("{{__('required-field')}}");
                $("#select2-classification-container").css("border", "#b7000c solid 2px")
            } else if ($("#client").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-client-name')}}'
                })
                completed = 0;
                $("#clientError").css("display", "")
                $("#clientError").html("{{__('required-field')}}");
                $("#select2-client-container").css("border", "#b7000c solid 2px")
            } else if ($("#representative").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-representative-name')}}'
                })
                completed = 0;
                $("#representativeError").css("display", "")
                $("#representativeError").html("{{__('required-field')}}");
                $("#select2-representative-container").css("border", "#b7000c solid 2px")
            } else if ($("#store").val() == "") {
                swal({
                    icon: 'error',
                    title: '{{__('error')}}',
                    text: '{{__('please-select-store')}}'
                })
                completed = 0;
                $("#storeError").css("display", "")
                $("#storeError").html("{{__('required-field')}}");
                $("#select2-store-container").css("border", "#b7000c solid 2px")
            } else {
                for (var i = 1; i <= noOfRows; i++) {
                    if ($("#item" + i).val() === "") {
                        $("#itemError" + i).css("display", "")
                        $("#itemError" + i).html("{{__('required-field')}}");
                        $("#select2-item" + i + "-container").css("border", "#b7000c solid 2px")
                    } else {
                        $("#itemError" + i).html("");
                        $("#itemError" + i).css("display", "none")
                        $("#select2-item" + i + "-container").css("border", "")
                    }
                    if ($("#code" + i).val() === "") {
                        $("#codeError" + i).css("display", "")
                        $("#codeError" + i).html("{{__('required-field')}}");
                        $("#select2-code" + i + "-container").css("border", "#b7000c solid 2px")
                    } else {
                        $("#codeError" + i).html("");
                        $("#codeError" + i).css("display", "none")
                        $("#select2-code" + i + "-container").css("border", "")
                    }
                    if ($("#quantity" + i).val() === "") {
                        $("#quantityError" + i).css("display", "")
                        $("#quantityError" + i).html("{{__('required-field')}}");
                        $("#quantity" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#quantityError" + i).html("");
                        $("#quantityError" + i).css("display", "none")
                        $("#quantity" + i).css("border", "")
                    }
                    if ($("#price" + i).val() === "" || $("#price" + i).val() == "0.00") {
                        $("#priceError" + i).css("display", "")
                        $("#priceError" + i).html("{{__('required-field')}}");
                        $("#price" + i).css("border", "#b7000c solid 2px")
                    } else {
                        $("#priceError" + i).html("");
                        $("#priceError" + i).css("display", "none")
                        $("#price" + i).css("border", "")
                    }
                    if ($("#item" + i).val() === "" || $("#code" + i).val() === "" || $("#quantity" + i).val() === "" || $("#price" + i).val() === "" || $("#price" + i).val() == "0.00") {
                        swal({
                            icon: 'error',
                            title: '{{__('error')}}',
                            text: '{{__('fill-row-error')}}' + i
                        })
                        completed = 0;
                        break;
                    } else {
                        var checkIfExist = i in imagesObj;
                        if (!checkIfExist) {
                            formData.append("images" + i + "[]", null);
                        } else {
                            var totalImages = imagesObj[i].length;
                            for (var j = 0; j < totalImages; j++) {
                                formData.append("images" + i + "[]", imagesObj[i][j]);
                            }
                        }
                        const dataObj = {
                            id: $("#id" + i).val(),
                            item_id: $("#item" + i).val(),
                            quantity: $("#quantity" + i).val(),
                            price: $("#price" + i).val(),
                            notes: $("#notes" + i).val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
            }
            if (completed === 1) {
                formData.append("salesOrderId", {{$voucher['id']}});
                formData.append("classification", $("#classification").val());
                formData.append("year", localStorage.getItem("year"));
                formData.append("number", $("#number").val());
                formData.append("date", $("#date").val());
                formData.append("purchaseOrderNumber", $("#purchaseOrderNumber").val());
                formData.append("client", $("#client").val());
                formData.append("representative", $("#representative").val());
                formData.append("totalPrice", result);
                formData.append("store", $("#store").val());
                formData.append("notes", $("#notes").val());
                var totalFiles = filesArray.length;
                for (var index = 0; index < totalFiles; index++) {
                    formData.append("files[]", filesArray[index]);
                }
                formData.append("items", JSON.stringify(dataArray));
                if (action == "save") {
                    $(".hide").css({'display': ''});
                    $(".fa-check-circle")[0].style.display = "none";
                    $("#saveAndPrintBtn").attr("disabled", true);
                    $("#btn").attr("disabled", true);
                    $("#textSpan").html("{{__("saving")}}");
                } else {
                    $(".saveAndPrintHide").css({'display': ''});
                    $(".fa-check-circle")[1].style.display = "none";
                    $("#saveAndPrintBtn").attr("disabled", true);
                    $("#btn").attr("disabled", true);
                    $("#saveAndPrintTextSpan").html("{{__("saving")}}");
                }

                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: baseUrl + "/en/ajax/sales-orders-analyzed/store",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
                        if (response["status"] === 200) {
                            {{--window.open("{{route("admin.sales-orders-analyzed.processing", [$voucher['id'],"analyzed"=>1])}}", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=300,left=200,width=1000,height=600");--}}
                            swal({
                                closeOnClickOutside: false,
                                title: "Next Step Form",
                                text: "To continue, please take a look for a sub-items and make changes if required",
                                icon: "success",
                            }).then(function () {
                                let redirectHref = '{{route("admin.sales-orders-analyzed.processing", [$voucher['id'],"is_analyse"=>1])}}'
                                window.location.href = redirectHref+"&temp_id="+response["id"];
                            })
                        } else if (response["status"] === 201) {
                            swal({
                                icon: 'error',
                                title: '{{__('error')}}',
                                text: response["message"]
                            })
                        }
                    }
                });
            }
        }

        $(document).on('click', '.table .remove', function () {
            let rowId = $(this).closest('tr')[0].getAttribute("id");
            let rowNo = rowId.charAt(rowId.length - 1);
            delete imagesObj[rowNo];
            let lastKey = Object.keys(imagesObj)[Object.keys(imagesObj).length - 1];
            for (var i = 1; i <= lastKey; i++) {
                var checkIfExist = i in imagesObj;
                if (checkIfExist && i >= rowNo) {
                    imagesObj[i - 1] = imagesObj[i];
                    delete imagesObj[i];
                }
            }
            $(this).closest('tr').remove();
            noOfRows--;
            $('.table tbody tr').each(function (i) {
                // $($(this).find('td')[0]).html(i + 1).append(`<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>`);
                $($(this).find('td')[0]).html(i + 1).append(`<!--<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>-->`);
                $($(this).find('input')[0]).attr("id", "id" + (i + 1));
                $($(this).find('td select')[0]).attr("id", "code" + (i + 1));
                $($(this).find('td div')[0]).attr("id", "codeError" + (i + 1));
                $($(this).find('td select')[1]).attr("id", "item" + (i + 1));
                $($(this).find('td div')[1]).attr("id", "itemError" + (i + 1));
                $($(this)).attr("id", "trControl" + (i + 1));
                $($(this).find('td input')[0]).attr("id", "unit" + (i + 1));
                $($(this).find('td input')[1]).attr("id", "quantity" + (i + 1));
                $($(this).find('td div')[2]).attr("id", "quantityError" + (i + 1));
                $($(this).find('td input')[2]).attr("id", "price" + (i + 1));
                $($(this).find('td div')[4]).attr("id", "priceError" + (i + 1));
                $($(this).find('td input')[3]).attr("id", "total" + (i + 1));
                $($(this).find('td input')[4]).attr("id", "notes" + (i + 1));
                $($(this).find('td button input')[0]).attr("id", "images" + (i + 1));
                $($(this).find('td button input')[0]).attr("name", "images" + (i + 1) + "[]");
                $($(this).find('td button span')[0]).attr("id", "beforeUploadSpan" + (i + 1));
                $($(this).find('td button span')[2]).attr("id", "uploadedSpan" + (i + 1));
                $($(this).find('td button')[0]).attr("id", "uploadBtn" + (i + 1));
                $($(this).find('td div')[5]).attr("id", "gallery" + (i + 1));
                $("#code" + (i + 1)).removeAttr("onchange");
                $("#code" + (i + 1)).attr("onchange", "getItemName(" + (i + 1) + ")");
                $("#item" + (i + 1)).removeAttr("onchange");
                $("#item" + (i + 1)).attr("onchange", "getItemCode(" + (i + 1) + ")");
                $("#quantity" + (i + 1)).removeAttr("onchange");
                $("#quantity" + (i + 1)).attr("onchange", "updateTotalPrice(" + (i + 1) + ")");
                $("#price" + (i + 1)).removeAttr("onchange");
                $("#price" + (i + 1)).attr("onchange", "updateTotalPrice(" + (i + 1) + ")");
                $("#images" + (i + 1)).removeAttr("onchange");
                $("#images" + (i + 1)).attr("onchange", "uploadImages(event, " + (i + 1) + ")");
            });
            var total = 0;
            var amount = 0;
            for (var i = 1; i <= noOfRows; i++) {
                if ($("#quantity" + noOfRows).val() !== "" && ($("#price" + noOfRows).val() !== "")) {
                    total = total + ($("#quantity" + i).val() * $("#price" + i).val());
                    amount = amount + parseFloat($("#quantity" + i).val());
                } else {
                    total = $("#total_price").val();
                    amount = $("#total_amount").val();
                }
            }

            $("#total_price").val(total);
            $("#total_amount").val(amount);
            $("#code" + noOfRows).select2({
                placeholder: "{{__('select-code')}}",
                width: "100%",
            });
            $("#item" + noOfRows).select2({
                placeholder: "{{__('select-item')}}",
                width: "93%",
            });
            if (noOfRows == 0) {
                noOfRows++;
                $('#tableBody').append(
                    `
                        <tr id="trControl` + noOfRows + `">
                         <input type="hidden" value="0" id="id` + noOfRows + `">
                 <td style="text-align: center; padding: 5px 5px 5px 5px; margin: 0">` + noOfRows + `<span style="padding: 0; margin: 0; display: block;line-height:2px" class="control-link remove"><i style="font-size: 12px" class="far fa-trash-alt"></i></span>
                                            </td>


<td style="padding: 5px 5px 5px 5px; margin: 0">
    <select onchange="getItemName(` + noOfRows + `)" class="form-control"
                                        id="code` + noOfRows + `" required>
                                    <option></option>
                                    ${appenddata2}
                    </select>
                     <div class="input-error" id="codeError` + noOfRows + `" style="padding-top: 10px;display:none; font-size: 13px"></div>
                </td>
                <td style="padding: 5px 5px 5px 5px; margin: 0">
                   <select onchange="getItemCode(` + noOfRows + `)" class="form-control" id="item` + noOfRows + `" required>
                      <option></option>
                      ${appenddata1}
                    </select>
                    <a onclick="openItemWindow()"><i class="fa fa-fw fa-lg fa-plus-circle"
                                                                  style="font-size: 15px; color: green; cursor: pointer"></i></a>
                    <div class="input-error" id="itemError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                </td>
                 <td style="padding: 5px 5px 5px 5px; margin: 0">
                 <input class="form-control" type="text" style="padding: 3px;font-size: 13px"
                   id="unit` + noOfRows + `" required readonly>
                </td>
<td style="padding: 5px 5px 5px 5px; margin: 0">
<input class="form-control" type="number" id="quantity` + noOfRows + `" onchange="updateTotalPrice(` + noOfRows + `)" min="0" required readonly style="padding: 3px;font-size: 13px">
                         <div class="input-error" id="quantityError` + noOfRows + `" style="padding-top: 10px; display:none; font-size: 13px"></div>
                                            </td>
                         <td style="padding: 5px 5px 5px 5px; margin: 0">
                                <div class="input-group flex-nowrap">
                                <input class="form-control" type="number" style="padding: 3px 0 3px 3px; font-size: 13px; @if(app()->getLocale() == 'ar') border-top-left-radius: 0;border-bottom-left-radius: 0; border-left: 0; @else border-top-right-radius: 0;border-bottom-right-radius: 0; border-right: 0; @endif;"
                                       onchange="updateTotalPrice(` + noOfRows + `)"
                                       id="price` + noOfRows + `" min="0" required readonly>
                                    <span class="input-group-text" style="padding: 0 3px 0 3px; margin: 0; font-size: 13px;   @if(app()->getLocale() == 'ar') border-top-right-radius: 0;border-bottom-right-radius: 0; @else border-top-left-radius: 0;border-bottom-left-radius: 0; @endif">{{__('sar')}}</span>
                                </div>
                                <div class="input-error" id="priceError` + noOfRows + `"
                                     style="padding-top: 10px;display: none; font-size: 13px"></div>
                                            </td>
                                                  <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="number" id="total` + noOfRows + `" value="0" readonly style="padding: 3px;font-size: 13px">
                                            </td>
                                            <td style="padding: 5px 5px 5px 5px; margin: 0">
                                                <input class="form-control" type="text"
                                                       id="notes` + noOfRows + `" required readonly style="padding: 3px;font-size: 13px">
                                            </td>
                                        </tr>`);
                $("#code" + noOfRows).select2({
                    placeholder: "{{__('select-code')}}",
                    width: "100%",
                });
                $("#item" + noOfRows).select2({
                    placeholder: "{{__('select-item')}}",
                    width: "93%",
                });
            }
            total_price_tax();
        });

        updateTotalPrice(rowNumber="0")
        function updateTotalPrice(rowNumber) {
            var decimalPrice = $("#price" + rowNumber).val();
            if (Number.isInteger(Number(decimalPrice))) {
                decimalPrice = Number(decimalPrice).toFixed(2);
                $("#price" + rowNumber).val(decimalPrice)
            }
            if ($("#quantity" + rowNumber).val() !== "" && ($("#price" + rowNumber).val() !== "")) {
                $("#total" + rowNumber).val($("#quantity" + rowNumber).val() * $("#price" + rowNumber).val());
            }

            var total = 0;
            var amount = 0;
            for (var i = 1; i <= noOfRows; i++) {
                if ($("#quantity" + noOfRows).val() !== "" && ($("#price" + noOfRows).val() !== "")) {
                    total = total + ($("#quantity" + i).val() * $("#price" + i).val());
                    amount = amount + (parseFloat($("#quantity" + i).val()));

                } else {
                    total = $("#total_price").val();
                    amount = $("#total_amount").val();
                }
            }
            $("#total_price").val(total);
            $("#total_amount").val(amount);
            total_price_tax();
        }

        function deleteDoc(id) {
            var element = document.getElementById("deleteBtn"+id);
            element.classList.add("form-confirm");
            const form = document.querySelector('.deleteForm');
            var url = "{{route("admin.sales-orders.destroy-document", ["id"=>':id'])}}";
            url = url.replace(':id', id);
            form.setAttribute("action", url);
            form.setAttribute("id", "delete" + id);
            if($(".file").length == 0){
                $(".pdf-files").css("display", "none");
            }
        }

        
        function total_price_tax(){
            totalPrice  = parseFloat($("#total_price").val());
            tax = parseFloat($("#total_price").val() * {{$tax}});
            result = totalPrice + tax;
            $("#total_price_tax").val(result);
        }
    </script>

@endsection