@extends('layouts/acc_layout')
@section('title', '| Budget Configuration')
@section('content')
    @include('successMsg')


    <div class="row">
        <div class="col-md-12">
            <div class="" style="">
                <div class="">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-options">
                                <a href="{{ url('acc/addBudgetConfig/') }}" class="btn btn-info pull-right addViewBtn"
                                    style=""><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Budget Config</a>
                            </div>
                            <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Budget
                                Configuration</h3>
                        </div>

                        <div class="panel-body panelBodyView">
                            <table class="table table-striped table-bordered" id="accBudgetConfigView">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">SL#</th>
                                        <th>Parent</th>
                                        <th>Nature</th>
                                        <th class="" width="80">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $slNo = 1;
                                    @endphp
                                    @foreach ($configs as $config)
                                        <tr>
                                            <td>{{ $slNo++ }}</td>
                                            <td class="name">{{ $config->ledgerName }}</td>
                                            <td>{{ ucfirst($config->nature) }}</td>
                                            <td class="text-center" width="80">
                                                <a href="javascript:void(0)" class="showDetails"
                                                    data-id="{{ encrypt($config->id) }}">
                                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                                </a>
                                                &nbsp
                                                <a href="javascript:;" class="deleteConfirmation"
                                                    data-id="{{ encrypt($config->id) }}">
                                                    <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- View Modal --}}
    <div class="modal fade" id="show-details-modal">
        <div class="modal-dialog" style="width:750px">
            <div class="modal-content">
                <div class="panel panel-color panel-black">
                    <div class="panel-heading">
                        <h4 class="panel-title">Setting Details</h4>
                        <div class="panel-options">
                            <a class="close" href="#" data-dismiss="modal">X</a>
                        </div>
                    </div>
                    <div style="padding:15" class="panel-body">
                      <div class="container" style="padding-bottom: 10px;">
                        <div class="row">
                            <div class="col-xs-6">
                                <p class="parentLedgerName" style="font-size: 20px; color: black;"></p>
                            </div>
                            <div class="col-xs-6">
                                <p class="parentNature" style="font-size: 20px; color: black;"></p>
                            </div>
                        </div>
                    </div>
                      {{-- <h3 class="parentLedgerName"></h3> &nbsp; <h3 class="parentNature"></h3> --}}
                        <div class="table-responsive" style="border:none!important;margin:0">
                            <table id="detailsModalTable" cellspacing="0" cellpadding="0"
                                class="table table-small-font table-striped samity-details-table-wrapper"
                                style="color: black;">
                                <thead>
                                  <tr>
                                    <th>Child</th>
                                    <th>Nature</th>
                                    <th>Percentage</th>
                                  </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- End View Modal --}}

    {{-- delete modal --}}
    <div class="modal fade" id="delete-confirmation-modal">
        <div class="modal-dialog">
            <div class="modal-header">
                <h4 class="modal-title">Delete Confirmation</h4>
                <a class="close" href="#" data-dismiss="modal">X</a>
            </div>
            <div class="modal-content">
                <div class="modal-body">
                    Are you sure to delete this item?
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group hidden">
                    <div class="col-sm-6 col-sm-offset-2">
                        {!! Form::text('id', $value = null, ['class' => 'form-control', 'id' => 'id', 'type' => 'text', 'readonly']) !!}
                    </div>
                </div>
                <button id="yesBtn" type="button" class="btn btn-info animated slideInRight"
                    style="margin-bottom:0!important;" onclick="deleteData();">Yes</button>
                <button id="noBtn" type="button" class="btn btn-white animated slideInRight" data-dismiss="modal"
                    style="margin-bottom:0!important;">No</button>
            </div>
        </div>
    </div>
    {{-- end delete modal --}}

    <style>
        table tbody td .name {
            text-align: left;
        }

        #detailsModalTable tbody tr td {
            width: 25%;
            text-align: left;
            padding-left: 5px;
        }

        .modal {
            text-align: center;
            padding: 0 !important;
        }

        .modal:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            margin-right: -4px;
            /* Adjusts for spacing */
        }

        .modal-dialog {

            display: inline-block;
            text-align: left;
            vertical-align: middle;
        }

    </style>

    <script>
        $(document).on('click', '.showDetails', function() {
            var configId = $(this).data('id');
            $('#detailsModalTable tbody').empty();
            $('.parentLedgerName', '.parentNature').empty();
            if (hasAccess('detailsBudgetConfig')) {

                $.ajax({
                    type: "POST",
                    url: "./detailsBudgetConfig",
                    data: {
                        id: configId
                    },
                    dataType: "json",
                    success: function(response) {
                        $('.parentLedgerName').html('Parent: ' + response['config']['ledgerName']);
                        $('.parentNature').html('Nature: ' + response['config']['nature']);
                        $.each(response['configDetails'], function (index, obj) { 
                           var tr = "<tr>" + 
                            "<td>" + obj['ledgerName'] + "</td>" + 
                            "<td style='text-align: center;'>" + obj['nature'] + "</td>" + 
                            "<td style='text-align: center;'>" + obj['percentage'] + "</td>" + 
                            "</tr>";
                            $('#detailsModalTable tbody').append(tr);
                        });
                        $('#show-details-modal').modal('show');
                    }
                });
            }
        });
        $(document).on('click', '.deleteConfirmation', function() {
            if (hasAccess('deleteBudgetConfig')) {
                $('#id').val($(this).data('id'));
                $('.navbar-minimal').css("z-index", "1");
                jQuery('#delete-confirmation-modal').modal('show', {
                    backdrop: 'fade'
                });
            }
        });

        function deleteData() {

            $.ajax({
                type: 'post',
                url: './deleteBudgetConfig',
                dataType: 'json',
                data: {
                    'id': $('#id').val()
                },
                success: function(_response) {
                    if (_response.responseTitle == 'Success!') {
                        toastr.success(_response.responseText, _response.responseTitle,
                            opts);
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    } else {
                        toastr.warning(_response.responseText, _response.responseTitle,
                            opts);
                    }
                },
                error: function(_response) {
                    alert(_response.errors);
                }
            });
        }
    </script>

@endsection

<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<script type="text/javascript">
</script>