@extends('layouts.modern')

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

@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"><a href="{{ route('manage-data.index', $dataType->slug) }}">{{ $dataType->name }}</a></li>
        <li class="breadcrumb-item active">Details</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"><a href="{{ route('data-management.data-types.data.index', $dataType) }}">Data Entries</a></li>
        <li class="breadcrumb-item active">Details</li>
    @endif
@endsection

@section('action-buttons')
    <div class="btn-group">
        @if(isset($isManageDataRoute) && $isManageDataRoute)
            <a href="{{ route('manage-data.edit', [$dataType->slug, $record->id]) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i>
                Edit Entry
            </a>
        @else
            <a href="{{ route('data-management.data-types.data.edit', [$dataType, $record->id]) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i>
                Edit Entry
            </a>
        @endif
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            @if(isset($isManageDataRoute) && $isManageDataRoute)
                <li><a class="dropdown-item" href="{{ route('manage-data.create', $dataType->slug) }}">
                    <i class="fas fa-plus me-2"></i>Create New Entry
                </a></li>
            @else
                <li><a class="dropdown-item" href="{{ route('data-management.data-types.data.create', $dataType) }}">
                    <i class="fas fa-plus me-2"></i>Create New Entry
                </a></li>
            @endif
            <li><a class="dropdown-item" href="#" onclick="duplicateRecord()">
                <i class="fas fa-copy me-2"></i>Duplicate Entry
            </a></li>
            <li><a class="dropdown-item" href="#" onclick="exportRecord()">
                <i class="fas fa-download me-2"></i>Export Data
            </a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="#" onclick="deleteRecord()">
                <i class="fas fa-trash me-2"></i>Delete Entry
            </a></li>
        </ul>
    </div>
    @if(isset($isManageDataRoute) && $isManageDataRoute)
        <a href="{{ route('manage-data.index', $dataType->slug) }}" class="btn btn-outline-secondary">
    @else
        <a href="{{ route('data-management.data-types.data.index', $dataType) }}" class="btn btn-outline-secondary">
    @endif
        <i class="fas fa-arrow-left"></i>
        Back to List
    </a>
@endsection

@section('content')
    <!-- Record Header -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col">
                    <div class="d-flex align-items-center">
                        @if($dataType->icon)
                            <i class="{{ $dataType->icon }} me-3" style="color: var(--primary-color); font-size: 2rem;"></i>
                        @endif
                        <div>
                            <h4 class="mb-1">{{ $dataType->name }} #{{ $record->id }}</h4>
                            <div class="d-flex align-items-center gap-3">
                                <small style="color: var(--text-muted);">
                                    <i class="fas fa-calendar-plus me-1"></i>
                                    Created: {{ \Carbon\Carbon::parse($record->created_at)->format('M j, Y \a\t g:i A') }}
                                </small>
                                @if($record->updated_at && $record->updated_at !== $record->created_at)
                                    <small style="color: var(--text-muted);">
                                        <i class="fas fa-edit me-1"></i>
                                        Updated: {{ \Carbon\Carbon::parse($record->updated_at)->diffForHumans() }}
                                    </small>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row text-center">
                        <div class="col">
                            <div class="fw-bold" style="color: var(--primary-color); font-size: 1.25rem;">{{ $record->id }}</div>
                            <small style="color: var(--text-muted);">Entry ID</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Data Sections -->
            @foreach($sections as $section)
                @if($section->fields->count() > 0)
                    <div class="card mb-4">
                        <div class="card-header">
                            <div class="d-flex align-items-center justify-content-between">
                                <h6 class="mb-0">
                                    <i class="fas fa-layer-group me-2" style="color: var(--primary-color);"></i>
                                    {{ $section->name }}
                                </h6>
                                @if($section->collapsible)
                                    <button type="button" class="btn btn-sm btn-outline-secondary" 
                                            data-bs-toggle="collapse" 
                                            data-bs-target="#section-content-{{ $section->id }}"
                                            aria-expanded="true">
                                        <i class="fas fa-chevron-down"></i>
                                    </button>
                                @endif
                            </div>
                            @if($section->description)
                                <small style="color: var(--text-muted);">{{ $section->description }}</small>
                            @endif
                        </div>
                        <div class="card-body collapse show" id="section-content-{{ $section->id }}">
                            <div class="row">
                                @foreach($section->fields as $field)
                                    @php
                                        $value = $record->{$field->name} ?? null;
                                    @endphp
                                    <div class="{{ $field->width_class }} mb-3">
                                        @include('data-management.dynamic-forms.partials.display-field', ['field' => $field, 'value' => $value])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>

        <div class="col-lg-4">
            <!-- Record Metadata -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Record Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-5">
                            <small class="fw-bold" style="color: var(--text-muted);">ID:</small>
                        </div>
                        <div class="col-7">
                            <span class="badge bg-primary">#{{ $record->id }}</span>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-5">
                            <small class="fw-bold" style="color: var(--text-muted);">Created:</small>
                        </div>
                        <div class="col-7">
                            <small>{{ \Carbon\Carbon::parse($record->created_at)->format('M j, Y') }}</small>
                            <br><small style="color: var(--text-muted);">{{ \Carbon\Carbon::parse($record->created_at)->diffForHumans() }}</small>
                        </div>
                    </div>
                    
                    @if($record->updated_at && $record->updated_at !== $record->created_at)
                        <div class="row mb-3">
                            <div class="col-5">
                                <small class="fw-bold" style="color: var(--text-muted);">Updated:</small>
                            </div>
                            <div class="col-7">
                                <small>{{ \Carbon\Carbon::parse($record->updated_at)->format('M j, Y') }}</small>
                                <br><small style="color: var(--text-muted);">{{ \Carbon\Carbon::parse($record->updated_at)->diffForHumans() }}</small>
                            </div>
                        </div>
                    @endif

                    @if(isset($record->created_by))
                        <div class="row mb-3">
                            <div class="col-5">
                                <small class="fw-bold" style="color: var(--text-muted);">Created By:</small>
                            </div>
                            <div class="col-7">
                                <small>User #{{ $record->created_by }}</small>
                            </div>
                        </div>
                    @endif

                    @if(isset($record->updated_by) && $record->updated_by !== $record->created_by)
                        <div class="row mb-3">
                            <div class="col-5">
                                <small class="fw-bold" style="color: var(--text-muted);">Updated By:</small>
                            </div>
                            <div class="col-7">
                                <small>User #{{ $record->updated_by }}</small>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- 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.data.edit', [$dataType, $record->id]) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit me-2"></i>
                            Edit This Entry
                        </a>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="duplicateRecord()">
                            <i class="fas fa-copy me-2"></i>
                            Duplicate Entry
                        </button>
                        <hr class="my-2">
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="printRecord()">
                            <i class="fas fa-print me-2"></i>
                            Print Record
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm" onclick="exportRecord()">
                            <i class="fas fa-download me-2"></i>
                            Export Data
                        </button>
                        <hr class="my-2">
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteRecord()">
                            <i class="fas fa-trash me-2"></i>
                            Delete Entry
                        </button>
                    </div>
                </div>
            </div>

            <!-- Data Type Info -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-database me-2"></i>
                        Data Type Info
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-5">
                            <small class="fw-bold" style="color: var(--text-muted);">Name:</small>
                        </div>
                        <div class="col-7">
                            <small>{{ $dataType->name }}</small>
                        </div>
                    </div>
                    
                    @if($dataType->description)
                        <div class="row mb-3">
                            <div class="col-5">
                                <small class="fw-bold" style="color: var(--text-muted);">Description:</small>
                            </div>
                            <div class="col-7">
                                <small>{{ $dataType->description }}</small>
                            </div>
                        </div>
                    @endif

                    <div class="row mb-3">
                        <div class="col-5">
                            <small class="fw-bold" style="color: var(--text-muted);">Fields:</small>
                        </div>
                        <div class="col-7">
                            <small>{{ $sections->sum(fn($section) => $section->fields->count()) }} fields</small>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-5">
                            <small class="fw-bold" style="color: var(--text-muted);">Sections:</small>
                        </div>
                        <div class="col-7">
                            <small>{{ $sections->count() }} sections</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                        Confirm Delete
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this {{ strtolower($dataType->name) }} entry?</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This action cannot be undone. All data associated with this entry will be permanently removed.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancel
                    </button>
                    <form action="@if(isset($isManageDataRoute) && $isManageDataRoute){{ route('manage-data.destroy', [$dataType->slug, $record->id]) }}@else{{ route('data-management.data-types.data.destroy', [$dataType, $record->id]) }}@endif" 
                          method="POST" style="display: 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>
// Delete record function
function deleteRecord() {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Duplicate record function
function duplicateRecord() {
    if (confirm('Do you want to create a copy of this record?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        @if(isset($isManageDataRoute) && $isManageDataRoute)
            form.action = '{{ route("manage-data.create", $dataType->slug) }}';
        @else
            form.action = '{{ route("data-management.data-types.data.create", $dataType) }}';
        @endif
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add duplicate flag
        const duplicateFlag = document.createElement('input');
        duplicateFlag.type = 'hidden';
        duplicateFlag.name = 'duplicate_from';
        duplicateFlag.value = '{{ $record->id }}';
        form.appendChild(duplicateFlag);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Print record function
function printRecord() {
    // Create a print-friendly version
    const printContent = document.querySelector('.container-fluid').cloneNode(true);
    
    // Remove action buttons and sidebar
    const actionsToRemove = printContent.querySelectorAll('.btn, .dropdown, .col-lg-4');
    actionsToRemove.forEach(element => element.remove());
    
    // Create print window
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>{{ $dataType->name }} #{{ $record->id }}</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
            <style>
                @media print {
                    .card { box-shadow: none; border: 1px solid #dee2e6; }
                    .card-header { background-color: #f8f9fa !important; }
                    body { font-size: 12px; }
                }
            </style>
        </head>
        <body>
            <div class="container mt-4">
                <div class="mb-4">
                    <h3>{{ $dataType->name }} #{{ $record->id }}</h3>
                    <p class="text-muted">Generated on {{ now()->format('F j, Y \a\t g:i A') }}</p>
                </div>
                ${printContent.innerHTML}
            </div>
        </body>
        </html>
    `);
    printWindow.document.close();
    printWindow.print();
}

// Export record function
function exportRecord() {
    const recordData = {
        id: {{ $record->id }},
        data_type: '{{ $dataType->name }}',
        created_at: '{{ $record->created_at }}',
        updated_at: '{{ $record->updated_at }}',
        fields: {
            @foreach($sections as $section)
                @foreach($section->fields as $field)
                    '{{ $field->name }}': @json($record->{$field->name}),
                @endforeach
            @endforeach
        }
    };
    
    // Create download link
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(recordData, null, 2));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", `{{ $dataType->name }}_{{ $record->id }}_${new Date().toISOString().split('T')[0]}.json`);
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
    
    showAlert('success', 'Record data exported successfully!');
}

// Show alert function
function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    document.querySelector('.container-fluid').insertAdjacentHTML('afterbegin', alertHtml);
    
    // Auto-dismiss after 3 seconds
    setTimeout(() => {
        const alert = document.querySelector('.alert');
        if (alert) {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }
    }, 3000);
}

// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush