@extends('tenant.settings.rentals.rentals-settings-tabs')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.rental_settings') => route('tenant.settings.rentals.contracts.index') ,
            __('breadcrumb.response_templates') => '#',
        ],
    ])
@endsection

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

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.rentals.contract-categories'])
@endsection

@section('rentals-settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <h4>@lang('settings/rentals/contract-categories/index.contract_categories')</h4>

        @can('rentalsSettings-rentalContractCategories-add')
            <div class="mb-2">
                <button class="btn btn-sm orange-btn add-root-category-btn">
                    @lang('settings/rentals/contract-categories/index.add_main_category')
                    <i class="fas fa-plus-circle"></i>
                </button>
            </div>
        @endcan

        {{-- Add Category Form --}}
        <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addCategoryModalLabel"> @lang('settings/rentals/contract-categories/index.add_new_category')</h5>
                        <button type="button" class="btn-close mx-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('tenant.settings.rentals.contract-categories.store') }}" method="post"
                            id="addCategoryForm">
                            @csrf
                            <div class="row flex-column align-content-center">
                                <div class="col">
                                    <label for="name" class="rs">@lang('settings/rentals/contract-categories/index.name')</label>
                                    <input type="text" name="name" id="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="addCategoryForm">@lang('settings/rentals/contract-categories/index.add')</button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/rentals/contract-categories/index.cancel')</button>
                    </div>
                </div>
            </div>
        </div>

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

        {{-- Edit Category Form --}}
        <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editCategoryModalLabel">@lang('settings/rentals/contract-categories/index.edit_category') </h5>
                        <button type="button" class="btn-close mx-0" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="#" method="post" id="editCategoryForm">
                            @csrf
                            @method('PUT')

                            <div class="row flex-column align-content-center">
                                <div class="col">
                                    <label for="name">@lang('settings/rentals/contract-categories/index.name') </label>
                                    <input type="text" name="name" id="name" class="form-control" required>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn orange-btn" form="editCategoryForm">@lang('settings/rentals/contract-categories/index.edit') </button>
                        <button type="button" class="btn white-btn" data-bs-dismiss="modal">@lang('settings/rentals/contract-categories/index.cancel') </button>
                    </div>
                </div>
            </div>
        </div>

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

@push('script')
    <script>
        const addContractCategoriesPermission =
            "{{ Auth::user()->hasPermissionTo('rentalsSettings-rentalContractCategories-add') }}";
        const editContractCategoriesPermission =
            "{{ Auth::user()->hasPermissionTo('rentalsSettings-rentalContractCategories-edit') }}";
        const deleteContractCategoriesPermission =
            "{{ Auth::user()->hasPermissionTo('rentalsSettings-rentalContractCategories-delete') }}";
    </script>

    <script src="{{ asset('js/libraries/jstree.min.js') }}"></script>
    <script src="{{ asset('js/rentals/contract-categories/tree.js') }}"></script>

    <script type="module">
        import {
            confirmAndSubmit
        } from '/tenancy/assets/js/helpers.js';

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

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