@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>',
'<a href="' . route('manages.custom-properties.index') . '" class="black-btn-inner waves-effect"><i class="'. \Config::get('settings.icon_back') .'"></i> Back</a>',
$permission['create'] ? '<a href="' . route('manages.custom-properties.values.create', ['property_id' => $property->id]) . '" class="'. \Config::get('view.buttons.primary') .' show-modal-lg"><i class="'. \Config::get('settings.icon_add') .'"></i> Add '. $property->name .' Value</a>' : ''
])
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="col-12">
    <div class="project-box">
        <x-heading-sec :module="$module" :options="$headingOptions" />
        
        @if(isset($filterInfo))
        <div class="alert alert-info mb-3">
            <strong><i class="bx bx-filter-alt"></i> Filter: </strong> {{ $filterInfo }}
            <a href="{{ route('manages.custom-properties.values', ['property_id' => $property->id]) }}" class="btn btn-sm btn-light float-end">
                <i class="bx bx-x"></i> Clear Filter
            </a>
        </div>
        @endif
        <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>ID</th>
                        <th>{{ $property->name }} Name</th>
                        <th>Parent Value</th>
                        <th>Child Values</th>
                        <th>Auto Assign User (every)</th>
                        <th>Auto Assign User (round-robin)</th>
                        <th>Auto Assign User Class (every)</th>
                        <th>Auto Assign User Class (round-robin)</th>
                        <th class="w-15 text-center sticky-column">Actions</th>
                    </tr>

                </thead>

                <tbody>
                    @if(empty($propertyValues))
                    <tr>
                        <td colspan="9" class="text-center">No {{ $property->name }} values found</td>
                    </tr>
                    @else
                    @foreach($propertyValues as $value)
                    <tr data-id="{{ $value['id'] }}">
                        <td>{{ $value['id'] }}</td>
                        <td>{{ $value['value_name'] }}</td>
                        <td>{{ $value['parent_value'] }}</td>
                        <td>
                            @if($value['child_count'] > 0 && !empty($value['child_route_details']))
                                @foreach($value['child_route_details'] as $index => $routeDetail)
                                    <a href="{{ $routeDetail['route'] }}" class="child-values-link">
                                        {{ $routeDetail['text'] }}
                                    </a>{{ $index < count($value['child_route_details']) - 1 ? ', ' : '' }}
                                @endforeach
                            @else
                                @if($value['child_count'] > 0)
                                    <a href="{{ $value['child_url'] }}" class="child-values-link">{{ $value['child_values'] }}</a>
                                @else
                                    {{ $value['child_values'] }}
                                @endif
                            @endif
                        </td>
                        <td>{{ $value['user_assign'] }}</td>
                        <td>{{ $value['user_assign_robin'] }}</td>
                        <td>{{ $value['user_assign_cl'] }}</td>
                        <td>{{ $value['user_assign_cl_robin'] }}</td>
                        <td class="sticky-column">
                            <div class="d-flex gap-2 justify-content-center">
                               

                                <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-{{ $value['id'] }}').submit();"><i
                                        class="{{ \Config::get('settings.icon_delete') }}"></i></a>
                                {!! html()->form('DELETE', route($routePrefix . '.values.delete', ['property_id' => $property->id, 'id' => $value['id']]))->attributes([
                                'style' => 'display:inline',
                                'id' => 'delete-form-' . $value['id'],
                                ])->open() !!}
                                {!! html()->form()->close() !!}



                                <a href="{{ route('manages.custom-properties.values.copy-form', ['property_id' => $property->id, 'id' => $value['id']]) }}" class="action-btn show-modal" data-toggle="tooltip" title="Copy">
                                    <i class="bx bx-duplicate"></i>
                                </a>
                                <a href="{{ route('manages.custom-properties.values.edit', ['property_id' => $property->id, 'id' => $value['id']]) }}" class="action-btn show-modal-lg" data-toggle="tooltip" title="Edit">
                                    <i class="bx bx-pencil"></i>
                                </a>
                                <a href="javascript:void(0);" class="action-btn" data-toggle="tooltip" title="View">
                                    <i class="bx bx-show"></i>
                                </a>
                                {{-- <a href="{{ route('manages.custom-properties.values.permissions', ['property_id' => $property->id, 'id' => $value['id']]) }}" class="action-btn show-modal-xl" data-toggle="tooltip" title="Permissions">
                                    <i class="bx bx-cog"></i>
                                </a> --}}
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @endif
                </tbody>

            </table>

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

 

@push('page_script')
<script>
    $(document).ready(function() {
        // Search functionality
        $('#search-input').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            $('#datatable tbody tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });

        // Export functionality
        $('.export-btn').on('click', function() {
            // Add export functionality here
            alert('Export functionality will be implemented here');
        });

        // Handle confirmation dialogs
        $('[data-confirm]').each(function() {
            var element = $(this);
            element.on('click', function(e) {
                e.preventDefault();

                var confirmText = element.attr('data-confirm').split('|');
                var title = confirmText[0] || 'Are you sure?';
                var text = confirmText[1] || 'This action cannot be undone!';

                if (confirm(title + '\n\n' + text)) {
                    eval(element.attr('data-confirm-yes'));
                }
            });
        });
        
        // Handle sticky columns on horizontal scroll
        function adjustStickyColumns() {
            // Get the table container's scroll position
            var tableContainer = $('.table-responsive');
            var isScrolled = tableContainer.scrollLeft() > 0;
            
            // Add shadow effect only when scrolled
            if (isScrolled) {
                $('.sticky-column').addClass('is-scrolled');
            } else {
                $('.sticky-column').removeClass('is-scrolled');
            }
            
            // Ensure background colors of sticky cells match their row
            $('#datatable tbody tr').each(function() {
                var $row = $(this);
                var rowBgColor = $row.css('background-color');
                $row.find('.sticky-column').css('background-color', rowBgColor);
            });
            
            // Ensure the header background matches other headers
            var headerBgColor = $('#datatable thead tr').css('background-color');
            var $headerStickyColumn = $('#datatable thead .sticky-column');
            $headerStickyColumn.css('background-color', headerBgColor);
            
            // Enhance header visibility during scrolling
            if (isScrolled) {
                $headerStickyColumn.addClass('scrolling');
                // Add a subtle highlight effect to make the header more noticeable
                $headerStickyColumn.css('box-shadow', '-2px 0 5px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1)');
            } else {
                $headerStickyColumn.removeClass('scrolling');
                $headerStickyColumn.css('box-shadow', '');
            }
        }
        
        // Add scroll event listener to the table container
        $('.table-responsive').on('scroll', function() {
            adjustStickyColumns();
        });
        
        // Initialize on page load
        adjustStickyColumns();
        
        // Also run when window resizes or on any table repaint
        $(window).on('resize', adjustStickyColumns);
        
        // Handle both horizontal and vertical scrolling
        $('.table-responsive').on('scroll', function() {
            var $table = $(this);
            var horizontalScroll = $table.scrollLeft() > 0;
            var verticalScroll = $table.scrollTop() > 0;
            
            // Add classes to indicate scroll direction for styling
            $table.toggleClass('is-scrolled-horizontal', horizontalScroll);
            $table.toggleClass('is-scrolled-vertical', verticalScroll);
            
            // Ensure the header stays visible during vertical scroll as well
            if (verticalScroll) {
                $('#datatable thead').css('top', $table.scrollTop() + 'px');
            } else {
                $('#datatable thead').css('top', '0');
            }
            
            adjustStickyColumns();
        });
        
        // Run on any table row hover to ensure background colors remain consistent
        $('#datatable tbody tr').on('mouseenter mouseleave', function() {
            setTimeout(adjustStickyColumns, 50); // Small delay to let hover effect apply first
        });

        // Initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
@endpush