@extends('layouts.modern')

@section('page-title', 'Fields Management')

@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 active">Fields</li>
@endsection

@section('action-buttons')
    <a href="{{ route('data-management.data-types.sections.fields.create', [$dataType, $section]) }}" class="btn btn-primary">
        <i class="fas fa-plus"></i>
        Add Field
    </a>
    <a href="{{ route('data-management.data-types.sections.show', [$dataType, $section]) }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i>
        Back to Section
    </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>
                        <h6 class="mb-0">{{ $dataType->name }} → {{ $section->name }}</h6>
                        <small style="color: var(--text-muted);">Managing fields for this section</small>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    @if($section->icon)
                        <i class="{{ $section->icon }} me-2" style="color: var(--success-color);"></i>
                    @endif
                    <span class="badge bg-info">{{ $fields->count() }} Fields</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-9">
            <!-- Field Statistics -->
            <div class="row mb-4">
                <div class="col-md-3 col-6">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-list-alt fa-2x mb-2" style="color: var(--primary-color);"></i>
                            <h4 class="mb-1">{{ $fieldStats['total_fields'] }}</h4>
                            <small class="text-muted">Total Fields</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-asterisk fa-2x mb-2" style="color: var(--danger-color);"></i>
                            <h4 class="mb-1">{{ $fieldStats['required_fields'] }}</h4>
                            <small class="text-muted">Required</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-code-branch fa-2x mb-2" style="color: var(--warning-color);"></i>
                            <h4 class="mb-1">{{ $fieldStats['conditional_fields'] }}</h4>
                            <small class="text-muted">Conditional</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-shield-alt fa-2x mb-2" style="color: var(--info-color);"></i>
                            <h4 class="mb-1">{{ $fieldStats['validation_rules'] }}</h4>
                            <small class="text-muted">With Validation</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fields List -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">
                            <i class="fas fa-list me-2"></i>
                            Section Fields
                        </h5>
                        @if($fields->count() > 1)
                            <button type="button" class="btn btn-sm btn-outline-primary" id="toggle-reorder">
                                <i class="fas fa-arrows-alt"></i>
                                Reorder Fields
                            </button>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    @if($fields->count() > 0)
                        <div id="fields-list" class="list-group list-group-flush">
                            @foreach($fields as $field)
                                <div class="list-group-item" data-field-id="{{ $field->id }}">
                                    <div class="row align-items-center">
                                        <div class="col-md-1 col-2 text-center">
                                            <div class="drag-handle" style="display: none; cursor: move; color: var(--text-muted);">
                                                <i class="fas fa-grip-vertical"></i>
                                            </div>
                                            <span class="field-order">{{ $field->order }}</span>
                                        </div>
                                        <div class="col-md-7 col-10">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-{{ getFieldIcon($field->field_type) }} me-2" style="color: var(--primary-color);"></i>
                                                <div>
                                                    <h6 class="mb-1">{{ $field->label }}</h6>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <code class="small">{{ $field->name }}</code>
                                                        <span class="badge bg-{{ getFieldTypeBadgeColor($field->field_type) }}">
                                                            {{ 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>
                                            @if($field->description)
                                                <p class="mb-0 mt-1 text-muted small">{{ $field->description }}</p>
                                            @endif
                                        </div>
                                        <div class="col-md-2 col-6 text-center">
                                            <span class="badge bg-secondary">{{ $field->width_class }}</span>
                                        </div>
                                        <div class="col-md-2 col-6 text-end">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('data-management.data-types.sections.fields.show', [$dataType, $section, $field]) }}" 
                                                   class="btn btn-outline-info" title="View Field">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('data-management.data-types.sections.fields.edit', [$dataType, $section, $field]) }}" 
                                                   class="btn btn-outline-primary" title="Edit Field">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-outline-danger" 
                                                        onclick="confirmDeleteField('{{ $field->id }}', '{{ $field->label }}')" 
                                                        title="Delete Field">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if($fields->count() > 1)
                            <div class="mt-3 text-center" id="reorder-actions" style="display: none;">
                                <button type="button" class="btn btn-success btn-sm" id="save-order">
                                    <i class="fas fa-save"></i>
                                    Save Order
                                </button>
                                <button type="button" class="btn btn-secondary btn-sm" id="cancel-reorder">
                                    <i class="fas fa-times"></i>
                                    Cancel
                                </button>
                            </div>
                        @endif
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-cube fa-4x mb-3" style="color: var(--text-muted); opacity: 0.3;"></i>
                            <h5 class="text-muted">No Fields Yet</h5>
                            <p class="text-muted mb-4">Start building your form by adding fields to this section.</p>
                            <a href="{{ route('data-management.data-types.sections.fields.create', [$dataType, $section]) }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i>
                                Add First Field
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <!-- 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.create', [$dataType, $section]) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus me-2"></i>
                            Add Field
                        </a>
                        <hr class="my-2">
                        <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>
                        <a href="{{ route('data-management.data-types.sections.edit', [$dataType, $section]) }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-edit me-2"></i>
                            Edit Section
                        </a>
                    </div>
                </div>
            </div>

            <!-- Field Types Guide -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-question-circle me-2"></i>
                        Field Types Guide
                    </h6>
                </div>
                <div class="card-body">
                    <div class="accordion accordion-flush" id="fieldTypesAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#textFields">
                                    <i class="fas fa-keyboard me-2"></i>
                                    Text Fields
                                </button>
                            </h2>
                            <div id="textFields" class="accordion-collapse collapse" data-bs-parent="#fieldTypesAccordion">
                                <div class="accordion-body">
                                    <small>
                                        <strong>Text:</strong> Single line input<br>
                                        <strong>Textarea:</strong> Multi-line input<br>
                                        <strong>Email:</strong> Email validation<br>
                                        <strong>URL:</strong> Website links<br>
                                        <strong>Phone:</strong> Phone numbers
                                    </small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#numericFields">
                                    <i class="fas fa-calculator me-2"></i>
                                    Numeric Fields
                                </button>
                            </h2>
                            <div id="numericFields" class="accordion-collapse collapse" data-bs-parent="#fieldTypesAccordion">
                                <div class="accordion-body">
                                    <small>
                                        <strong>Number:</strong> Integer values<br>
                                        <strong>Decimal:</strong> Decimal numbers<br>
                                        <strong>Currency:</strong> Money amounts
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#selectionFields">
                                    <i class="fas fa-list me-2"></i>
                                    Selection Fields
                                </button>
                            </h2>
                            <div id="selectionFields" class="accordion-collapse collapse" data-bs-parent="#fieldTypesAccordion">
                                <div class="accordion-body">
                                    <small>
                                        <strong>Select:</strong> Dropdown list<br>
                                        <strong>Radio:</strong> Single choice<br>
                                        <strong>Checkbox:</strong> Multiple choice<br>
                                        <strong>Multi-select:</strong> Multiple dropdown
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dateFields">
                                    <i class="fas fa-calendar me-2"></i>
                                    Date & Time
                                </button>
                            </h2>
                            <div id="dateFields" class="accordion-collapse collapse" data-bs-parent="#fieldTypesAccordion">
                                <div class="accordion-body">
                                    <small>
                                        <strong>Date:</strong> Date picker<br>
                                        <strong>DateTime:</strong> Date & time<br>
                                        <strong>Time:</strong> Time only
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Field Modal -->
    <div class="modal fade" id="deleteFieldModal" 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 "<span id="field-name-to-delete"></span>"?</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 id="delete-field-form" 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('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fieldsList = document.getElementById('fields-list');
    const toggleReorderBtn = document.getElementById('toggle-reorder');
    const reorderActions = document.getElementById('reorder-actions');
    const saveOrderBtn = document.getElementById('save-order');
    const cancelReorderBtn = document.getElementById('cancel-reorder');
    const dragHandles = document.querySelectorAll('.drag-handle');
    const fieldOrders = document.querySelectorAll('.field-order');
    let sortable = null;
    let isReorderMode = false;

    // Toggle reorder mode
    if (toggleReorderBtn) {
        toggleReorderBtn.addEventListener('click', function() {
            if (!isReorderMode) {
                enableReorderMode();
            } else {
                disableReorderMode();
            }
        });
    }

    // Save order
    if (saveOrderBtn) {
        saveOrderBtn.addEventListener('click', function() {
            saveFieldOrder();
        });
    }

    // Cancel reorder
    if (cancelReorderBtn) {
        cancelReorderBtn.addEventListener('click', function() {
            disableReorderMode();
            location.reload(); // Reload to reset order
        });
    }

    function enableReorderMode() {
        isReorderMode = true;
        toggleReorderBtn.innerHTML = '<i class="fas fa-times"></i> Cancel Reorder';
        toggleReorderBtn.className = 'btn btn-sm btn-outline-secondary';
        
        // Show drag handles and hide order numbers
        dragHandles.forEach(handle => handle.style.display = 'block');
        fieldOrders.forEach(order => order.style.display = 'none');
        
        // Show reorder actions
        reorderActions.style.display = 'block';
        
        // Initialize sortable
        sortable = new Sortable(fieldsList, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            onEnd: function(evt) {
                // Update visual feedback if needed
            }
        });
    }

    function disableReorderMode() {
        isReorderMode = false;
        toggleReorderBtn.innerHTML = '<i class="fas fa-arrows-alt"></i> Reorder Fields';
        toggleReorderBtn.className = 'btn btn-sm btn-outline-primary';
        
        // Hide drag handles and show order numbers
        dragHandles.forEach(handle => handle.style.display = 'none');
        fieldOrders.forEach(order => order.style.display = 'block');
        
        // Hide reorder actions
        reorderActions.style.display = 'none';
        
        // Destroy sortable
        if (sortable) {
            sortable.destroy();
            sortable = null;
        }
    }

    function saveFieldOrder() {
        const fieldIds = Array.from(fieldsList.children).map(item => 
            item.getAttribute('data-field-id')
        );

        fetch('{{ route("data-management.data-types.sections.fields.reorder", [$dataType, $section]) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                field_ids: fieldIds
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                disableReorderMode();
                // Show success message
                showAlert('success', data.message);
                // Reload to show updated order
                setTimeout(() => location.reload(), 1000);
            } else {
                showAlert('error', data.message || 'Failed to save order');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', 'Failed to save field order');
        });
    }

    function showAlert(type, message) {
        // Create alert element
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // Insert at top of content
        const content = document.querySelector('.container-fluid');
        content.insertBefore(alertDiv, content.firstChild);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
});

function confirmDeleteField(fieldId, fieldName) {
    document.getElementById('field-name-to-delete').textContent = fieldName;
    document.getElementById('delete-field-form').action = 
        '{{ route("data-management.data-types.sections.fields.destroy", [$dataType, $section, ":fieldId"]) }}'
        .replace(':fieldId', fieldId);
    
    const modal = new bootstrap.Modal(document.getElementById('deleteFieldModal'));
    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;
    }
@endphp
</script>
@endpush

@push('styles')
<style>
.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: var(--bs-light);
}

.drag-handle {
    font-size: 1.2em;
}

.list-group-item {
    border-left: none;
    border-right: none;
}

.list-group-item:first-child {
    border-top: none;
}

.list-group-item:last-child {
    border-bottom: none;
}

.accordion-button {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.accordion-body {
    padding: 0.75rem 1rem;
}
</style>
@endpush