@extends('layouts.master')

@section('title', 'Chart Of Accounts | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.chart of accounts'))

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- -- datatables plugin -- -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.3.9/css/autoFill.bootstrap5.min.css">
@endsection


<!-- content insert -->
@section('content')

<div class="container-fluid px-0 px-md-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        {{-- <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="text-gray-300">{{ __('basic.chart of accounts') }}</a>
        </span> --}}
    </div>

    <div class="row">


        {{-- accounts trees --}}
        <div class="col-12 col-lg-3 mb-4">

            <div class="card card-input shadow mb-3 pb-3">

                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-receipt me-1"></i>
                        {{ __('basic.chart of accounts') }}</h6>
                </div>

                <!-- Card Body -->
                <div class="card-body px-2 px-md-2">


                    <ul id="tree1">
                        @foreach($accounts as $item)
                        <li>
                            <div class="clickable-item-pointer show_acc_cont chart_acc_main_item chart_acc_open_chart d-inline"
                                data-id="{{ $item->id }}">
                                {{ $item->name }}
                            </div>

                            @if(count($item->childs))
                            @include('invoice/acc/acc_account.manageChild',['childs' => $item->childs])
                            @endif
                        </li>
                        @endforeach
                    </ul>

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


        {{-- show accounts --}}
        <div class="col-12 col-lg-9 px-4">


            @if ($show_account)


            <div class="card shadow mb-3 pb-2 p-4">
                <!-- Card Header - Dropdown -->

                <div class="d-flex justify-content-between align-items-center">

                    @if ($show_account->origin == 0)
                    @php
                    $acc_type = __('basic.credit account');
                    $acc_color = "active-color-btn";
                    @endphp
                    @else
                    @php
                    $acc_type = __('basic.debit account');
                    $acc_color = "not_accepted-color-btn";
                    @endphp
                    @endif

                    <div class="text-center">
                        <h6 class="text-gray-300 text-xs mb-1 text-center">{{ __('basic.type') }}</h6>
                        <span class="badge rounded-pill badge-padd-l {{ $acc_color }} text-truncate">
                            {{ $acc_type }}</span>
                    </div>

                    <div class="">
                        <h6 class="text-gray-300 text-xs mb-1 text-center">{{ __('basic.account') }}</h6>
                        <p id="branch_final_info" class="text-gray-600 text-s fw-bold text-center">
                            <span class="text-gray-400">{{ $show_account->code }}</span> {{ $show_account->name }}
                        </p>
                    </div>

                    <div class="main-color-bg text-white b-r-l-cont py-3 px-4 text-center">
                        <p class="mb-0 text-s text-blue-300">{{ __('basic.current balance') }}</p>
                        <h3 class="fw-bold">
                            {{ $show_account->current_balance_local }}
                        </h3>
                    </div>

                </div>

                <!-- Card Body -->
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table display datatable-modal" id="p-lab-table" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th class="text-xxs">{{ __('basic.transaction') }}</th>
                                    <th class="text-xxs text-center">{{ __('basic.debit') }}</th>
                                    <th class="text-xxs text-center">{{ __('basic.credit') }}</th>
                                    <th class="text-xxs text-center">{{ __('basic.current balance') }}</th>
                                    <th class="text-xxs text-center"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($show_account->entry_items as $item)
                                <tr>

                                    <td>
                                        <div class="d-flex align-content-center">

                                            @php
                                            $icon = "fas fa-wallet";
                                            $icon_color = "main-color";
                                            @endphp

                                            <h2 class="me-2">
                                                <i class="{{ $icon . " " . $icon_color }}"></i>
                                            </h2>
                                            <div>
                                                <h6 class="mb-0">
                                                    {{ "(". $item->id . ")" . $item->date }}
                                                </h6>
                                                <p class="text-gray-300">{{ $item->description . "(". $item->code . ")"
                                                    }}</p>
                                            </div>
                                        </div>
                                    </td>

                                    <td>
                                        <h6 class="text-center">
                                            {{ $item->debit_local }} <small class="text-gray-300 text-xxxs">
                                                {{ $system_currency->code }}
                                            </small>
                                        </h6>
                                        @if($item->entry->currency_rate)
                                        <h6 class="text-center text-gray-300">
                                            {{ $item->debit }} <small class="text-gray-300 text-xxxs">
                                                {{ $item->currency->code }}
                                            </small>
                                        </h6>
                                        @endif
                                    </td>


                                    <td>
                                        <h6 class="text-center">
                                            {{ $item->credit_local .' ' . $system_currency->code}}
                                        </h6>
                                        @if($item->entry->currency_rate)
                                        <h6 class="text-center text-gray-300">
                                            {{ $item->credit }} <small class="text-gray-300 text-xxxs">
                                                {{ $item->currency->code }}
                                            </small>
                                        </h6>
                                        @endif
                                    </td>

                                    <td>
                                        <h5 class="text-center fw-bold">
                                            {{ $item->account_balance_local .' ' . $system_currency->code}}
                                        </h5>
                                        @if($item->entry->currency_rate)
                                        <h6 class="text-center text-gray-300">
                                            {{ $item->account_balance }} <small class="text-gray-300 text-xxxs">
                                                {{ $item->currency->code }}
                                            </small>
                                        </h6>
                                        @endif
                                    </td>

                                    <td class="text-center">
                                        <a href="{{ route('sett.acc_entry.show', $item->acc_entry_id) }}"
                                            class="btn btn-sm status-col-link status-col-link not_accepted-color-btn b-r-xs mb-1"
                                            title="edit"><i class="fas fa-eye"></i></a>
                                    </td>

                                </tr>
                                @endforeach


                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

            @else
            <div id="show_account_cont" class="row">
                @foreach ($accounts as $item)
                <div class="col-12 col-xs-6 col-md-3 mb-3 show_acc_cont" data-id="{{ $item->id }}">
                    <div class="mb-3 px-2 pt-5 chart_tree_cont_top">
                        @if(!in_array($item->id, [1,2,3,4,5]))
                        <div class="d-flex align-items-center justify-content-center rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer chart_tree_cont_delete_icon delete_account_modal"
                            data-id="{{ $item->id }}">
                            <i class="fas fa-times text-xs"></i>
                        </div>
                        @endif
                        <h2 class="chart_tree_cont_top_icon">
                            <i class="fas fa-folder"></i>
                        </h2>
                        <div class="d-flex justify-content-center">
                            <div class="text-center">
                                <h6 class="text-gray-400">{{ $item->code }}</h6>
                                <h6 class="fw-bold mb-0"> {{ $item->name }} </h6>
                                <p class="mb-0 text-gray-400 text-s">{{ __('basic.type') . ": ".
                                    $item->account_type->name }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

                <div class="col-12 col-xs-6 col-md-3 mb-3">
                    <div class="mb-3 p-4 chart_tree_cont_top">
                        <div class="d-flex justify-content-center" data-bs-toggle="modal" data-bs-target="#add_account">
                            <div class="text-center text-gray-300 link-cust-text">
                                <h2 class=""><i class="fas fa-plus"></i></h2>
                                <h6 class="fw-bold"> {{__('basic.new account') }}</h6>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            @endif



        </div>




    </div>

</div>


<!-- Modal for paying installment -->
<div class="modal fade" id="add_account" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">

        <form class="mb-0 add_acc_form" action="{{ route('sett.acc_account.store') }}" method="POST"
            style="display: contents">
            @csrf

            <div class="modal-content b-r-s-cont border-0">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-wallet me-1"></i>
                        {{ __('basic.new account') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal content -->
                <div class="modal-body px-5 py-3">

                    <div class="row">

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.name') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <input name="name" type="text" class="form-control @error('name') is-invalid @enderror"
                                placeholder="Account Name.." required>

                            @error('name')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label">{{ __('basic.code') }}
                                <small>({{ __('basic.required') }})</small></label>

                            @php
                            $acc_code_last = $accounts->last()->code + 1;
                            @endphp
                            <input id="code_form" name="code" type="text"
                                class="form-control @error('code') is-invalid @enderror"
                                placeholder="Account code such as 1, 2, 11 .." value="{{ $acc_code_last }}" required>

                            @error('code')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label"> {{ __('basic.account type') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <select id="acc_account_type_id"
                                class="js-example-basic-single select2-hidden-accessible @error('acc_account_type_id') is-invalid @enderror"
                                name="acc_account_type_id" required>
                                @foreach ($accout_types as $item)
                                <option value="{{ $item->id }}">
                                    {{ $item->name }}
                                </option>
                                @endforeach
                            </select>
                            <div id="acc_account_type_id-js-error-valid"></div>

                            @error('acc_account_type_id')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label class="form-label"> {{ __('basic.account orgian') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <select id="origin"
                                class="select2-no-search select2-hidden-accessible @error('origin') is-invalid @enderror"
                                name="origin" required>
                                <option value="0">
                                    {{ __('basic.credit') }}
                                </option>
                                <option value="1">
                                    {{ __('basic.debit') }}
                                </option>
                            </select>
                            <div id="origin-js-error-valid"></div>

                            @error('origin')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div id="account_cat_cont" class="col-12 mb-3" style="display: none">
                            <label class="form-label"> {{ __('basic.account category') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <select id="account_cat"
                                class="select2-no-search select2-hidden-accessible @error('account_cat') is-invalid @enderror"
                                name="account_cat" required>
                                <option value="1">
                                    {{ __('basic.main') }}
                                </option>
                                <option value="2">
                                    {{ __('basic.sub') }}
                                </option>
                            </select>
                            <div id="account_cat-js-error-valid"></div>

                            @error('account_cat')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div id="report_cont" class="col-12 mb-3">
                            <label class="form-label"> {{ __('basic.report') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <select id="report"
                                class="select2-no-search select2-hidden-accessible @error('report') is-invalid @enderror"
                                name="report" required>
                                <option value="1">
                                    {{ __('basic.balance sheet') }}
                                </option>
                                <option value="2">
                                    {{ __('basic.income statement') }}
                                </option>
                            </select>
                            <div id="report-js-error-valid"></div>

                            @error('report')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <div class="mb-3">
                                <label class="form-label">{{ __('basic.description') }} <small>({{ __('basic.optional')
                                        }})</small></label>
                                <textarea name="description" class="form-control"
                                    placeholder="Write here your description .." rows="4" spellcheck="false"></textarea>
                            </div>

                            @error('description')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <div class="left-side">
                        <button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{
                            __('basic.never mind') }}</button>
                    </div>
                    <div class="divider"></div>
                    <div class="right-side">
                        <input type="hidden" name="parent_account_id" id="parent_account_id" value="0">
                        <button type="submit" class="btn btn-default btn-link main-color">{{
                            __('basic.add new') }}</button>
                    </div>
                </div>

            </div>
        </form>

    </div>

</div>


{{-- modal fore deleteing account --}}
<div class="modal fade" id="delete_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable ">
        <div class="modal-content b-r-s-cont border-0">

            <div class="modal-header">
                <div class="modal-title" id="exampleModalLabel"><i class="fas fa-trash me-1"></i>
                    {{ __('basic.delete') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form action="{{ route('sett.acc_account.destroy', 'test') }}" method="post">
                {{ method_field('delete') }}
                {{ csrf_field() }}

                <!-- Modal content -->
                <div class="modal-body px-4">
                    <div class="modal-body delete-conf-input text-center py-0">
                        <p class="mb-0">{{ __('basic.delete message') }}</p><br>
                        <input type="hidden" id="delete_item_id" name="item_id" value="">
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="left-side">
                        <button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{
                            __('basic.never mind') }}</button>
                    </div>
                    <div class="divider"></div>
                    <div class="right-side">
                        <button type="submit" class="btn btn-default btn-link text-red">{{
                            __('basic.delete') }}
                        </button>
                    </div>

                </div>
            </form>

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


@endsection

<!-- js insert -->
@section('js')

<script>
    // chart of trees
    $.fn.extend({


    treed: function (o) {

        var openedClass = 'fas fa-folder-plus';
        var closedClass = 'fas fa-folder-minus';

        if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
                openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
                closedClass = o.closedClass;
            }
        };

        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul

            $(this).prepend("<i class='indicator glyphicon " + openedClass + "'></i>");

            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(closedClass + " " + openedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });

        //fire event from the dynamically added icon
        tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
        });
        tree.find('.branch .chart_acc_open_chart').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
        });

        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }



});
//Initialization of treeviews
$('#tree1').treed();

$('#tree2').treed({closedClass:'glyphicon-folder-open', openedClass:'glyphicon-folder-close'});

$('#tree3').treed({closedClass:'glyphicon-chevron-right', openedClass:'glyphicon-chevron-down'});
</script>





<script>
    // show accounts

    $(document).on('click', '.show_acc_cont', function() {

        var id = $(this).data('id');

        var url = "{{ route('sett.chart_of_accounts_show_ajax', [':parent_id']) }}";
        url = url.replace(':parent_id', id);
        $.ajax({
            url: url,
            type: "GET",
            success: function(data) {

                var html = ''

                //main account
                if(data.cat == 1){
                    $.each(data.accounts, function(key, value) {
                        if(value.cat == 1){
                            html +=
                        '<div class="col-12 col-xs-6 col-md-3 mb-3 show_acc_cont" data-id="' + value.id + '">' +
                        '<div class="mb-3 px-2 pt-5 chart_tree_cont_top">' +
                        //remove account
                        '<div class="d-flex align-items-center justify-content-center rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer chart_tree_cont_delete_icon delete_account_modal" data-id="' + value.id + '">' +
                            '<i class="fas fa-times text-xs"></i>' +
                        '</div>' +
                        ' <h2 class="chart_tree_cont_top_icon">' +
                            '<i class="fas fa-folder"></i>' +
                            '</h2>' +
                                '<div class="d-flex justify-content-center">' +
                                    '<div class="text-center">' +
                                        '<h6 class="text-gray-400">' + value.code + '</h6>' +
                                        '<h6 class="fw-bold mb-0">' + value.name + ' </h6>' +
                                        '<p class="mb-0 text-gray-400 text-s">{{ __('basic.type') }}'  +  ': ' +
                                        value.account_type.name +
                                    '</p>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>';
                        }else{
                            html +=
                            '<div class="col-12 col-xs-6 col-md-3 mb-3 show_acc_cont" data-id="' + value.id + '">' +
                            '<div class="mb-3 px-2 pt-5 chart_tree_cont_top">' +
                            //remove account
                            '<div class="d-flex align-items-center justify-content-center rounded-circle avatar-xxs cancel-color-btn clickable-item-pointer chart_tree_cont_delete_icon delete_account_modal" data-id="' + value.id + '">' +
                                '<i class="fas fa-times text-xs"></i>' +
                            '</div>' +
                            '<h2 class="chart_tree_cont_top_icon" style="background-color: #989ba5;">' +
                                '<i class="fas fa-file"></i>' +
                            '</h2>' +
                                    '<div class="d-flex justify-content-center">' +
                                        '<div class="text-center">' +
                                            '<h6 class="text-gray-400">' + value.code + '</h6>' +
                                            '<h6 class="fw-bold mb-0">' + value.name + ' </h6>' +
                                            '<p class="mb-0 text-gray-400 text-s">{{ __('basic.type') }}'  +  ': ' +
                                            value.account_type.name +
                                        '</p>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                            '</div>';
                        }

                    })

                    if(data.cat == 1){
                        html +=  '<div class="col-12 col-xs-6 col-md-3 mb-3">' +
                            '<div class="mb-3 p-4 chart_tree_cont_top">' +
                            '<div class="d-flex justify-content-center" data-bs-toggle="modal" data-bs-target="#add_account">' +
                                    '<div class="text-center text-gray-300 link-cust-text">' +
                                        '<h2 class=""><i class="fas fa-plus"></i></h2>' +
                                        '<h6 class="fw-bold"> {{__("basic.new account") }}</h6>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>';
                    }
                }
                // sub account
                else{

                    if(data.accounts.origin == 0){
                        var acc_type = '{{ __("basic.credit account") }}';
                        var acc_color = "active-color-btn";
                    }else{
                        var acc_type = '{{ __("basic.debit account") }}';
                        var acc_color = "not_accepted-color-btn";
                    }

                    html +=  '<div class="card shadow mb-3 pb-2 p-4">' +
                       '<div class="d-flex justify-content-between align-items-center">' +
                            '<div class="text-center">' +
                                '<h6 class="text-gray-300 text-xs mb-1 text-center">{{ __("basic.type") }}</h6>' +
                                '<span class="badge rounded-pill badge-padd-l ' + acc_color + ' text-truncate">'
                                    + acc_type + '</span>' +
                            '</div>' +

                            '<div class="">' +
                                '<h6 class="text-gray-300 text-xs mb-1 text-center">{{ __("basic.account") }}</h6>' +
                               '<p id="branch_final_info" class="text-gray-600 text-s fw-bold text-center">' +
                                    '<span class="text-gray-400">' + data.accounts.code + ' </span>' + data.accounts.name +
                               '</p>' +
                            '</div>' +

                            '<div class="main-color-bg text-white b-r-l-cont py-3 px-4 text-center">' +
                                '<p class="mb-0 text-s text-blue-300">{{ __("basic.current balance")}}</p>' +
                                '<h3 class="fw-bold">' + data.accounts.current_balance + '</h3>' +
                            '</div>' +
                        '</div>' +

                        '<div class="card-body">' +

                            '<div class="table-responsive">' +
                               '<table class="table display datatable-modal" id="p-lab-table" width="100%" cellspacing="0">' +
                                    '<thead>' +
                                        '<tr>' +
                                            '<th class="text-xxs">{{ __("basic.transaction") }}</th>' +
                                            '<th class="text-xxs text-center">{{ __("basic.debit") }}</th>' +
                                            '<th class="text-xxs text-center">{{ __("basic.credit") }}</th>' +
                                            '<th class="text-xxs text-center">{{ __("basic.current balance") }}</th>' +
                                            '<th class="text-xxs text-center"></th>' +
                                       '</tr>' +
                                   '</thead>' +
                            '<tbody>';


                            $.each(data.accounts.entry_items, function(key, value) {
                                html += '<tr>' +
                                '<td>' +
                                    '<div class="d-flex align-content-center">' +
                                            '<h2 class="me-2">' +
                                                '<i class="fas fa-wallet main-color"></i>' +
                                        '</h2>' +
                                            '<div>' +
                                                '<h6 class="mb-0">' +
                                                    '(' +  value.id + ')' + value.date +
                                                '</h6>' +
                                            '<p class="text-gray-300">' + value.description + '(' + value.code + ')' + '</p>' +
                                            '</div>' +
                                        '</div>' +
                                    '</td>' +

                                    '<td>' +
                                        '<h6 class="text-center">' +
                                            value.debit + ' ' + value.currency.code +
                                        '</h6>' +
                                    '</td>' +
                                    '<td>' +
                                        '<h6 class="text-center">' +
                                            + value.credit + ' ' + value.currency.code +
                                        '</h6>'+
                                    '</td>' +

                                    '<td>' +
                                        '<h5 class="text-center fw-bold">' +
                                            value.account_balance + ' ' + value.currency.code +
                                        '</h5>' +
                                    '</td>' +

                                    '<td class="text-center">' +
                                        '<a' + 'class="btn btn-sm status-col-link status-col-link not_accepted-color-btn b-r-xs mb-1" title="edit"><i class="fas fa-eye"></i></a>' +
                                    '</td>' +

                                '</tr>';
                            });

                            html +=     '</tbody>' +
                                    '</table>' +
                                '</div>' +
                            '</div>' +
                        '</div>';
                }


                $('#account_cat_cont').show();
                $('#report_cont').hide();
                $('#code_form').val(data.code);
                $('#parent_account_id').val(data.parent_id);

                $('#show_account_cont').html(html);

                var table = $('#p-lab-table').DataTable({
                            lengthChange: false,
                            "pageLength": 10,
                            "order": [
                                [0, "DESC"]
                            ],
                            buttons: {
                                dom: {
                                    button: {
                                        className: 'btn btn-table-export me-0' //Primary class for all buttons
                                    }
                                },
                                buttons: [{extend: 'copyHtml5',footer: true},
                                    { extend: 'excelHtml5', footer: true },
                                    { extend: 'pdfHtml5', footer: true },
                                    {  extend: 'print', footer: true}
                                ]
                            }
                        }

                );
                table.buttons().container()
                    .appendTo('#p-lab-table_wrapper .col-md-6:eq(0)');

                }
        });

    });


    $(document).on('click', '.delete_account_modal', function() {
        var id = $(this).data('id');
        $('#delete_item_id').val(id);
        $("#delete_modal").modal("show");
    })
</script>
<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $(".js-example-basic-single").select2({
                dropdownParent: $("#add_account")
            });

            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<!-- validate jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
    integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    //Rules for the Validator plugin
        var $validator = $('#myform').validate({
            rules: {
                name: {
                    minlength: 3,
                },
            },
            messages: {
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of name@domain.com"
                },
                password_confirmation: {
                    equalTo: "Password does not match",
                }
            },
            //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
            errorPlacement: function(error, element) {
                switch (element.attr("name")) {
                    case 'role':
                        error.insertAfter($("#role-js-error-valid"));
                        break;
                    case 'gendar':
                        error.insertAfter($("#gendar-js-error-valid"));
                        break;
                    default:
                        error.insertAfter(element);
                }

            },
        });
        var $validator = $('.add_acc_form').validate({
            rules: {
                name: {
                    minlength: 3,
                },
            },
            messages: {
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of name@domain.com"
                },
                password_confirmation: {
                    equalTo: "Password does not match",
                }
            },
            //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
            errorPlacement: function(error, element) {
                switch (element.attr("name")) {
                    case 'role':
                        error.insertAfter($("#role-js-error-valid"));
                        break;
                    case 'gendar':
                        error.insertAfter($("#gendar-js-error-valid"));
                        break;
                    default:
                        error.insertAfter(element);
                }

            },
        });
</script>





{{-- data table --}}


<script>
    $(document).ready(function() {


        var table = $('#p-lab-table').DataTable({
                        lengthChange: false,
                        "pageLength": 10,
                        "order": [
                            [0, "DESC"]
                        ],
                        buttons: {
                            dom: {
                                button: {
                                    className: 'btn btn-table-export me-0' //Primary class for all buttons
                                }
                            },
                            buttons: [{extend: 'copyHtml5',footer: true},
                                { extend: 'excelHtml5', footer: true },
                                { extend: 'pdfHtml5', footer: true },
                                {  extend: 'print', footer: true}
                            ]
                        }
                    }

            );
            table.buttons().container()
                .appendTo('#p-lab-table_wrapper .col-md-6:eq(0)');
    });

</script>


<!-- -- datatables plugin -- -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>

<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
<script
    src="https://nightly.datatables.net/fixedheader/js/dataTables.fixedHeader.js?_=f0de745b101295e88f1504c17177ff49">
</script>


@endsection