@extends('layouts.app')

@section('title', 'Applications')

@section('content')
<div class="row mb-5">
    <div class="col-12 d-flex justify-content-between align-items-end">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
                    <li class="breadcrumb-item active">Applications</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-0">Application Inventory</h2>
        </div>
        <a href="{{ rtrim(request()->getBaseUrl(), '/') }}/admin/applications/create" class="btn btn-primary rounded-pill px-4 shadow">
            <i class="bi bi-plus-lg me-2"></i> Upload New Application
        </a>
    </div>
</div>

<div class="glass-card rounded-4 border-0 overflow-hidden shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr class="text-muted small text-uppercase fw-bold border-bottom">
                    <th class="ps-4 border-0 py-3">Application</th>
                    <th class="border-0 py-3 text-center">Platform</th>
                    <th class="border-0 py-3">Category</th>
                    <th class="border-0 py-3">Size</th>
                    <th class="border-0 py-3">Downloads</th>
                    <th class="border-0 py-3 text-end pe-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($applications as $app)
                    <tr>
                        <td class="ps-4 py-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-body rounded-3 p-1 me-3 border shadow-sm transition">
                                    <img src="{{ $app->icon_url ?? 'https://via.placeholder.com/32' }}" class="rounded" width="40" height="40" alt="" onerror="this.onerror=null;this.src='https://via.placeholder.com/40?text=App';">
                                </div>
                                <div>
                                    <div class="fw-bold text-main">{{ $app->name }}</div>
                                    <div class="text-muted x-small" style="font-size: 0.75rem;">v{{ $app->version }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                             <span class="badge {{ $app->platform == 'Android' ? 'bg-success-subtle text-success' : ($app->platform == 'PC' ? 'bg-primary-subtle text-primary' : 'bg-dark-subtle text-dark') }} px-3 py-2 rounded-pill fw-bold">
                                {{ $app->platform }}
                            </span>
                        </td>
                        <td>
                            <span class="text-muted fw-500">{{ $app->category->name ?? 'None' }}</span>
                        </td>
                        <td>
                            <span class="text-muted small fw-bold">{{ $app->download_size_human ?? 'N/A' }}</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-download text-primary me-2"></i>
                                <span class="fw-bold text-main">{{ number_format($app->downloads) }}</span>
                            </div>
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group">
                                <a href="{{ rtrim(request()->getBaseUrl(), '/') }}/admin/applications/{{ $app->id }}/edit" class="btn btn-sm btn-outline-primary border rounded-pill px-3 me-2 transition">
                                    <i class="bi bi-pencil-square"></i> Edit
                                </a>
                                <form action="{{ rtrim(request()->getBaseUrl(), '/') }}/admin/applications/{{ $app->id }}/delete" method="POST" class="d-inline-block">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill px-3 transition" onclick="return confirm('Permanently remove this application?')">
                                        <i class="bi bi-trash3"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
    .text-main { color: var(--text-main) !important; }
    .table-hover tbody tr:hover { background-color: rgba(0, 102, 255, 0.02); }
    [data-theme="dark"] .table { color: var(--text-main); }
    [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.02); }
    [data-theme="dark"] .bg-success-subtle { background-color: rgba(25, 135, 84, 0.1) !important; }
    [data-theme="dark"] .bg-primary-subtle { background-color: rgba(13, 110, 253, 0.1) !important; }
    [data-theme="dark"] .bg-dark-subtle { background-color: rgba(255, 255, 255, 0.1) !important; color: #f8fafc !important; }
    .transition { transition: all 0.3s ease; }
</style>
@endsection