@extends('layouts.app')

@section('page-title', 'Biometric Settings')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0 pb-0">
                <h4 class="card-title mb-0">Biometric Attendance Settings</h4>
            </div>
            <div class="card-body">
                @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                @endif

                <div class="row">
                    <!-- Module Status -->
                    <div class="col-md-6 mb-4">
                        <div class="card border">
                            <div class="card-body">
                                <h5 class="card-title">Module Status</h5>
                                <p class="mb-2">
                                    <strong>Status:</strong>
                                    @if($gym->attendance_enabled)
                                        <span class="badge bg-success">Enabled</span>
                                    @else
                                        <span class="badge bg-danger">Disabled</span>
                                    @endif
                                </p>
                                <p class="text-muted small mb-0">
                                    @if($gym->attendance_enabled)
                                        Biometric attendance is active. Your device can send attendance data.
                                    @else
                                        Biometric attendance is disabled. Enable it in gym settings to use this feature.
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Gym Information -->
                    <div class="col-md-6 mb-4">
                        <div class="card border">
                            <div class="card-body">
                                <h5 class="card-title">Gym Information</h5>
                                <p class="mb-1"><strong>Gym Name:</strong> {{ $gym->name }}</p>
                                <p class="mb-0"><strong>Gym ID:</strong> <code>{{ $gym->id }}</code></p>
                            </div>
                        </div>
                    </div>

                    <!-- API Endpoint -->
                    <div class="col-md-12 mb-4">
                        <div class="card border">
                            <div class="card-body">
                                <h5 class="card-title">API Endpoint</h5>
                                <p class="mb-2">Use this URL in your biometric device configuration:</p>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="apiEndpoint" value="{{ $apiEndpoint }}" readonly>
                                    <button class="btn btn-primary" type="button" onclick="copyToClipboard('apiEndpoint', 'endpointBtn')" id="endpointBtn">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- API Key -->
                    <div class="col-md-12 mb-4">
                        <div class="card border border-warning">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fas fa-key text-warning"></i> API Key
                                    <form action="{{ route('biometric.regenerate-key') }}" method="POST" class="d-inline float-end">
                                        @csrf
                                        <button type="submit" class="btn btn-warning btn-sm" onclick="return confirm('Are you sure? This will invalidate the current API key. You will need to update your biometric device with the new key.');">
                                            <i class="fas fa-sync-alt"></i> Regenerate Key
                                        </button>
                                    </form>
                                </h5>
                                <p class="text-muted mb-2">Use this API key to authenticate requests from your biometric device:</p>
                                <div class="input-group">
                                    <input type="text" class="form-control font-monospace" id="apiKey" value="{{ $gym->biometric_api_key }}" readonly>
                                    <button class="btn btn-primary" type="button" onclick="copyToClipboard('apiKey', 'keyBtn')" id="keyBtn">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <div class="alert alert-info mt-3 mb-0">
                                    <strong><i class="fas fa-info-circle"></i> How to use:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li>Include the API key in the <code>Authorization</code> header: <code>Bearer {{ $gym->biometric_api_key }}</code></li>
                                        <li>Or use the <code>X-API-Key</code> header: <code>{{ $gym->biometric_api_key }}</code></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Last Sync -->
                    <div class="col-md-6 mb-4">
                        <div class="card border">
                            <div class="card-body">
                                <h5 class="card-title">Last Sync</h5>
                                <p class="mb-0">
                                    <strong>Last Attendance Sync:</strong><br>
                                    @if($gym->biometric_last_sync)
                                        <span class="text-success">{{ $gym->biometric_last_sync->format('Y-m-d H:i:s') }}</span>
                                        <small class="text-muted d-block">({{ $gym->biometric_last_sync->diffForHumans() }})</small>
                                    @else
                                        <span class="text-muted">No sync yet</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- API Request Example -->
                    <div class="col-md-12 mb-4">
                        <div class="card border">
                            <div class="card-body">
                                <h5 class="card-title">API Request Examples</h5>
                                <p class="mb-2">Example requests from your biometric device:</p>
                                
                                <h6 class="mt-3">Check-In Request:</h6>
                                <pre class="bg-light p-3 rounded"><code>POST {{ $apiEndpoint }}
Headers:
  Authorization: Bearer {{ $gym->biometric_api_key }}
  Content-Type: application/json

Body (Option 1 - using 'type'):
{
  "member_id": 123,
  "timestamp": "2026-01-12 18:30:00",
  "type": "check_in"
}

Body (Option 2 - using 'punch'):
{
  "member_id": 123,
  "timestamp": "2026-01-12 18:30:00",
  "punch": 0
}</code></pre>

                                <h6 class="mt-3">Check-Out Request:</h6>
                                <pre class="bg-light p-3 rounded"><code>POST {{ $apiEndpoint }}
Headers:
  Authorization: Bearer {{ $gym->biometric_api_key }}
  Content-Type: application/json

Body (Option 1 - using 'type'):
{
  "member_id": 123,
  "timestamp": "2026-01-12 20:30:00",
  "type": "check_out"
}

Body (Option 2 - using 'punch'):
{
  "member_id": 123,
  "timestamp": "2026-01-12 20:30:00",
  "punch": 1
}</code></pre>

                                <div class="alert alert-info mt-3 mb-0">
                                    <strong><i class="fas fa-info-circle"></i> Field Notes:</strong>
                                    <ul class="mb-0 mt-2">
                                        <li><code>member_id</code>: Required - The ID of the member</li>
                                        <li><code>timestamp</code>: Required - Date and time in format "YYYY-MM-DD HH:MM:SS"</li>
                                        <li><code>type</code>: Optional - Use "check_in" or "check_out" (takes precedence over 'punch')</li>
                                        <li><code>punch</code>: Optional - Use 0 for check-in, 1 for check-out</li>
                                        <li>If neither 'type' nor 'punch' is provided, it defaults to check-in</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function copyToClipboard(inputId, buttonId) {
        const input = document.getElementById(inputId);
        const button = document.getElementById(buttonId);
        
        input.select();
        input.setSelectionRange(0, 99999); // For mobile devices
        
        try {
            document.execCommand('copy');
            const originalText = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check"></i> Copied!';
            button.classList.remove('btn-primary');
            button.classList.add('btn-success');
            
            setTimeout(() => {
                button.innerHTML = originalText;
                button.classList.remove('btn-success');
                button.classList.add('btn-primary');
            }, 2000);
        } catch (err) {
            alert('Failed to copy. Please select and copy manually.');
        }
    }
</script>
@endpush