@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, #3498db, #2980b9);
            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-color: #3498db;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .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">
                    <h5 class="card-header">Maklumat Pengguna</h5>
                    <div class="card-body">
                        <p class="card-title">Nama Pengguna : <b>{{ $user->name }}</b></p>
                        <p class="card-title">No. Kad Pengenalan : <b>{{ $user->id_no }}</b></p>
                        <p class="card-title">Alamat Emel : <b>{{ $user->email }}</b></p>
                    </div>
                </div><br><br> --}}
                
                <h3 class="text-center">Akaun Pinjaman</h3>
                @foreach ($account as $acc)
                    <div class="py-4">
                        <div class="card account-card shadow">
                            <div class="account-card-header">
                                <h5 class="card-title text-center pt-2" style="font-size: 44px"> {{ $acc->account_no }}</h5>
                            </div>
                            <div class="account-card-body">
                                @if (session('status'))
                                    <div class="alert alert-success" role="alert">
                                        {{ session('status') }}
                                    </div>
                                @endif
                                <div class="row mt-2 mb-4">
                                    <div class="col-6">
                                        <h2 class="text-center">
                                            <a class="text-secondary" style="font-size: 24px">Tempoh Semasa</a><br>
                                            <a class="text" style="font-size: 34px">{{ $acc->tenure }} bulan</a>
                                        </h2>
                                    </div>
                                    <div class="col-6 pr-4">
                                        <h2 class="text-center">
                                            <a class="text-secondary" style="font-size: 24px">Tempoh Pinjaman</a><br>
                                            <a class="text" style="font-size: 34px">{{ $acc->tenure_month }} bulan</a>
                                        </h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="account-card-body">
                                                <h5 class="card-title">Jumlah Pinjaman</h5>
                                                <p class="card-text" style="font-size: 40px">{{ $acc->total_loan_amt }}</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="account-card-body">
                                                <h5 class="card-title">Baki Perlu Dibayar</h5>
                                                <p class="card-text" style="font-size: 40px">{{ $acc->out_total_amt }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="account-card-body">
                                                <h5 class="card-title">Ansuran Bulanan</h5>
                                                <p class="card-text" style="font-size: 26px">{{ $acc->monthly_payment }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <form action="{{ route('get-payment-amount') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="payment_amount" value="1" required><br>
                                    <input type="hidden" name="account_no" value="{{ $acc->account_no }}"
                                        placeholder="{{ $acc->account_no }}"><br>
                                    <button type="submit" class="btn btn-bayar float-right"
                                        style="font-size: 18px">Bayar Sekarang</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection