@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;
        }

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

    <div class="container-lg my-4">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <h6 class="text-secondary">Sila pilih akaun pinjaman untuk membuat pembayaran</h6>
                <hr class="mb-4" style="width: 90%; height: 2px; border-radius: 50%; background-color: #080f50; border: none; margin: auto;">
                {{-- <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> --}}
                @if (count($account) == 0 && count($co_account) == 0)
                <h2 class="text-center"><br><br><br>Tiada Akaun Pinjaman atau Akaun Penama Ke-2 dijumpai</h2>
                @endif

                @if(count($account) > 0)
                <h4 class="text-center">Akaun Pinjaman</h4>
                @foreach ($account as $acc)
                    <div class="py-4">
                        <div class="card account-card shadow">
                            <div class="account-card-header mx-4 mx-md-5">
                                <h5 class="card-title text-center pt-3" style="font-size: 2em">{{ $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 mb-2">  
                                    <div class="col-6">
                                        <h2 class="text-center">
                                            <a class="text-secondary" style="font-size: 0.5em">Fasa</a><br>
                                            <a class="text" style="font-size: 1em">{{ $acc->fasa_detail }}</a>
                                        </h2>
                                    </div>
                                    <div class="col-6 pr-0 pr-md-4">
                                        <h2 class="text-center">
                                            <a class="text-secondary" style="font-size: 0.5em">Tempoh Pinjaman</a><br>
                                            <a class="text" style="font-size: 1em">{{ $acc->tenure_month }} bulan</a>
                                        </h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 col-12">
                                        <div class="card m-md-0 m-2">
                                            <div class="account-card-body">
                                                <h5 class="card-title">Jumlah Pinjaman</h5>
                                                    <p class="card-text" style="font-size: 34px">RM
                                                        {{ number_format($acc->loans->total_loan_amt, 2) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <ul class="list-group m-md-0 m-2">
                                            <li class="list-group-item d-flex justify-content-between align-items-center pt-4">
                                                <h6>Baki Pinjaman</h6>
                                                <h6 class="text-right">RM {{ number_format($acc->loans->out_total_amt ?? 0, 2) }}</h6>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center pt-0">
                                                <h6>Jumlah Tunggakan</h6>
                                                <h6 class="text-right text-danger">RM {{ number_format($acc->pending->current_outstanding_amt ?? 0, 2) }}</h6>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-4">
                                            <div class="card m-md-0 m-2">
                                                <div class="account-card-body">
                                                    <h6 class="card-title">Ansuran Bulanan</h6>
                                                    <p class="card-text" style="font-size: 18px">RM
                                                        {{ number_format($acc->monthly_payment, 2) }}</p>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <div class="text-center text-md-right">
                                    <a href="{{ route('get-payment-amount', ['account_no' => $acc->account_no])}}" class="btn btn-bayar" style="font-size: 14px">Bayar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                @else
                {{-- <h2 class="text-center"><br><br><br>Tiada akaun dijumpai</h2> --}}
                @endif
                <hr class="my-4" style="width: 70%; height: 2px; border-radius: 50%; background-color: #080f50; border: none; margin: auto;">
                @if(count($co_account) > 0)
                    <h4 class="text-center text-secondary">Akaun Penama ke-2</h4>
                @foreach ($co_account as $co_acc)
                    <div class="py-4">
                        <div class="card account-card shadow">
                            <div class="account-card-header mx-4 mx-md-5">
                                <h5 class="card-title text-center pt-3" style="font-size: 2em">{{ $co_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 mx-2 mx-md-4">
                                    <div class="col-12 col-md-6"><b>Pemilik Akaun :</b> {{ $co_acc->user_name }}</div>
                                    <div class="col-12 col-md-6"><b>No. Pengenalan Pemilik :</b> {{ $co_acc->user_id }}</div>
                                </div> --}}
                                <div class="row mb-2">  
                                    <div class="col-6">
                                        <h2 class="text-center">
                                            <a class="text-secondary" style="font-size: 0.5em">Fasa</a><br>
                                            <a class="text" style="font-size: 1em">{{ $co_acc->fasa_detail }}</a>
                                        </h2>
                                    </div>
                                    <div class="col-6 pr-0 pr-md-4">
                                        <h2 class="text-center">
                                            <a class="text-secondary" style="font-size: 0.5em">Tempoh Pinjaman</a><br>
                                            <a class="text" style="font-size: 1em">{{ $co_acc->tenure_month }} bulan</a>
                                        </h2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 col-12">
                                        <div class="card m-md-0 m-2">
                                            <div class="account-card-body">
                                                <h5 class="card-title">Jumlah Pinjaman</h5>
                                                {{-- <p class="card-text" style="font-size: 34px">RM
                                                    {{ number_format($co_acc->financing_amt, 2) }}</p> --}}
                                                    <p class="card-text" style="font-size: 34px">RM
                                                        {{ number_format($co_acc->loans->total_loan_amt, 2) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <ul class="list-group m-md-0 m-2">
                                            <li class="list-group-item d-flex justify-content-between align-items-center pt-4">
                                                <h6>Baki Pinjaman</h6>
                                                <h6 class="text-right">RM {{ number_format($co_acc->loans->out_total_amt ?? 0, 2) }}</h6>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center pt-0">
                                                <h6>Jumlah Tunggakan</h6>
                                                <h6 class="text-right text-danger">RM {{ number_format($co_acc->pending->current_outstanding_amt ?? 0, 2) }}</h6>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card m-md-0 m-2">
                                            <div class="account-card-body">
                                                <h6 class="card-title">Ansuran Bulanan</h6>
                                                <p class="card-text" style="font-size: 20px">RM
                                                    {{ number_format($co_acc->monthly_payment, 2) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center text-md-right">
                                    <a href="{{ route('get-payment-amount', ['account_no' => $co_acc->account_no])}}" class="btn btn-bayar" style="font-size: 14px">Bayar</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                @else
                @endif
                <a href="{{ url('/') }}" class="btn btn-primary mr-2">
                <i class="fa fa-home"></i> Utama
                </a>
                <a href="{{ url('/home')}}" class="btn btn-warning">&#x25C0; &nbsp;Kembali</a>
            </div>
        </div>
    </div>
@endsection