@extends('layouts.main')

@section('title', $dataSource->title . ' - Data Source')

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #E3F2FD;">
                            @if($dataSource->icon_url)
                                <img src="{{ $dataSource->icon_url }}" alt="{{ $dataSource->title }}" 
                                     style="width: 50px; height: 50px; object-fit: cover; border-radius: 8px;">
                            @else
                                <i class="bx bx-data"></i>
                            @endif
                        </div>
                        <div class="block-heading">
                            <h3>{{ $dataSource->title }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <code>{{ $dataSource->slug }}</code>
                                <span class="badge {{ $dataSource->status_badge_class }}">{{ $dataSource->status_label }}</span>
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('data-sources.edit', $dataSource) }}" class="btn btn-primary">
                            <i class="bx bx-edit"></i> Edit
                        </a>
                        <form action="{{ route('data-sources.destroy', $dataSource) }}" method="POST" class="d-inline"
                              onsubmit="return confirm('Are you sure you want to delete this data source?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger">
                                <i class="bx bx-trash"></i> Delete
                            </button>
                        </form>
                        <a href="{{ route('data-sources.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back to List
                        </a>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="row">
                    <!-- Data Source Information -->
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="bx bx-info-circle me-2"></i>Data Source Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Title</label>
                                            <div class="fw-semibold">{{ $dataSource->title }}</div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Slug</label>
                                            <div><code>{{ $dataSource->slug }}</code></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Status</label>
                                            <div>
                                                <span class="badge {{ $dataSource->status_badge_class }} fs-6">
                                                    {{ $dataSource->status_label }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label text-muted">Created</label>
                                            <div>{{ $dataSource->created_at->format('M d, Y h:i A') }}</div>
                                            <small class="text-muted">{{ $dataSource->created_at->diffForHumans() }}</small>
                                        </div>
                                    </div>
                                </div>

                                @if($dataSource->updated_at != $dataSource->created_at)
                                    <div class="mt-3 pt-3 border-top">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label text-muted">Last Updated</label>
                                                <div>{{ $dataSource->updated_at->format('M d, Y h:i A') }}</div>
                                                <small class="text-muted">{{ $dataSource->updated_at->diffForHumans() }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Icon Information -->
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="bx bx-image me-2"></i>Icon</h5>
                            </div>
                            <div class="card-body text-center">
                                @if($dataSource->icon_url)
                                    <div class="mb-3">
                                        <img src="{{ $dataSource->icon_url }}" alt="{{ $dataSource->title }}" 
                                             class="img-fluid rounded shadow-sm" 
                                             style="max-width: 150px; max-height: 150px; object-fit: cover;">
                                    </div>
                                    
                                    @if($dataSource->icon)
                                        <div class="mb-3">
                                            <h6 class="mb-2">File Details</h6>
                                            <div class="text-start">
                                                <div class="mb-1">
                                                    <small class="text-muted">Original Name:</small><br>
                                                    <span class="fw-semibold">{{ $dataSource->icon->original_name }}</span>
                                                </div>
                                                <div class="mb-1">
                                                    <small class="text-muted">File Size:</small><br>
                                                    <span class="fw-semibold">{{ $dataSource->icon->human_file_size }}</span>
                                                </div>
                                                <div class="mb-1">
                                                    <small class="text-muted">MIME Type:</small><br>
                                                    <span class="fw-semibold">{{ $dataSource->icon->mime_type }}</span>
                                                </div>
                                                <div class="mb-1">
                                                    <small class="text-muted">Uploaded:</small><br>
                                                    <span class="fw-semibold">{{ $dataSource->icon->created_at->format('M d, Y') }}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-grid">
                                            <a href="{{ route('data-sources.download-icon', [$dataSource, $dataSource->icon]) }}" 
                                               class="btn btn-outline-primary btn-sm">
                                                <i class="bx bx-download"></i> Download Icon
                                            </a>
                                        </div>
                                    @endif
                                @else
                                    <div class="text-muted py-4">
                                        <i class="bx bx-image" style="font-size: 3rem; opacity: 0.3;"></i>
                                        <h6 class="mt-2">No Icon Uploaded</h6>
                                        <p class="mb-0">This data source doesn't have an icon.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Actions -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bx bx-cog me-2"></i>Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-2 flex-wrap">
                            <a href="{{ route('data-sources.edit', $dataSource) }}" class="btn btn-outline-primary">
                                <i class="bx bx-edit"></i> Edit Data Source
                            </a>
                            
                            @if($dataSource->status == \App\Models\DataSource::STATUS_ACTIVE)
                                <button class="btn btn-outline-warning" onclick="toggleStatus({{ $dataSource->id }}, 0)">
                                    <i class="bx bx-pause"></i> Deactivate
                                </button>
                            @else
                                <button class="btn btn-outline-success" onclick="toggleStatus({{ $dataSource->id }}, 1)">
                                    <i class="bx bx-play"></i> Activate
                                </button>
                            @endif

                            <form action="{{ route('data-sources.destroy', $dataSource) }}" method="POST" class="d-inline"
                                  id="deleteForm"
                                  onsubmit="return confirm('Are you sure you want to delete this data source? This action cannot be undone.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger">
                                    <i class="bx bx-trash"></i> Delete Data Source
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
function toggleStatus(id, status) {
    if (confirm('Are you sure you want to change the status of this data source?')) {
        // Create a form to submit the status change
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `{{ route('data-sources.update', $dataSource) }}`;
        
        // Add CSRF token
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        // Add method spoofing
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'PUT';
        form.appendChild(methodField);
        
        // Add current data
        const titleField = document.createElement('input');
        titleField.type = 'hidden';
        titleField.name = 'title';
        titleField.value = '{{ $dataSource->title }}';
        form.appendChild(titleField);
        
        const slugField = document.createElement('input');
        slugField.type = 'hidden';
        slugField.name = 'slug';
        slugField.value = '{{ $dataSource->slug }}';
        form.appendChild(slugField);
        
        // Add status field
        const statusField = document.createElement('input');
        statusField.type = 'hidden';
        statusField.name = 'status';
        statusField.value = status;
        form.appendChild(statusField);
        
        // Append to body and submit
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection