@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @php
        $departments = [];
        $categories = [];
        foreach ($listapp as $filterApp) {
            $appParts = array_map('trim', explode(' - ', (string) $filterApp->appname, 2));
            $departments[] = $appParts[0] ?: 'Lainnya';
            $categories[] = $appParts[1] ?? ($filterApp->title ?: 'Lainnya');
        }
        $departments = array_values(array_unique($departments));
        $categories = array_values(array_unique($categories));
        sort($departments);
        sort($categories);
    @endphp

    <div class="container-fluid pb-4 app-catalog">
        <section class="catalog-overview">
            <div id="catalogCarousel" class="carousel slide catalog-hero" data-bs-ride="carousel">
                <div class="carousel-inner h-100">
                    <div class="carousel-item active h-100 catalog-slide"
                        style="background-image: linear-gradient(90deg, rgba(3, 91, 95, .92), rgba(4, 139, 141, .55)), url('{{ asset('/storage/carousel-1.jpg') }}')">
                        <div class="catalog-hero-copy">
                            <span class="catalog-eyebrow">MSJ APPLICATION CATALOG</span>
                            <h1>Selamat datang di Katalog Aplikasi PT Multispunindo Jaya Tbk</h1>
                            <p>Portal terintegrasi yang memberikan Anda akses langsung ke berbagai aplikasi kami.</p>
                        </div>
                    </div>
                    <div class="carousel-item h-100 catalog-slide"
                        style="background-image: linear-gradient(90deg, rgba(3, 91, 95, .92), rgba(4, 139, 141, .55)), url('{{ asset('/storage/carousel-2.jpg') }}')">
                        <div class="catalog-hero-copy">
                            <span class="catalog-eyebrow">MUDAH DAN TERINTEGRASI</span>
                            <h1>Katalog Aplikasi kami dirancang untuk memudahkan Anda</h1>
                            <p>Semua aplikasi telah dikumpulkan dan disusun rapi dalam satu platform.</p>
                        </div>
                    </div>
                    <div class="carousel-item h-100 catalog-slide"
                        style="background-image: linear-gradient(90deg, rgba(3, 91, 95, .92), rgba(4, 139, 141, .55)), url('{{ asset('/storage/carousel-3.jpg') }}')">
                        <div class="catalog-hero-copy">
                            <span class="catalog-eyebrow">SATU PORTAL</span>
                            <h1>Jelajahi, temukan, dan gunakan berbagai aplikasi kami</h1>
                            <p>Seluruh aplikasi kami dapat dijangkau hanya dalam beberapa klik.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev catalog-carousel-control" type="button"
                    data-bs-target="#catalogCarousel" data-bs-slide="prev" aria-label="Slide sebelumnya">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                </button>
                <button class="carousel-control-next catalog-carousel-control" type="button"
                    data-bs-target="#catalogCarousel" data-bs-slide="next" aria-label="Slide berikutnya">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                </button>
            </div>

            <div class="catalog-tools">
                <div class="catalog-total">
                    <div>
                        <span>Total Aplikasi</span>
                        <strong id="visibleCount">{{ $listapp->count() }}</strong>
                        <small>Applications</small>
                    </div>
                    <span class="catalog-total-icon"><i class="ni ni-collection"></i></span>
                </div>
                <label class="catalog-search" for="searchApp">
                    <input id="searchApp" type="search" placeholder="Cari aplikasi..." autocomplete="off">
                    <button type="button" id="clearSearch" aria-label="Hapus pencarian">
                        <i class="ni ni-fat-delete"></i>
                    </button>
                    <i class="ni ni-zoom-split-in catalog-search-icon"></i>
                </label>
            </div>
        </section>

        <div class="catalog-filterbar">
            {{-- <span class="catalog-filter-icon" title="Filter aplikasi"><i class="ni ni-settings-gear-65"></i></span> --}}
            {{-- <label class="catalog-filter-select">
                <span>Departemen</span>
                <select id="departmentFilter">
                    <option value="">Semua</option>
                    @foreach ($departments as $department)
                        <option value="{{ strtolower($department) }}">{{ $department }}</option>
                    @endforeach
                </select>
                <i class="ni ni-bold-down"></i>
            </label>
            <label class="catalog-filter-select">
                <span>Status</span>
                <select id="statusFilter">
                    <option value="">Semua</option>
                    <option value="online">Online</option>
                    <option value="offline">Offline</option>
                </select>
                <i class="ni ni-bold-down"></i>
            </label>
            <label class="catalog-filter-select">
                <span>Kategori</span>
                <select id="categoryFilter">
                    <option value="">Semua</option>
                    @foreach ($categories as $category)
                        <option value="{{ strtolower($category) }}">{{ $category }}</option>
                    @endforeach
                </select>
                <i class="ni ni-bold-down"></i>
            </label> --}}
            {{-- <span class="catalog-filter-count"><strong id="visibleCount">{{ $listapp->count() }}</strong> aplikasi</span> --}}
            <label class="catalog-sort">
                <span>Urutkan</span>
                <select id="sortApp">
                    <option value="default">Terbaru</option>
                    <option value="az">Nama A-Z</option>
                    <option value="za">Nama Z-A</option>
                </select>
                <i class="ni ni-bold-down"></i>
            </label>
        </div>

        <div class="catalog-grid" id="appGrid">
            @foreach ($listapp as $list)
                @php
                    $startDate = $list->start_at ? new DateTime($list->start_at) : null;
                    $months = [
                        'Jan' => 'Jan',
                        'Feb' => 'Feb',
                        'Mar' => 'Mar',
                        'Apr' => 'Apr',
                        'May' => 'Mei',
                        'Jun' => 'Jun',
                        'Jul' => 'Jul',
                        'Aug' => 'Agu',
                        'Sep' => 'Sep',
                        'Oct' => 'Okt',
                        'Nov' => 'Nov',
                        'Dec' => 'Des',
                    ];
                    $dateLabel = $startDate ? strtr($startDate->format('M Y'), $months) : '-';
                    $appParts = array_map('trim', explode(' - ', (string) $list->appname, 2));
                    $department = strtolower($appParts[0] ?: 'Lainnya');
                    $category = strtolower($appParts[1] ?? ($list->title ?: 'Lainnya'));
                    $status = $list->flag_access == '1' ? 'online' : 'offline';
                    $searchText = strtolower(trim($list->title . ' ' . $list->appname . ' ' . $dateLabel));
                    $versionUrl =
                        substr($list->url, 0, 4) === 'http'
                            ? $list->url . '/api/laravel-version?token=' . env('APPVERSION')
                            : URL::to($list->url . '/api/laravel-version?token=' . env('APPVERSION'));
                    $accessUrl =
                        substr($list->url, 0, 4) === 'http'
                            ? $list->url . '/api/today-access-summary?token=' . env('APPVERSION')
                            : URL::to($list->url . '/api/today-access-summary?token=' . env('APPVERSION'));
                    $token = openssl_encrypt(
                        $list->username_app . ',' . $list->remember_token . ',' . date('d-m-Y'),
                        env('ALG'),
                        env('KEY'),
                        0,
                        env('SCR'),
                    );
                    $token = str_replace(['+', '/', '='], ['-', '_', '@'], $token);

                    if ($list->appid === 'msjapp') {
                        $versionUrl = URL::to('/api/laravel-version?token=' . env('APPVERSION'));
                        $accessUrl = URL::to('/api/today-access-summary?token=' . env('APPVERSION'));
                    }
                    if ($list->flag_access == '0') {
                        $versionUrl = '';
                        $accessUrl = '';
                    }

                    $appUrl =
                        $list->appid === 'msjapp'
                            ? URL::to('/dashboard')
                            : (substr($list->url, 0, 4) === 'http'
                                ? $list->url . '/auth/' . $token
                                : URL::to($list->url . '/auth/' . $token));
                @endphp

                <article class="catalog-card" data-name="{{ $searchText }}" data-order="{{ $loop->index }}"
                    data-department="{{ $department }}" data-category="{{ $category }}"
                    data-status="{{ $status }}" data-start="{{ $startDate ? $startDate->format('Y-m-d') : '' }}"
                    data-appid="{{ $list->appid }}" data-username="{{ $list->username }}"
                    data-version-url="{{ $versionUrl }}" data-access-url="{{ $accessUrl }}">
                    <div class="catalog-cover">
                        <img src="{{ asset('/storage/' . $list->image) }}" alt="{{ $list->title }}" loading="lazy">
                        {{-- <span class="catalog-app-icon"><i class="ni ni-app"></i></span> --}}
                    </div>
                    <button type="button" class="catalog-menu syncpass" data-app-name="{{ $list->appname }}"
                        data-app-id="{{ $list->appid }}" data-app-username="{{ $list->username }}"
                        aria-label="Sinkronisasi password" title="Sinkronisasi password">
                        <i class="ni ni-key-25 text-warning"></i>
                    </button>

                    <div class="catalog-card-body">
                        <div class="catalog-card-heading">
                            <div>
                                <h2>{{ $list->title }}</h2>
                                <p>{{ $list->appname }}</p>
                                <small class="catalog-start"><i class="ni ni-time-alarm"></i> Mulai
                                    {{ $dateLabel }}</small>
                            </div>
                            <span class="catalog-version {{ $list->appid }}-version">
                                v <b class="js-version">-</b>
                            </span>
                        </div>

                        <div class="catalog-stats">
                            <div><span><i class="ni ni-active-40"></i> Access</span><strong class="js-access">-</strong>
                            </div>
                            <div><span><i class="ni ni-single-02"></i> Users</span><strong class="js-users">-</strong></div>
                            <div><span><i class="ni ni-calendar-grid-58"></i> Latest</span><strong
                                    class="js-latest">-</strong></div>
                        </div>
                        <span class="catalog-day-diff js-day-diff" hidden></span>

                        <a class="catalog-open-link" href="{{ $appUrl }}"
                            @if ($list->appid !== 'msjapp') target="_blank" @endif>
                            Buka aplikasi <i class="ni ni-curved-next"></i>
                        </a>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="catalog-empty" id="emptyState" hidden>
            <i class="ni ni-zoom-split-in"></i>
            <h3>Aplikasi tidak ditemukan</h3>
            <p>Coba gunakan kata kunci lain.</p>
        </div>
    </div>
@endsection

<style>
    .app-catalog {
        --catalog-primary: #078889;
        --catalog-dark: #075f64;
        color: #17324d;
    }

    .catalog-overview {
        display: flex;
        align-items: stretch;
        gap: 16px;
        width: 100%;
    }

    .catalog-hero {
        flex: 1 1 auto;
        min-width: 0;
        height: 185px;
        min-height: 185px;
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        background: #087578;
        box-shadow: 0 10px 30px rgba(7, 95, 100, .16);
    }

    .catalog-slide {
        padding: 30px 54px 30px 34px;
        background-size: cover;
        background-position: center;
    }

    .catalog-hero-copy {
        position: relative;
        z-index: 2;
        max-width: 570px;
        color: white;
    }

    .catalog-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
        font-weight: 700;
        opacity: .72;
    }

    .catalog-hero h1 {
        color: white;
        font-size: clamp(22px, 2.2vw, 31px);
        margin: 12px 0 8px;
    }

    .catalog-hero p {
        font-size: 14px;
        margin: 0;
        opacity: .92;
    }

    .catalog-carousel-control {
        width: 42px;
        opacity: .45;
    }

    .catalog-tools {
        flex: 0 0 clamp(290px, 34%, 390px);
        display: grid;
        grid-template-rows: 133px 42px;
        gap: 10px;
        min-width: 0;
        height: 185px;
        position: relative;
        z-index: 5;
        visibility: visible;
        opacity: 1;
    }

    .catalog-total,
    .catalog-search,
    .catalog-filterbar {
        background: rgba(255, 255, 255, .96);
        border: 1px solid #e7edf0;
        box-shadow: 0 6px 22px rgba(26, 59, 82, .06);
    }

    .catalog-total {
        min-width: 0;
        border-radius: 14px;
        padding: 20px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .catalog-total span,
    .catalog-total small {
        display: block;
        font-size: 12px;
        color: #63758a;
    }

    .catalog-total strong {
        display: block;
        font-size: 40px;
        line-height: 1.05;
        color: var(--catalog-primary);
    }

    .catalog-total .catalog-total-icon {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #e5f5f5;
        color: var(--catalog-primary);
        font-size: 22px;
    }

    .catalog-search {
        width: 100%;
        height: 42px;
        padding: 0 16px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #7a8da1;
    }

    .catalog-search-icon {
        flex: 0 0 auto;
        color: #344d68;
        font-size: 15px;
    }

    .catalog-search input {
        border: 0;
        outline: 0;
        width: 100%;
        font-size: 13px;
        color: #263c52;
        background: transparent;
    }

    .catalog-search input::-webkit-search-cancel-button {
        display: none;
    }

    .catalog-search button {
        display: none;
        border: 0;
        background: transparent;
        color: #789;
        padding: 5px;
    }

    .catalog-search.has-value button {
        display: block;
    }

    .catalog-filterbar {
        margin: 18px 0;
        min-height: 58px;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .catalog-filter-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #e7edf0;
        color: var(--catalog-primary);
        display: grid;
        place-items: center;
        cursor: pointer;
    }

    .catalog-filter-select,
    .catalog-sort {
        min-width: 185px;
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #e7edf0;
        border-radius: 10px;
        padding: 0 12px;
        height: 42px;
        font-size: 12px;
        color: #7a8b9e;
        background: #fff;
        box-shadow: 0 4px 14px rgba(26, 59, 82, .04);
    }

    .catalog-filter-select span,
    .catalog-sort span {
        white-space: nowrap;
    }

    .catalog-filter-select select,
    .catalog-sort select {
        flex: 1;
        min-width: 0;
        appearance: none;
        border: 0;
        outline: 0;
        background: transparent;
        color: #243b52;
        font-weight: 600;
        cursor: pointer;
    }

    .catalog-filter-count {
        color: #718297;
        font-size: 11px;
        white-space: nowrap;
    }

    .catalog-sort {
        margin-left: auto;
    }

    .catalog-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .catalog-card {
        min-width: 0;
        overflow: hidden;
        position: relative;
        border-radius: 16px;
        background: white;
        border: 1px solid #e7edf0;
        box-shadow: 0 5px 18px rgba(26, 59, 82, .055);
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .catalog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(26, 59, 82, .12);
    }

    .catalog-cover {
        height: 145px;
        margin: 10px 10px 0;
        overflow: hidden;
        position: relative;
        border-radius: 12px;
        background: #e8f5f5;
    }

    .catalog-cover>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .catalog-card:hover .catalog-cover>img {
        transform: scale(1.03);
    }

    .catalog-app-icon {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: rgba(2, 120, 123, .94);
        color: white;
        font-size: 20px;
        box-shadow: 0 5px 12px rgba(3, 83, 87, .2);
    }

    .catalog-menu {
        position: absolute;
        z-index: 3;
        top: 18px;
        right: 18px;
        width: 29px;
        height: 27px;
        border: 0;
        border-radius: 9px;
        background: rgba(233, 247, 247, .93);
        color: #0b7073;
        cursor: pointer;
    }

    .catalog-card-body {
        padding: 12px 13px 13px;
    }

    .catalog-card-heading {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        align-items: flex-start;
    }

    .catalog-card h2 {
        font-size: 15px;
        color: #20364e;
        margin: 0 0 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-card-heading p {
        font-size: 11px;
        color: #6f8295;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-start {
        display: block;
        margin-top: 5px;
        color: #8192a3;
        font-size: 9px;
    }

    .catalog-version {
        flex: 0 0 auto;
        padding: 4px 8px;
        border-radius: 9px;
        background: #d7f4f1;
        color: #078083;
        font-size: 10px;
        font-weight: 600;
    }

    .catalog-version.is-old,
    .catalog-version.is-offline {
        background: #ffe5e5;
        color: #cf4c4c;
    }

    .catalog-stats {
        display: grid;
        grid-template-columns: .75fr .75fr 1.5fr;
        margin-top: 14px;
        padding-top: 11px;
        border-top: 1px solid #edf1f3;
    }

    .catalog-stats>div {
        min-width: 0;
        padding: 0 7px;
        border-right: 1px solid #edf1f3;
    }

    .catalog-stats>div:first-child {
        padding-left: 0;
    }

    .catalog-stats>div:last-child {
        border: 0;
        padding-right: 0;
    }

    .catalog-stats span,
    .catalog-stats strong {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-stats span {
        font-size: 8px;
        color: #7e90a1;
        margin-bottom: 4px;
    }

    .catalog-stats strong {
        color: #3d5268;
        font-size: 10px;
    }

    .catalog-day-diff {
        display: inline-block;
        margin-top: 8px;
        padding: 3px 7px;
        border-radius: 7px;
        color: #c74343;
        background: #ffe7e7;
        font-size: 8px;
        font-weight: 700;
    }

    .catalog-card.is-offline h2 {
        color: #cf4c4c;
    }

    .catalog-open-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: 13px;
        min-height: 35px;
        border-radius: 9px;
        color: white;
        background: var(--catalog-primary);
        font-size: 11px;
        font-weight: 700;
        opacity: 0;
        transform: translateY(5px);
        transition: .2s ease;
    }

    .catalog-open-link:hover {
        color: white;
        background: var(--catalog-dark);
    }

    .catalog-card:hover .catalog-open-link,
    .catalog-open-link:focus {
        opacity: 1;
        transform: translateY(0);
    }

    .catalog-empty {
        text-align: center;
        color: #718297;
        padding: 60px 20px;
    }

    .catalog-empty i {
        font-size: 28px;
        color: #a8bac7;
    }

    .catalog-empty h3 {
        margin: 13px 0 4px;
        font-size: 17px;
    }

    @media (max-width: 1199px) {
        .catalog-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 767px) {
        .app-catalog {
            padding-left: 14px;
            padding-right: 14px;
        }

        .catalog-overview {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .catalog-hero {
            height: 132px;
            min-height: 132px;
            order: 0;
        }

        .catalog-slide {
            padding: 21px 35px 18px 20px;
        }

        .catalog-hero-copy {
            max-width: 78%;
        }

        .catalog-hero h1 {
            font-size: 20px;
            margin-top: 8px;
        }

        .catalog-hero p {
            font-size: 11px;
        }

        .catalog-eyebrow {
            display: none;
        }

        .catalog-tools {
            flex: none;
            width: 100%;
            height: 160px;
            display: grid;
            grid-template-rows: 108px 42px;
            gap: 10px;
            order: 1;
        }

        .catalog-total {
            min-height: 108px;
            padding: 16px 18px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .96);
        }

        .catalog-total strong {
            font-size: 32px;
        }

        .catalog-total .catalog-total-icon {
            background: #e5f5f5;
            color: var(--catalog-primary);
        }

        .catalog-filterbar {
            margin: 12px 0;
            display: grid;
            grid-template-columns: 42px repeat(2, minmax(135px, 1fr));
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }

        .catalog-filterbar::-webkit-scrollbar {
            display: none;
        }

        .catalog-filter-select,
        .catalog-sort {
            min-width: 135px;
        }

        .catalog-filter-count {
            display: none;
        }

        .catalog-sort {
            margin-left: 0;
        }

        .catalog-filter-select span,
        .catalog-sort>span {
            display: none;
        }

        .catalog-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .catalog-card {
            display: block;
            border-radius: 13px;
            min-height: 0;
        }

        .catalog-card:hover {
            transform: none;
        }

        .catalog-cover {
            width: auto;
            height: 92px;
            margin: 7px 7px 0;
            border-radius: 11px;
        }

        .catalog-cover>img {
            object-fit: cover;
        }

        .catalog-app-icon {
            display: none;
        }

        .catalog-menu {
            right: 11px;
            top: 11px;
            width: 27px;
            height: 25px;
            background: rgba(233, 246, 246, .94);
        }

        .catalog-card-body {
            min-width: 0;
            padding: 9px 9px 10px;
        }

        .catalog-card h2 {
            font-size: 13px;
        }

        .catalog-card-heading p {
            font-size: 9px;
        }

        .catalog-card-heading {
            padding-right: 0;
            gap: 4px;
        }

        .catalog-version {
            position: static;
            font-size: 7px;
            padding: 3px 5px;
        }

        .catalog-start {
            margin-top: 3px;
            font-size: 7px;
        }

        .catalog-day-diff {
            margin-top: 4px;
            font-size: 7px;
        }

        .catalog-stats {
            grid-template-columns: 1fr 1fr;
            margin-top: 10px;
            padding-top: 8px;
        }

        .catalog-stats>div {
            padding: 0 4px;
        }

        .catalog-stats>div:nth-child(2) {
            border-right: 0;
        }

        .catalog-stats>div:last-child {
            grid-column: 1 / -1;
            margin-top: 6px;
            padding: 6px 0 0;
            border-top: 1px solid #edf1f3;
        }

        .catalog-stats span {
            font-size: 7px;
        }

        .catalog-stats strong {
            font-size: 8px;
        }

        .catalog-open-link {
            display: none;
        }

    }

    @media (max-width: 400px) {
        .catalog-cover {
            height: 78px;
        }

        .catalog-stats>div {
            padding: 0 4px;
        }
    }
</style>

@push('js')
    <script>
        $(function() {
            const $grid = $('#appGrid');
            const $cards = $grid.find('.catalog-card');
            const $search = $('#searchApp');

            function filterApps() {
                const query = $search.val().trim().toLowerCase();
                const department = $('#departmentFilter').val();
                const status = $('#statusFilter').val();
                const category = $('#categoryFilter').val();
                let visible = 0;
                $search.closest('.catalog-search').toggleClass('has-value', query.length > 0);
                $cards.each(function() {
                    const show = this.dataset.name.indexOf(query) !== -1 &&
                        (!department || this.dataset.department === department) &&
                        (!status || this.dataset.status === status) &&
                        (!category || this.dataset.category === category);
                    $(this).toggle(show);
                    if (show) visible++;
                });
                $('#visibleCount').text(visible);
                $('#emptyState').prop('hidden', visible !== 0);
            }

            $search.on('input', filterApps);
            $('#departmentFilter, #statusFilter, #categoryFilter').on('change', filterApps);
            $('#clearSearch').on('click', function() {
                $search.val('').trigger('input').focus();
            });
            $('.catalog-filter-icon').on('click', function() {
                $('#departmentFilter, #statusFilter, #categoryFilter').val('');
                filterApps();
            });
            $('#sortApp').on('change', function() {
                const mode = this.value;
                const sorted = $cards.get().sort(function(a, b) {
                    if (mode === 'default') {
                        const dateResult = String(b.dataset.start).localeCompare(String(a.dataset
                            .start));
                        return dateResult || Number(a.dataset.order) - Number(b.dataset.order);
                    }
                    const result = a.dataset.name.localeCompare(b.dataset.name, 'id');
                    return mode === 'az' ? result : -result;
                });
                $grid.append(sorted);
            });
            $('#sortApp').trigger('change');

            $cards.each(function() {
                const card = this;
                const versionUrl = card.dataset.versionUrl;
                const accessUrl = card.dataset.accessUrl;

                if (versionUrl) {
                    $.get(versionUrl).done(function(response) {
                        const version = response.laravel_version || '-';
                        $(card).find('.js-version').text(version);
                        if (parseInt(version) < parseInt(@js($version_laravel->name ?? 0))) {
                            $(card).find('.catalog-version').addClass('is-old');
                        }
                    }).fail(function() {
                        $(card).find('.catalog-version').addClass('is-offline');
                    });
                } else {
                    $(card).find('.catalog-version').addClass('is-offline');
                }

                if (accessUrl) {
                    $.get(accessUrl).done(function(response) {
                        $(card).find('.js-access').text(response.total_access_count ?? '-');
                        $(card).find('.js-users').text(response.unique_users_count ?? '-');
                        if (response.latest_access && response.latest_access !== 'null') {
                            $(card).find('.js-latest').text(response.latest_access);
                            const latestDate = new Date(String(response.latest_access).split(' ')[
                                0]);
                            if (!Number.isNaN(latestDate.getTime())) {
                                const today = new Date();
                                today.setHours(0, 0, 0, 0);
                                latestDate.setHours(0, 0, 0, 0);
                                const daysDiff = Math.floor((today - latestDate) / 86400000);
                                if (daysDiff !== 0) {
                                    $(card).find('.js-day-diff')
                                        .text(daysDiff > 0 ? `-${daysDiff} hari` :
                                            `${Math.abs(daysDiff)} hari lagi`)
                                        .prop('hidden', false);
                                }
                            }
                        } else {
                            $(card).find('.js-latest').text('-');
                        }
                    }).fail(function() {
                        $(card).addClass('is-offline');
                        $(card).find('.js-access, .js-users, .js-latest').text('-');
                    });
                } else {
                    $(card).addClass('is-offline');
                }
            });

            $cards.on('click', function(event) {
                if ($(event.target).closest('.syncpass, .catalog-open-link').length) return;
                openApplication(this);
            });
            $('.catalog-open-link').on('click', function(event) {
                event.preventDefault();
                event.stopPropagation();
                openApplication($(this).closest('.catalog-card')[0]);
            });
            $('.syncpass').on('click', function(event) {
                syncpass(event, this.dataset.appName, this.dataset.appId, this.dataset.appUsername);
            });
        });

        function openApplication(card) {
            if (card.dataset.loading === '1') return;
            card.dataset.loading = '1';
            const link = card.querySelector('.catalog-open-link');
            Swal.fire({
                title: 'Opening a program...',
                text: 'Sedang membuka program!',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
            $.get(@js(url($url_menu) . '/api/cekakses'), {
                    appid: card.dataset.appid,
                    username: card.dataset.username
                })
                .done(function(res) {
                    Swal.close();
                    if (String(res) === '1' || (res && res.allowed == 1)) {
                        link.target === '_blank' ? window.open(link.href, '_blank') : window.location.assign(link.href);
                    } else {
                        Swal.fire({
                            title: 'Sorry!',
                            text: 'Anda tidak punya akses ke program ini!',
                            icon: 'error',
                            confirmButtonColor: '#078889'
                        });
                    }
                })
                .fail(function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'Gagal memeriksa akses.',
                        icon: 'error'
                    });
                })
                .always(function() {
                    card.dataset.loading = '0';
                });
        }

        function syncpass(event, name, appid, username) {
            event.preventDefault();
            event.stopPropagation();
            Swal.fire({
                    title: 'Konfirmasi',
                    text: `Sinkronkan password ${name} untuk username ${username}?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, Sinkron',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#078889'
                })
                .then(function(result) {
                    if (!result.isConfirmed) return;
                    Swal.fire({
                        title: 'Processing...',
                        text: 'Sinkronisasi password sedang berjalan',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                    $.get(@js(url($url_menu) . '/api/syncpass'), {
                            appid: appid,
                            username: username
                        })
                        .done(function(response) {
                            const messages = {
                                1: ['Berhasil!', 'Sinkronisasi password berhasil.', 'success'],
                                2: ['Warning!', 'Password sudah sama.', 'warning'],
                                3: ['Sorry!', 'Username Anda tidak ada.', 'error']
                            };
                            const message = messages[response] || ['Sorry!', 'Gagal sinkron password!', 'error'];
                            Swal.fire({
                                    title: message[0],
                                    text: message[1],
                                    icon: message[2],
                                    confirmButtonColor: '#078889'
                                })
                                .then(function() {
                                    if (String(response) === '1') location.reload();
                                });
                        })
                        .fail(function() {
                            Swal.fire({
                                title: 'Error',
                                text: 'Error sinkron password!',
                                icon: 'error'
                            });
                        });
                });
        }
    </script>
@endpush