@extends('layouts.app')

@section('content')
<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">
                <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="card account-card shadow">
                    <div class="account-card-header">
                        <h5 class="card-title text-center pt-3" style="font-size: 2em">{{ $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 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">{{ $account->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">{{ $account->tenure_month }} bulan</a>
                                </h2>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <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($account->financing_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($account->sld_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($pending_term->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($account->monthly_payment, 2) }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header text-center text-white font-weight-bold" style="background: linear-gradient(to right, #080f50, #3A6EA5);" data-toggle="collapse" data-target="#collapseDetails">
                                        Butiran Pembayar    <small> (klik untuk lihat)</small>
                                    </div>
                                    <div id="collapseDetails" class="collapse">
                                        <ul class="list-group">
                                            <li class="list-group-item">No. 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. Akaun Dibayar: <b>{{ $account->account_no }}</b></li>
                                            <li class="list-group-item">Fasa : <b>{{ $account->fasa_detail }}</b></li>
                                        </ul>
                                    </div>
                                </div>                                
                            </div>
                        </div>

                        <form action="{{ route('payment-submit') }}" method="post">
                            @csrf
                            <br>
                            @include('layouts.messages')
                            <input type="hidden" name="payer_id" value="{{ $user->id_no }}">
                            <input type="hidden" name="payer_name" value="{{ $user->name }}">
                            <input type="hidden" name="payer_hp" value="{{ $user->mobile_no }}">
                            <input type="hidden" name="payer_email" value="{{ $user->email }}">

                            <div class="row mt-2">
                                <div class="col">
                                    <div class="card px-5 py-2">
                                        <div class="row">
                                            <div class="col-12 col-md-4 form-label pt-2">
                                                <p style="font-size: 1.2em;">Amaun (RM)</p>
                                            </div>
                                            <div class="col">
                                                @if($override_flag)
                                                 <input type="number" step="0.01" class="form-control" name="payment_amount" id="payment_amount" value="1"
                                                data-parsley-min="" data-parsley-trigger="keyup change"
                                                required>
                                                @else
                                                 <input type="number" step="0.01" class="form-control" name="payment_amount" id="payment_amount" value="{{ $account->monthly_payment }}"
                                                data-parsley-min="{{ $account->monthly_payment }}" data-parsley-trigger="keyup change"
                                                required>
                                                @endif
                                                {{-- <input class="form-control form-control-lg" type="number" name="payment_amount" placeholder="{{ $account->monthly_payment }}" value="{{ $account->monthly_payment }}" min="{{ $account->monthly_payment }}" required> --}}           
                                            </div>
                                        </div>
                                        <div class="row pt-3">
                                            <div class="col-12 col-md-4 ">
                                                <p style="font-size: 20px;">Cara Pembayaran</p>
                                            </div>
                                            <div class="col">
                                                <input type="text"  class="form-control" name="payment_method" id="payment_method" value="FPX"
                                                readonly required>
                                                {{-- <select class="form-select form-select-lg mb-3" aria-label="Large select example" name="payment_method" required>
                                                    <option selected>Sila pilih cara pembayaran</option>
                                                    <option value="FPX">FPX</option>
                                                </select> --}}
                                            </div>
                                        </div>
                                        <div class="text-center text-md-right">
                                            <input type="hidden" name="account_no" value="{{ $account->account_no }}">
                                            <button type="submit" class="btn btn-bayar">Bayar Sekarang</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
             <a href="{{ url('/') }}" class="btn btn-primary mr-2">
                <i class="fa fa-home"></i> Utama
            </a>
            <a href="{{ url()->previous() }}" class="btn btn-warning">&#x25C0; &nbsp;Kembali</a>
        </div>
    </div>
</div>
@endsection