{% extends 'back.html.twig' %}

{% block title %} {{ 'Asset Categories'|trans }}{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Edit {{ 'Asset'|trans }}</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ path('admin_asset_index') }}">{{ 'Assets'|trans }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit {{ 'Asset'|trans }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header with-border" style="padding-bottom: 0px;">
                           {% include '@AssetVault/asset-vault/asset/partials/asset-header-links.html.twig' %}
                        </div>
                        <div class="card-body">

                            <form class="form-horizontal" action="javascript:void(0)">

                                <div class="form-group row mb-3">
                                    <label for="name" class="col-sm-3 col-form-label">{{ 'Asset'|trans }} Name <span class="compulsory">*</span></label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="name" placeholder="{{ 'Asset'|trans }} Name" value="{{ asset.name }}">
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <label for="description" class="col-sm-3 col-form-label">{{ 'Asset'|trans }} Description </label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" rows="5" id="description" placeholder="{{ 'Asset'|trans }} Description ">{{ asset.description }}</textarea>
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <div class="col-sm-6">
                                        <label for="brand" class="col-sm-6 control-label">Brand</label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="brand" placeholder="Brand" value="{{ asset.brand }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="model" class="col-sm-6 control-label">Model</label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="model" placeholder="Model" value="{{ asset.model }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <div class="col-sm-6">
                                        <label for="purchasePrice" class="col-sm-6 control-label">Purchase Price</label>
                                        <div class="col-sm-12">
                                            <input type="number" class="form-control" id="purchasePrice" placeholder="Purchase Price" value="{{ asset.purchasePrice }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="purchaseDate" class="col-sm-6 control-label">Purchase Date</label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control datepicker_fields" id="purchaseDate" placeholder="Purchase Date" autocomplete="off" value="{{ asset.purchaseDate|date('Y-m-d') }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <div class="col-sm-6">
                                        <label for="warranty_expiry" class="col-sm-6 control-label">Warranty Expiry</label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control datepicker_fields" id="warrantyExpiry" placeholder="Warranty Expiry" autocomplete="off" value="{{ asset.warrantyExpiry|date('Y-m-d') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="category" class="col-sm-6 control-label">Category<span class="compulsory">*</span></label>
                                        <div class="col-sm-12" id="asset_category_container">
                                            <select class="form-control select2_fields" id="category">
                                                {% for category in categories %}
                                                    <option value="{{ category.id }}"
                                                    {% if asset.category.id == category.id %}
                                                        selected
                                                    {% endif %}
                                                    >{{ category.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <div class="col-sm-6">
                                        <label for="location" class="col-sm-6 control-label">Location</label>
                                        <div class="col-sm-12">
                                            <input type="text" class="form-control" id="location" placeholder="Location" autocomplete="off" value="{{ asset.location }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="supplier" class="col-sm-6 control-label">Supplier</label>
                                        <div class="col-sm-12" id="asset_supplier_container">
                                            <select class="form-control select2_fields" id="supplier">
                                                <option value="">Select Supplier</option>
                                                {% for supplier in suppliers %}
                                                    <option value="{{ supplier.id }}"
                                                    {% if asset.supplier.id == supplier.id %}
                                                        selected
                                                    {% endif %}
                                                    >{{ supplier.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row mb-3">
                                    <div class="col-sm-6">
                                        <label for="ststus" class="col-sm-6 control-label">Status</label>
                                        <div class="col-sm-12">
                                            <select class="form-control select2_fields" id="status">
                                                <option value="ACTIVE" {% if asset.status == 'ACTIVE' %}selected{% endif %}>ACTIVE</option>
                                                <option value="INACTIVE" {% if asset.status == 'INACTIVE' %}selected{% endif %}>INACTIVE</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {% for row in customFields|batch(2) %}
                                    <div class="form-group row mb-3">
                                        {% for customField in row %}
                                            <div class="col-sm-6">
                                                <label for="{{ customField['key'] }}" class="col-sm-6 control-label">{{ customField['name'] }}</label>
                                                <div class="col-sm-12">
                                                    <input type="text" class="form-control custom_field" id="{{ customField['key'] }}" placeholder="{{ customField['name'] }}"
                                                           autocomplete="off" value="{{ customField['value'] }}">
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endfor %}


                                <button type="button" class="btn btn-primary" id="updateAssetBtn" style="float: right;">Update Asset</button>

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



{% endblock %}

{% block javascripts %}

    <script type="text/javascript">

        $('#category').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#asset_category_container')
        });
        $('#supplier').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#asset_supplier_container')
        });
        $('#status').select2({
            theme: 'bootstrap-5',
        });

        $('.datepicker_fields').datepicker({dateFormat: 'yy-mm-dd',todayHighlight: true});

        $("#updateAssetBtn").on("click", function (e) {

            var button = $(this);
            var name = $.trim($("#name").val());
            var description = $.trim($("#description").val());
            var brand = $.trim($("#brand").val());
            var model = $.trim($("#model").val());
            var purchasePrice = $.trim($("#purchasePrice").val());
            var purchaseDate = $.trim($("#purchaseDate").val());
            var warrantyExpiry = $.trim($("#warrantyExpiry").val());
            var category = $.trim($("#category").val());
            var location = $.trim($("#location").val());
            var supplier = $.trim($("#supplier").val());
            var status = $.trim($("#status").val());
            var assetFields = [];
            var customFields = $(".custom_field");

            for (var i = 0; i < customFields.length; i++) {
                var subArr = {};
                subArr[$(customFields[i]).attr('id')] = $(customFields[i]).val();
                assetFields.push(subArr);
            }

            if (
                validateInput(name, '{{ 'Asset'|trans }} Name') &&
                validateInput(category, '{{ 'Asset'|trans }} Category')
            ) {
                button.attr('disabled', true);

                $.ajax({
                    type: 'post',
                    url: '{{ path('api_asset_upsert') }}',
                    data: {
                        id : {{ asset.id }},
                        name : name,
                        description : description,
                        brand : brand,
                        model : model,
                        purchasePrice : purchasePrice,
                        purchaseDate : purchaseDate,
                        warrantyExpiry : warrantyExpiry,
                        category : category,
                        location : location,
                        supplier : supplier,
                        status : status,
                        customFields : assetFields
                    },
                    success: function (html) {

                        Swal.fire(
                            'Success!',
                            '{{ 'Asset'|trans }} Added Successfully!',
                            'success'
                        );
                        // reloading the page on success
                        setTimeout(function(){ location.reload(); }, 1500);
                    },
                    fail: function () {
                        button.attr('disabled', false);
                        toastr.options.progressBar = true;
                        toastr.error('Failed to Save the {{ 'Asset'|trans }}!', 'Error!');
                    }
                });
            }

        });

    </script>

{% endblock %}