@extends('layouts.app')

@section('content')
    <section id="dom">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title-wrap bar-teal">
                            <h4 class="card-title">Chart Of Account</h4>
                            <p class="card-text">Here you can see the list of existing Chart Of Accounts.</p>
                        </div>
                        <a class="float-right" data-toggle="modal" data-keyboard="false" data-target="#addExpense">
                            <button type="button" class="btn btn-success mr-1">
                                <i class="icon-plus"></i> Create
                            </button>
                        </a>
                    </div>
                    <input type="hidden" id="sizeOf" value="{{ sizeof($accounts) }}">
                    <div class="card-body collapse show">
                        <div class="card-block card-dashboard table-responsive">
                            <table class="table table-striped table-bordered" id="dTable">
                            <thead>
                                <tr>
                                    <th>Serial #</th>
                                    <th>Account Name</th>
                                    <th>Category</th>
                                    <th>Sub Account Of</th>
                                    <th>Description</th>
                                    <th>Note</th>
                                    <th>Balance</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($accounts as $c)
                                <tr>
                                    <td>{{$c->id}}</td>
                                    <td>{{$c->name}}</td>
                                    <td>{{$c->category}}</td>
                                    <td>{{$c->sub_account==null ?  'None' : $c->sub_account}}</td>
                                    <td>{{$c->desc}}</td>
                                    <td>{{$c->note}}</td>
                                    <td>PKR {{$c->balance}}</td>
                                    <td>
                                        <a class="primary mr-2 viewBtn" title="Edit" data-id="{{$c->id}}" data-toggle="modal" data-keyboard="false" data-target="#editDetail">
                                            <i class="ft-edit font-medium-3"></i>
                                        </a>
                                        @if ($c->balance == 0)

                                        <a href="javascript:void();" id="{{$c->id}}" class="danger p-0 mr-2 delete" title="delete">
                                            <i class="ft-trash-2 font-medium-3"></i>
                                        </a>
                                        @endif
                                    </td>
                                </tr>

                                @empty
                                <tr>
                                    <td colspan="7">No record Found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                            <div id="treeview"></div>
                            {{-- @php
                                $arr = [];
                                foreach ($accounts as $item) {
                                    $arr[$item['id']]['name'] = $item['name'];
                                    $arr[$item['id']]['sub_account'] = $item['sub_account'];
                                }
                                buildTreeView($arr, 0);
                                function buildTreeView($arr, $parent, $level = 0, $prelevel = -1)
                                {
                                    foreach ($arr as $id => $data) {
                                        if ($parent == $data['sub_account']) {
                                            if ($level > $prelevel) {
                                                echo '<ol>';
                                            }
                                            if ($level == $prelevel) {
                                                echo '</li>';
                                            }
                                            echo '<li>' . $data['name'];
                                            if ($level > $prelevel) {
                                                $prelevel = $level;
                                            }
                                            $level++;
                                            buildTreeView($arr, $id, $level, $prelevel);
                                            $level--;
                                        }
                                    }
                                    if ($level == $prelevel) {
                                        echo '</li></ol>';
                                    }
                                }
                            @endphp --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- Modal --}}
    <div class="modal fade text-left" id="addExpense" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Add Account</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" id="addForm" method="POST" action="">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="category"> Select Category: </label>
                                    <select name="category" class="form-control" data-id="add">
                                        <option selected disabled>Select Option</option>
                                        <option>Income</option> Cr + Dr-
                                        <option>Expense</option> br + Cr-
                                        <option>Fixed Asset</option> br + Cr-
                                        <option>Loan</option> Cr + Dr-
                                        <option>Equity</option> Cr + Dr-
                                        <option>Inventory</option> br + Cr-
                                        <option>Account Receivable</option> br + Cr-
                                        <option>Account Payable</option> Cr + Dr-
                                        <option>Other Income</option> Cr + Dr-
                                        <option>Other Expense</option> br + Cr-
                                        <option>Other Asset</option> br + Cr-
                                        <option>Other Liability</option> Cr + Dr-
                                        <option>Cost Of Good Sold</option> br + Cr-
                                        <option>Current Asset</option> br + Cr-
                                        <option>Long Term Liability</option> Cr + Dr-
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="name"> Name: </label>
                                    <input type="text" class="form-control border-primary" name="name">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="is_sub_account"> Has Sub Account ? </label>
                                    <select name="is_sub_account" class="form-control add_form_sub">
                                        <option selected disabled>Select Option</option>
                                        <option>Yes</option>
                                        <option>No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 d-none" id="add_form_sub">
                                <div class="form-group">
                                    <label class="text-bold-500" for="sub_account"> Sub Account: </label>
                                    <select name="sub_account" id="sub_account_add" class="form-control">
                                        <option selected disabled>Select Option</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="desc"> Description: </label>
                                    <input type="text" class="form-control border-primary" name="desc">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="note"> Note: </label>
                                    <input type="text" class="form-control border-primary" name="note">
                                </div>
                            </div>
                        </div>
                        <div class="form-actions center pt-2">
                            <a href="{{ route('chart_account.index') }}">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                            </a>
                            <button type="button" class="btn btn-raised btn-success" id="saveBtn">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-left" id="editDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Edit Expense </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" id="updateForm" method="POST" action="">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <input type="hidden" class="form-control" name="id" id="id">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="category"> Select Category: </label>
                                    <select name="category" id="category" class="form-control" data-id="update">
                                        <option selected disabled>Select Option</option>
                                        <option>Income</option>
                                        <option>Expense</option>
                                        <option>Fixed Asset</option>
                                        <option>Loan</option>
                                        <option>Equity</option>
                                        <option>Inventory</option>
                                        <option>Account Receivable</option>
                                        <option>Account Payable</option>
                                        <option>Other Income</option>
                                        <option>Other Expense</option>
                                        <option>Other Asset</option>
                                        <option>Other Liability</option>
                                        <option>Cost Of Good Sold</option>
                                        <option>Current Asset</option>
                                        <option>Long Term Liability</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="name"> Name: </label>
                                    <input type="text" class="form-control border-primary" name="name" id="name">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="is_sub_account"> Has Sub Account ? </label>
                                    <select name="is_sub_account" id="is_sub_account" class="form-control update_form_sub">
                                        <option selected disabled>Select Option</option>
                                        <option>Yes</option>
                                        <option>No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 d-none" id="update_form_sub">
                                <div class="form-group">
                                    <label class="text-bold-500" for="sub_account"> Sub Account: </label>
                                    <select name="sub_account" id="sub_account" class="form-control">
                                        <option selected disabled>Select Option</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="desc"> Description: </label>
                                    <input type="text" class="form-control border-primary" name="desc" id="desc">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="text-bold-500" for="note"> Note: </label>
                                    <input type="text" class="form-control border-primary" name="note" id="note">
                                </div>
                            </div>
                        </div>
                        <div class="form-actions center pt-2">
                            <a href="{{ route('chart_account.index') }}">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                            </a>
                            <button type="submit" class="btn btn-raised btn-success">
                                <i class="icon-note"></i> Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('afterScript')
    <script>
        $(document).ready(function() {
            // $.ajax({
            //     url: '/fetch_account_all',
            //     dataType: 'json',
            //     success: function(data) {
            //         console.log(data);
            //         $('#treeview').treeview({
            //             data: data,
            //         });
            //     }
            // })
            if ($('#sizeOf').val() > 0) {
                $('#dTable').DataTable();
            }
            $('[name=category]').select2();
            $('#category').select2();

            $(document).on('change', '[name=category]', function() {
                var id = $(this).val();
                var data_id = $(this).attr('data-id');
                console.log(data_id);
                $.ajax({
                    url: 'fetch_account/' + id,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        var html = '';
                        data.forEach(element => {
                            html += '<option>' + element.name + '</option>';
                        });

                        if (data_id == 'add') {
                            $('#sub_account_add').append(html);
                        } else {
                            $('#sub_account').append(html);
                        }
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            })

            $(document).on('change', '.add_form_sub', function() {
                if ($(this).val() == 'Yes') {
                    $('#add_form_sub').removeClass('d-none');
                } else {
                    $('#add_form_sub').addClass('d-none');
                }
            })
            $(document).on('change', '.update_form_sub', function() {
                if ($(this).val() == 'Yes') {
                    $('#update_form_sub').removeClass('d-none');
                } else {
                    $('#update_form_sub').addClass('d-none');
                }
            })

            $(document).on('click', "#saveBtn", function(e) {
                e.preventDefault();

                var form_data = new FormData($("#addForm")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('chart_account.store') }}",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        swal("Inserted!", "Account has been Added Successfully!", "success");
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                        $('#addForm')[0].reset();
                    },
                    error: function(err) {
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);

                    }
                });
            });

            // $.ajaxSetup({
            //     headers: {
            //         'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            //     }
            // }); 
            $(document).on('click', '.viewBtn', function() {
                var id = $(this).attr('data-id');
                $.ajax({
                    url: 'chart_account/' + id + '/edit',
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // debugger
                        $('#id').val(data.id);
                        $('#category').val(data.category).trigger('change');
                        $('#name').val(data.name);
                        $('#is_sub_account').val(data.is_sub_account).trigger('change');
                        $('#sub_account').val(data.sub_account);
                        $('#desc').val(data.desc);
                        $('#note').val(data.note);
                        $("#updateForm").attr('action', 'chart_account/' + id + '');
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            });

            $(document).on('click', '.delete', function(e) {
                e.preventDefault();
                var id = $(this).attr('id');
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#0CC27E',
                    cancelButtonColor: '#FF586B',
                    confirmButtonText: 'Yes, Delete it',
                    cancelButtonText: "No, Cancel"
                }).then(function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "/chart_account/" + id,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function() {
                                // $('#dTable').DataTable().ajax.reload();
                                location.reload('true');
                                swal("Deleted!",
                                    "Action has been performed successfully!",
                                    "success");
                            }
                        });
                    }
                }).catch(swal.noop);
            });
        });
    </script>
@endsection