<?php
include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php");
echo "<h5 class='idd' style='display:none;'>" . $_GET['id'] . "</h5>";
?>
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <form action="#" class="pl-3 pr-3 form_addConfiguration">
                    <h1 style='font-size:18px; text-align:center; color:black;' class="configHeading"></h1>

                    <div class="form-group fourthInput">
                        <label for="emailaddress1">Config Type</label>

                        <select class="form-control configType" name="config_type_id">

                        </select>
                    </div>

                    <div class="form-group inventoryCategory" style="display:none;">
                        <label for="iCategory" class="inventoryCategoryLabel"></label>

                        <select class="form-control iCategory" name="iCategory">
                            <option value="" selected readonly>Select</option>
                            <?php
                            $query = mysqli_query($conn, "SELECT * FROM config WHERE config_type_id = '3'");
                            while ($spec = mysqli_fetch_assoc($query)) {
                                echo "<option style='text-align: center;'  value='" . $spec['name'] . "'>" . $spec['name'] . "</option>";
                            }
                            ?>

                        </select>
                    </div>

                    <div class="form-group secondInput">
                        <label for="name" class="Description"></label>
                        <input class="form-control" type="text" required name="name" id="name" placeholder="Enter description">
                    </div>

                    <div class="form-group serviceCharge" style="display:none;">
                        <label for="amount" class="serviceChargeLabel"></label>
                        <input class="form-control" type="number" name="amount" id="amount" placeholder="Enter amount" pattern='[0-9]+([.][0.00-9.00]+)' step='0.01'>
                    </div>


                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-rounded btn-primary submit_addConfiguration" style="width:250px;"><span class='submitLoader'>Submit</span></button>
                    </div>

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


    <div class="col-md-5">
        <div class="card">
            <div class="card-body">

                <div style="text-align:center;">
                    <h4 class="card-title"><u>Titles</u></h4>
                    <h6 class="card-subtitle"></h6>
                </div>

                <div class="table-responsive table1">
                    <table class="table" style='Width:100%'>
                        <thead>
                            <tr>
                                <th scope="col">Description</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="table-responsive table2" style="display:none;">
                    <table class="tableOther" style='Width:100%'>
                        <thead>
                            <tr>
                                <th scope="col">Description</th>
                                <th scope="col">Amount</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="table-responsive table3" style="display:none;">
                    <table class="tableOther1" style='Width:100%'>
                        <thead>
                            <tr>
                                <th scope="col">Category</th>
                                <th scope="col">Description</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    $(".submit_addConfiguration").on("click", function() {
        $(".form_addConfiguration").submit(function(e) {
            $.ajax({
                url: domain_api + "/other-configs/create.php",
                type: "POST",
                data: $(this).serialize(),
                beforeSend: function() {

                    $(".submit_addConfiguration").attr("disabled", "disabled");
                    $(".submitLoader").html("<i class='fa fa-spinner fa-spin'></i>")
                },
                success: function(data) {

                    $(".submitLoader").html("Submit");
                    $(".submit_addConfiguration").attr("disabled", false);
                    if (data.code == 200) {
                        var dataSrcc = sessionStorage.getItem("dataSrcc");
                        swal("Succes!", "Configuration was successfully added!", "success");
                        if (dataSrcc == "charges") {
                            var table = $('.tableOther').DataTable({
                                bDestroy: true,
                                responsive: true,
                                "ajax": {
                                    "url": domain_api + "/other-configs/configs1.php",
                                    "dataSrc": dataSrcc
                                },
                                "columns": [

                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<span class="configName">' + data.name + '</span>' +
                                                '<input class="form-control configNameEdit" type="text" value="' + data.name + '" data-id="' + data.id + '" data-config_type_id="' + data.config_type_id + '" data-name="' + data.name + '" autofocus name="name" id="name" placeholder="Enter description" style="display:none; text-align:center">'

                                        }
                                    },
                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<span class="configAmount">' + data.amount + '</span>' +
                                                '<input class="form-control configAmountEdit" type="number" value="' + data.amount + '" autofocus name="name" id="name" placeholder="Enter amount" style="display:none; text-align:center">'

                                        }
                                    },
                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<div class="btn btnn btn-success action"  title="Profile" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-edit"></i></div>' +
                                                '<div class="btn btnn btn-danger actionDelete" title="Delete"><i class="ii fa fa-trash"></i></div>' +
                                                '<div class="deleteOptions" style="display:none;">Are you sure?</div>' +
                                                '<span class="deleteOptions" style="display:none;"><span class="cancelConfigDel" style="cursor:pointer; color:green;">No</span> &nbsp;&nbsp;&nbsp;&nbsp;<span class="configDel" data-id="' + data.id + '" style="color:red; cursor:pointer;">Yes</span></span>'
                                        }
                                    }
                                ]
                            });
                            new $.fn.dataTable.FixedHeader(table);
                        } else if (dataSrcc == "inventory_item_description") {
                            var table = $('.tableOther1').DataTable({
                                bDestroy: true,
                                responsive: true,
                                "ajax": {
                                    "url": domain_api + "/other-configs/configs1.php",
                                    "dataSrc": dataSrcc
                                },
                                "columns": [
                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<span class="configAmount">' + data.category + '</span>' +
                                                '<input class="form-control" type="number" value="' + data.category + '" autofocus name="name" id="name" placeholder="Enter amount" style="display:none; text-align:center">'

                                        }
                                    },
                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<span class="configName">' + data.name + '</span>' +
                                                '<input class="form-control configNameEdit" type="text" value="' + data.name + '" data-id="' + data.id + '" data-config_type_id="' + data.config_type_id + '" data-name="' + data.name + '" autofocus name="name" id="name" placeholder="Enter description" style="display:none; text-align:center">'

                                        }
                                    },
                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<div class="btn btnn btn-success action"  title="Profile" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-edit"></i></div>' +
                                                '<div class="btn btnn btn-danger actionDelete" title="Delete"><i class="ii fa fa-trash"></i></div>' +
                                                '<div class="deleteOptions" style="display:none;">Are you sure?</div>' +
                                                '<span class="deleteOptions" style="display:none;"><span class="cancelConfigDel" style="cursor:pointer; color:green;">No</span> &nbsp;&nbsp;&nbsp;&nbsp;<span class="configDel" data-id="' + data.id + '" style="color:red; cursor:pointer;">Yes</span></span>'
                                        }
                                    }
                                ]
                            });
                            new $.fn.dataTable.FixedHeader(table);
                        } else {
                            var table = $('.table').DataTable({
                                bDestroy: true,
                                responsive: true,
                                "ajax": {
                                    "url": domain_api + "/other-configs/configs1.php",
                                    "dataSrc": dataSrcc
                                },
                                "columns": [{
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<span class="configName">' + data.name + '</span>' +
                                                '<input class="form-control configNameEdit" type="text" value="' + data.name + '" data-id="' + data.id + '" data-config_type_id="' + data.config_type_id + '" data-name="' + data.name + '" name="name" id="name" placeholder="Enter description" style="display:none; text-align:center">'
                                        }
                                    },
                                    {
                                        "data": null,
                                        render: function(data, type, row) {
                                            return '<div class="btn btnn btn-success action"  title="Profile" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-edit"></i></div>' +
                                                '<div class="btn btnn btn-danger actionDelete" title="Delete"><i class="ii fa fa-trash"></i></div>' +
                                                '<div class="deleteOptions" style="display:none;">Are you sure?</div>' +
                                                '<span class="deleteOptions" style="display:none;"><span class="cancelConfigDel" style="cursor:pointer; color:green;">No</span> &nbsp;&nbsp;&nbsp;&nbsp;<span class="configDel" data-id="' + data.id + '" style="color:red; cursor:pointer;">Yes</span></span>'
                                        }
                                    }
                                ]
                            });
                            new $.fn.dataTable.FixedHeader(table);
                        }



                    } else {
                        swal("Oops!", "Saving was not successful, you should try again!", "error");
                    }
                }
            });
            e.preventDefault();
        })
        $(this).off();
    });
</script>