@extends('tenant.settings.general.all-general-settings')

@section('style')
    <link rel="stylesheet" href="{{ asset('css/libraries/jstree/default/style.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/accounting/cost-centers/index.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/tabs.css')}}">
@endsection

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.general_settings') =>route('tenant.settings.general.show-page', ['type' => 'company-information']),
            __('breadcrumb.receivables_categories') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.general.receivable-category'])
@endsection

@section('settings-content')
    <div>
        @can('generalSettings-receivableCategory-add')
            <div>
                <button type="button" class="btn btn-sm orange-btn" data-bs-toggle="modal"
                    data-bs-target="#addReceivableCategoryModal">
                    <i class="fas fa-plus-circle"></i> @lang('settings/general/receivable-categories/index.add_new_receivable_category')
                </button>
            </div>
        @endcan

        {{-- Add Receivable Category Form --}}
        <div class="modal fade" id="addReceivableCategoryModal" tabindex="-1" role="dialog"
            aria-labelledby="addReceivableCategoryModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addReceivableCategoryModalLabel"> @lang('settings/general/receivable-categories/index.add_new_receivable_category')</h5>
                        <button type="button" data-bs-dismiss="modal"
                            class="btn-close close-add-receivable-category-layout mx-0"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('tenant.settings.general.receivable-categories.store') }}" method="post"
                            id="addReceivableCategoryForm">
                            @csrf

                            <div class="row flex-column align-content-center">
                                <div class="col mb-2">
                                    <label for="ar_name" class="rs"> @lang('settings/general/receivable-categories/index.ar_name')</label>
                                    <input type="text" name="ar_name" id="ar_name" class="form-control" required>
                                </div>
                            </div>

                            <input type="hidden" name="parent_id">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn orange-btn" form="addReceivableCategoryForm"> @lang('settings/general/receivable-categories/index.add')</button>
                        <button type="button" class="btn white-btn close-add-receivable-category-layout"
                            data-bs-dismiss="modal"> @lang('settings/general/receivable-categories/index.cancel')
                        </button>
                    </div>
                </div>
            </div>
        </div>


        {{-- Delete Receivable Category Form --}}
        <form action="#" method="post" class="delete-receivable-category-form">
            @csrf
            @method('DELETE')
        </form>

        {{-- Edit Receivable Category Form --}}
        <div class="modal fade" id="editReceivableCategoryModal" tabindex="-1" role="dialog"
            aria-labelledby="editReceivableCategoryModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editReceivableCategoryModalLabel"> @lang('settings/general/receivable-categories/index.edit_receivable_category')</h5>
                        <button type="button" data-bs-dismiss="modal"
                            class="btn-close mx-0 close-edit-receivable-category-layout"></button>
                    </div>

                    <div class="modal-body">
                        <form action="#" method="post" id="editReceivableCategoryForm">
                            @csrf
                            @method('PUT')

                            <div class="row flex-column align-content-center">
                                <div class="col mb-2">
                                    <label for="ar_name" class="rs"> @lang('settings/general/receivable-categories/index.ar_name')</label>
                                    <input type="text" name="ar_name" id="ar_name" class="form-control" required>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn orange-btn" form="editReceivableCategoryForm"> @lang('settings/general/receivable-categories/index.edit')</button>
                        <button type="button" class="btn white-btn close-edit-receivable-category-layout"
                            data-bs-dismiss="modal"> @lang('settings/general/receivable-categories/index.cancel')
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4 row">
            {{-- receivable-category Tree --}}
            <div class="col-3">
                <div id="receivable-category-tree">
                    <ul>
                        @foreach ($receivable_category as $category)
                            @include('tenant.settings.general.receivable-categories.item-tree-template', [
                                'receivable_category' => $category,
                            ])
                        @endforeach
                    </ul>
                </div>
            </div>

            {{-- Receivalb-Category Table --}}
            <div class="col-9">
                <h4> @lang('settings/general/receivable-categories/index.receivable_categories') </h4>
                <table class="table table-striped table-bordered w-100">
                    <thead>
                        <tr>
                            <th class="xs-td">#</th>
                            <th class="md-td">@lang('settings/general/receivable-categories/index.name')</th>
                            <th class="md-td">@lang('settings/general/receivable-categories/index.level')</th>
                            <th class="sm-td">@lang('settings/general/receivable-categories/index.procedures')</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($leaf_receivable_category as $r_category)
                            <tr>
                                <td class="xs-td">{{ $loop->iteration }}</td>
                                <td class="md-td">{{ $r_category->ar_name }}</td>
                                <td class="md-td">{{ $r_category->level }}</td>
                                <td class="sm-td" data-receivableCategoryData="{{ json_encode($r_category) }}">
                                    <x-operations-btn>
                                        <li>
                                            <button class="btn edit-receivable-category-btn">
                                                <i class="fas fa-edit"></i> @lang('settings/general/receivable-categories/index.edit')
                                            </button>
                                        </li>
                                        <li>
                                            <button class="btn delete-receivableCategory-btn">
                                                <i class="fas fa-trash-alt"></i> @lang('settings/general/receivable-categories/index.delete')
                                            </button>
                                        </li>
                                    </x-operations-btn>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">@lang('settings/general/receivable-categories/index.there_are_no_receivables_categories_yet')</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="my-2 text-center">
                    {!! $leaf_receivable_category->links() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        const addReceivableCategoryPermission =
            "{{ Auth::user()->hasPermissionTo('generalSettings-receivableCategory-add') }}";
        const editReceivableCategoryPermission =
            "{{ Auth::user()->hasPermissionTo('generalSettings-receivableCategory-edit') }}";
        const deleteReceivableCategoryPermission =
            "{{ Auth::user()->hasPermissionTo('generalSettings-receivableCategory-delete') }}";
    </script>

    <script src="{{ asset('js/libraries/jstree.min.js') }}"></script>
    <script src="{{ asset('js/general/receivable-category/index.js') }}"></script>
    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

        $(() => {
            $('#addReceivableCategoryForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('addReceivableCategoryForm', {
                    type: 'green'
                });
            });

            $('#editReceivableCategoryForm').on('submit', function(e) {
                e.preventDefault();
                confirmAndSubmit('editReceivableCategoryForm', {
                    type: 'green'
                });
            });
        });
    </script>
@endpush