@extends('layouts.app')
@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" />
@endpush
@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('Accounting Tree') }}
            </h3>
            <div class="">
                <button id="edit-accounts" class="btn customBackGroundColore">{{ __('Edit Account') }}</button>
            </div>
        </div>
        <div>
            <div class=" mx-auto bg-white p-2 rounded rounded-2">
                <div data-get_serial_number_url="{{ route('dashboard.accounting.accounting-get-serial-number') }}"
                    class="accounts-tree" dir="rtl">
                    <ul class="tree">
                        @foreach ($accounts_tree as $account)
                            @php
                                $main_children_count = $account->children->count();
                            @endphp
                            <li class="mb-5">
                                <details open>
                                    <summary class="{{ $main_children_count > 0 ? 'caret' : '' }}">
                                        {{ $account->name }}
                                        {{ $main_children_count > 0 ? ' (' . $main_children_count . ')' : '' }}
                                        / {{ __($account->account_return) }}
                                    </summary>
                                    @if ($main_children_count > 0)
                                        @include('dashboard.accounting.tree.sub-accounts', [
                                            'account' => $account,
                                        ])
                                    @elseif($account->type != 'final')
                                        <ul>
                                            <li>
                                                <a class="text-decoration-none add-account cursor-pointer"
                                                    data-parent-id="{{ $account->id }}"
                                                    data-parent-name="{{ $account->name }}">
                                                    <i class="fas fa-plus-circle"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    @endif
                                </details>
                            </li>
                        @endforeach
                        <li>
                            <details>
                                <summary>
                                    <a class="text-decoration-none add-account cursor-pointer">
                                        {{ __('Add Main Account') }}
                                    </a>
                                </summary>
                            </details>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="add-modal" aria-labelledby="add-modal-labelledby" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" id="add-form" action="{{ route('dashboard.accounting.accounting-tree.store') }}">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add-modalLabel">{{ __('Add Item') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body ">
                        <input type="hidden" id="parent_id" name="parent_id">
                        <div class="row align-items-center">
                            <div class="form-group col-6">
                                <label> {{ __('Serial Number') }}</label>
                                <input type="text" class="form-control" name="serial_number" disabled id="serial_number">
                            </div>
                            <div class="form-group col-6">
                                <label>{{ __('Parent Account') }}</label>
                                <input type="text" class="form-control" name="parent_account" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type">{{ __('Select Account Type') }}</label>
                            <select class="form-control" name="type">
                                <option value="main">{{ __('Main Account') }}</option>
                                <option value="sub">{{ __('Sub Account') }}</option>
                                <option value="final">{{ __('Final Account') }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="type">{{ __('Select Account Return') }}</label>
                            <select class="form-control" id="return" name="return">
                                <option value="Trading">{{ __('Trading') }}</option>
                                <option value="Budget">{{ __('Budget') }}</option>
                                <option value="Profit and Loss">{{ __('Profit and Loss') }}</option>
                                <option value="Undefined" selected>{{ __('Undefined') }}</option>
                            </select>
                        </div>
                        <div class="form-group ">
                            <label for="name">{{ __('Name') }}</label>
                            <input type="text" class="form-control" name="name">

                        </div>
                        <div class="form-group ">
                            <label for="description">{{ __('Description') }}</label>
                            <textarea class="form-control" name="description"></textarea>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            {{ __('Save') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div class="modal fade" id="EditAccountModal" aria-labelledby="EditAccountModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="EditAccountModalLabel">{{ __('Edit Account') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <div class="card-body">
                        <form method="POST" action="{{ route('dashboard.accounting.update-account-return') }}"
                            id="update-account-data">
                            @csrf

                            <div class="row align-items-center">
                                <div class="form-group ">
                                    <label>
                                        {{ __('Account Name') }}
                                    </label>
                                    <select class="select2 form-control" id="account_id_for_edit" name="account_id">
                                        <option>{{ __('Select Item') }}</option>
                                        @foreach ($accounts_list as $account)
                                            <option data-return="{{ $account->account_return }}"
                                                data-name="{{ $account->name }}" value="{{ $account->id }}">
                                                {{ $account->name }} - {{ $account->serial_number }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">{{ __('Name') }}</label>
                                <input type="text" class="form-control" id="name_for_edit" name="name">
                            </div>
                            <div class="form-group ">
                                <label for="type">{{ __('Select Account Return') }}</label>
                                <select class="form-control" name="return">
                                    <option value="Trading">{{ __('Trading') }}</option>
                                    <option value="Budget">{{ __('Budget') }}</option>
                                    <option value="Profit and Loss">{{ __('Profit and Loss') }}</option>
                                    <option value="Undefined" selected>{{ __('Undefined') }}</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary" id="saveBtn">
                                {{ __('Save') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('.add-account').on('click', function() {
            let parent_id = $(this).data('parent-id');
            const add_btn = $(this);
            $('#parent_account').val($(this).data('parent-name'));
            $('#parent_id').val(parent_id);
            if (!parent_id) {
                $('#type').val('main').find('option').each(function() {
                    if ($(this).val() !== 'main') {
                        $(this).prop('disabled', true);
                    } else {
                        $(this).prop('disabled', false);
                    }
                });
            } else {
                $('#type').val('sub').find('option').each(function() {
                    if ($(this).val() == 'main') {
                        $(this).prop('disabled', true);
                    } else {
                        $(this).prop('disabled', false);
                    }
                });
                add_btn.html(
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
            }

            $.ajax({
                url: $('.accounts-tree').data('get_serial_number_url'),
                type: 'POST',
                data: {
                    parent_id: parent_id,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    $('#serial_number').val(data.serial_number);
                    if (parent_id) {
                        add_btn.html('<i class="fas fa-plus-circle"></i>');
                    }
                    $('#add-modal').modal('show');
                }
            });
        });
        $("#edit-accounts").on('click', function() {
            $("#EditAccountModal").modal('show')
        })
        $("#account_id_for_edit").on('change', function() {
            var selectedOption = $(this).find('option:selected');
            $("#return_for_edit").val(selectedOption.data('return'));
            $("#name_for_edit").val(selectedOption.data('name'));
        });
        $("#update-account-data").on('submit', function(e) {
            $('button[type="submit"]').prop('disabled', true);
            e.preventDefault();
            $(".is-invalid").removeClass('is-invalid')
            $(".invalid-feedback").remove();
            let formData = $(this).serialize();
            let action = $(this).attr('action');
            $.ajax({
                url: action,
                type: "POST",
                data: formData,
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);

                    Swal.fire({
                        title: response?.message,
                        icon: 'success'
                    })
                    window.location.reload();
                },
                error(xhr) {
                    $('button[type="submit"]').prop('disabled', false);

                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                            let newKey = key.replace('.', '[') + ']'
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                        });
                    }
                }
            });
        });
        $('#add-form').on('submit', function(e) {
            e.preventDefault();
            $(".is-invalid").removeClass('is-invalid')
            $(".invalid-feedback").remove()
            var formData = $(this).serialize();
            $('button[type="submit"]').prop('disabled', true);
            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('button[type="submit"]').prop('disabled', false);
                    $('#add-modal').modal('hide');

                    Swal.fire({
                        title: 'success',
                        icon: 'success',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('#add-form')[0].reset();
                    window.location.reload();
                },
                error: function(xhr) {
                    $('button[type="submit"]').prop('disabled', false);
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('[name="' + key + '"]').addClass('is-invalid');
                            $('[name="' + key + '"]').after('<div class="invalid-feedback">' +
                                value + '</div>');
                            let newKey = key.replace('.', '[');
                            newKey = newKey.replace('.', '][') + ']';
                            $('[name="' + newKey + '"]').addClass('is-invalid');
                            $('[name="' + newKey + '"]').after(
                                '<div class="invalid-feedback">' + value + '</div>');
                        });
                    }
                }
            });
        });
    </script>
@endsection