@extends('master')
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        .horizontal-grid {
            display: grid;
            /* Memaksa 4 kolom sejajar horizontal */
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 15px;
            width: 100%;
        }

        .card {
            text-decoration: none;
            background: #ffffff;
            border: 1.5px solid #f0f0f0;
            border-radius: 20px; /* Segi empat rounded */
            padding: 20px 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            transition: transform 0.2s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .horizontal-grid .card:hover {
            cursor: pointer;
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            border-color: #3498db;
        }

        .icon {
            font-size: 32px;
        }

        .text {
            font-size: 14px;
            font-weight: 600;
            color: #444;
            line-height: 1.2;
        }
    </style>
@endsection
@section('content')

    <div class="mb-4"></div>
    <div class="container-fluid px-4  mb-4">
        <div class="row justify-content-between">
            <div class="col">
                <div style="font-size: 14px" class="breadcrumb-item">Aplikasi / <span>Pengaturan</span></div>
            </div>
        </div>
    </div>
    <div class="body grow bg-light">
        <div class="container-lg px-4 py-4">
            <div class="card border-0 bg-white shadow-sm">
                <div class="card-body p-0">
                    <div class="">
                        <div class="horizontal-grid">
                            <a href="{{route('application.app.about')}}" class="card">
                                <div class="icon">📱</div>
                                <div class="text">Tentang Aplikasi</div>
                            </a>
                            <a href="{{route('application.app.privacy')}}" class="card">
                                <div class="icon">🛡️</div>
                                <div class="text">Kebijakan Privasi</div>
                            </a>
                            <a href="{{route('application.app.surveillance')}}" class="card">
                                <div class="icon">📊</div>
                                <div class="text">Angka Hais</div>
                            </a>
                            <a href="{{route('application.app.panduan')}}" class="card">
                                <div class="icon">📖</div>
                                <div class="text">Panduan</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const tableUrl = "{{ route('article.query') }}"

    </script>
    <script src="{{asset('assets/custom/js/article.js')}}"></script>

@endsection