@extends('backend.master')
@section('title','Upload Apps')

@section('content')

{{-- Font Awesome --}}
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    :root{
        --primary:#2FAAA6;
        --primary-dark:#1f8f8b;
        --bg:#f5f5f5;
        --ink:#111827;
        --muted:#6b7280;
    }
    body{background:var(--bg);}
    .page-wrap{max-width:900px;margin:20px auto 60px;padding:0 12px;}
    .card-main{
        background:#fff;border-radius:18px;padding:16px 16px 20px;
        box-shadow:0 10px 28px rgba(15,23,42,.10);border:1px solid #e5e7eb;
    }
    .header-row{
        display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
    }
    .title{font-size:18px;font-weight:700;color:var(--ink);}
    .subtitle{font-size:13px;color:var(--muted);}
    .btn-add{
        border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;
        background:linear-gradient(135deg,var(--primary),var(--primary-dark));
        color:#fff;border:none;box-shadow:0 14px 30px rgba(31,143,139,.45);
        display:inline-flex;align-items:center;gap:6px;text-decoration:none;
    }
    .btn-add i{font-size:13px;}

    table{width:100%;border-collapse:collapse;font-size:13px;}
    th,td{padding:8px 7px;border-bottom:1px solid #eef2f7;white-space:nowrap;text-align:left;}
    th{background:#f9fafb;font-weight:600;color:#4b5563;}
    tr:hover{background:#f9fafb;}

    .file-name{
        font-size:13px;font-weight:600;color:var(--primary-dark);
        text-decoration:none;word-break:break-all;
    }
    .file-name:hover{text-decoration:underline;}

    .btn-xs{
        border-radius:999px;border:none;padding:5px 10px;font-size:11px;font-weight:600;
        display:inline-flex;align-items:center;gap:4px;cursor:pointer;
    }
    .btn-edit{background:#e0f2fe;color:#0369a1;}
    .btn-delete{background:#fee2e2;color:#b91c1c;}
    .badge-no{font-size:11px;color:#9ca3af;}
</style>

<div class="page-wrap">
    <div class="card-main">

        {{-- Header --}}
        <div class="header-row mb-2">
            <div>
                <div class="title">
                    <i class="fa-solid fa-mobile-screen-button"></i>
                    Upload Apps
                </div>
                <div class="subtitle">
                    Manage your uploaded app files (APK / ZIP etc).
                </div>
            </div>
            <a href="{{ route('upload-apps.create') }}" class="btn-add">
                <i class="fa-solid fa-plus"></i>
                <span>New Upload</span>
            </a>
        </div>

        {{-- Alert --}}
        @if(session('success'))
            <div class="alert alert-success py-2 px-3 mb-3" style="font-size:13px;">
                <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
            </div>
        @endif

        {{-- Table --}}
        <div style="overflow-x:auto;margin-top:6px;">
            <table>
                <thead>
                <tr>
                    <th style="width:60px;">ID</th>
                    <th>File</th>
                    <th>Uploaded at</th>
                    <th style="text-align:right;width:150px;">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($apps as $app)
                    <tr>
                        <td>#{{ $app->id }}</td>
                        <td>
                            @if($app->upload_apk)
                                <a href="{{ asset('storage/'.$app->upload_apk) }}"
                                   target="_blank"
                                   class="file-name">
                                    {{ basename($app->upload_apk) }}
                                </a>
                            @else
                                <span class="badge-no">No file</span>
                            @endif
                        </td>
                        <td style="font-size:12px;color:#6b7280;">
                            {{ $app->created_at?->format('d M Y, h:i A') }}
                        </td>
                        <td style="text-align:right;">
                            <a href="{{ route('upload-apps.edit',$app) }}" class="btn-xs btn-edit">
                                <i class="fa-solid fa-pen-to-square"></i> Edit
                            </a>

                            <form action="{{ route('upload-apps.destroy',$app) }}"
                                  method="POST"
                                  style="display:inline;"
                                  onsubmit="return confirm('Delete this app?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-xs btn-delete">
                                    <i class="fa-solid fa-trash-can"></i> Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center" style="font-size:13px;color:#6b7280;padding:16px 8px;">
                            No uploads found.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $apps->links() }}
        </div>
    </div>
</div>

@endsection