@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>OTP Settings</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item">Settings</li>
                <li class="breadcrumb-item active">OTP Settings</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-8">
                @if (session()->has('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle me-1"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if (session()->has('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-octagon me-1"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <!-- OTP Method Settings -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Metode Pengiriman OTP</h5>
                        
                        <form action="{{ route('otp-settings.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> 
                                Pilih metode pengiriman OTP untuk login dan registrasi customer/teknisi. Minimal satu metode harus aktif.
                            </div>

                            <!-- WhatsApp OTP -->
                            <div class="mb-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="otp_wa_enabled" 
                                           name="otp_wa_enabled" value="1" 
                                           {{ $setting->otp_wa_enabled ? 'checked' : '' }}>
                                    <label class="form-check-label" for="otp_wa_enabled">
                                        <i class="bi bi-whatsapp text-success"></i> <strong>WhatsApp OTP</strong>
                                    </label>
                                </div>
                                <small class="text-muted ms-4">Kirim kode OTP melalui WhatsApp</small>
                            </div>

                            <!-- Email OTP -->
                            <div class="mb-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="otp_email_enabled" 
                                           name="otp_email_enabled" value="1" 
                                           {{ $setting->otp_email_enabled ? 'checked' : '' }}>
                                    <label class="form-check-label" for="otp_email_enabled">
                                        <i class="bi bi-envelope text-primary"></i> <strong>Email OTP</strong>
                                    </label>
                                </div>
                                <small class="text-muted ms-4">Kirim kode OTP melalui Email</small>

                                <!-- Email Configuration (shown when email OTP is enabled) -->
                                <div id="email_config" class="mt-3 ms-4" style="display: {{ $setting->otp_email_enabled ? 'block' : 'none' }};">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="email_from" class="form-label">Email Pengirim <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" id="email_from" name="email_from" 
                                                   value="{{ old('email_from', $setting->email_from) }}" 
                                                   placeholder="jobdeskaulianet@gmail.com">
                                            <small class="text-muted">Email yang akan digunakan untuk mengirim OTP</small>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="email_from_name" class="form-label">Nama Pengirim</label>
                                            <input type="text" class="form-control" id="email_from_name" name="email_from_name" 
                                                   value="{{ old('email_from_name', $setting->email_from_name) }}" 
                                                   placeholder="JobDesk AuliaNet">
                                            <small class="text-muted">Nama yang tampil di email</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save"></i> Simpan Pengaturan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Test OTP Section -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Test Pengiriman OTP</h5>
                        
                        <form action="{{ route('otp-settings.test') }}" method="POST">
                            @csrf
                            
                            <div class="mb-3">
                                <label class="form-label">Metode Test</label>
                                <select class="form-select" name="test_method" id="test_method" required>
                                    <option value="">-- Pilih Metode --</option>
                                    @if($setting->otp_wa_enabled)
                                        <option value="whatsapp">WhatsApp</option>
                                    @endif
                                    @if($setting->otp_email_enabled)
                                        <option value="email">Email</option>
                                    @endif
                                </select>
                            </div>

                            <div id="test_phone_group" class="mb-3" style="display: none;">
                                <label for="test_phone" class="form-label">Nomor WhatsApp</label>
                                <input type="text" class="form-control" id="test_phone" name="test_phone" 
                                       placeholder="628123456789">
                                <small class="text-muted">Format: 628123456789 (tanpa + dan spasi)</small>
                            </div>

                            <div id="test_email_group" class="mb-3" style="display: none;">
                                <label for="test_email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="test_email" name="test_email" 
                                       placeholder="test@example.com">
                            </div>

                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-send"></i> Kirim Test OTP
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Info Card -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Informasi</h5>
                        
                        <div class="alert alert-warning">
                            <strong><i class="bi bi-exclamation-triangle"></i> Penting!</strong>
                            <ul class="mt-2 mb-0">
                                <li>Minimal satu metode OTP harus aktif</li>
                                <li>Pastikan konfigurasi email sudah benar di file .env</li>
                                <li>Test pengiriman OTP sebelum digunakan</li>
                            </ul>
                        </div>

                        <h6>Status Saat Ini:</h6>
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="bi bi-whatsapp {{ $setting->otp_wa_enabled ? 'text-success' : 'text-muted' }}"></i>
                                <strong>WhatsApp:</strong> 
                                <span class="badge {{ $setting->otp_wa_enabled ? 'bg-success' : 'bg-secondary' }}">
                                    {{ $setting->otp_wa_enabled ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </li>
                            <li class="mb-2">
                                <i class="bi bi-envelope {{ $setting->otp_email_enabled ? 'text-success' : 'text-muted' }}"></i>
                                <strong>Email:</strong> 
                                <span class="badge {{ $setting->otp_email_enabled ? 'bg-success' : 'bg-secondary' }}">
                                    {{ $setting->otp_email_enabled ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </li>
                        </ul>

                        @if($setting->otp_email_enabled && $setting->email_from)
                            <hr>
                            <h6>Email Configuration:</h6>
                            <p class="mb-1"><small><strong>From:</strong> {{ $setting->email_from }}</small></p>
                            <p class="mb-0"><small><strong>Name:</strong> {{ $setting->email_from_name }}</small></p>
                        @endif
                    </div>
                </div>

                <!-- Mail Configuration Guide -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Konfigurasi Email (.env)</h5>
                        
                        <h6>Untuk Windows (Local - Mailtrap):</h6>
                        <pre class="bg-light p-2"><code>MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_username
MAIL_PASSWORD=your_password
MAIL_ENCRYPTION=tls</code></pre>

                        <h6 class="mt-3">Untuk VPS Ubuntu (SMTP Real):</h6>
                        <pre class="bg-light p-2"><code>MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your@gmail.com
MAIL_PASSWORD=your_app_password
MAIL_ENCRYPTION=tls</code></pre>

                        <small class="text-muted">
                            <i class="bi bi-info-circle"></i> Gunakan Mailtrap untuk testing di local, dan SMTP provider untuk production.
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Toggle email configuration visibility and disable inputs
        document.getElementById('otp_email_enabled').addEventListener('change', function() {
            const emailConfig = document.getElementById('email_config');
            const emailFromInput = document.getElementById('email_from');
            const emailFromNameInput = document.getElementById('email_from_name');
            
            if (this.checked) {
                emailConfig.style.display = 'block';
                emailFromInput.disabled = false;
                emailFromNameInput.disabled = false;
            } else {
                emailConfig.style.display = 'none';
                emailFromInput.disabled = true;
                emailFromNameInput.disabled = true;
            }
        });

        // Set initial state on page load
        window.addEventListener('DOMContentLoaded', function() {
            const emailEnabled = document.getElementById('otp_email_enabled').checked;
            const emailFromInput = document.getElementById('email_from');
            const emailFromNameInput = document.getElementById('email_from_name');
            
            if (!emailEnabled) {
                emailFromInput.disabled = true;
                emailFromNameInput.disabled = true;
            }
        });

        // Toggle test input fields based on method
        document.getElementById('test_method').addEventListener('change', function() {
            const phoneGroup = document.getElementById('test_phone_group');
            const emailGroup = document.getElementById('test_email_group');
            const phoneInput = document.getElementById('test_phone');
            const emailInput = document.getElementById('test_email');
            
            if (this.value === 'whatsapp') {
                phoneGroup.style.display = 'block';
                emailGroup.style.display = 'none';
                phoneInput.required = true;
                phoneInput.disabled = false;
                emailInput.required = false;
                emailInput.disabled = true;
                emailInput.value = ''; // Clear email value
            } else if (this.value === 'email') {
                phoneGroup.style.display = 'none';
                emailGroup.style.display = 'block';
                phoneInput.required = false;
                phoneInput.disabled = true;
                phoneInput.value = ''; // Clear phone value
                emailInput.required = true;
                emailInput.disabled = false;
            } else {
                phoneGroup.style.display = 'none';
                emailGroup.style.display = 'none';
                phoneInput.disabled = true;
                emailInput.disabled = true;
            }
        });
    </script>
@endsection