@extends('layouts.modern')

@section('page-title', 'Data Types')

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

@section('action-buttons')
    <a href="{{ route('data-management.data-types.create') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i>
        Add New Data Type
    </a>
@endsection

@section('content')
    <!-- Search and Filter Section -->
    <div class="card mb-3">
        <div class="card-body py-3">
            <form method="GET" action="{{ route('data-management.data-types.index') }}" id="searchForm">
                <div class="row g-2 align-items-end">
                    <!-- Main Search -->
                    <div class="col-md-4">
                        <label for="search" class="form-label small mb-1">Search</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="search" name="search"
                                value="{{ request('search') }}" placeholder="Search by name, slug, or description...">
                        </div>
                    </div>
                    
                    <!-- Status Filter -->
                    <div class="col-md-2">
                        <label for="status" class="form-label small mb-1">Status</label>
                        <select class="form-select form-select-sm" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>

                    <!-- Business Filter -->
                    <div class="col-md-2">
                        <label for="business_filter" class="form-label small mb-1">Scope</label>
                        <select class="form-select form-select-sm" id="business_filter" name="business_filter">
                            <option value="">All Types</option>
                            <option value="global" {{ request('business_filter') === 'global' ? 'selected' : '' }}>Global</option>
                            <option value="business" {{ request('business_filter') === 'business' ? 'selected' : '' }}>Business-Specific</option>
                        </select>
                    </div>

                    <!-- Sort -->
                    <div class="col-md-2">
                        <label for="sort_by" class="form-label small mb-1">Sort By</label>
                        <select class="form-select form-select-sm" id="sort_by" name="sort_by">
                            <option value="created_at" {{ request('sort_by') === 'created_at' ? 'selected' : '' }}>Created Date</option>
                            <option value="name" {{ request('sort_by') === 'name' ? 'selected' : '' }}>Name</option>
                            <option value="menu_order" {{ request('sort_by') === 'menu_order' ? 'selected' : '' }}>Menu Order</option>
                        </select>
                    </div>

                    <!-- Action Buttons -->
                    <div class="col-md-2">
                        <div class="d-flex gap-1">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fas fa-search"></i> Search
                            </button>
                            <a href="{{ route('data-management.data-types.index') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-times"></i> Clear
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Results Summary -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="text-muted small">
            Showing {{ $dataTypes->firstItem() }} to {{ $dataTypes->lastItem() }} of {{ $dataTypes->total() }} data types
        </div>
        <div class="small">
            <i class="fas fa-info-circle" style="color: var(--text-muted);"></i>
            Configure custom data structures for your business needs
        </div>
    </div>

    <!-- Data Types Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-sm mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40px;">
                                <i class="fas fa-cube" style="color: var(--text-muted);"></i>
                            </th>
                            <th>
                                <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'name', 'sort_direction' => request('sort_direction') === 'asc' ? 'desc' : 'asc']) }}"
                                    class="text-decoration-none d-flex align-items-center" style="color: var(--text-primary);">
                                    Name
                                    <i class="fas fa-sort ms-1" style="color: var(--text-muted);"></i>
                                </a>
                            </th>
                            <th>Description</th>
                            <th>Business</th>
                            <th>Fields</th>
                            <th>Menu</th>
                            <th>Status</th>
                            <th style="width: 120px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($dataTypes as $dataType)
                            <tr>
                                <td class="text-center">
                                    @if($dataType->icon)
                                        <i class="{{ $dataType->icon }}" style="color: var(--primary-color);"></i>
                                    @else
                                        <i class="fas fa-cube" style="color: var(--text-muted);"></i>
                                    @endif
                                </td>
                                <td>
                                    <div>
                                        <strong>{{ $dataType->name }}</strong>
                                        <div class="text-muted small">{{ $dataType->slug }}</div>
                                    </div>
                                </td>
                                <td>
                                    <div class="text-truncate" style="max-width: 200px;" title="{{ $dataType->description }}">
                                        {{ $dataType->description ?: 'No description' }}
                                    </div>
                                </td>
                                <td>
                                    @if($dataType->business)
                                        <span class="badge bg-info text-dark">{{ $dataType->business->name }}</span>
                                    @else
                                        <span class="badge bg-secondary">Global</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">
                                        {{ $dataType->fields->count() }} field{{ $dataType->fields->count() !== 1 ? 's' : '' }}
                                    </span>
                                </td>
                                <td>
                                    @if($dataType->menu_visible)
                                        <span class="badge bg-success">
                                            <i class="fas fa-eye"></i> Visible
                                        </span>
                                    @else
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-eye-slash"></i> Hidden
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($dataType->is_active)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-danger">Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <!-- Main Actions -->
                                        <a href="{{ route('data-management.data-types.show', $dataType) }}" 
                                            class="btn btn-outline-primary btn-sm" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('data-management.data-types.edit', $dataType) }}" 
                                            class="btn btn-outline-secondary btn-sm" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        
                                        <!-- Quick Actions Dropdown -->
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-outline-info btn-sm dropdown-toggle" 
                                                data-bs-toggle="dropdown" aria-expanded="false" title="Quick Actions">
                                                <i class="fas fa-cog"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('data-management.data-types.sections.index', $dataType) }}">
                                                        <i class="fas fa-layer-group me-2"></i>Manage Sections
                                                    </a>
                                                </li>
                                                @if($dataType->sections_count > 0)
                                                    <li>
                                                        <a class="dropdown-item" href="{{ route('data-management.data-types.data.index', $dataType) }}">
                                                            <i class="fas fa-database me-2"></i>Manage Data
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="{{ route('manage-data.index', $dataType->slug) }}">
                                                            <i class="fas fa-external-link-alt me-2"></i>Quick Data Access
                                                        </a>
                                                    </li>
                                                @endif
                                                @if($dataType->fields_count > 0)
                                                    <li><hr class="dropdown-divider"></li>
                                                    @foreach($dataType->sections->take(3) as $section)
                                                        <li>
                                                            <a class="dropdown-item" href="{{ route('data-management.data-types.sections.fields.index', [$dataType, $section]) }}">
                                                                <i class="fas fa-list me-2"></i>{{ $section->name }} Fields
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                    @if($dataType->sections->count() > 3)
                                                        <li>
                                                            <span class="dropdown-item-text text-muted small">
                                                                <i class="fas fa-ellipsis-h me-2"></i>{{ $dataType->sections->count() - 3 }} more sections...
                                                            </span>
                                                        </li>
                                                    @endif
                                                @endif
                                            </ul>
                                        </div>
                                        
                                        <button type="button" class="btn btn-outline-danger btn-sm" 
                                            title="Delete" onclick="confirmDelete('{{ $dataType->id }}', '{{ $dataType->name }}')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fas fa-cube fa-3x mb-3" style="color: var(--text-muted);"></i>
                                        <div>No data types found</div>
                                        <small>Start by creating your first data type to manage custom data structures.</small>
                                    </div>
                                    <div class="mt-3">
                                        <a href="{{ route('data-management.data-types.create') }}" class="btn btn-primary">
                                            <i class="fas fa-plus"></i> Create First Data Type
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    @if($dataTypes->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $dataTypes->links() }}
        </div>
    @endif

    <!-- 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 Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the data type <strong id="deleteItemName"></strong>?</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>Warning:</strong> This will permanently delete all associated data, fields, and the database table. This action cannot be undone.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteForm" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete Data Type</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function confirmDelete(dataTypeId, dataTypeName) {
    document.getElementById('deleteItemName').textContent = dataTypeName;
    document.getElementById('deleteForm').action = `{{ route('data-management.data-types.index') }}/${dataTypeId}`;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endpush