@extends('dashlayouts.app')
@section('content')
<div>
    <nav>
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
        <li class="breadcrumb-item active">Card Activation</li>
        </ol>
    </nav>
    <div class="col md-6">
        <div class="card shadow-sm border-0 rounded">
            <div class="card-body">
                <h5 class="card-title">Card Activation</h5>
                <p class="text-muted" style="margin-bottom: 20px;">
                    Please activate your dependent(s)’ card at your earliest convenience to ensure they can access all available benefits without delay.
                </p>
                <div class="m-4 text-center">
                    <h4 class="text-muted">Card Activation Fees</h4>
                    <p class="fs-2 text-success"><strong>RM {{ $fees->amount }}</strong></p>
                </div>
                <div class="mb-4">
                    <h6 class="text-primary mb-3">Billing Information</h6>
                    <p class="text-muted text-justify">
                        Fill in the payment detail below and click 'Activate' to proceed with the payment process.
                    </p>
                </div>
                <div class="mb-4">
                    @include('errors')
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show col-md-8" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    <form action="{{ route('transaction.cardactpayment')}}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="BUYER_FULLNAME" class="form-label">Student Name as in MyKad / Passport</label>
                            <input type="text" class="form-control" id="BUYER_FULLNAME" name="BUYER_FULLNAME" value="{{ $user->name }}" required readonly>
                        </div>
                        <div class="mb-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="BUYER_EMAIL" class="form-label">Email Address</label>
                                    <input type="BUYER_EMAIL" class="form-control" id="BUYER_EMAIL" name="BUYER_EMAIL" value="{{ $user->email }}" required readonly>
                                </div>
                                <div class="col-md-6">
                                    <label for="BUYER_PHONE_MOBILE" class="form-label">Phone Number</label>
                                    <input type="text" class="form-control" id="BUYER_PHONE_MOBILE" name="BUYER_PHONE_MOBILE" value="{{ $user->mobile_no }}" required readonly>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="BUYER_BILLING_ADDRESS" class="form-label">Billing Address</label>
                            @if($user->add1 == 'NULL' || $user->add2 == 'NULL' || $user->city == 'NULL' || $user->postcode == 'NULL' || $user->state == 'NULL')
                                <p class="text-danger">Please update your address in the profile page.</p>
                                <a href="{{ route('user.profile') }}" class="btn btn-warning">Update Address</a>
                            @else
                                <input type="text" class="form-control" id="BUYER_BILLING_ADDRESS" name="BUYER_BILLING_ADDRESS" value="{{ $user->add1.', '.$user->add2.', '.$user->city.', '.$user->postcode.', '.$user->state }}" required readonly>
                            @endif
                        </div>
                        <div class="mb-3">
                            <label for="dependant" class="form-label">Dependant</label>
                            <select class="form-control" id="dependant" name="dependant" required>
                                <option value="" disabled selected>Select a dependant</option>
                                                            </select>
                        </div> 
                        <div class="mb-3">
                            <label for="PAYMENT_MODE" class="form-label">Payment Method</label>
                            <select class="form-select" id="PAYMENT_MODE" name="PAYMENT_MODE" required>
                                <option value="" disabled selected>Please select a payment method</option>
                                {{-- <option value="CC">Credit/Debit Card</option> --}}
                                <option value="FPX">FPX</option>
                            </select>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-4 py-2 mt-2 rounded-pill shadow-sm">
                                Activate
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection