@extends('layouts.app')

@section('content')
    <style>
        .account-card {
            width: 100%;
            margin: auto;
            border-radius: 0.75rem;
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .account-card-header {
            position: relative;
            margin: -1.5rem 3rem 0;
            height: 80px;
            border-radius: 0.75rem 0.75rem 0 0;
            background: linear-gradient(to right, #080f50, #3A6EA5);
            color: #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .account-card-body {
            padding: 1.5rem;
        }

        .btn-bayar {
            border: none;
            border-radius: 0.3rem;
            padding: 0.75rem 1.5rem;
            font-size: 0.875rem;
            font-weight: bold;
            text-transform: uppercase;
            color: #fff;
            background: linear-gradient(to right, #080f50, #3A6EA5);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .card-title {
            font-size: 44px;
            text-align: center;
        }

        @media (max-width: 768px) {
            .card-title {
                font-size: 36px;
            }
        }

        @media (max-width: 576px) {
            .card-title {
                font-size: 28px;
            }
        }

        .btn-bayar:hover {
            background-color: #2980b9;
        }
    </style>

    <div class="container-lg my-4">
        <div class="row justify-content-center">
            <div class="col-md-10">
                {{-- <div class="card">
                    <div class="card-header">
                        <h5>
                            Maklumat Pengguna
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 col-12">
                                <p class="">Nama Pengguna :</p>
                            </div>
                            <div class="col">
                                <p class=""><b>{{ $user->name }}</b></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-12">
                                <p class="">No. Kad Pengenalan :</p>
                            </div>
                            <div class="col">
                                <p class=""><b>{{ $user->id_no }}</b></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-12">
                                <p class="">Alamat Emel :</p>
                            </div>
                            <div class="col">
                                <p class=""><b>{{ $user->email }}</b></p>
                            </div>
                        </div>
                    </div>
                </div><br><br> --}}
                <div class="py-2">
                    <div class="card account-card shadow">
                        <div class="account-card-header">
                            <h5 class="card-title text-center pt-2" style="font-size: 44px"> Menu Utama</h5>
                        </div>
                        <div class="account-card-body">
                            @if (session('status'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('status') }}
                                </div>
                            @endif
                            <div class="row">
                                <div class="col-md-4 p-3 p-md-2">
                                    <div class="card" style="border-radius: 30px">
                                        <div class="account-card-body text-center">
                                            <img src="{{ asset('/img/myaccount.png') }}" alt="Akaun Anda" class="img-fluid"
                                                style="max-width: 60%">
                                                <p class="small text-secondary"> Penerimaan bayaran akaun pinjaman SPWP</p>
                                            <a type="button" href="{{ route('myaccount') }}" class="btn btn-bayar"
                                                style="font-size: 12px">Akaun Anda</a>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-4 p-3 p-md-2">
                                    <div class="card" style="border-radius: 30px">
                                        <div class="account-card-body text-center">
                                            <img src="{{ asset('/img/billpayment.png') }}" alt="Akaun Anda"
                                                class="img-fluid" style="max-width: 60%">
                                                <p class="small text-secondary"> Penerimaan bayaran Bil & Lain-lain</p>
                                            <button type="submit" class="btn btn-bayar" id="comingSoonBil" style="font-size: 12px">Bil &
                                                lain-lain</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 p-3 p-md-2">
                                    <div class="card" style="border-radius: 30px">
                                        <div class="account-card-body text-center">
                                            <img src="{{ asset('/img/trxrecord.png') }}" alt="Akaun Anda" class="img-fluid"
                                                style="max-width: 60%">
                                                <p class="small text-secondary"> Semakan sejarah transaksi</p>
                                            <a type="button" href="{{ route('listTrx') }}" class="btn btn-bayar"
                                                style="font-size: 12px">Rekod Transaksi</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function bilAlert() {            
            alert("Fungsi ini akan tersedia pada masa akan datang");
        }

        document.getElementById("comingSoonBil").addEventListener("click", bilAlert);
    </script>
@endsection