@extends('newDashboard.index')

@section('css')
@endsection

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header d-flex justify-content-between align-items-center" style="margin-bottom: 30px;">
            <h3 class="page-title mb-0 ">
                <span class="page-title-icon  bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span>
                {{ __('messages.Add purchase') }}
            </h3>
            <button id="edit-accounts" class="btn customBackGroundColore">{{__("messages.Edit Account")}}</button>
        </div>

        {{-- Add Modal --}}
        <div class="container" id="AddCategoryModal">
            <div class="">
                <div class="modal-content" style="background: #fbfbfb;">
                    <div class="modal-header">
                        <div class="col-12">
                            <div class="modal-body row">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12 mx-auto">
                                            <div 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 . ')' : '' }}
                                                                    / {{ __('messages.'.$account->account_return) }}
                                                                </summary>
                                                                @if ($main_children_count > 0)
                                                                    @include(
                                                                        'newDashboard.components.subaccounts',
                                                                        ['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">
                                                                    {{ __('messages.Add Main Account') }}
                                                                </a>
                                                            </summary>
                                                        </details>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="AddAccountModal" aria-labelledby="AddAccountModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="AddAccountModalLabel">{{ __('messages.Add new Account') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body row">
                        <ul id="save_msgList"></ul>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mx-auto">
                                    <form method="POST" action="{{ route('account.store') }}">
                                        @csrf
                                        <input type="hidden" id="parent_id" name="parent_id">
                                        <div class="row align-items-center">
                                            <div class="form-group col-6">
                                                <label>
                                                    {{ __('messages.serial_number') }}
                                                </label>
                                                <input type="text" class="form-control" id="serial_number"
                                                       name="serial_number" disabled>
                                            </div>
                                            <div class="form-group col-6">
                                                <label>
                                                    {{ __('messages.parent_account') }}
                                                </label>
                                                <input type="text" class="form-control" id="parent_account"
                                                       name="parent_account" disabled>
                                            </div>
                                        </div>
                                        <div
                                                class="form-group
                                            {{ $errors->has('type') ? 'has-error' : '' }}">
                                            <label for="type">{{ __('messages.Select Account Type') }}</label>
                                            <select class="form-control" id="type" name="type">
                                                <option disabled value="main">{{ __('messages.Main Account') }}</option>
                                                <option value="sub">{{ __('messages.Sub Account') }}</option>
                                                <option value="final">{{ __('messages.Final Account') }}</option>
                                            </select>
                                            <span class="text-danger">{{ $errors->first('type') }}</span>
                                        </div>

                                        <div
                                                class="form-group
                                            {{ $errors->has('type') ? 'has-error' : '' }}">
                                            <label for="type">{{ __('messages.Select Account Return') }}</label>
                                            <select class="form-control" id="return" name="return">
                                                <option value="Trading">{{ __('messages.Trading') }}</option>
                                                <option value="Budget">{{ __('messages.Budget') }}</option>
                                                <option value="Profit and Loss">{{ __('messages.Profit and Loss') }}</option>
                                                <option value="Undefined"
                                                        selected>{{ __('messages.Undefined') }}</option>
                                            </select>
                                            <span class="text-danger">{{ $errors->first('return') }}</span>
                                        </div>

                                        <div
                                                class="form-group
                                            {{ $errors->has('name') ? 'has-error' : '' }}">
                                            <label for="name">{{ __('messages.Name') }}</label>
                                            <input type="text" class="form-control" id="name" name="name">
                                            <span class="text-danger">{{ $errors->first('name') }}</span>
                                        </div>
                                        <div
                                                class="form-group
                                            {{ $errors->has('description') ? 'has-error' : '' }}">
                                            <label for="description">{{ __('messages.Description') }}</label>
                                            <textarea class="form-control" id="description"
                                                      name="description"></textarea>
                                            <span class="text-danger">{{ $errors->first('description') }}</span>
                                        </div>
                                        <button type="submit" class="btn btn-primary" id="saveBtn">
                                            {{ __('messages.Save') }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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">{{ __('messages.Edit Account') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body row">
                        <ul id="save_msgList"></ul>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mx-auto">
                                    <form method="POST" action="{{ route('account.update') }}" id="update-account-data">
                                        @csrf
                                        <div class="row align-items-center">
                                            <div class="form-group col-12">
                                                <label>
                                                    {{ __('messages.Account Name') }}
                                                </label>
                                                <select class="select2 form-control" id="account_id_for_edit"
                                                        name="account_id">
                                                    <option>{{__("messages.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">{{ __('messages.Name') }}</label>
                                            <input type="text" class="form-control" id="name_for_edit" name="name">

                                        </div>
                                        <div class="form-group
                                            {{ $errors->has('type') ? 'has-error' : '' }}">
                                            <label for="type">{{ __('messages.Select Account Return') }}</label>
                                            <select class="form-control" id="return_for_edit" name="return">
                                                <option value="Trading">{{ __('messages.Trading') }}</option>
                                                <option value="Budget">{{ __('messages.Budget') }}</option>
                                                <option value="Profit and Loss">{{ __('messages.Profit and Loss') }}</option>
                                                <option value="Undefined"
                                                        selected>{{ __('messages.Undefined') }}</option>
                                            </select>

                                        </div>


                                        <button type="submit" class="btn btn-primary" id="saveBtn">
                                            {{ __('messages.Save') }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $('.add-account').on('click', function () {
            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: "{{ route('account.get-serial-number') }}",
                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>');
                    }
                    $('#AddAccountModal').modal('show');
                }
            });
        });
        $("#edit-accounts").on('click', function () {
            $("#EditAccountModal").modal('show')
        })
        $('.select2').select2({
            dropdownParent: $('#EditAccountModal')
        });
        $("#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) {
            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) {
                    Swal.fire({
                        title: response?.message,
                        icon: 'success'
                    })
                    window.location.reload();
                },
                error(xhr) {
                    if (xhr.status == 421) {
                        $("#error-list").removeClass("d-none");
                        $("#error-list").text(xhr.responseJSON.error);
                    }
                    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>');


                        });
                    }
                }
            });
        });
    </script>
@endsection