@extends('layouts.modern')

@section('page-title', $field->label)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Management</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Types</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.show', $dataType) }}">{{ $dataType->name }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.index', $dataType) }}">Sections</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.show', [$dataType, $section]) }}">{{ $section->name }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.fields.index', [$dataType, $section]) }}">Fields</a></li>
    <li class="breadcrumb-item active">{{ $field->label }}</li>
@endsection

@section('action-buttons')
    <a href="{{ route('data-management.data-types.sections.fields.edit', [$dataType, $section, $field]) }}" class="btn btn-primary">
        <i class="fas fa-edit"></i>
        Edit Field
    </a>
    <a href="{{ route('data-management.data-types.sections.fields.index', [$dataType, $section]) }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i>
        Back to Fields
    </a>
@endsection

@section('content')
    <!-- Data Type & Section Info -->
    <div class="card mb-3">
        <div class="card-body py-3">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    @if($dataType->icon)
                        <i class="{{ $dataType->icon }} me-2" style="color: var(--primary-color);"></i>
                    @endif
                    <div class="me-3">
                        <h6 class="mb-0">{{ $dataType->name }} → {{ $section->name }}</h6>
                        <small style="color: var(--text-muted);">Field details and configuration</small>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-{{ getFieldTypeBadgeColor($field->field_type) }}">
                        <i class="fas fa-{{ getFieldIcon($field->field_type) }} me-1"></i>
                        {{ getFieldTypeDisplayName($field->field_type) }}
                    </span>
                    @if($field->required)
                        <span class="badge bg-danger">Required</span>
                    @endif
                    @if($field->conditions && $field->conditions->count() > 0)
                        <span class="badge bg-warning">Conditional</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Field Overview -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-{{ getFieldIcon($field->field_type) }} me-2" style="color: var(--primary-color);"></i>
                        <h5 class="mb-0">{{ $field->label }}</h5>
                    </div>
                </div>
                <div class="card-body">
                    @if($field->description)
                        <p class="mb-3">{{ $field->description }}</p>
                    @endif
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mb-2">Basic Information</h6>
                            <ul class="list-unstyled mb-3">
                                <li class="mb-1">
                                    <strong>Field Name:</strong> 
                                    <code>{{ $field->name }}</code>
                                </li>
                                <li class="mb-1">
                                    <strong>Field Type:</strong> 
                                    <span class="badge bg-{{ getFieldTypeBadgeColor($field->field_type) }}">
                                        {{ $fieldTypeInfo ? $fieldTypeInfo['name'] : $field->field_type }}
                                    </span>
                                </li>
                                <li class="mb-1">
                                    <strong>Display Order:</strong> 
                                    <span class="badge bg-secondary">{{ $field->order }}</span>
                                </li>
                                <li class="mb-1">
                                    <strong>Width Class:</strong> 
                                    <code>{{ $field->width_class }}</code>
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-2">Field Settings</h6>
                            <ul class="list-unstyled mb-3">
                                <li class="mb-1">
                                    <strong>Required:</strong>
                                    @if($field->required)
                                        <span class="badge bg-danger">
                                            <i class="fas fa-check"></i> Yes
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-times"></i> No
                                        </span>
                                    @endif
                                </li>
                                <li class="mb-1">
                                    <strong>Show in List:</strong>
                                    @if($field->show_in_list)
                                        <span class="badge bg-success">
                                            <i class="fas fa-check"></i> Yes
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-times"></i> No
                                        </span>
                                    @endif
                                </li>
                                <li class="mb-1">
                                    <strong>Searchable:</strong>
                                    @if($field->searchable)
                                        <span class="badge bg-info">
                                            <i class="fas fa-search"></i> Yes
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-times"></i> No
                                        </span>
                                    @endif
                                </li>
                                <li class="mb-1">
                                    <strong>Filterable:</strong>
                                    @if($field->filterable)
                                        <span class="badge bg-warning">
                                            <i class="fas fa-filter"></i> Yes
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-times"></i> No
                                        </span>
                                    @endif
                                </li>
                            </ul>
                        </div>
                    </div>

                    @if($field->placeholder || $field->help_text || $field->default_value)
                        <hr>
                        <div class="row">
                            @if($field->placeholder)
                                <div class="col-md-4 mb-2">
                                    <strong>Placeholder:</strong>
                                    <br><span class="text-muted">{{ $field->placeholder }}</span>
                                </div>
                            @endif
                            @if($field->help_text)
                                <div class="col-md-4 mb-2">
                                    <strong>Help Text:</strong>
                                    <br><span class="text-muted">{{ $field->help_text }}</span>
                                </div>
                            @endif
                            @if($field->default_value)
                                <div class="col-md-4 mb-2">
                                    <strong>Default Value:</strong>
                                    <br><code>{{ $field->default_value }}</code>
                                </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <!-- Field Configuration -->
            @if(hasFieldConfiguration($field))
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-cog me-2"></i>
                            Field Configuration
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @if(in_array($field->field_type, ['text', 'textarea', 'email', 'url', 'tel']) && ($field->min_length || $field->max_length))
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-muted mb-2">Length Constraints</h6>
                                    @if($field->min_length)
                                        <div class="mb-1">
                                            <strong>Minimum Length:</strong> {{ $field->min_length }} characters
                                        </div>
                                    @endif
                                    @if($field->max_length)
                                        <div class="mb-1">
                                            <strong>Maximum Length:</strong> {{ $field->max_length }} characters
                                        </div>
                                    @endif
                                </div>
                            @endif

                            @if(in_array($field->field_type, ['number', 'decimal', 'currency']) && ($field->min_value !== null || $field->max_value !== null || $field->step))
                                <div class="col-md-6 mb-3">
                                    <h6 class="text-muted mb-2">Numeric Constraints</h6>
                                    @if($field->min_value !== null)
                                        <div class="mb-1">
                                            <strong>Minimum Value:</strong> {{ $field->min_value }}
                                        </div>
                                    @endif
                                    @if($field->max_value !== null)
                                        <div class="mb-1">
                                            <strong>Maximum Value:</strong> {{ $field->max_value }}
                                        </div>
                                    @endif
                                    @if($field->step)
                                        <div class="mb-1">
                                            <strong>Step:</strong> {{ $field->step }}
                                        </div>
                                    @endif
                                </div>
                            @endif

                            @if(in_array($field->field_type, ['select', 'radio', 'checkbox', 'multiselect']) && $field->options)
                                <div class="col-12 mb-3">
                                    <h6 class="text-muted mb-2">Available Options</h6>
                                    <div class="row">
                                        @foreach($field->options as $index => $option)
                                            <div class="col-md-4 col-6 mb-1">
                                                <span class="badge bg-light text-dark border">{{ $option }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            <!-- Validation Rules -->
            @if($field->validation_rules && count($field->validation_rules) > 0)
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Validation Rules
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($field->validation_rules as $rule)
                                <div class="col-md-4 col-6 mb-2">
                                    <span class="badge bg-info">
                                        <i class="fas fa-check-circle me-1"></i>
                                        {{ getValidationRuleDescription($rule) }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            <!-- Conditional Logic -->
            @if($field->conditions && $field->conditions->count() > 0)
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-code-branch me-2"></i>
                            Conditional Logic
                        </h6>
                    </div>
                    <div class="card-body">
                        @foreach($field->conditions as $condition)
                            <div class="border rounded p-3 mb-3" style="background-color: var(--bs-light);">
                                <div class="d-flex align-items-center flex-wrap gap-2">
                                    <span class="fw-medium">When</span>
                                    <span class="badge bg-primary">
                                        {{ $condition->dependentField ? $condition->dependentField->label : 'Unknown Field' }}
                                    </span>
                                    <span class="badge bg-secondary">{{ getOperatorDisplayName($condition->operator) }}</span>
                                    @if(!in_array($condition->operator, ['is_empty', 'is_not_empty']))
                                        <code>{{ $condition->value }}</code>
                                    @endif
                                    <span class="fw-medium">then</span>
                                    <span class="badge bg-{{ getActionBadgeColor($condition->action) }}">
                                        {{ getActionDisplayName($condition->action) }}
                                    </span>
                                    <span class="fw-medium">this field</span>
                                </div>
                                @if($condition->dependentField && $condition->dependentField->section)
                                    <small class="text-muted mt-1 d-block">
                                        Depends on field from: {{ $condition->dependentField->section->name }} section
                                    </small>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Field Preview -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-eye me-2"></i>
                        Field Preview
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="{{ $field->width_class }}">
                            <div class="border rounded p-3" style="background-color: var(--bs-light);">
                                @include('data-management.fields.partials.field-preview', ['field' => $field])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('data-management.data-types.sections.fields.edit', [$dataType, $section, $field]) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit me-2"></i>
                            Edit Field
                        </a>
                        <hr class="my-2">
                        <a href="{{ route('data-management.data-types.sections.fields.create', [$dataType, $section]) }}" class="btn btn-success btn-sm">
                            <i class="fas fa-plus me-2"></i>
                            Add Another Field
                        </a>
                        <a href="{{ route('data-management.data-types.sections.show', [$dataType, $section]) }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-eye me-2"></i>
                            View Section
                        </a>
                        <hr class="my-2">
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmDelete()">
                            <i class="fas fa-trash me-2"></i>
                            Delete Field
                        </button>
                    </div>
                </div>
            </div>

            <!-- Field Statistics -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Field Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <div class="fw-bold" style="color: var(--primary-color); font-size: 1.25rem;">
                                    {{ $field->order }}
                                </div>
                                <small class="text-muted">Display Order</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="fw-bold" style="color: var(--success-color); font-size: 1.25rem;">
                                {{ $field->conditions ? $field->conditions->count() : 0 }}
                            </div>
                            <small class="text-muted">Conditions</small>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small">Database Column:</span>
                        <code class="small">{{ $field->name }}</code>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-muted small">Column Type:</span>
                        <span class="badge bg-secondary small">{{ getDatabaseColumnType($field) }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted small">Created:</span>
                        <small>{{ $field->created_at->format('M j, Y') }}</small>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-history me-2"></i>
                        Recent Activity
                    </h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="mb-1">Field Created</h6>
                                <p class="mb-0 text-muted small">
                                    {{ $field->created_at->format('M j, Y \a\t g:i A') }}
                                </p>
                                @if($field->created_by)
                                    <p class="mb-0 text-muted small">
                                        by User #{{ $field->created_by }}
                                    </p>
                                @endif
                            </div>
                        </div>
                        @if($field->created_at != $field->updated_at)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-info"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Last Updated</h6>
                                    <p class="mb-0 text-muted small">
                                        {{ $field->updated_at->format('M j, Y \a\t g:i A') }}
                                    </p>
                                    @if($field->updated_by)
                                        <p class="mb-0 text-muted small">
                                            by User #{{ $field->updated_by }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Field Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Delete Field "{{ $field->label }}"?</h6>
                            <p class="mb-0 text-muted">
                                This action cannot be undone. The field and all its data will be permanently deleted.
                            </p>
                        </div>
                    </div>
                    
                    <div class="alert alert-danger mb-0">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Warning:</strong> This will also remove the field from the data table and delete all existing data in this field.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form action="{{ route('data-management.data-types.sections.fields.destroy', [$dataType, $section, $field]) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-2"></i>
                            Delete Field
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--border-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bs-white);
}

.timeline-content h6 {
    font-size: 0.875rem;
    margin-bottom: 2px;
}
</style>
@endpush

@push('scripts')
<script>
function confirmDelete() {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

@php
    // Helper functions for the view
    function getFieldIcon($fieldType) {
        $icons = [
            'text' => 'keyboard', 'textarea' => 'align-left', 'rich_text' => 'edit',
            'email' => 'envelope', 'url' => 'link', 'tel' => 'phone',
            'number' => 'hashtag', 'decimal' => 'calculator', 'currency' => 'dollar-sign',
            'select' => 'list', 'multiselect' => 'list-check', 'radio' => 'dot-circle', 'checkbox' => 'check-square',
            'date' => 'calendar-day', 'datetime' => 'calendar-alt', 'time' => 'clock',
            'file' => 'file', 'image' => 'image', 'json' => 'code', 'lookup' => 'search'
        ];
        return $icons[$fieldType] ?? 'square';
    }

    function getFieldTypeBadgeColor($fieldType) {
        $colors = [
            'text' => 'primary', 'textarea' => 'primary', 'rich_text' => 'primary',
            'email' => 'info', 'url' => 'info', 'tel' => 'info',
            'number' => 'success', 'decimal' => 'success', 'currency' => 'success',
            'select' => 'warning', 'multiselect' => 'warning', 'radio' => 'warning', 'checkbox' => 'warning',
            'date' => 'secondary', 'datetime' => 'secondary', 'time' => 'secondary',
            'file' => 'dark', 'image' => 'dark', 'json' => 'danger', 'lookup' => 'danger'
        ];
        return $colors[$fieldType] ?? 'secondary';
    }

    function getFieldTypeDisplayName($fieldType) {
        $names = [
            'text' => 'Text', 'textarea' => 'Textarea', 'rich_text' => 'Rich Text',
            'email' => 'Email', 'url' => 'URL', 'tel' => 'Phone',
            'number' => 'Number', 'decimal' => 'Decimal', 'currency' => 'Currency',
            'select' => 'Select', 'multiselect' => 'Multi-Select', 'radio' => 'Radio', 'checkbox' => 'Checkbox',
            'date' => 'Date', 'datetime' => 'Date/Time', 'time' => 'Time',
            'file' => 'File', 'image' => 'Image', 'json' => 'JSON', 'lookup' => 'Lookup'
        ];
        return $names[$fieldType] ?? $fieldType;
    }

    function hasFieldConfiguration($field) {
        return ($field->min_length || $field->max_length || 
                $field->min_value !== null || $field->max_value !== null || $field->step ||
                $field->options);
    }

    function getValidationRuleDescription($rule) {
        $descriptions = [
            'required' => 'Required',
            'email' => 'Valid Email',
            'url' => 'Valid URL',
            'numeric' => 'Numeric Only',
            'alpha' => 'Letters Only',
            'alpha_num' => 'Letters & Numbers',
            'date' => 'Valid Date',
            'unique' => 'Unique Value',
            'min' => 'Minimum Length',
            'max' => 'Maximum Length',
            'regex' => 'Custom Pattern'
        ];
        return $descriptions[$rule] ?? $rule;
    }

    function getOperatorDisplayName($operator) {
        $names = [
            'equals' => 'equals',
            'not_equals' => 'does not equal',
            'contains' => 'contains',
            'not_contains' => 'does not contain',
            'greater_than' => 'is greater than',
            'less_than' => 'is less than',
            'is_empty' => 'is empty',
            'is_not_empty' => 'is not empty'
        ];
        return $names[$operator] ?? $operator;
    }

    function getActionDisplayName($action) {
        $names = [
            'show' => 'Show',
            'hide' => 'Hide',
            'require' => 'Require',
            'unrequire' => 'Make Optional'
        ];
        return $names[$action] ?? $action;
    }

    function getActionBadgeColor($action) {
        $colors = [
            'show' => 'success',
            'hide' => 'danger',
            'require' => 'warning',
            'unrequire' => 'info'
        ];
        return $colors[$action] ?? 'secondary';
    }

    function getDatabaseColumnType($field) {
        $types = [
            'text' => 'VARCHAR',
            'textarea' => 'TEXT',
            'rich_text' => 'TEXT',
            'email' => 'VARCHAR',
            'url' => 'VARCHAR',
            'tel' => 'VARCHAR',
            'number' => 'INT',
            'decimal' => 'DECIMAL',
            'currency' => 'DECIMAL',
            'select' => 'VARCHAR',
            'radio' => 'VARCHAR',
            'multiselect' => 'JSON',
            'checkbox' => 'JSON',
            'date' => 'DATE',
            'datetime' => 'DATETIME',
            'time' => 'TIME',
            'file' => 'VARCHAR',
            'image' => 'VARCHAR',
            'json' => 'JSON',
            'lookup' => 'CHAR(36)'
        ];
        return $types[$field->field_type] ?? 'TEXT';
    }
@endphp
</script>
@endpush