@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">
                <h3 class="text-center">Maklumat Pembayaran</h3>
                <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"> {{ $account->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">{{ $account->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">{{ $account->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">{{ $account->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">{{ $account->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">{{ $account->monthly_payment }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-7">
                                    <div class="card">
                                        <div class="card-header text-center text-white font-weight-bold"
                                            style="background-color: #3498db;">Butiran Pembayaran</div>
                                        <ul class="list-group">
                                            <li class="list-group-item">Nama ID : <b>{{ $user->id_no }}</b></li>
                                            <li class="list-group-item">Nama Pembayar : <b>{{ $user->name }}</b></li>
                                            <li class="list-group-item">Alamat Emel : <b>{{ $user->email }}</b></li>
                                            <li class="list-group-item">No. Tel. Bimbit : <b>{{ $user->mobile_no }}</b>
                                            </li>
                                            <li class="list-group-item">No. Tel. Rumah : <b>{{ $user->phone_no }}</b></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <div class="card">
                                        <ul class="list-group">
                                            <li class="list-group-item text-center"><b>Butiran Akaun</b></li>
                                            <li class="list-group-item">No. Akaun : <b>{{ $account->account_no }}</b></li>
                                            <li class="list-group-item">Fasa : <b>{{ $account->fasa }}</b></li>
                                            <li class="list-group-item">Tempoh Ansuran : <b>{{ $account->tenure_month }}
                                                    Bulan</b></li>
                                            <li class="list-group-item">Baki Tempoh Ansuran : <b>{{ $account->tenure }}
                                                    Bulan</b></li>
                                            <li class="list-group-item">Baki Perlu Dibayar:
                                                <b>RM{{ $account->out_total_amt }}</b>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <form action="{{ route('test-payment-submit') }}" method="post">
                                @csrf
                                <div class="row mt-2">
                                    <div class="col">
                                        <div class="card px-5 py-4">
                                            <div class="row pt-3">
                                                <div class="col-4">
                                                    Amaun (RM)
                                                </div>
                                                <div class="col-8">
                                                    <input class="form-control form-control-lg" type="number"
                                                        name="payment_amount" placeholder="{{ $account->monthly_payment }}" value="{{ $account->monthly_payment }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="row pt-3">
                                                <div class="col-4">
                                                    Cara Pembayaran
                                                </div>
                                                <div class="col-8">
                                                    <select class="form-select form-select-lg mb-3"
                                                        aria-label="Large select example">
                                                        <option selected>Sila pilih cara pembayaran</option>
                                                        <option value="1">FPX</option>
                                                        <option value="2">CC</option>
                                                        <option value="3">Pinjam Seratus</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="account_no" value="{{ $account->account_no }}"
                                    placeholder="{{ $account->account_no }}"><br>
                                <button type="submit" class="btn btn-bayar float-right" style="font-size: 18px">Bayar
                                    Sekarang</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection