@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route('manages.lead-field-tabs.index') . '" class="black-btn-inner waves-effect"><i class="'. \Config::get('settings.icon_back') .'"></i> Back</a>',
    isset($permission['create']) && $permission['create'] && isset($leadFieldTab) ? '<a href="' . route($routePrefix . '.create', ['lead_field_tab_id' => $leadFieldTab->id]) . '" class="'. \Config::get('view.buttons.primary') .'"><i class="'. \Config::get('settings.icon_add') .'"></i> Add New Field</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="normal-text">
                <span><b>Instructions:</b> Use this page to manage your data fields. Lead tabs and lead fields are the basis of organizing and tracking information about your prospects and customers.<br>To reorder the items below, click-and-drag the item to the desired location.</span>
                <!-- <span><b>Pro Tip:</b> When dragging, press the Home, End, Page Up, or Page Down keys on your keyboard to scroll faster when you have a lot of tabs.</span> -->
                <!-- <span><b>Open API:</b> View Open API Documentation</span> -->
            </div>
            <div class="heading-btn-sec mt-4">
                <h3>{{ isset($leadFieldTab) ? $leadFieldTab->title : 'All' }} Fields</h3>
            </div>
            <div class="project-box h-100">
                <div class="table-responsive project-table no-border">
                    <table class="draggable-table {{ \Config::get('view.table.table_class') }}">
                        @if(isset($data) && count($data) > 0)
                            @foreach($data as $field)
                                <thead style="background-color: #E8E8E8;" class="table-group-header" data-id="{{ $field->id }}">
                                    <tr>
                                        <th class="w-5"><img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle"></th>
                                        <th>{{ $field->label ?? 'Unnamed Field' }}</th>
                                        <th colspan="2"></th>
                                    </tr>
                                </thead>
                                <tbody class="table-group-body" data-id="{{ $field->id }}">
                                    <tr>
                                        <td class="w-5"></td>
                                        <td>
                                            <b>Type:</b> {{ isset($field->field_type) && isset($fieldTypes[$field->field_type]['name']) ? $fieldTypes[$field->field_type]['name'] : 'Unknown Type' }}
                                        </td>
                                        <td class="d-flex gap-2 justify-content-end">
                                            @if(isset($permission['destroy']) && $permission['destroy'] && $field->is_system_defined == 0)
                                                @if(\App\Models\Leads\LeadFieldValue::getDeleteIconPermission($field->id))
                                                <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-{{ $field->id }}').submit();">
                                                    <i class="{{ \Config::get('settings.icon_delete') }}"></i>
                                                </a>
                                                {!! html()->form('DELETE', route($routePrefix . '.destroy', $field->id))
                                                    ->attributes(['style' => 'display:inline', 'id' => 'delete-form-' . $field->id])
                                                    ->open() !!}
                                                {!! html()->form()->close() !!}
                                                @endif

                                            @endif
                                            @if(isset($permission['edit']) && $permission['edit'])
                                                <a href="{{ route($routePrefix . '.edit', $field->id) }}{{ isset($leadFieldTab) ? '?lead_field_tab_id='.$leadFieldTab->id : '' }}" class="action-btn" data-toggle="tooltip" title="Edit"><i class="{{ \Config::get('settings.icon_edit') }}"></i></a>
                                            @endif
                                            @if(isset($permission['create']) && $permission['create'])
                                                <a href="{{ route('manages.lead-fields.duplicate-form', $field->id) }}" class="action-btn show-modal" data-toggle="tooltip" title="Duplicate Field">
                                                    <i class="mdi mdi-content-copy"></i>
                                                </a>
                                                <a href="{{ route('manages.lead-fields.move-form', $field->id) }}" class="action-btn show-modal" data-toggle="tooltip" title="Move Field">
                                                    <i class="mdi mdi-swap-horizontal"></i>
                                                </a>
                                            @endif
                                            @if(isset($permission['manageRole']) && $permission['manageRole'])
                                                <a href="{{ route($routePrefix . '.permissions', $field->id) }}" class="action-btn show-modal" data-toggle="tooltip" title="Manage Permissions"><i class="{{ \Config::get('settings.icon_settings') }}"></i></a>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="text-center">No Lead Fields Available</td>
                            </tr>
                        @endif
                    </table>
                </div>
            </div>
            @include('admin.components.pagination')
        </div>
    </div>
@endsection
@push('page_script')
    <script src="{{ asset('assets/js/drag-drop-table-group.js') }}"></script>
    @if(isset($data) && count($data) > 0)
        <script>
            $(document).ready(function() {
                $('.draggable-table').each(function() {
                    initTableDragDrop({
                        tableSelector: this,
                        parentReorderUrl: '{{ route('manages.lead-fields.update-order') }}',
                        csrfToken: '{{ csrf_token() }}'
                    });
                });
            });
        </script>
    @endif
@endpush