@model IEnumerable<ParcelWeb.Core.Dto.GLAMFDto>

@{
    ViewBag.Title = "List Chart Of Accounts";
}

<div class="content-header row">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/Dashboard/Index">Home</a>
            </li>

            <li class="breadcrumb-item active">
                Chart Of Accounts
            </li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Chart Of Accounts</h4>
                <a class="heading-elements-toggle"><i class="icon-users2 font-medium-3"></i></a>
                <div class="heading-elements">
                    <a href="javascript:void(0)" id="btnCreate" class="btn btn-primary btn-square" style="padding:0.5rem 1rem"><i class="icon icon-plus white"></i> Add New</a>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block">
                    <div class="table-responsive">

                        <table class="table table-slim table-condensed table-bordered table-hover" id="dgvCOA" style="width:100%">
                            <thead class="thead-default">
                                <tr>
                                    <th>
                                        Code
                                    </th>
                                    <th>
                                        Account Name
                                    </th>
                                    <th>
                                        Section
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>

                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>

                                @foreach (var item in Model)
                                {
                                    <tr>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.Id)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.AccountName)
                                        </td>

                                        <td>
                                            @Html.DisplayFor(modelItem => item.Segment2)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.Segment1)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(modelItem => item.AccountType)
                                        </td>

                                        <td>
                                            <a href="@Url.Action("Edit", "GLAMF", new { id = item.Id })" class='btn js-Edit btn-icon btn-pure' data-toggle='tooltip' title='Edit'><i class='icon-pen3 info'></i></a>
                                            @*<a href="@Url.Action("Delete", "GLAMF", new { id = item.Id })" class='btn js-Delete btn-icon btn-pure' data-toggle='tooltip' title='Delete'><i class='icon-trash3 danger'></i></a>*@
                                            <button onclick="DeleteData(this)" data-id="@item.Id" type="button" class='btn js-Delete btn-icon btn-pure' data-toggle='tooltip' title='Delete'><i class='icon-trash3 danger'></i></button>
                                        </td>
                                    </tr>
                                }
                            </tbody>

                        </table>
                    </div>

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




<div class="modal fade text-xs-left" id="CreateOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title " id="UserModalLabel2"><i class="icon-plus"></i> New Account</h4>
            </div>
            <div class="modal-body" id="CreateOrEditModalBody">
                @using (Html.BeginForm("Create", "GLAMF", FormMethod.Post, new { @Id = "frmChartOfAccount", @class = "form form-horizontal" }))//data-resetUrl
                {
                    @Html.Action("Create", "GLAMF")
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <a href="javascript:void(0)" id="btnSave" class="btn btn-success"><i class="icon-check2"></i> Save & Close </a>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>

        $(document).ready(function () {

            $('#dgvCOA').DataTable();

            $('#btnCreate').click(function () {
                var modal = $('#CreateOrEditModal').modal('show');
            });

            $('#CreateOrEditModal').on('shown.bs.modal', function () {
                $("#TypeId").focus();
            })

            $("#Segment1").on('change', function () {
                var segment1 = $("#Segment1").val();
                $.ajax({
                    url: '/GLAMF/GetSegment2?Seg1=' + segment1,
                    type: 'Get',
                    dataType: 'json',
                    success: function (data) {
                        var html = "<option value=''>-Select Section-</option>";
                        for (var i = 0; i < data.length; i++) {
                            html += "<option value='" + data[i].Value + "'>" + data[i].Name + "</option>"
                        }
                        $("#Segment2").empty();
                        $("#Segment2").html(html);
                    }
                });
            });

            $("#AccountType").on('change', function () {
                if ($("#AccountType").val() === 'Bank') {
                    $("#BankInfo").show();
                }
                else {
                    $("#BankInfo").hide();
                }
            });

            $('#btnSave').click(function () {
                var form = $('#frmChartOfAccount').get(0);
                $.validator.unobtrusive.parse(form);
                if ($(form).valid()) {

                    var Data = {
                        AccountName: $('input[name="AccountName"]').val(),
                        AccountType: $('#AccountType').val(),
                        Segment1: $('#Segment1').val(),
                        Segment2: $('#Segment2').val(),
                        BankAccountTitle: $('#BankAccountTitle').val(),
                        BankAccountNumber: $('#BankAccountNumber').val(),
                        COA: $('#COA').val(),
                        SubLedger: $('input[name="SubLedger"]:checked').val()
                    };

                    //alert(JSON.stringify(Data));
                    $.ajax({
                        type: 'POST',
                        url: '/GLAMF/Create',
                        data: Data,
                        success: function (response) {
                            if (response.success) {
                                window.location.reload();
                            }
                            else {
                                MyAlert("Opps!", "Something goes wrong...!", "danger", "icon-ios-close-outline");
                            }
                        }
                    });

                }
                return false;
            });

            


        });

        function DeleteData(element) {
            var id = $(element).attr("data-id");            
            swal({
                title: "Are you sure?",
                text: "You want to Delete it Permanently!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DA4453",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel plx!",
                closeOnConfirm: false,
                closeOnCancel: true
            }, function (isConfirm) {
                if (isConfirm) {

                    $.ajax({
                        type: "GET",
                        url: '/GLAMF/Delete?id=' + id,
                        dataType: 'json',
                        success: function (data) {
                            if (data.success) {
                                swal("Deleted!", "Chart Of Account has been deleted.", "success");
                                $(element).parents('tr').remove();
                            }
                            else {
                                swal("Deleted!", "Can't Delete, Chart Of Account is already in use.", "error");
                            }
                        },
                        error: function (jqXHR) {
                            if (jqXHR.status == 400) {
                                swal("Sorry", "Something Wrong :)", "error");
                            }
                        }
                    });
                } else {
                    swal("Cancelled", "Your file is safe :)", "error");
                }
            });
        }

    </script>


    @Html.Raw(TempData["msg"])
}