@extends('backEnd.layouts.master') 
@section('title','SMS & Email Gateway Settings')

@section('css')
<style>
    .card-box { background:#fff; padding:1.5rem; box-shadow:0 .75rem 1.5rem rgba(18,38,63,.03); margin-bottom:24px; border-radius:.25rem; border:1px solid #edf2f9; }
    .card-header-custom { background:#f8f9fa; padding:15px; border-bottom:1px solid #eee; margin:-1.5rem -1.5rem 1.5rem -1.5rem; border-radius:.25rem .25rem 0 0; display:flex; align-items:center; gap:10px; }
    .card-header-custom h4 { margin:0; font-size:15px; font-weight:700; color:#343a40; text-transform:uppercase; }
    .switch { position:relative; display:inline-block; width:50px; height:26px; margin-bottom:0; }
    .switch input { opacity:0; width:0; height:0; }
    .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; transition:.4s; border-radius:34px; }
    .slider:before { position:absolute; content:""; height:18px; width:18px; left:4px; bottom:4px; background-color:white; transition:.4s; border-radius:50%; }
    input:checked + .slider { background-color:#28a745; }
    input:checked + .slider:before { transform:translateX(24px); }
    .section-divider { border:0; border-top:2px dashed #e9ecef; margin:1.5rem 0; }
    .env-badge { font-size:10px; background:#e8f5e9; color:#2e7d32; padding:2px 7px; border-radius:10px; font-weight:600; vertical-align:middle; }
</style>
@endsection 

@section('content')
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between" style="padding:20px 0;">
                <h4 class="mb-0 font-size-18">SMS & Email Gateway Settings</h4>
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                    <li class="breadcrumb-item active">SMS / Email Settings</li>
                </ol>
            </div>
        </div>
    </div>

    <form action="{{ route('smsgeteway.update') }}" method="POST">
        @csrf
        <input type="hidden" name="id" value="{{ $sms->id }}">

        <div class="row">

            {{-- ═══════════════════════════════════════════════
                 LEFT COLUMN
            ═══════════════════════════════════════════════ --}}
            <div class="col-xl-7">

                {{-- ── MimSMS Settings ── --}}
                <div class="card-box">
                    <div class="card-header-custom">
                        <i class="fas fa-sms text-primary"></i>
                        <h4>MimSMS Configuration</h4>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">API Base URL</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-link"></i></span></div>
                            <input type="text" class="form-control" name="url"
                                value="{{ old('url', $sms->url ?? 'https://api.mimsms.com/api/SmsSending/SMS') }}" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">UserName (MimSMS Login Email)</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-user"></i></span></div>
                            <input type="email" class="form-control" name="username"
                                value="{{ old('username', $sms->username) }}" placeholder="info@example.com" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">API Key</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-key"></i></span></div>
                            <input type="text" class="form-control" name="api_key"
                                value="{{ old('api_key', $sms->api_key) }}" placeholder="Your MimSMS API Key" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">Sender ID / Name</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tag"></i></span></div>
                            <input type="text" class="form-control" name="serderid"
                                value="{{ old('serderid', $sms->serderid) }}" placeholder="e.g. MiM SMS" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="font-weight-bold">Admin Notification Numbers</label>
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-mobile-alt"></i></span></div>
                            <input type="text" class="form-control" name="admin_phone_list"
                                value="{{ old('admin_phone_list', env('ADMIN_PHONE_LIST', $sms->admin_phone_list ?? '')) }}"
                                placeholder="01711111111, 01822222222">
                        </div>
                        <small class="text-muted">Comma-separated numbers for new order alerts.</small>
                    </div>

                    <hr class="section-divider">
                    <h5 class="font-size-13 mb-3 text-uppercase text-muted"><i class="fas fa-bell mr-1"></i> Automation Triggers</h5>

                    <div class="row">
                        @php
                            $toggles = [
                                ['name'=>'status',      'label'=>'Gateway Status',       'sub'=>'Enable/Disable SMS'],
                                ['name'=>'order',       'label'=>'Order Confirmation',   'sub'=>'SMS on order placed'],
                                ['name'=>'forget_pass', 'label'=>'Forgot Password OTP',  'sub'=>'OTP for password reset'],
                                ['name'=>'password_g',  'label'=>'Registration OTP',     'sub'=>'OTP on account verify'],
                            ];
                        @endphp
                        @foreach($toggles as $t)
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between align-items-center border p-3 rounded bg-light">
                                <div>
                                    <h6 class="mb-1">{{ $t['label'] }}</h6>
                                    <small class="text-muted">{{ $t['sub'] }}</small>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" value="1" name="{{ $t['name'] }}"
                                        @if(($sms->{$t['name']} ?? 0) == 1) checked @endif>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                        @endforeach

                        {{-- Email OTP Fallback toggle --}}
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between align-items-center border p-3 rounded"
                                 style="border-color:#0d6efd !important; background:#f0f5ff;">
                                <div>
                                    <h6 class="mb-1 text-primary">Email OTP Fallback</h6>
                                    <small class="text-muted">Send OTP via Email when SMS is OFF</small>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" value="1" name="email_otp"
                                        @if(($sms->email_otp ?? 0) == 1) checked @endif>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        {{-- Checkout Verification toggle --}}
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between align-items-center border p-3 rounded"
                                 style="border-color:#fd7e14 !important; background:#fff8f0;">
                                <div>
                                    <h6 class="mb-1" style="color:#fd7e14;">Checkout Verification</h6>
                                    <small class="text-muted">Require phone/email verify at checkout</small>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" value="1" name="checkout_verify"
                                        @if(($sms->checkout_verify ?? 0) == 1) checked @endif>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Email (SMTP) Credentials ── --}}
                <div class="card-box">
                    <div class="card-header-custom" style="background:#f0f7ff;">
                        <i class="fas fa-envelope text-primary"></i>
                        <h4>Email (SMTP) Credentials <span class="env-badge">saved to .env</span></h4>
                    </div>
                    <p class="text-muted small mb-3">
                        These credentials are used when <strong>Email OTP Fallback</strong> is enabled.
                        All values are saved directly to the <code>.env</code> file — not the database.
                    </p>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">Mail Driver (Mailer)</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-paper-plane"></i></span></div>
                                <input type="text" class="form-control" name="MAIL_MAILER"
                                    value="{{ old('MAIL_MAILER', env('MAIL_MAILER', 'smtp')) }}" placeholder="smtp">
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">Mail Host</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-server"></i></span></div>
                                <input type="text" class="form-control" name="MAIL_HOST"
                                    value="{{ old('MAIL_HOST', env('MAIL_HOST')) }}" placeholder="mail.yourdomain.com">
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold">Mail Port</label>
                            <select class="form-control" name="MAIL_PORT">
                                @foreach(['465'=>'465 (SSL)', '587'=>'587 (TLS)', '2525'=>'2525'] as $port => $label)
                                    <option value="{{ $port }}" {{ env('MAIL_PORT') == $port ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold">Encryption</label>
                            <select class="form-control" name="MAIL_ENCRYPTION">
                                @foreach(['ssl'=>'SSL', 'tls'=>'TLS', 'null'=>'None'] as $enc => $label)
                                    <option value="{{ $enc }}" {{ env('MAIL_ENCRYPTION') == $enc ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="font-weight-bold">From Name</label>
                            <input type="text" class="form-control" name="MAIL_FROM_NAME"
                                value="{{ old('MAIL_FROM_NAME', env('MAIL_FROM_NAME')) }}" placeholder="Shop Name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">SMTP Username</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-user"></i></span></div>
                                <input type="text" class="form-control" name="MAIL_USERNAME"
                                    value="{{ old('MAIL_USERNAME', env('MAIL_USERNAME')) }}" placeholder="noreply@yourdomain.com">
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="font-weight-bold">SMTP Password</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-lock"></i></span></div>
                                <input type="password" class="form-control" name="MAIL_PASSWORD"
                                    value="{{ old('MAIL_PASSWORD', env('MAIL_PASSWORD')) }}" placeholder="••••••••"
                                    autocomplete="new-password">
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-outline-secondary btn-sm"
                                        onclick="var f=this.previousElementSibling;f.type=f.type==='password'?'text':'password'">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="font-weight-bold">From Email Address</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-at"></i></span></div>
                                <input type="email" class="form-control" name="MAIL_FROM_ADDRESS"
                                    value="{{ old('MAIL_FROM_ADDRESS', env('MAIL_FROM_ADDRESS')) }}" placeholder="noreply@yourdomain.com">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <button type="submit" class="btn btn-primary btn-lg px-5 shadow">
                        <i class="fas fa-save mr-1"></i> Save All Settings
                    </button>
                </div>

            </div>

            {{-- ═══════════════════════════════════════════════
                 RIGHT COLUMN — Guide
            ═══════════════════════════════════════════════ --}}
            <div class="col-xl-5">

                {{-- MimSMS Guide --}}
                <div class="card-box border-primary shadow-sm mb-4">
                    <div class="card-header-custom" style="background:#eff6ff;">
                        <i class="fas fa-book-reader text-primary"></i>
                        <h4>MimSMS Setup Guide</h4>
                    </div>
                    <div class="p-2">
                        <ul class="pl-3" style="font-size:14px;color:#555;line-height:1.9;">
                            <li>Register at <a href="https://www.mimsms.com/" target="_blank">mimsms.com</a></li>
                            <li>Go to <strong>Developer Options</strong> → generate <strong>API Key</strong></li>
                            <li>Use your login email as <strong>UserName</strong></li>
                            <li>Enter your approved <strong>Sender Name</strong></li>
                        </ul>
                        <div style="background:#2d2d2d;color:#ccc;padding:12px;border-radius:5px;font-family:monospace;font-size:12px;margin-top:8px;">
<pre style="margin:0;">{
  "UserName": "info@example.com",
  "Apikey": "XXXXXXXXXXXX",
  "MobileNumber": "88018XXXXXXXX",
  "SenderName": "MiM SMS",
  "TransactionType": "T",
  "Message": "Your OTP is 1234"
}</pre>
                        </div>
                    </div>
                </div>

                {{-- Email OTP Guide --}}
                <div class="card-box shadow-sm">
                    <div class="card-header-custom" style="background:#f0fff4;">
                        <i class="fas fa-envelope-open-text text-success"></i>
                        <h4>Email OTP Guide</h4>
                    </div>
                    <div class="p-2">
                        <ul class="pl-3" style="font-size:14px;color:#555;line-height:1.9;">
                            <li>Enable <strong>Email OTP Fallback</strong> toggle above</li>
                            <li>Fill in your SMTP credentials (host, port, user, pass)</li>
                            <li>All credentials save to <code>.env</code> — <strong>not the database</strong></li>
                            <li>When SMS is OFF, OTP is sent to the customer's email</li>
                            <li>Login page will show an <strong>email field</strong> alongside phone</li>
                        </ul>
                        <div class="alert alert-info border-0 mt-3 p-2" style="font-size:13px;">
                            <i class="fas fa-info-circle"></i>
                            <strong>Tip:</strong> For Gmail use host <code>smtp.gmail.com</code>, port <code>587</code>, encryption <code>tls</code>.
                            Use an <a href="https://myaccount.google.com/apppasswords" target="_blank">App Password</a> if 2FA is enabled.
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>

</div>
@endsection
