@extends('layouts.modern')

@section('page-title', $dataType->name . ' - Data Entries')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    @if(isset($isManageDataRoute) && $isManageDataRoute)
        <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Management</a></li>
        <li class="breadcrumb-item active">{{ $dataType->name }}</li>
    @else
        <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 active">Data Entries</li>
    @endif
@endsection

@section('action-buttons')
    @if(isset($isManageDataRoute) && $isManageDataRoute)
        <a href="{{ route('manage-data.create', $dataType->slug) }}" class="btn btn-primary">
            <i class="fas fa-plus"></i>
            Add New Entry
        </a>
        <a href="{{ route('data-management.data-types.show', $dataType) }}" class="btn btn-outline-info">
            <i class="fas fa-cog"></i>
            Manage Structure
        </a>
    @else
        <a href="{{ route('data-management.data-types.data.create', $dataType) }}" class="btn btn-primary">
            <i class="fas fa-plus"></i>
            Add New Entry
        </a>
        <a href="{{ route('data-management.data-types.show', $dataType) }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i>
            Back to Data Type
        </a>
    @endif
@endsection

@section('content')
    <!-- Data Type 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-3" style="color: var(--primary-color); font-size: 1.5rem;"></i>
                    @endif
                    <div>
                        <h5 class="mb-1">{{ $dataType->name }}</h5>
                        <p class="mb-0" style="color: var(--text-muted);">
                            {{ $dataType->description ?: 'Manage data entries for this data type' }}
                        </p>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <div class="text-center">
                        <div class="fw-bold" style="color: var(--primary-color); font-size: 1.5rem;">{{ $totalRecords }}</div>
                        <small style="color: var(--text-muted);">Total Records</small>
                    </div>
                    <div class="text-center border-start ps-3">
                        <div class="fw-bold" style="color: var(--success-color); font-size: 1.5rem;">{{ $todayRecords }}</div>
                        <small style="color: var(--text-muted);">Today's Records</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    @if($searchableFields->count() > 0 || $filterableFields->count() > 0)
        <div class="card mb-3">
            <div class="card-body py-3">
                <form method="GET" 
                      action="@if(isset($isManageDataRoute) && $isManageDataRoute){{ route('manage-data.index', $dataType->slug) }}@else{{ route('data-management.data-types.data.index', $dataType) }}@endif" 
                      id="searchForm">
                    <div class="row g-2 align-items-end">
                        <!-- Main Search -->
                        @if($searchableFields->count() > 0)
                            <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 across all searchable fields...">
                                </div>
                            </div>
                        @endif

                        <!-- Dynamic Filters -->
                        @foreach($filterableFields->take(3) as $field)
                            <div class="col-md-2">
                                <label for="{{ $field->name }}" class="form-label small mb-1">{{ $field->label }}</label>
                                @if(in_array($field->field_type, ['select', 'radio']) && $field->options)
                                    <select class="form-select form-select-sm" id="{{ $field->name }}" name="{{ $field->name }}">
                                        <option value="">All {{ $field->label }}</option>
                                        @foreach($field->options as $option)
                                            <option value="{{ $option }}" {{ request($field->name) == $option ? 'selected' : '' }}>
                                                {{ $option }}
                                            </option>
                                        @endforeach
                                    </select>
                                @elseif($field->field_type === 'date')
                                    <input type="date" class="form-control form-control-sm" id="{{ $field->name }}" 
                                           name="{{ $field->name }}" value="{{ request($field->name) }}">
                                @else
                                    <input type="text" class="form-control form-control-sm" id="{{ $field->name }}" 
                                           name="{{ $field->name }}" value="{{ request($field->name) }}" 
                                           placeholder="Filter by {{ $field->label }}">
                                @endif
                            </div>
                        @endforeach

                        <!-- 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.data.index', $dataType) }}" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-times"></i> Clear
                                </a>
                            </div>
                        </div>

                        <!-- Results per page -->
                        <div class="col-md-2">
                            <label for="per_page" class="form-label small mb-1">Per Page</label>
                            <select class="form-select form-select-sm" id="per_page" name="per_page" onchange="this.form.submit()">
                                <option value="15" {{ request('per_page') == 15 ? 'selected' : '' }}>15</option>
                                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <!-- Data Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0">
                <i class="fas fa-table me-2"></i>
                Data Entries
                <span class="badge bg-secondary ms-2">{{ $data->total() }} records</span>
            </h6>
            @if($data->count() > 0)
                <div class="d-flex align-items-center gap-2">
                    <small style="color: var(--text-muted);">
                        Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} results
                    </small>
                </div>
            @endif
        </div>
        <div class="card-body p-0">
            @if($data->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 60px;">
                                    <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'id', 'sort_direction' => request('sort_direction') === 'asc' ? 'desc' : 'asc']) }}"
                                        class="text-decoration-none text-dark d-flex align-items-center">
                                        ID
                                        <i class="fas fa-sort ms-1 text-muted"></i>
                                    </a>
                                </th>
                                
                                @foreach($listFields as $field)
                                    <th>
                                        @if(in_array($field->field_type, ['text', 'email', 'number', 'date']))
                                            <a href="{{ request()->fullUrlWithQuery(['sort_by' => $field->name, 'sort_direction' => request('sort_direction') === 'asc' ? 'desc' : 'asc']) }}"
                                                class="text-decoration-none text-dark d-flex align-items-center">
                                                {{ $field->label }}
                                                <i class="fas fa-sort ms-1 text-muted"></i>
                                            </a>
                                        @else
                                            {{ $field->label }}
                                        @endif
                                    </th>
                                @endforeach
                                
                                <th style="width: 120px;">
                                    <a href="{{ request()->fullUrlWithQuery(['sort_by' => 'created_at', 'sort_direction' => request('sort_direction') === 'asc' ? 'desc' : 'asc']) }}"
                                        class="text-decoration-none text-dark d-flex align-items-center">
                                        Created
                                        <i class="fas fa-sort ms-1 text-muted"></i>
                                    </a>
                                </th>
                                <th style="width: 100px;" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $record)
                                <tr>
                                    <td>
                                        <span class="badge bg-secondary">{{ $record->id }}</span>
                                    </td>
                                    
                                    @foreach($listFields as $field)
                                        <td>
                                            @php
                                                $value = $record->{$field->name};
                                            @endphp
                                            
                                            @if($value === null)
                                                <span class="text-muted">—</span>
                                            @elseif(in_array($field->field_type, ['multiselect', 'checkbox']))
                                                @php
                                                    $decodedValue = is_string($value) ? json_decode($value, true) : $value;
                                                @endphp
                                                @if(is_array($decodedValue) && count($decodedValue) > 0)
                                                    @foreach(array_slice($decodedValue, 0, 2) as $item)
                                                        <span class="badge bg-light text-dark border me-1">{{ $item }}</span>
                                                    @endforeach
                                                    @if(count($decodedValue) > 2)
                                                        <span class="text-muted">+{{ count($decodedValue) - 2 }} more</span>
                                                    @endif
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            @elseif($field->field_type === 'email')
                                                <a href="mailto:{{ $value }}" class="text-decoration-none">{{ $value }}</a>
                                            @elseif($field->field_type === 'url')
                                                <a href="{{ $value }}" target="_blank" class="text-decoration-none">
                                                    {{ Str::limit($value, 30) }}
                                                    <i class="fas fa-external-link-alt ms-1"></i>
                                                </a>
                                            @elseif($field->field_type === 'currency')
                                                <span class="fw-medium">{{ $field->configuration['currency_symbol'] ?? '$' }}{{ number_format($value, 2) }}</span>
                                            @elseif(in_array($field->field_type, ['date', 'datetime']))
                                                {{ $value ? \Carbon\Carbon::parse($value)->format($field->field_type === 'date' ? 'M j, Y' : 'M j, Y g:i A') : '—' }}
                                            @elseif($field->field_type === 'file' || $field->field_type === 'image')
                                                @if($value)
                                                    <a href="{{ Storage::url($value) }}" target="_blank" class="text-decoration-none">
                                                        <i class="fas fa-{{ $field->field_type === 'image' ? 'image' : 'file' }} me-1"></i>
                                                        View {{ ucfirst($field->field_type) }}
                                                    </a>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            @else
                                                {{ Str::limit($value, 50) }}
                                            @endif
                                        </td>
                                    @endforeach
                                    
                                    <td>
                                        <small style="color: var(--text-muted);">
                                            {{ \Carbon\Carbon::parse($record->created_at)->format('M j, Y') }}
                                        </small>
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group btn-group-sm" role="group">
                                            @if(isset($isManageDataRoute) && $isManageDataRoute)
                                                <a href="{{ route('manage-data.show', [$dataType->slug, $record->id]) }}" 
                                                   class="btn btn-outline-primary btn-sm" title="View">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('manage-data.edit', [$dataType->slug, $record->id]) }}" 
                                                   class="btn btn-outline-secondary btn-sm" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            @else
                                                <a href="{{ route('data-management.data-types.data.show', [$dataType, $record->id]) }}" 
                                                   class="btn btn-outline-primary btn-sm" title="View">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('data-management.data-types.data.edit', [$dataType, $record->id]) }}" 
                                                   class="btn btn-outline-secondary btn-sm" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            @endif
                                            <button type="button" class="btn btn-outline-danger btn-sm" 
                                                    onclick="confirmDelete({{ $record->id }})" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($data->hasPages())
                    <div class="card-footer">
                        <div class="d-flex justify-content-between align-items-center">
                            <div style="color: var(--text-muted);">
                                Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} results
                            </div>
                            {{ $data->links() }}
                        </div>
                    </div>
                @endif
            @else
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-3x mb-3" style="color: var(--text-muted);"></i>
                    <h5 style="color: var(--text-muted);">No Data Entries Found</h5>
                    <p style="color: var(--text-muted);">
                        @if(request()->hasAny(['search', 'status']))
                            No entries match your search criteria. <a href="{{ route('data-management.data-types.data.index', $dataType) }}">Clear filters</a> to see all entries.
                        @else
                            Get started by creating your first data entry.
                        @endif
                    </p>
                    @if(!request()->hasAny(['search', 'status']))
                        <a href="{{ route('data-management.data-types.data.create', $dataType) }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>
                            Create First Entry
                        </a>
                    @endif
                </div>
            @endif
        </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 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 Data Entry?</h6>
                            <p class="mb-0 text-muted">
                                This action cannot be undone. The data entry will be permanently deleted.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form id="deleteForm" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-2"></i>
                            Delete Entry
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function confirmDelete(id) {
    const form = document.getElementById('deleteForm');
    @if(isset($isManageDataRoute) && $isManageDataRoute)
        form.action = `{{ route('manage-data.index', $dataType->slug) }}/${id}`;
    @else
        form.action = `{{ route('data-management.data-types.data.index', $dataType) }}/${id}`;
    @endif
    
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Auto-submit form on filter changes
document.addEventListener('DOMContentLoaded', function() {
    const filterInputs = document.querySelectorAll('#searchForm select, #searchForm input[type="date"]');
    
    filterInputs.forEach(input => {
        if (input.id !== 'search' && input.id !== 'per_page') {
            input.addEventListener('change', function() {
                document.getElementById('searchForm').submit();
            });
        }
    });
});
</script>
@endpush