@extends('admin.layouts.app')

@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card b-radius--10">
                <div class="card-header">
                    <h5 class="card-title">@lang('OTP Codes for') {{ $user->fullname }} ({{ $user->username }})</h5>
                    
                    <button class="btn btn--primary float-end generate-otp-btn" data-bs-toggle="modal" data-bs-target="#generateOtpModal">
                        <i class="las la-plus"></i> @lang('Generate New OTP')
                    </button>
                </div>
                
                <div class="card-body p-0">
                    <!-- Active OTP Display -->
                    <div class="active-otp-section p-3 bg--light">
                        <h6>@lang('Active OTP')</h6>
                        <div id="activeOtpDisplay">
                            <button class="btn btn--info btn-sm view-active-otp" data-user-id="{{ $user->id }}">
                                <i class="las la-eye"></i> @lang('View Active OTP')
                            </button>
                            <div class="active-otp-details mt-2 d-none">
                                <strong>@lang('Code:')</strong> <span class="otp-code text--primary"></span><br>
                                <strong>@lang('Expires:')</strong> <span class="otp-expires"></span><br>
                                <strong>@lang('Purpose:')</strong> <span class="otp-purpose"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- OTP History Table -->
                    <div class="table-responsive--md table-responsive">
                        <table class="table--light style--two table">
                            <thead>
                                <tr>
                                    <th>@lang('S.N.')</th>
                                    <th>@lang('OTP Code')</th>
                                    <th>@lang('Send Via')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Purpose')</th>
                                    <th>@lang('Created At')</th>
                                    <th>@lang('Used At')</th>
                                    <th>@lang('Expired At')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($otps as $otp)
                                    <tr>
                                        <td>{{ $otps->firstItem() + $loop->index }}</td>
                                        <td>
                                            <span class="{{ $otp->used_at || $otp->expired_at < now() ? '' : 'text--primary fw-bold' }}">
                                                {{ $otp->otp }}
                                            </span>
                                        </td>
                                        <td>{{ ucfirst($otp->send_via) }}</td>
                                        <td>
                                            @if($otp->used_at)
                                                <span class="badge badge--success">@lang('Used')</span>
                                            @elseif($otp->expired_at < now())
                                                <span class="badge badge--danger">@lang('Expired')</span>
                                            @else
                                                <span class="badge badge--warning">@lang('Active')</span>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $purpose = json_decode($otp->additional_data)->purpose ?? 'login_verification';
                                                $purposeLabels = [
                                                    'login_verification' => 'Login',
                                                    'wire_transfer' => 'Wire Transfer',
                                                    'own_bank_transfer' => 'Own Bank Transfer',
                                                    'other_bank_transfer' => 'Other Bank Transfer',
                                                    'withdraw' => 'Withdrawal',
                                                    'general' => 'General',
                                                ];
                                            @endphp
                                            <span class="badge badge--primary">{{ $purposeLabels[$purpose] ?? ucfirst(str_replace('_', ' ', $purpose)) }}</span>
                                        </td>
                                        <td>{{ showDateTime($otp->created_at) }}</td>
                                        <td>{{ $otp->used_at ? showDateTime($otp->used_at) : 'N/A' }}</td>
                                        <td>{{ showDateTime($otp->expired_at) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-muted text-center" colspan="100%">@lang('No OTP codes found')</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                
                @if($otps->hasPages())
                    <div class="card-footer py-4">
                        {{ paginateLinks($otps) }}
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Generate OTP Modal -->
    <div id="generateOtpModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Generate OTP for') {{ $user->fullname }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form action="{{ route('admin.users.otp.generate', $user->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label required">@lang('Purpose')</label>
                            <select name="purpose" class="form-control form--control" required>
                                <option value="" disabled selected>@lang('Select Purpose')</option>
                                <option value="login_verification">@lang('Login')</option>
                                <option value="wire_transfer">@lang('Wire Transfer')</option>
                                <option value="own_bank_transfer">@lang('Own Bank Transfer')</option>
                                <option value="other_bank_transfer">@lang('Other Bank Transfer')</option>
                                <option value="withdraw">@lang('Withdrawal')</option>
                                <option value="general">@lang('General')</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <small class="text--muted">
                                <i class="las la-info-circle"></i> 
                                @lang('OTP will be valid for 10 minutes and can only be used once.')
                            </small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--dark" data-bs-dismiss="modal">@lang('Close')</button>
                        <button type="submit" class="btn btn--primary">@lang('Generate OTP')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            // View Active OTP
            $('.view-active-otp').on('click', function() {
                var $display = $('.active-otp-details');
                
                $.ajax({
                    url: "{{ route('admin.users.otp.active', $user->id) }}",
                    method: 'GET',
                    success: function(response) {
                        if (response.success) {
                            $('.otp-code').text(response.otp);
                            $('.otp-expires').text(response.expires_at);
                            $('.otp-purpose').text(response.purpose);
                            $display.removeClass('d-none');
                        } else {
                            notify('error', response.message);
                        }
                    },
                    error: function() {
                        notify('error', 'Something went wrong');
                    }
                });
            });

            // Auto-hide active OTP details when modal opens
            $('#generateOtpModal').on('show.bs.modal', function() {
                $('.active-otp-details').addClass('d-none');
            });
        });
    </script>
@endpush