@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
$title ?? '',
$subTitle ?? '',
isset($filters) ? $filters : [],
isset($advancedFilters) ? $advancedFilters : []
)
)
@php($headingOptions = [
'<div class="search-field"><input type="text" class="form-control pr-45" placeholder="Search"><i class="'. \Config::get('settings.icon_search') . '"></i></div>',
$permission['create'] ? '<a href="' . route('manages.custom-properties.create') . '" class="'. \Config::get('view.buttons.primary') .'"><i class="'. \Config::get('settings.icon_add') .'"></i> Add Custom Property</a>' : ''
])
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="col-12">
    <div class="project-box">
        <x-heading-sec :module="$module" :options="$headingOptions" />
        <div class="table-responsive project-table">

            <table id="datatable" class="{{ \Config::get('view.table.table_class') }}">

                <thead class="{{ \Config::get('view.table.table_head_class') }}">

                    <tr>
                        <th class="w-5"></th>
                        <th class="w-5"></th>
                        <th>Property Name</th>
                        <th>Parent Property</th>
                        <th>Field Count</th>
                        <th>Values</th>
                        <th class="w-15 text-right">Action</th>
                        <th></th>
                    </tr>

                </thead>

                <tbody>
                    @if(empty($parentProperties))
                    <tr>
                        <td colspan="8" class="text-center">No custom properties found</td>
                    </tr>
                    @else
                    @foreach($parentProperties as $parentProperty)
                    <tr data-id="{{ $parentProperty->id }}" class="parent-row">
                        <td class="w-5"><img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle"></td>
                        <td class="w-5">
                        </td>
                        <td>{{ $parentProperty->name }}</td>
                        <td></td>
                        <td>{{ $parentProperty->fields ? count($parentProperty->fields) : 0 }}</td>
                        <td>{{ $parentProperty->value_count ?? 0 }}</td>
                        <td>
                            <div class="d-flex gap-2 justify-content-end">
                                <a href="javascript:void(0);" class="action-btn"
                                    data-toggle="tooltip" title="Delete"
                                    data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
                                    data-confirm-yes="event.preventDefault();
                                                document.getElementById('delete-form-{{ $parentProperty->id }}').submit();"><i
                                        class="{{ \Config::get('settings.icon_delete') }}"></i></a>
                                {!! html()->form('DELETE', route($routePrefix . '.destroy', $parentProperty->id))->attributes([
                                'style' => 'display:inline',
                                'id' => 'delete-form-' . $parentProperty->id,
                                ])->open() !!}
                                {!! html()->form()->close() !!}
                                <a href="{{ route('manages.custom-properties.permissions', $parentProperty->id) }}" class="action-btn show-modal-xl" data-toggle="tooltip" title="Permissions"><i class="bx bx-cog"></i></a>
                                <a href="{{ route('manages.custom-properties.edit', $parentProperty->id) }}" class="action-btn"><i class="bx bx-pencil"></i></a>
                            </div>
                        </td>
                        <td class="w-5">
                            <a href="{{ route('manages.custom-properties.values', $parentProperty->id) }}" target="_blank">
                                <button disabled type="button" class="btn add-btn">Add/Remove Values</button>
                            </a>
                        </td>
                    </tr>

                    @if(isset($childProperties[$parentProperty->id]))
                    @include('admin.manages.custom-properties.child-rows', [
                    'children' => $childProperties[$parentProperty->id],
                    'childProperties' => $childProperties,
                    'allProperties' => $allProperties,
                    'level' => 1,
                    'parentName' => $parentProperty->name,
                    'parentId' => $parentProperty->id
                    ])
                    @endif
                    @endforeach
                    @endif
                </tbody>

            </table>

        </div>
        @include('admin.components.pagination')
    </div>
</div>
@endsection

@push('page_css_before')
<link rel="stylesheet" href="{{ asset('assets/css/drag-drop-table.css') }}">
<style>
    .level-1 td:nth-child(3) {
        padding-left: 20px;
    }

    .level-2 td:nth-child(3) {
        padding-left: 40px;
    }

    .level-3 td:nth-child(3) {
        padding-left: 60px;
    }

    .level-4 td:nth-child(3) {
        padding-left: 80px;
    }

    .level-5 td:nth-child(3) {
        padding-left: 100px;
    }

    .level-6 td:nth-child(3) {
        padding-left: 120px;
    }

    .level-7 td:nth-child(3) {
        padding-left: 140px;
    }

    .level-8 td:nth-child(3) {
        padding-left: 160px;
    }

    .level-9 td:nth-child(3) {
        padding-left: 180px;
    }

    .level-10 td:nth-child(3) {
        padding-left: 200px;
    }
</style>
@endpush

@push('page_script')
<script src="{{ asset('assets/js/drag-drop-table.js') }}"></script>
<script>
    $(document).ready(function() {
        // Initialize drag and drop functionality
        var dragDropConfig = initTableDragDrop({
            tableSelector: '#datatable',
            parentColumnIndex: 2, // Property Name column
            parentReferenceColumnIndex: 3, // Parent Property column
            parentReorderUrl: '{{ route("manages.custom-properties.update-order") }}',
            childReorderUrl: '{{ route("manages.custom-properties.update-order") }}',
            csrfToken: '{{ csrf_token() }}'
        });
    });
</script>
@endpush