@extends('companyuser::layouts.master')
@section('title', __('accounting::chart_of_accounts.Chart of Accounts'))
@section('extra-styles')
<link href="{{url('assets/css/filter.css') }}" rel="stylesheet">
<link href="{{ url('assets/css/plugins/input-dropdown/input-dropdown.css') }}" rel="stylesheet">
<link href="{{ url('assets/css/plugins/range/range.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/table/table-custome-styles.css')}}">
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
@if(app()->getlocale() == 'en')
<style>
    div.dataTables_filter{
        display: inline-block;
        width: 50%;
        vertical-align: middle;
        text-align: right;
    }
    #accounts_table_filter{
        width: 100%;
    }
</style>
@endif
@endsection
@section('extra-script')
<script src="{{ url('assets/js/plugins/range/balance-range.js') }}" defer></script>
<script src="{{ url('assets/js/plugins/input-dropdown/input-dropdown.js') }}" defer></script>
@endsection
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a>@lang('companyuser::sidebar.Accounting')</a>
            </li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.Chart Of Accounts')</a>
            </li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section>
    <div class="container-fluid">
        <div class="headBtns fixed-btns" style="padding-bottom: 10px;">
            <div class="btn-group pull-right">
                @can('accounting.chart-of-accounts.edit')
                <a class="text-green pull-left" href="{{route('company.chart-of-accounts.update-balance-through-importing', $subdomain)}}" title="{{__('accounting::chart_of_accounts.update_balance_through_import')}}">
                    <span class="icon-Edit action-icon"></span>
                </a>
                @endcan

                @can('accounting.chart-of-accounts.create')
                <a class="text-green" href="{{url('/accounting/accounts/create')}}" title="@lang('Add')">
                    <span class="icon-Add action-icon"></span>
                </a>
                @endcan

            </div>
            @can('accounting.chart-of-accounts.export')
            <div class="mb-1">
                <a href="{{route('company.chart-of-accounts.export', ['subdomain' => $subdomain])}}" class="pull-left" title="@lang('reports::reports.download_excel')">
                    <span class="icon-Excel action-icon"></span>
                </a>
                <a href="{{route('company.chart-of-accounts.exporting-pdf', ['subdomain' => $subdomain])}}" class="pull-left" title="@lang('reports::reports.Download_Pdf')">
                    <span class="icon-Pdf action-icon"></span>
                </a>
                <a href="{{route('company.chart-of-accounts.print-accounts-list', ['subdomain' => $subdomain])}}" class="pull-left" target="_blank" title="@lang('Print')">
                    <span class="icon-Print action-icon"></span>
                </a>
            </div>
            @endcan
        </div>

        @include('companyuser::errors.all')
        @include('companyuser::errors.lists')
        <div class="mt-1">
            <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                <div class="d-flex justify-content-between">
                    <span>@lang('Filter') </span><i class="fa fa-angle-down"></i>
                </div>

            </button>
        </div>


        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('company.chart-of-accounts.index', ['subdomain' => $subdomain]) }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                <div class="card card-body mb-0">
                    <div class="row mt-1">
                        <div class="col-lg-4 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="account_subcategory_id">@lang('accounting::chart_of_accounts.Account Type')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="account_subcategory_id[]" id="account_subcategory_id" class="w-100 py-1 form-control select2-tag" style="width: 100%;">
                                        <option value="">{{__('All')}}</option>
                                        @forelse($accounting_sub_categories as $key => $account)
                                            <optgroup label="{{ $key }}">
                                                @forelse($account as $accountKey => $row)
                                                    <option @if(request('account_subcategory_id') == $accountKey) selected @endif value="{{ $accountKey }}">{{ $row }}</option>
                                                @empty
                                                @endforelse
                                            </optgroup>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="parent_accounts">@lang('accounting::chart_of_accounts.Parent Account')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="parent_accounts" id="parent_accounts" class="w-100 py-1 form-control select2-tag" style="width: 100%;">
                                        <option value="">{{__('All')}}</option>
                                        @forelse($parent_accounts as $key => $parent_account)
                                            <option @if(request('parent_accounts') == $key) selected @endif value="{{ $key }}">{{ $parent_account }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="row py-1">
                                <div class="col-lg-12">
                                    <label for="status">@lang('accounting::chart_of_accounts.Status')</label>
                                </div>
                                <div class="col-lg-12">
                                    <select name="status" id="status" class="w-100 py-1 form-control select2-tag" style="width: 100%;">
                                        <option value="">{{__('All')}}</option>
                                        <option @if(request('status') == '1') selected @endif value="1">@lang('accounting::chart_of_accounts.Active')</option>
                                        <option @if(request('status') == '0') selected @endif value="0">@lang('accounting::chart_of_accounts.Not Active')</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        {{-- <div class="col-md-6">
                                        <div class="row">
                                            <div id="rangeSliderBalance" class="range-slider px-2 ">
                                                <label class="px-1">Balance</label><br>

                                                <span class="number-group">
                                                    <input class="number-input" type="number" value="10" min="0" max="50" />
                                                </span>

                                                <span class="range-group">
                                                    <input class="range-input" value="10" min="1" max="50" step="any"
                                                        type="range" />
                                                    <input class="range-input" value="50" min="1" max="50" step="any"
                                                        type="range" />
                                                </span>
                                                <span class="number-group">
                                                    <input class="number-input" type="number" value="50" min="0" max="50" />
                                                </span>
                                            </div>
                                        </div>
                                    </div> --}}

                    </div>



                    <div class="text-left mt-2">
                        <button type="submit" class="btn btn-info mr-1 mb-1 p-5">
                            <img src="{{asset('assets/images/Done.png') }}" alt="done" width="35px">
                        </button>
                        <button type="reset" id="reset" class="btn btn-warning mb-1 p-5"> <span class="icon-Delete f-32"></span></button>
                    </div>
                </div>

            </form>

        </div>

        {{-- <div class='row my-1'>
                        <div class="col-md-7"></div>
                        <div class="col-md-5 additionalBar">
                            <span><i class="fas fa-cog fa-lg"></i></span>
                            <span class="px-1"><i class="fas fa-print fa-lg"></i></span>
                            <span><i class="fas fa-file-excel-o fa-lg"></i></span>
                        </div>

                    </div> --}}

        <div>
            <section class="mt-1" id="configuration">

                <div class="row">
                    <div class="col-xs-12">
                        <div class="card">
                            <div class="card-body">
                                <div>
                                    <div id="div-collection" class=" content-row menuDisplayed sub-header-descr">
                                        <table id = "accounts_table" class="table table-striped" style="width:100%;display: inline-table;border-collapse: collapse !important;">
                                            <thead>
                                                <tr>
                                                    <th>@lang('accounting::chart_of_accounts.Account Type')</th>
                                                    <th>@lang('accounting::chart_of_accounts.Code')</th>
                                                    <th>@lang('accounting::chart_of_accounts.Name')</th>
                                                    <th>@lang('accounting::chart_of_accounts.Parent Account')</th>
                                                    <th>@lang('accounting::chart_of_accounts.Balance')</th>
                                                    <th>@lang('accounting::chart_of_accounts.Children Sum')</th>
                                                    <th>@lang('Actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>

                                        {{---------------- popup to deactivate account -------------------------------}}
                                        {{-- to the man in the future who wana refactor this popup te be genric in all the system  --}}
                                        {{-- just take care here there is 2 popups one if the balance is zero and other if balance not zero --}}
                                        <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                            <div class="modal-dialog" 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="favoritesModalLabel">@lang('Delete')</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>
                                                            @lang('accounting::chart_of_accounts.delete confirmation message')
                                                        </p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                        <span class="pull-right">
                                                            <form action="" method="GET" class="form deactivate-account-form">
                                                                <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                                                            </form>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- deactivate account modal when account balance not equal zero --}}
                                        <div class="modal fade" id="favoritesModal2" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
                                            <div class="modal-dialog" 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="favoritesModalLabel">@lang('Deactive')</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>
                                                            @lang('accounting::chart_of_accounts.redirect to manual journal entry confirmation message')
                                                        </p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                        <span class="pull-right">
                                                            <button type="submit" class="btn btn-primary redirect-button-to-manual-journal-entry">@lang('Continue')</button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
                                            <div class="modal-dialog" 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="deleteModalLabel">@lang('Delete')</h4>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>
                                                            @lang('accounting::manual_journal_entries.delete confirmation message')
                                                        </p>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('Cancel')</button>
                                                        <span class="pull-right">
                                                            <form action="" method="POST" class="form account-delete-form">
                                                                @csrf
                                                                @method('delete')
                                                                <button type="submit" class="btn btn-primary">@lang('Continue')</button>
                                                            </form>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_accounting_chart_of_accounts_list');
        console.log('web_accounting_chart_of_accounts_list event');
    </script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function() {

            $('#favoritesModal2').on('show.bs.modal', function(event) {
                let button = $(event.relatedTarget) // Button that triggered the modal
                let endPoint = button.data('route') // Extract endpoint from data-* attributes
                $('#favoritesModal2 .redirect-button-to-manual-journal-entry').on('click', function() {
                    window.location.href = endPoint;
                });
            })

            $('#deleteModal').on('show.bs.modal', function(event) {
                let button = $(event.relatedTarget) // Button that triggered the modal
                let endPoint = button.data('url') // Extract endpoint from data-* attributes
                $('.account-delete-form').attr('action', endPoint);
            })

            $('#favoritesModal').on('show.bs.modal', function(event) {
                let button = $(event.relatedTarget) // Button that triggered the modal
                let endPoint = button.data('url') // Extract endpoint from data-* attributes
                $('.deactivate-account-form').attr('action', endPoint);
            })


            //to reset filter dropdown menus
            $('#reset').click(function(e) {
                e.preventDefault()
                $('.form-control').prop('selectedIndex', 0);
                // or val("");
                $('.select2-tag').select2({
                    allowClear: true
                });
                $('.select2-selection__clear').text("");
            });

            $('#accounts_table').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                search: true,
                responsive: true,
                ajax: {
                    url: "{{route('company.chart-of-accounts.index',$subdomain)}}",
                    data: