@extends('layouts.app')

@section('content')
    <div class="container mt-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>Locked Accounts</h4>
                <button class="btn btn-primary" wire:click="activateAccount" wire:loading.attr="disabled" wire:target="activateAccount">
                    @if($loading) <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Activating... @else Activate Account @endif
                </button>
            </div>
            <div class="card-body">
                @if($userInfo)
                    <div class="p-4">
                        <div class="mb-4">
                            <h5 class="fw-bold fs-5">Card Details</h5>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Card Number:</div>
                                <div class="col-9">{{ $userInfo['card_number'] ?? 'N/A' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">First Name:</div>
                                <div class="col-9">{{ $userInfo['firstname'] ?? 'N/A' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Last Name:</div>
                                <div class="col-9">{{ $userInfo['lastname'] ?? 'N/A' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Birthday:</div>
                                <div class="col-9">{{ $userInfo['birthdate'] ? \Carbon\Carbon::parse($userInfo['birthdate'])->format('d-M-Y') : 'N/A' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Card Type:</div>
                                <div class="col-9">{{ $userInfo['card_type'] ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div>
                            <h5 class="fw-bold fs-5">Account Details</h5>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Account Status:</div>
                                <div class="col-9">{{ $userInfo['is_locked'] == 1 ? 'Locked' : 'Active' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Lock Account Description:</div>
                                <div class="col-9">{{ $userInfo['reason'] ?? 'N/A' }}</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-3 fw-semibold">Locked Date:</div>
                                <div class="col-9">{{ $userInfo['lock_dt'] ? \Carbon\Carbon::parse($userInfo['lock_dt'])->format('d-M-Y') : 'N/A' }}</div>
                            </div>
                        </div>
                    </div>
                @else
                    <p>Loading account details...</p>
                @endif
            </div>
        </div>
    </div>
@endsection